Refactor print preview web ui

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

+// 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 MarginSettings object. This object encapsulates all settings and
+   * logic related to the margins mode.
+   *
+   * @param {!print_preview.PrintTicketStore} printTicketStore Used to get
+   *     ticket margins value.
+   * @constructor
+   * @extends {print_preview.Component}
+   */
+  function MarginSettings(printTicketStore) {
+    print_preview.Component.call(this);
+
+    /**
+     * Used to get ticket margins value.
+     * @type {!print_preview.PrintTicketStore}
+     * @private
+     */
+    this.printTicketStore_ = printTicketStore;
+
+    /**
+     * @private
+     */
+    this.marginsUI_ = null;
+
+    /**
+     * Holds the custom margin values in points (if set).
+     * @type {print_preview.Margins}
+     * @private
+     */
+    this.customMargins_ = null;
+
+    /**
+     * Holds the previous custom margin values in points.
+     * @type {print_preview.Margins}
+     * @private
+     */
+    this.previousCustomMargins_ = null;
+
+    /**
+     * Holds the width of the page in points.
+     * @type {number}
+     * @private
+     */
+    this.pageWidth_ = -1;
+
+    /**
+     * Holds the height of the page in points.
+     * @type {number}
+     * @private
+     */
+    this.pageHeight_ = -1;
+
+    /**
+     * True if the margins UI should be diplayed when the next
+     * |customEvents.PDF_LOADED| event occurs.
+     * @type {boolean}
+     * @private
+     */
+    this.forceMarginsUIOnPDFLoad_ = false;
+
+    /**
+     * Holds the currently updated default page layout values.
+     * @type {print_preview.PageLayout}
+     * @private
+     */
+    this.currentDefaultPageLayout = null;
+
+    /**
+     * True if the margins UI should be shown regardless of mouse position.
+     * @private
+     */
+    this.forceDisplayingMarginLines_ = true;
+  };
+
+  /**
+   * Minimum allowed distance in points between top-bottom, left-right margins.
+   * @type {number}
+   * @private
+   */
+  MarginSettings.MINIMUM_MARGINS_DISTANCE_ = 36;
+
+  /**
+   * Default Margins option index.
+   * @type {string}
+   * @private
+   */
+  MarginSettings.DEFAULT_MARGINS_VALUE_ = 0;
+
+  /**
+   * CSS classes used by the margin settings component.
+   * @enum {string}
+   * @private
+   */
+  MarginSettings.Classes_ = {
+    SELECT: 'margin-settings-select'
+  };
+
+  MarginSettings.prototype = {
+    __proto__: print_preview.Component.prototype,
+
+    set isEnabled(isEnabled) {
+      this.select_.disabled = !isEnabled;
+    },
+
+    /** @override */
+    enterDocument: function() {
+      print_preview.Component.prototype.enterDocument.call(this);
+      this.tracker.add(
+          this.select_, 'change', this.onSelectChange_.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));
+    },
+
+    /**
+     * @return {HTMLSelectElement} Select element containing the margin options.
+     * @private
+     */
+    get select_() {
+      return this.getElement().getElementsByClassName(
+          MarginSettings.Classes_.SELECT)[0];
+    },
+
+    /**
+     * Called when the select element is changed. Updates the print ticket
+     * margin type.
+     * @private
+     */
+    onSelectChange_: function() {
+      var select = this.select_;
+      var marginsType = /** @type {print_preview.Margins.Type} */ (
+          select.options[select.selectedIndex].value);
+      this.printTicketStore_.updateMarginsType(marginsType);
+    },
+
+    /**
+     * Called when the print ticket store changes.
+     * @private
+     */
+    onPrintTicketStoreChange_: function() {
+      if (this.printTicketStore_.hasMarginsCapability()) {
+        var select = this.select_;
+        var marginsType = this.printTicketStore_.getMarginsType();
+        var selectedOption = select.options[select.selectedIndex];
+        if (marginsType != selectedOption.value) {
+          selectedOption.selected = false;
+          for (var option, i = 0; option = select.options[i]; i++) {
+            if (option.value == marginsType) {
+              option.selected = true;
+              break;
+            }
+          }
+        }
+        fadeInOption(this.getElement());
+      } else {
+        fadeOutOption(this.getElement());
+      }
+    }
+  };
+
+  // Export
+  return {
+    MarginSettings: MarginSettings
+  };
+});