src/chrome/browser/resources/print_preview/settings/media_size_settings.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    * Encapsulates all settings and logic related to the media size selection UI.
  10    * @param {!print_preview.ticket_items.MediaSize} ticketItem Used to read and
  11    *     write the media size ticket item.
  12    * @constructor
  13    * @extends {print_preview.SettingsSection}
  14    */
  15   function MediaSizeSettings(ticketItem) {
  16     print_preview.SettingsSection.call(this);
  17
  18     /** @private {!print_preview.ticket_items.MediaSize} */
  19     this.ticketItem_ = ticketItem;
  20   };
  21
  22   MediaSizeSettings.prototype = {
  23     __proto__: print_preview.SettingsSection.prototype,
  24
  25     /** @override */
  26     isAvailable: function() {
  27       return this.ticketItem_.isCapabilityAvailable();
  28     },
  29
  30     /** @override */
  31     hasCollapsibleContent: function() {
  32       return this.isAvailable();
  33     },
  34
  35     /** @override */
  36     set isEnabled(isEnabled) {
  37       this.select_.disabled = !isEnabled;
  38     },
  39
  40     /** @override */
  41     enterDocument: function() {
  42       print_preview.SettingsSection.prototype.enterDocument.call(this);
  43       this.tracker.add(this.select_, 'change', this.onSelectChange_.bind(this));
  44       this.tracker.add(
  45           this.ticketItem_,
  46           print_preview.ticket_items.TicketItem.EventType.CHANGE,
  47           this.onTicketItemChange_.bind(this));
  48     },
  49
  50     /**
  51      * @return {HTMLSelectElement} Select element containing media size options.
  52      * @private
  53      */
  54     get select_() {
  55       return this.getElement().getElementsByClassName(
  56           'media-size-settings-select')[0];
  57     },
  58
  59     /**
  60      * Makes sure the content of the select element matches the capabilities of
  61      * the destination.
  62      * @private
  63      */
  64     updateSelect_: function() {
  65       var select = this.select_;
  66       if (!this.isAvailable()) {
  67         select.innerHTML = '';
  68         return;
  69       }
  70       // Should the select content be updated?
  71       var sameContent =
  72           this.ticketItem_.capability.option.length == select.length &&
  73           this.ticketItem_.capability.option.every(function(option, index) {
  74             return select.options[index].value == JSON.stringify(option);
  75           });
  76       var indexToSelect = select.selectedIndex;
  77       if (!sameContent) {
  78         select.innerHTML = '';
  79         // TODO: Better heuristics for the display name and options grouping.
  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 = function(locale, languageOnly) {
  85               var code = languageOnly ? locale.split('-')[0] : locale;
  86               return code.toLowerCase();
  87             };
  88             var getItemForLocale = function(items, locale, languageOnly) {
  89               locale = getLocaleToCompare(locale, languageOnly);
  90               for (var i = 0; i < items.length; i++) {
  91                 if (getLocaleToCompare(items[i].locale) == locale)
  92                   return items[i].value;
  93               }
  94               return '';
  95             };
  96             var items = option.custom_display_name_localized;
  97             displayName =
  98                 getItemForLocale(items, navigator.language, false) ||
  99                 getItemForLocale(items, navigator.language, true);
 100           }
 101           selectOption.text = displayName || option.name;
 102           selectOption.value = JSON.stringify(option);
 103           select.add(selectOption);
 104           if (option.is_default) {
 105             indexToSelect = index;
 106           }
 107         });
 108       }
 109       // Try to select current ticket item.
 110       var valueToSelect = JSON.stringify(this.ticketItem_.getValue());
 111       for (var i = 0, option; option = select.options[i]; i++) {
 112         if (option.value == valueToSelect) {
 113           indexToSelect = i;
 114           break;
 115         }
 116       }
 117       select.selectedIndex = indexToSelect;
 118       this.onSelectChange_();
 119     },
 120
 121     /**
 122      * Called when the select element is changed. Updates the print ticket.
 123      * @private
 124      */
 125     onSelectChange_: function() {
 126       var select = this.select_;
 127       var mediaSize = JSON.parse(select.options[select.selectedIndex].value);
 128       this.ticketItem_.updateValue(mediaSize);
 129     },
 130
 131     /**
 132      * Called when the print ticket store changes. Selects the corresponding
 133      * select option.
 134      * @private
 135      */
 136     onTicketItemChange_: function() {
 137       this.updateSelect_();
 138       this.updateUiStateInternal();
 139     }
 140   };
 141
 142   // Export
 143   return {
 144     MediaSizeSettings: MediaSizeSettings
 145   };
 146 });