Refactor print preview web ui

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

Index: chrome/browser/resources/print_preview/settings/page_settings.js
diff --git a/chrome/browser/resources/print_preview/settings/page_settings.js b/chrome/browser/resources/print_preview/settings/page_settings.js
new file mode 100644
index 0000000000000000000000000000000000000000..f5cfd5d6bf7a28f7055df446758e5312f58eebb6
--- /dev/null
+++ b/chrome/browser/resources/print_preview/settings/page_settings.js
@@ -0,0 +1,189 @@
+// 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';
+
+  /**
+   * Creates a PageSettings object. This object encapsulates all settings and
+   * logic related to page selection.
+   *
+   * @param {print_preview.PrintTicketStore} printTicketStore Used to read and
+   *     write page range settings.
+   * @constructor
+   * @extends {print_preview.Component}
+   */
+  function PageSettings(printTicketStore) {
+    print_preview.Component.call(this);
+
+    /**
+     * Used to read and write page range settings.
+     * @type {print_preview.PrintTicketStore}
+     * @private
+     */
+    this.printTicketStore_ = printTicketStore;
+
+    /**
+     * Timeout used to delay processing of the custom page range input.
+     * @type {Object}
+     * @private
+     */
+    this.customInputTimeout_ = null;
+  };
+
+  /**
+   * CSS classes used by the page settings.
+   * @enum {string}
+   * @private
+   */
+  PageSettings.Classes_ = {
+    ALL_RADIO: 'page-settings-all-radio',
+    CUSTOM_HINT: 'page-settings-custom-hint',
+    CUSTOM_INPUT: 'page-settings-custom-input',
+    CUSTOM_RADIO: 'page-settings-custom-radio'
+  };
+
+  /**
+   * Delay in milliseconds before processing custom page range input.
+   * @type {number}
+   * @private
+   */
+  PageSettings.CUSTOM_INPUT_DELAY_ = 500;
+
+  PageSettings.prototype = {
+    __proto__: print_preview.Component.prototype,
+
+    set isEnabled(isEnabled) {

[dpapad1, 2012/04/26 16:04:44]

I would name this setEnabled() instead of set isEnabled(). is*** implies that
this is a function with no side effects that returns a boolean. Also I prefer
avoiding the "set foo()" syntax if there is no corresponding get function.

[Robert Toscano, 2012/04/28 01:41:37]

I wanted to model this after dom elements that have just properties (not
methods). E.g. disabled: "domEl.disabled = true;". But if you think the
getter/setter is confusing I can change it to use a regular method. But what
about the name setIsEnabled?

[dpapad, 2012/04/30 16:19:25]

Ok, so I see two possible namings.
 - If you prefer modeling this after DOM Elements, rename it to "enabled" and
keep the set syntax as is.
 - Otherwise rename to "setIsEnabled" or "setEnabled" both seem fine to me.

[Robert Toscano, 2012/05/05 00:02:50]

Done.

+      this.customInput_.disabled = !isEnabled;
+      this.allRadio_.disabled = !isEnabled;
+      this.customRadio_.disabled = !isEnabled;
+    },
+
+    /** @override */
+    enterDocument: function() {
+      print_preview.Component.prototype.enterDocument.call(this);
+      this.customHintEl_.textContent = localStrings.getStringF(
+          'pageRangeInstruction',
+          localStrings.getString('examplePageRangeText'));
+      this.tracker.add(
+          this.allRadio_, 'click', this.onAllRadioClick_.bind(this));
+      this.tracker.add(
+          this.customRadio_, 'click', this.onCustomRadioClick_.bind(this));
+      this.tracker.add(
+          this.customInput_, 'blur', this.onCustomInputBlur_.bind(this));
+      this.tracker.add(
+          this.customInput_, 'keyup', this.onCustomInputKeyUp_.bind(this));
+      this.tracker.add(
+          this.printTicketStore_,
+          print_preview.PrintTicketStore.Event.DOCUMENT_CHANGE,
+          this.onPrintTicketStoreChange_.bind(this));
+      this.tracker.add(
+          this.printTicketStore_,
+          print_preview.PrintTicketStore.Event.TICKET_CHANGE,
+          this.onPrintTicketStoreChange_.bind(this));
+      this.tracker.add(
+          this.printTicketStore_,
+          print_preview.PrintTicketStore.Event.CAPABILITIES_CHANGE,
+          this.onPrintTicketStoreChange_.bind(this));
+    },
+
+    get customInput_() {
+      return this.getElement().getElementsByClassName(
+          PageSettings.Classes_.CUSTOM_INPUT)[0];
+    },
+
+    get allRadio_() {
+      return this.getElement().getElementsByClassName(
+          PageSettings.Classes_.ALL_RADIO)[0];
+    },
+
+    get customRadio_() {
+      return this.getElement().getElementsByClassName(
+          PageSettings.Classes_.CUSTOM_RADIO)[0];
+    },
+
+    get customHintEl_() {
+      return this.getElement().getElementsByClassName(
+          PageSettings.Classes_.CUSTOM_HINT)[0];
+    },
+
+    setInvalidStateVisible_: function(isVisible) {
+      if (isVisible) {
+        this.customInput_.classList.add('invalid');
+        this.customHintEl_.setAttribute('aria-hidden', 'false');
+        fadeInElement(this.customHintEl_);
+      } else {
+        this.customInput_.classList.remove('invalid');
+        fadeOutElement(this.customHintEl_);
+        this.customHintEl_.setAttribute('aria-hidden', 'true');
+      }
+    },
+
+    onAllRadioClick_: function() {
+      this.printTicketStore_.updatePageRange('');
+    },
+
+    onCustomRadioClick_: function() {
+      this.customInput_.focus();
+      this.printTicketStore_.updatePageRange(this.customInput_.value);
+    },
+
+    onCustomInputBlur_: function() {
+      if (this.customInput_.value == '') {
+        this.allRadio_.checked = true;
+        this.customRadio_.checked = false;
+      }
+    },
+
+    onCustomInputKeyUp_: function(evt) {
+      if (this.customInputTimeout_) {
+        clearTimeout(this.customInputTimeout_);
+      }
+      if (evt.keyIdentifier == 'Enter') {
+        this.printTicketStore_.updatePageRange(this.customInput_.value);
+      } else {
+        this.allRadio_.checked = false;
+        this.customRadio_.checked = true;
+        this.customInputTimeout_ = setTimeout(
+            this.onCustomInputTimeout_.bind(this),
+            PageSettings.CUSTOM_INPUT_DELAY_);
+      }
+    },
+
+    onCustomInputTimeout_: function() {
+      this.customInputTimeout_ = null;
+      if (this.customRadio_.checked) {
+        this.printTicketStore_.updatePageRange(this.customInput_.value);
+      }
+    },
+
+    onPrintTicketStoreChange_: function() {
+      if (this.printTicketStore_.hasPageRangeCapability()) {
+        var pageRangeStr = this.printTicketStore_.getPageRangeStr();
+        if (pageRangeStr) {
+          // TODO There might be a bad case here where we overwrite what the
+          // user is typing. Also could be the case in copies.
+          this.customInput_.value = pageRangeStr;
+          this.customRadio_.checked = true;
+          this.allRadio_.checked = false;
+          this.setInvalidStateVisible_(
+              !this.printTicketStore_.isPageRangeValid());
+        } else {
+          this.allRadio_.checked = true;
+          this.customRadio_.checked = false;
+          this.customInput_.value = '';
+          this.setInvalidStateVisible_(false);
+        }
+        fadeInOption(this.getElement());
+      } else {
+        fadeOutOption(this.getElement());
+      }
+    }
+  };
+
+  // Export
+  return {
+    PageSettings: PageSettings
+  };
+});