src/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.SettingsSection}
  16    */
  17   function CopiesSettings(copiesTicketItem, collateTicketItem) {
  18     print_preview.SettingsSection.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.SettingsSection.prototype,
  58
  59     /** @override */
  60     isAvailable: function() {
  61       return this.copiesTicketItem_.isCapabilityAvailable();
  62     },
  63
  64     /** @override */
  65     hasCollapsibleContent: function() {
  66       return false;
  67     },
  68
  69     /** @override */
  70     set isEnabled(isEnabled) {
  71       this.getChildElement('input.copies').disabled = !isEnabled;
  72       this.getChildElement('input.collate').disabled = !isEnabled;
  73       this.isEnabled_ = isEnabled;
  74       if (isEnabled) {
  75         this.updateState_();
  76       } else {
  77         this.getChildElement('button.increment').disabled = true;
  78         this.getChildElement('button.decrement').disabled = true;
  79       }
  80     },
  81
  82     /** @override */
  83     enterDocument: function() {
  84       print_preview.SettingsSection.prototype.enterDocument.call(this);
  85       this.tracker.add(
  86           this.getChildElement('input.copies'),
  87           'keydown',
  88           this.onTextfieldKeyDown_.bind(this));
  89       this.tracker.add(
  90           this.getChildElement('input.copies'),
  91           'input',
  92           this.onTextfieldInput_.bind(this));
  93       this.tracker.add(
  94           this.getChildElement('input.copies'),
  95           'blur',
  96           this.onTextfieldBlur_.bind(this));
  97       this.tracker.add(
  98           this.getChildElement('button.increment'),
  99           'click',
 100           this.onButtonClicked_.bind(this, 1));
 101       this.tracker.add(
 102           this.getChildElement('button.decrement'),
 103           'click',
 104           this.onButtonClicked_.bind(this, -1));
 105       this.tracker.add(
 106           this.getChildElement('input.collate'),
 107           'click',
 108           this.onCollateCheckboxClick_.bind(this));
 109       this.tracker.add(
 110           this.copiesTicketItem_,
 111           print_preview.ticket_items.TicketItem.EventType.CHANGE,
 112           this.updateState_.bind(this));
 113       this.tracker.add(
 114           this.collateTicketItem_,
 115           print_preview.ticket_items.TicketItem.EventType.CHANGE,
 116           this.updateState_.bind(this));
 117     },
 118
 119     /**
 120      * Updates the state of the copies settings UI controls.
 121      * @private
 122      */
 123     updateState_: function() {
 124       if (this.isAvailable()) {
 125         if (this.getChildElement('input.copies').value !=
 126             this.copiesTicketItem_.getValue()) {
 127           this.getChildElement('input.copies').value =
 128               this.copiesTicketItem_.getValue();
 129         }
 130
 131         var currentValueGreaterThan1 = false;
 132         if (this.copiesTicketItem_.isValid()) {
 133           this.getChildElement('input.copies').classList.remove('invalid');
 134           fadeOutElement(this.getChildElement('.hint'));
 135           var currentValue = this.copiesTicketItem_.getValueAsNumber();
 136           var currentValueGreaterThan1 = currentValue > 1;
 137           this.getChildElement('button.increment').disabled =
 138               !this.isEnabled_ ||
 139               !this.copiesTicketItem_.wouldValueBeValid(currentValue + 1);
 140           this.getChildElement('button.decrement').disabled =
 141               !this.isEnabled_ ||
 142               !this.copiesTicketItem_.wouldValueBeValid(currentValue - 1);
 143         } else {
 144           this.getChildElement('input.copies').classList.add('invalid');
 145           fadeInElement(this.getChildElement('.hint'));
 146           this.getChildElement('button.increment').disabled = true;
 147           this.getChildElement('button.decrement').disabled = true;
 148         }
 149
 150         if (!(this.getChildElement('.collate-container').hidden =
 151                !this.collateTicketItem_.isCapabilityAvailable() ||
 152                !currentValueGreaterThan1)) {
 153           this.getChildElement('input.collate').checked =
 154               this.collateTicketItem_.getValue();
 155         }
 156       }
 157       this.updateUiStateInternal();
 158     },
 159
 160     /**
 161      * Called whenever the increment/decrement buttons are clicked.
 162      * @param {number} delta Must be 1 for an increment button click and -1 for
 163      *     a decrement button click.
 164      * @private
 165      */
 166     onButtonClicked_: function(delta) {
 167       // Assumes text field has a valid number.
 168       var newValue =
 169           parseInt(this.getChildElement('input.copies').value) + delta;
 170       this.copiesTicketItem_.updateValue(newValue + '');
 171     },
 172
 173     /**
 174      * Called after a timeout after user input into the textfield.
 175      * @private
 176      */
 177     onTextfieldTimeout_: function() {
 178       this.textfieldTimeout_ = null;
 179       var copiesVal = this.getChildElement('input.copies').value;
 180       if (copiesVal != '') {
 181         this.copiesTicketItem_.updateValue(copiesVal);
 182       }
 183     },
 184
 185     /**
 186      * Called when a key is pressed on the custom input.
 187      * @param {Event} event Contains the key that was pressed.
 188      * @private
 189      */
 190     onTextfieldKeyDown_: function(event) {
 191       if (event.keyCode == 13 /*enter*/) {
 192         if (this.textfieldTimeout_) {
 193           clearTimeout(this.textfieldTimeout_);
 194         }
 195         this.onTextfieldTimeout_();
 196       }
 197     },
 198
 199     /**
 200      * Called when a input event occurs on the textfield. Starts an input
 201      * timeout.
 202      * @private
 203      */
 204     onTextfieldInput_: function() {
 205       if (this.textfieldTimeout_) {
 206         clearTimeout(this.textfieldTimeout_);
 207       }
 208       this.textfieldTimeout_ = setTimeout(
 209           this.onTextfieldTimeout_.bind(this), CopiesSettings.TEXTFIELD_DELAY_);
 210     },
 211
 212     /**
 213      * Called when the focus leaves the textfield. If the textfield is empty,
 214      * its value is set to 1.
 215      * @private
 216      */
 217     onTextfieldBlur_: function() {
 218       if (this.getChildElement('input.copies').value == '') {
 219         this.copiesTicketItem_.updateValue('1');
 220       }
 221     },
 222
 223     /**
 224      * Called when the collate checkbox is clicked. Updates the print ticket.
 225      * @private
 226      */
 227     onCollateCheckboxClick_: function() {
 228       this.collateTicketItem_.updateValue(
 229           this.getChildElement('input.collate').checked);
 230     }
 231   };
 232
 233   // Export
 234   return {
 235     CopiesSettings: CopiesSettings
 236   };
 237 });