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