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