Refactor print preview web ui

chrome/browser/resources/print_preview/settings/copies_settings.js

Index: chrome/browser/resources/print_preview/settings/copies_settings.js
diff --git a/chrome/browser/resources/print_preview/settings/copies_settings.js b/chrome/browser/resources/print_preview/settings/copies_settings.js
new file mode 100644
index 0000000000000000000000000000000000000000..3f2947f9512f40951ec82c518168aa54c334389e
--- /dev/null
+++ b/chrome/browser/resources/print_preview/settings/copies_settings.js
@@ -0,0 +1,272 @@
+// Copyright (c) 2012 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+cr.define('print_preview', function() {
+  'use strict';
+
+  /**
+   * Component that renders the copies settings UI.
+   *
+   * @param {print_preview.PrintTicketStore!} printTicketStore Used to read and
+   *     write the copies settings.
+   * @constructor
+   * @extends {print_preview.Component}
+   */
+  function CopiesSettings(printTicketStore) {
+    print_preview.Component.call(this);
+
+    /**
+     * Used for writing to the print ticket and validating inputted values.
+     * @type {print_preview.PrintTicketStore!}
+     * @private
+     */
+    this.printTicketStore_ = printTicketStore;
+
+    /**
+     * Timeout used to delay processing of the copies input.
+     * @type {Object}
+     * @private
+     */
+    this.textfieldTimeout_ = null;
+
+    /**
+     * Whether this component is enabled or not.
+     * @type {boolean}
+     * @private
+     */
+    this.isEnabled_ = true;
+  };
+
+  CopiesSettings.Classes_ = {
+    COPIES: 'copies-settings-copies',
+    INCREMENT: 'copies-settings-increment',
+    DECREMENT: 'copies-settings-decrement',
+    HINT: 'copies-settings-hint',
+    COLLATE: 'copies-settings-collate',
+    COLLATE_CHECKBOX: 'copies-settings-collate-checkbox',
+    DUPLEX: 'copies-settings-duplex',
+    DUPLEX_CHECKBOX: 'copies-settings-duplex-checkbox'
+  };
+
+  /**
+   * Delay in milliseconds before processing the textfield.
+   * @type {number}
+   * @private
+   */
+  CopiesSettings.TEXTFIELD_DELAY_ = 250;
+
+  CopiesSettings.prototype = {
+    __proto__: print_preview.Component.prototype,
+
+    set isEnabled(isEnabled) {
+      this.textfield_.disabled = !isEnabled;
+      this.collateCheckbox_.disabled = !isEnabled;
+      this.duplexCheckbox_.disabled = !isEnabled;
+      this.isEnabled_ = isEnabled;
+      this.updateState_();
+    },
+
+    /** @override */
+    enterDocument: function() {
+      print_preview.Component.prototype.enterDocument.call(this);
+      this.tracker.add(
+          this.textfield_, 'keyup', this.onTextfieldKeyUp_.bind(this));
+      this.tracker.add(
+          this.textfield_, 'blur', this.onTextfieldBlur_.bind(this));
+      this.tracker.add(
+          this.incrementButton_, 'click', this.onButtonClicked_.bind(this, 1));
+      this.tracker.add(
+          this.decrementButton_, 'click', this.onButtonClicked_.bind(this, -1));
+      this.tracker.add(
+          this.duplexCheckbox_,
+          'click',
+          this.onDuplexCheckboxClick_.bind(this));
+      this.tracker.add(
+          this.collateCheckbox_,
+          'click',
+          this.onCollateCheckboxClick_.bind(this));
+      this.tracker.add(
+          this.printTicketStore_,
+          print_preview.PrintTicketStore.Event.CAPABILITIES_CHANGE,
+          this.onCapabilitiesChange_.bind(this));
+      this.tracker.add(
+          this.printTicketStore_,
+          print_preview.PrintTicketStore.Event.TICKET_CHANGE,
+          this.onTicketChange_.bind(this));
+    },
+
+    get textfield_() {
+      return this.getElement().getElementsByClassName(
+          CopiesSettings.Classes_.COPIES)[0];
+    },
+
+    get incrementButton_() {
+      return this.getElement().getElementsByClassName(
+          CopiesSettings.Classes_.INCREMENT)[0];
+    },
+
+    get decrementButton_() {
+      return this.getElement().getElementsByClassName(
+          CopiesSettings.Classes_.DECREMENT)[0];
+    },
+
+    get collateCheckbox_() {
+      return this.getElement().getElementsByClassName(
+          CopiesSettings.Classes_.COLLATE_CHECKBOX)[0];
+    },
+
+    get duplexCheckbox_() {
+      return this.getElement().getElementsByClassName(
+          CopiesSettings.Classes_.DUPLEX_CHECKBOX)[0];
+    },
+
+    updateState_: function() {
+      var hintEl = this.getElement().getElementsByClassName(
+          CopiesSettings.Classes_.HINT)[0];
+      if (this.printTicketStore_.isCopiesValid()) {
+        var currentValue = parseInt(this.printTicketStore_.getCopiesStr());
+        if (this.textfield_.value != (currentValue + '')) {
+          this.textfield_.value = currentValue;
+        }
+        this.textfield_.classList.remove('invalid');
+        fadeOutElement(hintEl);
+        hintEl.setAttribute('aria-hidden', true);
+        this.incrementButton_.disabled =
+            !this.isEnabled_ ||
+            !this.printTicketStore_.isCopiesValidForValue(currentValue + 1);
+        this.decrementButton_.disabled =
+            !this.isEnabled_ ||
+            !this.printTicketStore_.isCopiesValidForValue(currentValue - 1);
+        var collate = this.getElement().getElementsByClassName(
+            CopiesSettings.Classes_.COLLATE)[0];
+        collate.hidden =
+            !this.printTicketStore_.hasCollateCapability() ||
+            currentValue <= 1;
+      } else {
+        this.textfield_.classList.add('invalid');
+        hintEl.setAttribute('aria-hidden', false);
+        fadeInElement(hintEl);
+        this.incrementButton_.disabled = true;
+        this.decrementButton_.disabled = true;
+      }
+
+      var isCollate = this.printTicketStore_.isCollateEnabled();
+      if (this.collateCheckbox_.checked != isCollate) {
+        this.collateCheckbox_.checked = isCollate;
+      }
+
+      var isDuplex = this.printTicketStore_.isDuplexEnabled();
+      if (this.duplexCheckbox_.checked != isDuplex) {
+        this.duplexCheckbox_.checked = isDuplex;
+      }
+    },
+
+    onDuplexCheckboxClick_: function() {
+      this.printTicketStore_.updateDuplex(this.duplexCheckbox_.checked);
+    },
+
+    /**
+     * Called whenever the increment/decrement buttons are clicked.
+     * @param {number} delta Must be 1 for an increment button click and -1 for
+     *     a decrement button click.
+     * @private
+     */
+    onButtonClicked_: function(delta) {
+      // Assumes text field has a valid number.
+      var newValue = parseInt(this.textfield_.value) + delta;
+      this.printTicketStore_.updateCopies(newValue);
+    },
+
+    /**
+     * Called after a timeout after user input into the textfield.
+     * @private
+     */
+    onTextfieldTimeout_: function() {
+      if (this.textfield_ != '') {
+        this.printTicketStore_.updateCopies(this.textfield_.value);
+      }
+    },
+
+    /**
+     * Called when a keyup event occurs on the textfield. Starts an input
+     * timeout.
+     * @param {Event} evt Contains the pressed key.
+     * @private
+     */
+    onTextfieldKeyUp_: function(evt) {
+      if (this.textfieldTimeout_) {
+        clearTimeout(this.textfieldTimeout_);
+      }
+      this.textfieldTimeout_ = setTimeout(
+          this.onTextfieldTimeout_.bind(this),
+          CopiesSettings.TEXTFIELD_DELAY_);
+    },
+
+    /**
+     * Called when the focus leaves the textfield. If the textfield is empty,
+     * its value is set to 1.
+     * @private
+     */
+    onTextfieldBlur_: function() {
+      if (this.textfield_.value == '') {
+        this.textfield_.value = '1';
+        this.printTicketStore_.updateCopies('1');
+      }
+    },
+
+    /**
+     * Called when the collate checkbox is clicked. Updates the print ticket.
+     */
+    onCollateCheckboxClick_: function() {
+      this.printTicketStore_.updateCollate(this.collateCheckbox_.checked);
+    },
+
+    /**
+     * Called when the ticket store's capabilities have changed.
+     * @param {cr.Event} evt Contains the new capabilities.
+     * @private
+     */
+    onCapabilitiesChange_: function(evt) {
+      // On Windows, some printers don't specify their duplex values in the
+      // printer schema. If the printer duplex value is UNKNOWN_DUPLEX_MODE,
+      // hide the two sided option in preview tab UI.
+      // Ref bug: http://crbug.com/89204
+      var duplex = this.getElement().getElementsByClassName(
+          CopiesSettings.Classes_.DUPLEX)[0];
+      if (this.printTicketStore_.hasDuplexCapability()) {
+        duplex.checked = this.printTicketStore_.isDuplexEnabled();
+        duplex.hidden = false;
+      } else {
+        duplex.hidden = true;
+      }
+
+      if (this.printTicketStore_.hasCopiesCapability()) {
+        this.textfield_.value = this.printTicketStore_.getCopiesStr();
+        fadeInOption(this.getElement());
+      } else {
+        fadeOutOption(this.getElement());
+      }
+
+      if (this.printTicketStore_.hasCollateCapability()) {
+        this.collateCheckbox_.checked =
+            this.printTicketStore_.isCollateEnabled();
+      }
+
+      this.updateState_();
+    },
+
+    /**
+     * Called when the print ticket changes.
+     * @private
+     */
+    onTicketChange_: function() {
+      this.updateState_();
+    }
+  };
+
+  // Export
+  return {
+    CopiesSettings: CopiesSettings
+  };
+});