chrome/browser/resources/print_preview/settings/copies_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    * Component that renders the copies settings UI.
  10    * @param {!print_preview.ticket_items.Copies} copiesTicketItem Used to read
  11    *     and write the copies value.
  12    * @param {!print_preview.ticket_items.Collate} collateTicketItem Used to read
  13    *     and write the collate value.
  14    * @constructor
  15    * @extends {print_preview.Component}
  16    */
  17   function CopiesSettings(copiesTicketItem, collateTicketItem) {
  18     print_preview.Component.call(this);
  19
  20     /**
  21      * Used to read and write the copies value.
  22      * @type {!print_preview.ticket_items.Copies}
  23      * @private
  24      */
  25     this.copiesTicketItem_ = copiesTicketItem;
  26
  27     /**
  28      * Used to read and write the collate value.
  29      * @type {!print_preview.ticket_items.Collate}
  30      * @private
  31      */
  32     this.collateTicketItem_ = collateTicketItem;
  33
  34     /**
  35      * Timeout used to delay processing of the copies input.
  36      * @type {?number}
  37      * @private
  38      */
  39     this.textfieldTimeout_ = null;
  40
  41     /**
  42      * Whether this component is enabled or not.
  43      * @type {boolean}
  44      * @private
  45      */
  46     this.isEnabled_ = true;
  47   };
  48
  49   /**
  50    * Delay in milliseconds before processing the textfield.
  51    * @type {number}
  52    * @private
  53    */
  54   CopiesSettings.TEXTFIELD_DELAY_ = 250;
  55
  56   CopiesSettings.prototype = {
  57     __proto__: print_preview.Component.prototype,
  58
  59     /** @param {boolean} isEnabled Whether the copies settings is enabled. */
  60     set isEnabled(isEnabled) {
  61       this.getChildElement('input.copies').disabled = !isEnabled;
  62       this.getChildElement('input.collate').disabled = !isEnabled;
  63       this.isEnabled_ = isEnabled;
  64       if (isEnabled) {
  65         this.updateState_();
  66       } else {
  67         this.getChildElement('button.increment').disabled = true;
  68         this.getChildElement('button.decrement').disabled = true;
  69       }
  70     },
  71
  72     /** @override */
  73     enterDocument: function() {
  74       print_preview.Component.prototype.enterDocument.call(this);
  75
  76       this.tracker.add(
  77           this.getChildElement('input.copies'),
  78           'keyup',
  79           this.onTextfieldKeyUp_.bind(this));
  80       this.tracker.add(
  81           this.getChildElement('input.copies'),
  82           'blur',
  83           this.onTextfieldBlur_.bind(this));
  84       this.tracker.add(
  85           this.getChildElement('button.increment'),
  86           'click',
  87           this.onButtonClicked_.bind(this, 1));
  88       this.tracker.add(
  89           this.getChildElement('button.decrement'),
  90           'click',
  91           this.onButtonClicked_.bind(this, -1));
  92       this.tracker.add(
  93           this.getChildElement('input.collate'),
  94           'click',
  95           this.onCollateCheckboxClick_.bind(this));
  96       this.tracker.add(
  97           this.copiesTicketItem_,
  98           print_preview.ticket_items.TicketItem.EventType.CHANGE,
  99           this.updateState_.bind(this));
 100       this.tracker.add(
 101           this.collateTicketItem_,
 102           print_preview.ticket_items.TicketItem.EventType.CHANGE,
 103           this.updateState_.bind(this));
 104     },
 105
 106     /**
 107      * Updates the state of the copies settings UI controls.
 108      * @private
 109      */
 110     updateState_: function() {
 111       if (!this.copiesTicketItem_.isCapabilityAvailable()) {
 112         fadeOutOption(this.getElement());
 113         return;
 114       }
 115
 116       if (this.getChildElement('input.copies').value !=
 117           this.copiesTicketItem_.getValue()) {
 118         this.getChildElement('input.copies').value =
 119             this.copiesTicketItem_.getValue();
 120       }
 121
 122       var currentValueGreaterThan1 = false;
 123       if (this.copiesTicketItem_.isValid()) {
 124         this.getChildElement('input.copies').classList.remove('invalid');
 125         fadeOutElement(this.getChildElement('.hint'));
 126         this.getChildElement('.hint').setAttribute('aria-hidden', true);
 127         var currentValue = this.copiesTicketItem_.getValueAsNumber();
 128         var currentValueGreaterThan1 = currentValue > 1;
 129         this.getChildElement('button.increment').disabled =
 130             !this.isEnabled_ ||
 131             !this.copiesTicketItem_.wouldValueBeValid(currentValue + 1);
 132         this.getChildElement('button.decrement').disabled =
 133             !this.isEnabled_ ||
 134             !this.copiesTicketItem_.wouldValueBeValid(currentValue - 1);
 135       } else {
 136         this.getChildElement('input.copies').classList.add('invalid');
 137         this.getChildElement('.hint').setAttribute('aria-hidden', false);
 138         fadeInElement(this.getChildElement('.hint'));
 139         this.getChildElement('button.increment').disabled = true;
 140         this.getChildElement('button.decrement').disabled = true;
 141       }
 142
 143       if (!(this.getChildElement('.collate-container').hidden =
 144              !this.collateTicketItem_.isCapabilityAvailable() ||
 145              !currentValueGreaterThan1)) {
 146         this.getChildElement('input.collate').checked =
 147             this.collateTicketItem_.getValue();
 148       }
 149
 150       fadeInOption(this.getElement());
 151     },
 152
 153     /**
 154      * Called whenever the increment/decrement buttons are clicked.
 155      * @param {number} delta Must be 1 for an increment button click and -1 for
 156      *     a decrement button click.
 157      * @private
 158      */
 159     onButtonClicked_: function(delta) {
 160       // Assumes text field has a valid number.
 161       var newValue =
 162           parseInt(this.getChildElement('input.copies').value) + delta;
 163       this.copiesTicketItem_.updateValue(newValue + '');
 164     },
 165
 166     /**
 167      * Called after a timeout after user input into the textfield.
 168      * @private
 169      */
 170     onTextfieldTimeout_: function() {
 171       var copiesVal = this.getChildElement('input.copies').value;
 172       if (copiesVal != '') {
 173         this.copiesTicketItem_.updateValue(copiesVal);
 174       }
 175     },
 176
 177     /**
 178      * Called when a keyup event occurs on the textfield. Starts an input
 179      * timeout.
 180      * @param {Event} event Contains the pressed key.
 181      * @private
 182      */
 183     onTextfieldKeyUp_: function(event) {
 184       if (this.textfieldTimeout_) {
 185         clearTimeout(this.textfieldTimeout_);
 186       }
 187       this.textfieldTimeout_ = setTimeout(
 188           this.onTextfieldTimeout_.bind(this), CopiesSettings.TEXTFIELD_DELAY_);
 189     },
 190
 191     /**
 192      * Called when the focus leaves the textfield. If the textfield is empty,
 193      * its value is set to 1.
 194      * @private
 195      */
 196     onTextfieldBlur_: function() {
 197       if (this.getChildElement('input.copies').value == '') {
 198         this.copiesTicketItem_.updateValue('1');
 199       }
 200     },
 201
 202     /**
 203      * Called when the collate checkbox is clicked. Updates the print ticket.
 204      * @private
 205      */
 206     onCollateCheckboxClick_: function() {
 207       this.collateTicketItem_.updateValue(
 208           this.getChildElement('input.collate').checked);
 209     }
 210   };
 211
 212   // Export
 213   return {
 214     CopiesSettings: CopiesSettings
 215   };
 216 });