src/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   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