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