Refactor print preview web ui

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

Index: chrome/browser/resources/print_preview/settings/header_footer_settings.js
diff --git a/chrome/browser/resources/print_preview/settings/header_footer_settings.js b/chrome/browser/resources/print_preview/settings/header_footer_settings.js
new file mode 100644
index 0000000000000000000000000000000000000000..3ddb945f01514f213c8a2d6627548b86c6b7c85d
--- /dev/null
+++ b/chrome/browser/resources/print_preview/settings/header_footer_settings.js
@@ -0,0 +1,107 @@
+// 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 HeaderFooterSettings object. This object encapsulates all
+   * settings and logic related to the headers and footers checkbox.
+   *
+   * @param {print_preview.PrintTicketStore} printTicketStore Used to monitor
+   *     the state of the print ticket.
+   * @constructor
+   * @extends {print_preview.Component}
+   */
+  function HeaderFooterSettings(printTicketStore) {
+    print_preview.Component.call(this);
+
+    /**
+     * Used to monitor the state of the print ticket.
+     * @type {print_preview.PrintTicketStore}
+     * @private
+     */
+    this.printTicketStore_ = printTicketStore;
+  };
+
+  /**
+   * CSS classes used by the header footer settings.
+   * @enum {string}
+   * @private
+   */
+  HeaderFooterSettings.Classes_ = {
+    CHECKBOX: 'header-footer-settings-checkbox'
+  };
+
+  HeaderFooterSettings.prototype = {
+    __proto__: print_preview.Component.prototype,
+
+    set isEnabled(isEnabled) {
+      this.checkbox_.disabled = !isEnabled;
+    },
+
+    /** @override */
+    enterDocument: function() {
+      print_preview.Component.prototype.enterDocument.call(this);
+      this.addEventListeners_();
+    },
+
+    /**
+     * @return {HTMLInputElement} The header-footer checkbox element.
+     * @private
+     */
+    get checkbox_() {
+      return this.getElement().getElementsByClassName(
+          HeaderFooterSettings.Classes_.CHECKBOX)[0];
+    },
+
+    /**
+     * Adding listeners to header footer related controls.
+     * @private
+     */
+    addEventListeners_: function() {
+      this.tracker.add(
+          this.checkbox_, 'click', this.onCheckboxClick_.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.CAPABILITIES_CHANGE,
+          this.onPrintTicketStoreChange_.bind(this));
+      this.tracker.add(
+          this.printTicketStore_,
+          print_preview.PrintTicketStore.Event.TICKET_CHANGE,
+          this.onPrintTicketStoreChange_.bind(this));
+    },
+
+    /**
+     * Called when the checkbox is clicked. Updates the print ticket.
+     * @private
+     */
+    onCheckboxClick_: function() {
+      this.printTicketStore_.updateHeaderFooter(this.checkbox_.checked);
+    },
+
+    /**
+     * Called when the print ticket store has changed. Hides or shows the
+     * setting.
+     * @private
+     */
+    onPrintTicketStoreChange_: function() {
+      if (this.printTicketStore_.hasHeaderFooterCapability()) {
+        this.checkbox_.checked = this.printTicketStore_.isHeaderFooterEnabled();
+        fadeInOption(this.getElement());
+      } else {
+        fadeOutOption(this.getElement());
+      }
+    }
+  };
+
+  // Export
+  return {
+    HeaderFooterSettings: HeaderFooterSettings
+  };
+});