| // Copyright (c) 2012 The Chromium Authors. All rights reserved. |
| // Use of this source code is governed by a BSD-style license that can be |
| // found in the LICENSE file. |
| |
| cr.define('options', function() { |
| |
| var OptionsPage = options.OptionsPage; |
| var Page = cr.ui.pageManager.Page; |
| var PageManager = cr.ui.pageManager.PageManager; |
| |
| /** |
| * FontSettings class |
| * Encapsulated handling of the 'Fonts' page. |
| * @class |
| */ |
| function FontSettings() { |
| Page.call(this, 'fonts', |
| loadTimeData.getString('fontSettingsPageTabTitle'), |
| 'font-settings'); |
| } |
| |
| cr.addSingletonGetter(FontSettings); |
| |
| FontSettings.prototype = { |
| __proto__: Page.prototype, |
| |
| /** @override */ |
| initializePage: function() { |
| Page.prototype.initializePage.call(this); |
| |
| var standardFontRange = $('standard-font-size'); |
| standardFontRange.valueMap = [9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 20, |
| 22, 24, 26, 28, 30, 32, 34, 36, 40, 44, 48, 56, 64, 72]; |
| standardFontRange.addEventListener( |
| 'change', this.standardRangeChanged_.bind(this, standardFontRange)); |
| standardFontRange.addEventListener( |
| 'input', this.standardRangeChanged_.bind(this, standardFontRange)); |
| standardFontRange.customChangeHandler = |
| this.standardFontSizeChanged_.bind(standardFontRange); |
| |
| var minimumFontRange = $('minimum-font-size'); |
| minimumFontRange.valueMap = [6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, |
| 18, 20, 22, 24]; |
| minimumFontRange.addEventListener( |
| 'change', this.minimumRangeChanged_.bind(this, minimumFontRange)); |
| minimumFontRange.addEventListener( |
| 'input', this.minimumRangeChanged_.bind(this, minimumFontRange)); |
| minimumFontRange.customChangeHandler = |
| this.minimumFontSizeChanged_.bind(minimumFontRange); |
| |
| var placeholder = loadTimeData.getString('fontSettingsPlaceholder'); |
| var elements = [$('standard-font-family'), $('serif-font-family'), |
| $('sans-serif-font-family'), $('fixed-font-family')]; |
| elements.forEach(function(el) { |
| el.appendChild(new Option(placeholder)); |
| el.setDisabled('noFontsAvailable', true); |
| }); |
| |
| $('font-settings-confirm').onclick = function() { |
| PageManager.closeOverlay(); |
| }; |
| |
| $('advanced-font-settings-options').onclick = function() { |
| chrome.send('openAdvancedFontSettingsOptions'); |
| }; |
| }, |
| |
| /** @override */ |
| didShowPage: function() { |
| // The fonts list may be large so we only load it when this page is |
| // loaded for the first time. This makes opening the options window |
| // faster and consume less memory if the user never opens the fonts |
| // dialog. |
| if (!this.hasShown) { |
| chrome.send('fetchFontsData'); |
| this.hasShown = true; |
| } |
| }, |
| |
| /** |
| * Handler that is called when the user changes the position of the standard |
| * font size slider. This allows the UI to show a preview of the change |
| * before the slider has been released and the associated prefs updated. |
| * @param {Element} el The slider input element. |
| * @param {Event} event Change event. |
| * @private |
| */ |
| standardRangeChanged_: function(el, event) { |
| var size = el.mapPositionToPref(el.value); |
| var fontSampleEl = $('standard-font-sample'); |
| this.setUpFontSample_(fontSampleEl, size, fontSampleEl.style.fontFamily, |
| true); |
| |
| fontSampleEl = $('serif-font-sample'); |
| this.setUpFontSample_(fontSampleEl, size, fontSampleEl.style.fontFamily, |
| true); |
| |
| fontSampleEl = $('sans-serif-font-sample'); |
| this.setUpFontSample_(fontSampleEl, size, fontSampleEl.style.fontFamily, |
| true); |
| |
| fontSampleEl = $('fixed-font-sample'); |
| this.setUpFontSample_(fontSampleEl, |
| size - OptionsPage.SIZE_DIFFERENCE_FIXED_STANDARD, |
| fontSampleEl.style.fontFamily, false); |
| }, |
| |
| /** |
| * Sets the 'default_fixed_font_size' preference when the user changes the |
| * standard font size. |
| * @param {Event} event Change event. |
| * @private |
| */ |
| standardFontSizeChanged_: function(event) { |
| var size = this.mapPositionToPref(this.value); |
| Preferences.setIntegerPref( |
| 'webkit.webprefs.default_fixed_font_size', |
| size - OptionsPage.SIZE_DIFFERENCE_FIXED_STANDARD, true); |
| return false; |
| }, |
| |
| /** |
| * Handler that is called when the user changes the position of the minimum |
| * font size slider. This allows the UI to show a preview of the change |
| * before the slider has been released and the associated prefs updated. |
| * @param {Element} el The slider input element. |
| * @param {Event} event Change event. |
| * @private |
| */ |
| minimumRangeChanged_: function(el, event) { |
| var size = el.mapPositionToPref(el.value); |
| var fontSampleEl = $('minimum-font-sample'); |
| this.setUpFontSample_(fontSampleEl, size, fontSampleEl.style.fontFamily, |
| true); |
| }, |
| |
| /** |
| * Sets the 'minimum_logical_font_size' preference when the user changes the |
| * minimum font size. |
| * @param {Event} event Change event. |
| * @private |
| */ |
| minimumFontSizeChanged_: function(event) { |
| var size = this.mapPositionToPref(this.value); |
| Preferences.setIntegerPref( |
| 'webkit.webprefs.minimum_logical_font_size', size, true); |
| return false; |
| }, |
| |
| /** |
| * Sets the text, font size and font family of the sample text. |
| * @param {Element} el The div containing the sample text. |
| * @param {number} size The font size of the sample text. |
| * @param {string} font The font family of the sample text. |
| * @param {boolean} showSize True if the font size should appear in the |
| * sample. |
| * @private |
| */ |
| setUpFontSample_: function(el, size, font, showSize) { |
| var prefix = showSize ? (size + ': ') : ''; |
| el.textContent = prefix + |
| loadTimeData.getString('fontSettingsLoremIpsum'); |
| el.style.fontSize = size + 'px'; |
| if (font) |
| el.style.fontFamily = font; |
| }, |
| |
| /** |
| * Populates a select list and selects the specified item. |
| * @param {Element} element The select element to populate. |
| * @param {Array} items The array of items from which to populate. |
| * @param {string} selectedValue The selected item. |
| * @private |
| */ |
| populateSelect_: function(element, items, selectedValue) { |
| // Remove any existing content. |
| element.textContent = ''; |
| |
| // Insert new child nodes into select element. |
| for (var i = 0; i < items.length; i++) { |
| var value = items[i][0]; |
| var text = items[i][1]; |
| var dir = items[i][2]; |
| if (text) { |
| var selected = value == selectedValue; |
| var option = new Option(text, value, false, selected); |
| option.dir = dir; |
| element.appendChild(option); |
| } else { |
| element.appendChild(document.createElement('hr')); |
| } |
| } |
| |
| element.setDisabled('noFontsAvailable', false); |
| } |
| }; |
| |
| // Chrome callbacks |
| FontSettings.setFontsData = function(fonts, selectedValues) { |
| FontSettings.getInstance().populateSelect_($('standard-font-family'), fonts, |
| selectedValues[0]); |
| FontSettings.getInstance().populateSelect_($('serif-font-family'), fonts, |
| selectedValues[1]); |
| FontSettings.getInstance().populateSelect_($('sans-serif-font-family'), |
| fonts, selectedValues[2]); |
| FontSettings.getInstance().populateSelect_($('fixed-font-family'), fonts, |
| selectedValues[3]); |
| }; |
| |
| FontSettings.setUpStandardFontSample = function(font, size) { |
| FontSettings.getInstance().setUpFontSample_($('standard-font-sample'), size, |
| font, true); |
| }; |
| |
| FontSettings.setUpSerifFontSample = function(font, size) { |
| FontSettings.getInstance().setUpFontSample_($('serif-font-sample'), size, |
| font, true); |
| }; |
| |
| FontSettings.setUpSansSerifFontSample = function(font, size) { |
| FontSettings.getInstance().setUpFontSample_($('sans-serif-font-sample'), |
| size, font, true); |
| }; |
| |
| FontSettings.setUpFixedFontSample = function(font, size) { |
| FontSettings.getInstance().setUpFontSample_($('fixed-font-sample'), |
| size, font, false); |
| }; |
| |
| FontSettings.setUpMinimumFontSample = function(size) { |
| // If size is less than 6, represent it as six in the sample to account |
| // for the minimum logical font size. |
| if (size < 6) |
| size = 6; |
| FontSettings.getInstance().setUpFontSample_($('minimum-font-sample'), size, |
| null, true); |
| }; |
| |
| /** |
| * @param {boolean} available Whether the Advanced Font Settings Extension |
| * is installed and enabled. |
| */ |
| FontSettings.notifyAdvancedFontSettingsAvailability = function(available) { |
| $('advanced-font-settings-install').hidden = available; |
| $('advanced-font-settings-options').hidden = !available; |
| }; |
| |
| // Export |
| return { |
| FontSettings: FontSettings |
| }; |
| }); |