chrome/browser/resources/options/font_settings.js

   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