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 
      9   /**
     10    * FontSettings class
     11    * Encapsulated handling of the 'Fonts and Encoding' page.
     12    * @class
     13    */
     14   function FontSettings() {
     15     OptionsPage.call(this,
     16                      'fonts',
     17                      loadTimeData.getString('fontSettingsPageTabTitle'),
     18                      'font-settings');
     19   }
     20 
     21   cr.addSingletonGetter(FontSettings);
     22 
     23   FontSettings.prototype = {
     24     __proto__: OptionsPage.prototype,
     25 
     26     /**
     27      * Initialize the page.
     28      */
     29     initializePage: function() {
     30       OptionsPage.prototype.initializePage.call(this);
     31 
     32       var standardFontRange = $('standard-font-size');
     33       standardFontRange.valueMap = [9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 20,
     34           22, 24, 26, 28, 30, 32, 34, 36, 40, 44, 48, 56, 64, 72];
     35       standardFontRange.addEventListener(
     36           'change', this.standardRangeChanged_.bind(this, standardFontRange));
     37       standardFontRange.customChangeHandler =
     38           this.standardFontSizeChanged_.bind(standardFontRange);
     39 
     40       var minimumFontRange = $('minimum-font-size');
     41       minimumFontRange.valueMap = [6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17,
     42           18, 20, 22, 24];
     43       minimumFontRange.addEventListener(
     44           'change', this.minimumRangeChanged_.bind(this, minimumFontRange));
     45       minimumFontRange.customChangeHandler =
     46           this.minimumFontSizeChanged_.bind(minimumFontRange);
     47 
     48       var placeholder = loadTimeData.getString('fontSettingsPlaceholder');
     49       var elements = [$('standard-font-family'), $('serif-font-family'),
     50                       $('sans-serif-font-family'), $('fixed-font-family'),
     51                       $('font-encoding')];
     52       elements.forEach(function(el) {
     53         el.appendChild(new Option(placeholder));
     54         el.setDisabled('noFontsAvailable', true);
     55       });
     56 
     57       $('font-settings-confirm').onclick = function() {
     58         OptionsPage.closeOverlay();
     59       };
     60 
     61       $('advanced-font-settings-options').onclick = function() {
     62         chrome.send('openAdvancedFontSettingsOptions');
     63       };
     64     },
     65 
     66     /**
     67      * Called by the options page when this page has been shown.
     68      */
     69     didShowPage: function() {
     70       // The fonts list may be large so we only load it when this page is
     71       // loaded for the first time.  This makes opening the options window
     72       // faster and consume less memory if the user never opens the fonts
     73       // dialog.
     74       if (!this.hasShown) {
     75         chrome.send('fetchFontsData');
     76         this.hasShown = true;
     77       }
     78     },
     79 
     80     /**
     81      * 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
     83      * before the slider has been released and the associated prefs updated.
     84      * @param {Element} el The slider input element.
     85      * @param {Event} event Change event.
     86      * @private
     87      */
     88     standardRangeChanged_: function(el, event) {
     89       var size = el.mapPositionToPref(el.value);
     90       var fontSampleEl = $('standard-font-sample');
     91       this.setUpFontSample_(fontSampleEl, size, fontSampleEl.style.fontFamily,
     92                             true);
     93 
     94       fontSampleEl = $('serif-font-sample');
     95       this.setUpFontSample_(fontSampleEl, size, fontSampleEl.style.fontFamily,
     96                             true);
     97 
     98       fontSampleEl = $('sans-serif-font-sample');
     99       this.setUpFontSample_(fontSampleEl, size, fontSampleEl.style.fontFamily,
    100                             true);
    101 
    102       fontSampleEl = $('fixed-font-sample');
    103       this.setUpFontSample_(fontSampleEl,
    104                             size - OptionsPage.SIZE_DIFFERENCE_FIXED_STANDARD,
    105                             fontSampleEl.style.fontFamily, false);
    106     },
    107 
    108     /**
    109      * Sets the 'default_fixed_font_size' preference when the user changes the
    110      * standard font size.
    111      * @param {Event} event Change event.
    112      * @private
    113      */
    114     standardFontSizeChanged_: function(event) {
    115       var size = this.mapPositionToPref(this.value);
    116       Preferences.setIntegerPref(
    117         'webkit.webprefs.default_fixed_font_size',
    118         size - OptionsPage.SIZE_DIFFERENCE_FIXED_STANDARD, true);
    119       return false;
    120     },
    121 
    122     /**
    123      * 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
    125      * before the slider has been released and the associated prefs updated.
    126      * @param {Element} el The slider input element.
    127      * @param {Event} event Change event.
    128      * @private
    129      */
    130     minimumRangeChanged_: function(el, event) {
    131       var size = el.mapPositionToPref(el.value);
    132       var fontSampleEl = $('minimum-font-sample');
    133       this.setUpFontSample_(fontSampleEl, size, fontSampleEl.style.fontFamily,
    134                             true);
    135     },
    136 
    137     /**
    138      * Sets the 'minimum_logical_font_size' preference when the user changes the
    139      * minimum font size.
    140      * @param {Event} event Change event.
    141      * @private
    142      */
    143     minimumFontSizeChanged_: function(event) {
    144       var size = this.mapPositionToPref(this.value);
    145       Preferences.setIntegerPref(
    146         'webkit.webprefs.minimum_logical_font_size', size, true);
    147       return false;
    148     },
    149 
    150     /**
    151      * Sets the text, font size and font family of the sample text.
    152      * @param {Element} el The div containing the sample text.
    153      * @param {number} size The font size of the sample text.
    154      * @param {string} font The font family of the sample text.
    155      * @param {bool} showSize True if the font size should appear in the sample.
    156      * @private
    157      */
    158     setUpFontSample_: function(el, size, font, showSize) {
    159       var prefix = showSize ? (size + ': ') : '';
    160       el.textContent = prefix +
    161           loadTimeData.getString('fontSettingsLoremIpsum');
    162       el.style.fontSize = size + 'px';
    163       if (font)
    164         el.style.fontFamily = font;
    165     },
    166 
    167     /**
    168      * Populates a select list and selects the specified item.
    169      * @param {Element} element The select element to populate.
    170      * @param {Array} items The array of items from which to populate.
    171      * @param {string} selectedValue The selected item.
    172      * @private
    173      */
    174     populateSelect_: function(element, items, selectedValue) {
    175       // Remove any existing content.
    176       element.textContent = '';
    177 
    178       // Insert new child nodes into select element.
    179       var value, text, selected, option;
    180       for (var i = 0; i < items.length; i++) {
    181         value = items[i][0];
    182         text = items[i][1];
    183         dir = items[i][2];
    184         if (text) {
    185           selected = value == selectedValue;
    186           var option = new Option(text, value, false, selected);
    187           option.dir = dir;
    188           element.appendChild(option);
    189         } else {
    190           element.appendChild(document.createElement('hr'));
    191         }
    192       }
    193 
    194       element.setDisabled('noFontsAvailable', false);
    195     }
    196   };
    197 
    198   // Chrome callbacks
    199   FontSettings.setFontsData = function(fonts, encodings, selectedValues) {
    200     FontSettings.getInstance().populateSelect_($('standard-font-family'), fonts,
    201                                                selectedValues[0]);
    202     FontSettings.getInstance().populateSelect_($('serif-font-family'), fonts,
    203                                                selectedValues[1]);
    204     FontSettings.getInstance().populateSelect_($('sans-serif-font-family'),
    205                                                fonts, selectedValues[2]);
    206     FontSettings.getInstance().populateSelect_($('fixed-font-family'), fonts,
    207                                                selectedValues[3]);
    208     FontSettings.getInstance().populateSelect_($('font-encoding'), encodings,
    209                                                selectedValues[4]);
    210   };
    211 
    212   FontSettings.setUpStandardFontSample = function(font, size) {
    213     FontSettings.getInstance().setUpFontSample_($('standard-font-sample'), size,
    214                                                 font, true);
    215   };
    216 
    217   FontSettings.setUpSerifFontSample = function(font, size) {
    218     FontSettings.getInstance().setUpFontSample_($('serif-font-sample'), size,
    219                                                 font, true);
    220   };
    221 
    222   FontSettings.setUpSansSerifFontSample = function(font, size) {
    223     FontSettings.getInstance().setUpFontSample_($('sans-serif-font-sample'),
    224                                                 size, font, true);
    225   };
    226 
    227   FontSettings.setUpFixedFontSample = function(font, size) {
    228     FontSettings.getInstance().setUpFontSample_($('fixed-font-sample'),
    229                                                 size, font, false);
    230   };
    231 
    232   FontSettings.setUpMinimumFontSample = function(size) {
    233     // If size is less than 6, represent it as six in the sample to account
    234     // for the minimum logical font size.
    235     if (size < 6)
    236       size = 6;
    237     FontSettings.getInstance().setUpFontSample_($('minimum-font-sample'), size,
    238                                                 null, true);
    239   };
    240 
    241   /**
    242    * @param {boolean} available Whether the Advanced Font Settings Extension
    243    *     is installed and enabled.
    244    */
    245   FontSettings.notifyAdvancedFontSettingsAvailability = function(available) {
    246     $('advanced-font-settings-install').hidden = available;
    247     $('advanced-font-settings-options').hidden = !available;
    248   };
    249 
    250   // Export
    251   return {
    252     FontSettings: FontSettings
    253   };
    254 });
    255 
    256