src/chrome/browser/resources/print_preview/settings/page_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('print_preview', function() {
   6   'use strict';
   7
   8   /**
   9    * Creates a PageSettings object. This object encapsulates all settings and
  10    * logic related to page selection.
  11    * @param {!print_preview.ticket_items.PageRange} pageRangeTicketItem Used to
  12    *     read and write page range settings.
  13    * @constructor
  14    * @extends {print_preview.Component}
  15    */
  16   function PageSettings(pageRangeTicketItem) {
  17     print_preview.Component.call(this);
  18
  19     /**
  20      * Used to read and write page range settings.
  21      * @type {!print_preview.ticket_items.PageRange}
  22      * @private
  23      */
  24     this.pageRangeTicketItem_ = pageRangeTicketItem;
  25
  26     /**
  27      * Timeout used to delay processing of the custom page range input.
  28      * @type {?number}
  29      * @private
  30      */
  31     this.customInputTimeout_ = null;
  32
  33     /**
  34      * Custom page range input.
  35      * @type {HTMLInputElement}
  36      * @private
  37      */
  38     this.customInput_ = null;
  39
  40     /**
  41      * Custom page range radio button.
  42      * @type {HTMLInputElement}
  43      * @private
  44      */
  45     this.customRadio_ = null;
  46
  47     /**
  48      * All page rage radio button.
  49      * @type {HTMLInputElement}
  50      * @private
  51      */
  52     this.allRadio_ = null;
  53
  54     /**
  55      * Container of a hint to show when the custom page range is invalid.
  56      * @type {HTMLElement}
  57      * @private
  58      */
  59     this.customHintEl_ = null;
  60   };
  61
  62   /**
  63    * CSS classes used by the page settings.
  64    * @enum {string}
  65    * @private
  66    */
  67   PageSettings.Classes_ = {
  68     ALL_RADIO: 'page-settings-all-radio',
  69     CUSTOM_HINT: 'page-settings-custom-hint',
  70     CUSTOM_INPUT: 'page-settings-custom-input',
  71     CUSTOM_RADIO: 'page-settings-custom-radio'
  72   };
  73
  74   /**
  75    * Delay in milliseconds before processing custom page range input.
  76    * @type {number}
  77    * @private
  78    */
  79   PageSettings.CUSTOM_INPUT_DELAY_ = 500;
  80
  81   PageSettings.prototype = {
  82     __proto__: print_preview.Component.prototype,
  83
  84     set isEnabled(isEnabled) {
  85       this.customInput_.disabled = !isEnabled;
  86       this.allRadio_.disabled = !isEnabled;
  87       this.customRadio_.disabled = !isEnabled;
  88     },
  89
  90     /** @override */
  91     enterDocument: function() {
  92       print_preview.Component.prototype.enterDocument.call(this);
  93       fadeOutOption(this.getElement(), true);
  94       this.tracker.add(
  95           this.allRadio_, 'click', this.onAllRadioClick_.bind(this));
  96       this.tracker.add(
  97           this.customRadio_, 'click', this.onCustomRadioClick_.bind(this));
  98       this.tracker.add(
  99           this.customInput_, 'blur', this.onCustomInputBlur_.bind(this));
 100       this.tracker.add(
 101           this.customInput_, 'focus', this.onCustomInputFocus_.bind(this));
 102       this.tracker.add(
 103           this.customInput_, 'keydown', this.onCustomInputKeyDown_.bind(this));
 104       this.tracker.add(
 105           this.customInput_, 'keyup', this.onCustomInputKeyUp_.bind(this));
 106       this.tracker.add(
 107           this.pageRangeTicketItem_,
 108           print_preview.ticket_items.TicketItem.EventType.CHANGE,
 109           this.onPageRangeTicketItemChange_.bind(this));
 110     },
 111
 112     /** @override */
 113     exitDocument: function() {
 114       print_preview.Component.prototype.exitDocument.call(this);
 115       this.customInput_ = null;
 116       this.customRadio_ = null;
 117       this.allRadio_ = null;
 118       this.customHintEl_ = null;
 119     },
 120
 121     /** @override */
 122     decorateInternal: function() {
 123       this.customInput_ = this.getElement().getElementsByClassName(
 124           PageSettings.Classes_.CUSTOM_INPUT)[0];
 125       this.allRadio_ = this.getElement().getElementsByClassName(
 126           PageSettings.Classes_.ALL_RADIO)[0];
 127       this.customRadio_ = this.getElement().getElementsByClassName(
 128           PageSettings.Classes_.CUSTOM_RADIO)[0];
 129       this.customHintEl_ = this.getElement().getElementsByClassName(
 130           PageSettings.Classes_.CUSTOM_HINT)[0];
 131       this.customHintEl_.textContent = localStrings.getStringF(
 132           'pageRangeInstruction',
 133           localStrings.getString('examplePageRangeText'));
 134     },
 135
 136     /**
 137      * @param {boolean} Whether the custom hint is visible.
 138      * @private
 139      */
 140     setInvalidStateVisible_: function(isVisible) {
 141       if (isVisible) {
 142         this.customInput_.classList.add('invalid');
 143         this.customHintEl_.setAttribute('aria-hidden', 'false');
 144         fadeInElement(this.customHintEl_);
 145       } else {
 146         this.customInput_.classList.remove('invalid');
 147         fadeOutElement(this.customHintEl_);
 148         this.customHintEl_.setAttribute('aria-hidden', 'true');
 149       }
 150     },
 151
 152     /**
 153      * Called when the all radio button is clicked. Updates the print ticket.
 154      * @private
 155      */
 156     onAllRadioClick_: function() {
 157       this.pageRangeTicketItem_.updateValue(null);
 158     },
 159
 160     /**
 161      * Called when the custom radio button is clicked. Updates the print ticket.
 162      * @private
 163      */
 164     onCustomRadioClick_: function() {
 165       this.customInput_.focus();
 166     },
 167
 168     /**
 169      * Called when the custom input is blurred. Enables the all radio button if
 170      * the custom input is empty.
 171      * @private
 172      */
 173     onCustomInputBlur_: function(event) {
 174       if (this.customInput_.value == '' &&
 175           event.relatedTarget != this.customRadio_) {
 176         this.allRadio_.checked = true;
 177       }
 178     },
 179
 180     /**
 181      * Called when the custom input is focused.
 182      * @private
 183      */
 184     onCustomInputFocus_: function() {
 185       this.customRadio_.checked = true;
 186       this.pageRangeTicketItem_.updateValue(this.customInput_.value);
 187     },
 188
 189     /**
 190      * Called when a key is pressed on the custom input.
 191      * @param {Event} event Contains the key that was pressed.
 192      * @private
 193      */
 194     onCustomInputKeyDown_: function(event) {
 195       if (event.keyCode == 13 /*enter*/) {
 196         if (this.customInputTimeout_) {
 197           clearTimeout(this.customInputTimeout_);
 198           this.customInputTimeout_ = null;
 199         }
 200         this.pageRangeTicketItem_.updateValue(this.customInput_.value);
 201       }
 202     },
 203
 204     /**
 205      * Called when a key is pressed on the custom input.
 206      * @param {Event} event Contains the key that was pressed.
 207      * @private
 208      */
 209     onCustomInputKeyUp_: function(event) {
 210       if (this.customInputTimeout_) {
 211         clearTimeout(this.customInputTimeout_);
 212         this.customInputTimeout_ = null;
 213       }
 214       if (event.keyCode != 13 /*enter*/) {
 215         this.customRadio_.checked = true;
 216         this.customInputTimeout_ = setTimeout(
 217             this.onCustomInputTimeout_.bind(this),
 218             PageSettings.CUSTOM_INPUT_DELAY_);
 219       }
 220     },
 221
 222     /**
 223      * Called after a delay following a key press in the custom input.
 224      * @private
 225      */
 226     onCustomInputTimeout_: function() {
 227       this.customInputTimeout_ = null;
 228       if (this.customRadio_.checked) {
 229         this.pageRangeTicketItem_.updateValue(this.customInput_.value);
 230       }
 231     },
 232
 233     /**
 234      * Called when the print ticket changes. Updates the state of the component.
 235      * @private
 236      */
 237     onPageRangeTicketItemChange_: function() {
 238       if (this.pageRangeTicketItem_.isCapabilityAvailable()) {
 239         var pageRangeStr = this.pageRangeTicketItem_.getValue();
 240         if (pageRangeStr || this.customRadio_.checked) {
 241           if (!document.hasFocus() ||
 242               document.activeElement != this.customInput_) {
 243             this.customInput_.value = pageRangeStr;
 244           }
 245           this.customRadio_.checked = true;
 246           this.setInvalidStateVisible_(!this.pageRangeTicketItem_.isValid());
 247         } else {
 248           this.allRadio_.checked = true;
 249           this.setInvalidStateVisible_(false);
 250         }
 251         fadeInOption(this.getElement());
 252       } else {
 253         fadeOutOption(this.getElement());
 254       }
 255     }
 256   };
 257
 258   // Export
 259   return {
 260     PageSettings: PageSettings
 261   };
 262 });