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.Component}
  14    */
  15   function MediaSizeSettings(ticketItem) {
  16     print_preview.Component.call(this);
  17
  18     /** @private {!print_preview.ticket_items.MediaSize} */
  19     this.ticketItem_ = ticketItem;
  20   };
  21
  22   MediaSizeSettings.prototype = {
  23     __proto__: print_preview.Component.prototype,
  24
  25     /** @param {boolean} isEnabled Whether this component is enabled. */
  26     set isEnabled(isEnabled) {
  27       this.select_.disabled = !isEnabled;
  28     },
  29
  30     /** @override */
  31     enterDocument: function() {
  32       print_preview.Component.prototype.enterDocument.call(this);
  33       fadeOutOption(this.getElement(), true);
  34       this.tracker.add(this.select_, 'change', this.onSelectChange_.bind(this));
  35       this.tracker.add(
  36           this.ticketItem_,
  37           print_preview.ticket_items.TicketItem.EventType.CHANGE,
  38           this.onTicketItemChange_.bind(this));
  39     },
  40
  41     /**
  42      * @return {HTMLSelectElement} Select element containing media size options.
  43      * @private
  44      */
  45     get select_() {
  46       return this.getElement().getElementsByClassName(
  47           'media-size-settings-select')[0];
  48     },
  49
  50     /**
  51      * Makes sure the content of the select element matches the capabilities of
  52      * the destination.
  53      * @private
  54      */
  55     updateSelect_: function() {
  56       var select = this.select_;
  57       if (!this.ticketItem_.isCapabilityAvailable()) {
  58         select.innerHtml = '';
  59         return;
  60       }
  61       // Should the select content be updated?
  62       var sameContent =
  63           this.ticketItem_.capability.option.length == select.length &&
  64           this.ticketItem_.capability.option.every(function(option, index) {
  65             return select.options[index].value == JSON.stringify(option);
  66           });
  67       var indexToSelect = select.selectedIndex;
  68       if (!sameContent) {
  69         select.innerHtml = '';
  70         // TODO: Better heuristics for the display name and options grouping.
  71         this.ticketItem_.capability.option.forEach(function(option, index) {
  72           var selectOption = document.createElement('option');
  73           selectOption.text = option.custom_display_name || option.name;
  74           selectOption.value = JSON.stringify(option);
  75           select.add(selectOption);
  76           if (option.is_default) {
  77             indexToSelect = index;
  78           }
  79         });
  80       } else {
  81         var valueToSelect = JSON.stringify(this.ticketItem_.getValue());
  82         for (var i = 0, option; option = select.options[i]; i++) {
  83           if (option.value == valueToSelect) {
  84             indexToSelect = i;
  85             break;
  86           }
  87         }
  88       }
  89       select.selectedIndex = indexToSelect;
  90     },
  91
  92     /**
  93      * Called when the select element is changed. Updates the print ticket.
  94      * @private
  95      */
  96     onSelectChange_: function() {
  97       var select = this.select_;
  98       var mediaSize = JSON.parse(select.options[select.selectedIndex].value);
  99       this.ticketItem_.updateValue(mediaSize);
 100     },
 101
 102     /**
 103      * Called when the print ticket store changes. Selects the corresponding
 104      * select option.
 105      * @private
 106      */
 107     onTicketItemChange_: function() {
 108       if (this.ticketItem_.isCapabilityAvailable()) {
 109         this.updateSelect_();
 110         fadeInOption(this.getElement());
 111       } else {
 112         fadeOutOption(this.getElement());
 113       }
 114     }
 115   };
 116
 117   // Export
 118   return {
 119     MediaSizeSettings: MediaSizeSettings
 120   };
 121 });