Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(122)

Side by Side Diff: chrome/browser/resources/options/font_settings.js

Issue 2939273002: DO NOT SUBMIT: what chrome/browser/resources/ could eventually look like with clang-format (Closed)
Patch Set: Created 3 years, 6 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
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
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
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 });
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698