1 // Copyright (c) 2011 The Chromium Authors. All rights reserved. 2 // Use of this source code is governed by a BSD-style license that can be 3 // found in the LICENSE file. 4 5 cr.define('options', function() { 6 7 var OptionsPage = options.OptionsPage; 8 9 /** 10 * FontSettings class 11 * Encapsulated handling of the 'Fonts and Encoding' page. 12 * @class 13 */ 14 function FontSettings() { 15 OptionsPage.call(this, 16 'fonts', 17 templateData.fontSettingsPageTabTitle, 18 'font-settings'); 19 } 20 21 cr.addSingletonGetter(FontSettings); 22 23 FontSettings.prototype = { 24 __proto__: OptionsPage.prototype, 25 26 /** 27 * Initialize the page. 28 */ 29 initializePage: function() { 30 OptionsPage.prototype.initializePage.call(this); 31 32 var standardFontRange = $('standard-font-size'); 33 standardFontRange.valueMap = [9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 20, 34 22, 24, 26, 28, 30, 32, 34, 36, 40, 44, 48, 56, 64, 72]; 35 standardFontRange.continuous = false; 36 standardFontRange.notifyChange = this.standardRangeChanged_.bind(this); 37 38 var minimumFontRange = $('minimum-font-size'); 39 minimumFontRange.valueMap = [6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 40 18, 20, 22, 24]; 41 minimumFontRange.continuous = false; 42 minimumFontRange.notifyChange = this.minimumRangeChanged_.bind(this); 43 minimumFontRange.notifyPrefChange = 44 this.minimumFontSizeChanged_.bind(this); 45 46 var placeholder = localStrings.getString('fontSettingsPlaceholder'); 47 $('standard-font-family').appendChild(new Option(placeholder)); 48 $('serif-font-family').appendChild(new Option(placeholder)); 49 $('sans-serif-font-family').appendChild(new Option(placeholder)); 50 $('fixed-font-family').appendChild(new Option(placeholder)); 51 $('font-encoding').appendChild(new Option(placeholder)); 52 }, 53 54 /** 55 * Called by the options page when this page has been shown. 56 */ 57 didShowPage: function() { 58 // The fonts list may be large so we only load it when this page is 59 // loaded for the first time. This makes opening the options window 60 // faster and consume less memory if the user never opens the fonts 61 // dialog. 62 if (!this.hasShown) { 63 chrome.send('fetchFontsData'); 64 this.hasShown = true; 65 } 66 }, 67 68 /** 69 * Called as the user changes the standard font size. This allows for 70 * reflecting the change in the UI before the preference has been changed. 71 * @param {Element} el The slider input element. 72 * @param {number} value The mapped value currently set by the slider. 73 * @private 74 */ 75 standardRangeChanged_: function(el, value) { 76 var fontSampleEl = $('standard-font-sample'); 77 this.setUpFontSample_(fontSampleEl, value, fontSampleEl.style.fontFamily, 78 true); 79 80 fontSampleEl = $('serif-font-sample'); 81 this.setUpFontSample_(fontSampleEl, value, fontSampleEl.style.fontFamily, 82 true); 83 84 fontSampleEl = $('sans-serif-font-sample'); 85 this.setUpFontSample_(fontSampleEl, value, fontSampleEl.style.fontFamily, 86 true); 87 }, 88 89 /** 90 * Called as the user changes the miniumum font size. This allows for 91 * reflecting the change in the UI before the preference has been changed. 92 * @param {Element} el The slider input element. 93 * @param {number} value The mapped value currently set by the slider. 94 * @private 95 */ 96 minimumRangeChanged_: function(el, value) { 97 var fontSampleEl = $('minimum-font-sample'); 98 this.setUpFontSample_(fontSampleEl, value, fontSampleEl.style.fontFamily, 99 true); 100 }, 101 102 /** 103 * Sets the 'minimum_logical_font_size' preference when the minimum font 104 * size has been changed by the user. 105 * @param {Element} el The slider input element. 106 * @param {number} value The mapped value that has been saved. 107 * @private 108 */ 109 minimumFontSizeChanged_: function(el, value) { 110 Preferences.setIntegerPref('webkit.webprefs.minimum_logical_font_size', 111 value, ''); 112 }, 113 114 /** 115 * Sets the text, font size and font family of the sample text. 116 * @param {Element} el The div containing the sample text. 117 * @param {number} size The font size of the sample text. 118 * @param {string} font The font family of the sample text. 119 * @param {bool} showSize True if the font size should appear in the sample. 120 * @private 121 */ 122 setUpFontSample_: function(el, size, font, showSize) { 123 var prefix = showSize ? (size + ': ') : ''; 124 el.textContent = prefix + 125 localStrings.getString('fontSettingsLoremIpsum'); 126 el.style.fontSize = size + 'px'; 127 if (font) 128 el.style.fontFamily = font; 129 }, 130 131 /** 132 * Populates a select list and selects the specified item. 133 * @param {Element} element The select element to populate. 134 * @param {Array} items The array of items from which to populate. 135 * @param {string} selectedValue The selected item. 136 * @private 137 */ 138 populateSelect_: function(element, items, selectedValue) { 139 // Remove any existing content. 140 element.textContent = ''; 141 142 // Insert new child nodes into select element. 143 var value, text, selected, option; 144 for (var i = 0; i < items.length; i++) { 145 value = items[i][0]; 146 text = items[i][1]; 147 if (text) { 148 selected = value == selectedValue; 149 element.appendChild(new Option(text, value, false, selected)); 150 } else { 151 element.appendChild(document.createElement('hr')); 152 } 153 } 154 155 // Enable if not a managed pref. 156 if (!element.managed) 157 element.disabled = false; 158 } 159 }; 160 161 // Chrome callbacks 162 FontSettings.setFontsData = function(fonts, encodings, selectedValues) { 163 FontSettings.getInstance().populateSelect_($('standard-font-family'), fonts, 164 selectedValues[0]); 165 FontSettings.getInstance().populateSelect_($('serif-font-family'), fonts, 166 selectedValues[1]); 167 FontSettings.getInstance().populateSelect_($('sans-serif-font-family'), 168 fonts, selectedValues[2]); 169 FontSettings.getInstance().populateSelect_($('fixed-font-family'), fonts, 170 selectedValues[3]); 171 FontSettings.getInstance().populateSelect_($('font-encoding'), encodings, 172 selectedValues[4]); 173 }; 174 175 FontSettings.setUpStandardFontSample = function(font, size) { 176 FontSettings.getInstance().setUpFontSample_($('standard-font-sample'), size, 177 font, true); 178 }; 179 180 FontSettings.setUpSerifFontSample = function(font, size) { 181 FontSettings.getInstance().setUpFontSample_($('serif-font-sample'), size, 182 font, true); 183 }; 184 185 FontSettings.setUpSansSerifFontSample = function(font, size) { 186 FontSettings.getInstance().setUpFontSample_($('sans-serif-font-sample'), 187 size, font, true); 188 }; 189 190 FontSettings.setUpFixedFontSample = function(font, size) { 191 FontSettings.getInstance().setUpFontSample_($('fixed-font-sample'), 192 size, font, false); 193 }; 194 195 FontSettings.setUpMinimumFontSample = function(size) { 196 // If size is less than 6, represent it as six in the sample to account 197 // for the minimum logical font size. 198 if (size < 6) 199 size = 6; 200 FontSettings.getInstance().setUpFontSample_($('minimum-font-sample'), size, 201 null, true); 202 }; 203 204 // Export 205 return { 206 FontSettings: FontSettings 207 }; 208 }); 209 210
