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_() {

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

"get foo()" syntax for private functions seems unnecessary.

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

What do you suggest? a "getSelect_" method?

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

Either a getSelect_, or adding a select_ member variable and initialize it in
enterDocument(). I prefer the second option beacause 
 - you don't have to search the DOM every time you need to access the drop down
and
 - you don't even need a getter function, just access select_ directly.

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

Done.

+      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 = parseInt(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();
+        if (marginsType != select.selectedIndex) {
+          select.options[select.selectedIndex].selected = false;
+          select.options[marginsType].selected = true;
+        }
+        fadeInOption(this.getElement());
+      } else {
+        fadeOutOption(this.getElement());
+      }
+    }
+  };
+
+  // Export
+  return {
+    MarginSettings: MarginSettings
+  };
+});