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