Home | History | Annotate | Download | only in options 
      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 
      5 cr.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