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 |