1// Copyright (c) 2011 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
5cr.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                     templateData.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.continuous = false;
36      standardFontRange.notifyChange = this.standardRangeChanged_.bind(this);
37
38      var minimumFontRange = $('minimum-font-size');
39      minimumFontRange.valueMap = [6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17,
40          18, 20, 22, 24];
41      minimumFontRange.continuous = false;
42      minimumFontRange.notifyChange = this.minimumRangeChanged_.bind(this);
43      minimumFontRange.notifyPrefChange =
44          this.minimumFontSizeChanged_.bind(this);
45
46      var placeholder = localStrings.getString('fontSettingsPlaceholder');
47      $('standard-font-family').appendChild(new Option(placeholder));
48      $('serif-font-family').appendChild(new Option(placeholder));
49      $('sans-serif-font-family').appendChild(new Option(placeholder));
50      $('fixed-font-family').appendChild(new Option(placeholder));
51      $('font-encoding').appendChild(new Option(placeholder));
52    },
53
54    /**
55     * Called by the options page when this page has been shown.
56     */
57    didShowPage: function() {
58      // The fonts list may be large so we only load it when this page is
59      // loaded for the first time.  This makes opening the options window
60      // faster and consume less memory if the user never opens the fonts
61      // dialog.
62      if (!this.hasShown) {
63        chrome.send('fetchFontsData');
64        this.hasShown = true;
65      }
66    },
67
68    /**
69     * Called as the user changes the standard font size.  This allows for
70     * reflecting the change in the UI before the preference has been changed.
71     * @param {Element} el The slider input element.
72     * @param {number} value The mapped value currently set by the slider.
73     * @private
74     */
75    standardRangeChanged_: function(el, value) {
76      var fontSampleEl = $('standard-font-sample');
77      this.setUpFontSample_(fontSampleEl, value, fontSampleEl.style.fontFamily,
78                            true);
79
80      fontSampleEl = $('serif-font-sample');
81      this.setUpFontSample_(fontSampleEl, value, fontSampleEl.style.fontFamily,
82                            true);
83
84      fontSampleEl = $('sans-serif-font-sample');
85      this.setUpFontSample_(fontSampleEl, value, fontSampleEl.style.fontFamily,
86                            true);
87    },
88
89    /**
90     * Called as the user changes the miniumum font size.  This allows for
91     * reflecting the change in the UI before the preference has been changed.
92     * @param {Element} el The slider input element.
93     * @param {number} value The mapped value currently set by the slider.
94     * @private
95     */
96    minimumRangeChanged_: function(el, value) {
97      var fontSampleEl = $('minimum-font-sample');
98      this.setUpFontSample_(fontSampleEl, value, fontSampleEl.style.fontFamily,
99                            true);
100    },
101
102    /**
103     * Sets the 'minimum_logical_font_size' preference when the minimum font
104     * size has been changed by the user.
105     * @param {Element} el The slider input element.
106     * @param {number} value The mapped value that has been saved.
107     * @private
108     */
109    minimumFontSizeChanged_: function(el, value) {
110      Preferences.setIntegerPref('webkit.webprefs.minimum_logical_font_size',
111          value, '');
112    },
113
114    /**
115     * Sets the text, font size and font family of the sample text.
116     * @param {Element} el The div containing the sample text.
117     * @param {number} size The font size of the sample text.
118     * @param {string} font The font family of the sample text.
119     * @param {bool} showSize True if the font size should appear in the sample.
120     * @private
121     */
122    setUpFontSample_: function(el, size, font, showSize) {
123      var prefix = showSize ? (size + ': ') : '';
124      el.textContent = prefix +
125          localStrings.getString('fontSettingsLoremIpsum');
126      el.style.fontSize = size + 'px';
127      if (font)
128        el.style.fontFamily = font;
129    },
130
131    /**
132     * Populates a select list and selects the specified item.
133     * @param {Element} element The select element to populate.
134     * @param {Array} items The array of items from which to populate.
135     * @param {string} selectedValue The selected item.
136     * @private
137     */
138    populateSelect_: function(element, items, selectedValue) {
139      // Remove any existing content.
140      element.textContent = '';
141
142      // Insert new child nodes into select element.
143      var value, text, selected, option;
144      for (var i = 0; i < items.length; i++) {
145        value = items[i][0];
146        text = items[i][1];
147        if (text) {
148          selected = value == selectedValue;
149          element.appendChild(new Option(text, value, false, selected));
150        } else {
151          element.appendChild(document.createElement('hr'));
152        }
153      }
154
155      // Enable if not a managed pref.
156      if (!element.managed)
157        element.disabled = false;
158    }
159  };
160
161  // Chrome callbacks
162  FontSettings.setFontsData = function(fonts, encodings, selectedValues) {
163    FontSettings.getInstance().populateSelect_($('standard-font-family'), fonts,
164                                               selectedValues[0]);
165    FontSettings.getInstance().populateSelect_($('serif-font-family'), fonts,
166                                               selectedValues[1]);
167    FontSettings.getInstance().populateSelect_($('sans-serif-font-family'),
168                                               fonts, selectedValues[2]);
169    FontSettings.getInstance().populateSelect_($('fixed-font-family'), fonts,
170                                               selectedValues[3]);
171    FontSettings.getInstance().populateSelect_($('font-encoding'), encodings,
172                                               selectedValues[4]);
173  };
174
175  FontSettings.setUpStandardFontSample = function(font, size) {
176    FontSettings.getInstance().setUpFontSample_($('standard-font-sample'), size,
177                                                font, true);
178  };
179
180  FontSettings.setUpSerifFontSample = function(font, size) {
181    FontSettings.getInstance().setUpFontSample_($('serif-font-sample'), size,
182                                                font, true);
183  };
184
185  FontSettings.setUpSansSerifFontSample = function(font, size) {
186    FontSettings.getInstance().setUpFontSample_($('sans-serif-font-sample'),
187                                                size, font, true);
188  };
189
190  FontSettings.setUpFixedFontSample = function(font, size) {
191    FontSettings.getInstance().setUpFontSample_($('fixed-font-sample'),
192                                                size, font, false);
193  };
194
195  FontSettings.setUpMinimumFontSample = function(size) {
196    // If size is less than 6, represent it as six in the sample to account
197    // for the minimum logical font size.
198    if (size < 6)
199      size = 6;
200    FontSettings.getInstance().setUpFontSample_($('minimum-font-sample'), size,
201                                                null, true);
202  };
203
204  // Export
205  return {
206    FontSettings: FontSettings
207  };
208});
209
210