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.SettingsSection}
  15    */
  16   function PageSettings(pageRangeTicketItem) {
  17     print_preview.SettingsSection.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.SettingsSection.prototype,
  83
  84     /** @override */
  85     isAvailable: function() {
  86       return this.pageRangeTicketItem_.isCapabilityAvailable();
  87     },
  88
  89     /** @override */
  90     hasCollapsibleContent: function() {
  91       return false;
  92     },
  93
  94     /** @override */
  95     set isEnabled(isEnabled) {
  96       this.customInput_.disabled = !isEnabled;
  97       this.allRadio_.disabled = !isEnabled;
  98       this.customRadio_.disabled = !isEnabled;
  99     },
 100
 101     /** @override */
 102     enterDocument: function() {
 103       print_preview.SettingsSection.prototype.enterDocument.call(this);
 104       this.tracker.add(
 105           this.allRadio_, 'click', this.onAllRadioClick_.bind(this));
 106       this.tracker.add(
 107           this.customRadio_, 'click', this.onCustomRadioClick_.bind(this));
 108       this.tracker.add(
 109           this.customInput_, 'blur', this.onCustomInputBlur_.bind(this));
 110       this.tracker.add(
 111           this.customInput_, 'focus', this.onCustomInputFocus_.bind(this));
 112       this.tracker.add(
 113           this.customInput_, 'keydown', this.onCustomInputKeyDown_.bind(this));
 114       this.tracker.add(
 115           this.customInput_, 'keyup', this.onCustomInputKeyUp_.bind(this));
 116       this.tracker.add(
 117           this.pageRangeTicketItem_,
 118           print_preview.ticket_items.TicketItem.EventType.CHANGE,
 119           this.onPageRangeTicketItemChange_.bind(this));
 120     },
 121
 122     /** @override */
 123     exitDocument: function() {
 124       print_preview.SettingsSection.prototype.exitDocument.call(this);
 125       this.customInput_ = null;
 126       this.customRadio_ = null;
 127       this.allRadio_ = null;
 128       this.customHintEl_ = null;
 129     },
 130
 131     /** @override */
 132     decorateInternal: function() {
 133       this.customInput_ = this.getElement().getElementsByClassName(
 134           PageSettings.Classes_.CUSTOM_INPUT)[0];
 135       this.allRadio_ = this.getElement().getElementsByClassName(
 136           PageSettings.Classes_.ALL_RADIO)[0];
 137       this.customRadio_ = this.getElement().getElementsByClassName(
 138           PageSettings.Classes_.CUSTOM_RADIO)[0];
 139       this.customHintEl_ = this.getElement().getElementsByClassName(
 140           PageSettings.Classes_.CUSTOM_HINT)[0];
 141       this.customHintEl_.textContent = loadTimeData.getStringF(
 142           'pageRangeInstruction',
 143           loadTimeData.getString('examplePageRangeText'));
 144     },
 145
 146     /**
 147      * @param {boolean} isVisible Whether the custom hint is visible.
 148      * @private
 149      */
 150     setInvalidStateVisible_: function(isVisible) {
 151       if (isVisible) {
 152         this.customInput_.classList.add('invalid');
 153         fadeInElement(this.customHintEl_);
 154       } else {
 155         this.customInput_.classList.remove('invalid');
 156         fadeOutElement(this.customHintEl_);
 157       }
 158     },
 159
 160     /**
 161      * Called when the all radio button is clicked. Updates the print ticket.
 162      * @private
 163      */
 164     onAllRadioClick_: function() {
 165       this.pageRangeTicketItem_.updateValue(null);
 166     },
 167
 168     /**
 169      * Called when the custom radio button is clicked. Updates the print ticket.
 170      * @private
 171      */
 172     onCustomRadioClick_: function() {
 173       this.customInput_.focus();
 174     },
 175
 176     /**
 177      * Called when the custom input is blurred. Enables the all radio button if
 178      * the custom input is empty.
 179      * @private
 180      */
 181     onCustomInputBlur_: function(event) {
 182       if (this.customInput_.value == '' &&
 183           event.relatedTarget != this.customRadio_) {
 184         this.allRadio_.checked = true;
 185       }
 186     },
 187
 188     /**
 189      * Called when the custom input is focused.
 190      * @private
 191      */
 192     onCustomInputFocus_: function() {
 193       this.customRadio_.checked = true;
 194       this.pageRangeTicketItem_.updateValue(this.customInput_.value);
 195     },
 196
 197     /**
 198      * Called when a key is pressed on the custom input.
 199      * @param {Event} event Contains the key that was pressed.
 200      * @private
 201      */
 202     onCustomInputKeyDown_: function(event) {
 203       if (event.keyCode == 13 /*enter*/) {
 204         if (this.customInputTimeout_) {
 205           clearTimeout(this.customInputTimeout_);
 206           this.customInputTimeout_ = null;
 207         }
 208         this.pageRangeTicketItem_.updateValue(this.customInput_.value);
 209       }
 210     },
 211
 212     /**
 213      * Called when a key is pressed on the custom input.
 214      * @param {Event} event Contains the key that was pressed.
 215      * @private
 216      */
 217     onCustomInputKeyUp_: function(event) {
 218       if (this.customInputTimeout_) {
 219         clearTimeout(this.customInputTimeout_);
 220         this.customInputTimeout_ = null;
 221       }
 222       if (event.keyCode != 13 /*enter*/) {
 223         this.customRadio_.checked = true;
 224         this.customInputTimeout_ = setTimeout(
 225             this.onCustomInputTimeout_.bind(this),
 226             PageSettings.CUSTOM_INPUT_DELAY_);
 227       }
 228     },
 229
 230     /**
 231      * Called after a delay following a key press in the custom input.
 232      * @private
 233      */
 234     onCustomInputTimeout_: function() {
 235       this.customInputTimeout_ = null;
 236       if (this.customRadio_.checked) {
 237         this.pageRangeTicketItem_.updateValue(this.customInput_.value);
 238       }
 239     },
 240
 241     /**
 242      * Called when the print ticket changes. Updates the state of the component.
 243      * @private
 244      */
 245     onPageRangeTicketItemChange_: function() {
 246       if (this.isAvailable()) {
 247         var pageRangeStr = this.pageRangeTicketItem_.getValue();
 248         if (pageRangeStr || this.customRadio_.checked) {
 249           if (!document.hasFocus() ||
 250               document.activeElement != this.customInput_) {
 251             this.customInput_.value = pageRangeStr;
 252           }
 253           this.customRadio_.checked = true;
 254           this.setInvalidStateVisible_(!this.pageRangeTicketItem_.isValid());
 255         } else {
 256           this.allRadio_.checked = true;
 257           this.setInvalidStateVisible_(false);
 258         }
 259       }
 260       this.updateUiStateInternal();
 261     }
 262   };
 263
 264   // Export
 265   return {
 266     PageSettings: PageSettings
 267   };
 268 });