src/chrome/browser/resources/print_preview/settings/settings_section_select.js

   1 // Copyright 2014 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('print_preview', function() {
   6   'use strict';
   7
   8   /**
   9    * Base class for the printer option element visualizing the generic selection
  10    * based option.
  11    * @param {!print_preview.ticket_items.TicketItem} ticketItem Ticket item
  12    *     visualized by this component.
  13    * @constructor
  14    * @extends {print_preview.SettingsSection}
  15    */
  16   function SettingsSectionSelect(ticketItem) {
  17     print_preview.SettingsSection.call(this);
  18
  19     /** @private {!print_preview.ticket_items.TicketItem} */
  20     this.ticketItem_ = ticketItem;
  21   };
  22
  23   SettingsSectionSelect.prototype = {
  24     __proto__: print_preview.SettingsSection.prototype,
  25
  26     /** @override */
  27     isAvailable: function() {
  28       return this.ticketItem_.isCapabilityAvailable();
  29     },
  30
  31     /** @override */
  32     hasCollapsibleContent: function() {
  33       return this.isAvailable();
  34     },
  35
  36     /** @override */
  37     set isEnabled(isEnabled) {
  38       this.select_.disabled = !isEnabled;
  39     },
  40
  41     /** @override */
  42     enterDocument: function() {
  43       print_preview.SettingsSection.prototype.enterDocument.call(this);
  44       this.tracker.add(assert(this.select_),
  45                        'change',
  46                        this.onSelectChange_.bind(this));
  47       this.tracker.add(this.ticketItem_,
  48                        print_preview.ticket_items.TicketItem.EventType.CHANGE,
  49                        this.onTicketItemChange_.bind(this));
  50     },
  51
  52     /**
  53      * @return {HTMLSelectElement} Select element containing option items.
  54      * @private
  55      */
  56     get select_() {
  57       return this.getElement().querySelector('.settings-select');
  58     },
  59
  60     /**
  61      * Makes sure the content of the select element matches the capabilities of
  62      * the destination.
  63      * @private
  64      */
  65     updateSelect_: function() {
  66       var select = this.select_;
  67       if (!this.isAvailable()) {
  68         select.innerHTML = '';
  69         return;
  70       }
  71       // Should the select content be updated?
  72       var sameContent =
  73           this.ticketItem_.capability.option.length == select.length &&
  74           this.ticketItem_.capability.option.every(function(option, index) {
  75             return select.options[index].value == JSON.stringify(option);
  76           });
  77       var indexToSelect = select.selectedIndex;
  78       if (!sameContent) {
  79         select.innerHTML = '';
  80         this.ticketItem_.capability.option.forEach(function(option, index) {
  81           var selectOption = document.createElement('option');
  82           var displayName = option.custom_display_name;
  83           if (!displayName && option.custom_display_name_localized) {
  84             var getLocaleToCompare =
  85                 /** @type {function(string, boolean=): string} */
  86                 (function(locale, opt_languageOnly) {
  87               var code = opt_languageOnly ? locale.split('-')[0] : locale;
  88               return code.toLowerCase();
  89             });
  90             var getItemForLocale = function(items, locale, languageOnly) {
  91               locale = getLocaleToCompare(locale, languageOnly);
  92               for (var i = 0; i < items.length; i++) {
  93                 if (getLocaleToCompare(items[i].locale) == locale)
  94                   return items[i].value;
  95               }
  96               return '';
  97             };
  98             var items = option.custom_display_name_localized;
  99             displayName =
 100                 getItemForLocale(items, navigator.language, false) ||
 101                 getItemForLocale(items, navigator.language, true);
 102           }
 103           selectOption.text = displayName ||
 104                               this.getDefaultDisplayName_(option);
 105           selectOption.value = JSON.stringify(option);
 106           select.appendChild(selectOption);
 107           if (option.is_default)
 108             indexToSelect = index;
 109         }, this);
 110       }
 111       // Try to select current ticket item.
 112       var valueToSelect = JSON.stringify(this.ticketItem_.getValue());
 113       for (var i = 0, option; option = select.options[i]; i++) {
 114         if (option.value == valueToSelect) {
 115           indexToSelect = i;
 116           break;
 117         }
 118       }
 119       select.selectedIndex = indexToSelect;
 120       this.onSelectChange_();
 121     },
 122
 123     /**
 124      * @param {!Object} option Option to get the default display name for.
 125      * @return {string} Default option display name.
 126      * @private
 127      */
 128     getDefaultDisplayName_: function(option) {
 129       throw Error('Abstract method not overridden');
 130     },
 131
 132     /**
 133      * Called when the select element is changed. Updates the print ticket.
 134      * @private
 135      */
 136     onSelectChange_: function() {
 137       var select = this.select_;
 138       this.ticketItem_.updateValue(
 139           JSON.parse(select.options[select.selectedIndex].value));
 140     },
 141
 142     /**
 143      * Called when the print ticket store changes. Selects the corresponding
 144      * select option.
 145      * @private
 146      */
 147     onTicketItemChange_: function() {
 148       this.updateSelect_();
 149       this.updateUiStateInternal();
 150     }
 151   };
 152
 153   // Export
 154   return {
 155     SettingsSectionSelect: SettingsSectionSelect
 156   };
 157 });