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