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