Refactor print preview web ui

chrome/browser/resources/print_preview/settings/layout_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 LayoutSettings object. This object encapsulates all settings and
+   * logic related to layout mode (portrait/landscape).
+   *
+   * @param {!print_preview.PrintTicketStore} printTicketStore Used to get the
+   *     layout written to the print ticket.
+   * @constructor
+   * @extends {print_preview.Component}
+   */
+  function LayoutSettings(printTicketStore) {
+    print_preview.Component.call(this);
+
+    /**
+     * Used to get the layout written to the print ticket.
+     * @type {!print_preview.PrintTicketStore}
+     * @private
+     */
+    this.printTicketStore_ = printTicketStore;
+  };
+
+  /**
+   * CSS classes used by the layout settings.
+   * @enum {string}
+   * @private
+   */
+  LayoutSettings.Classes_ = {
+    LANDSCAPE_RADIO: 'layout-settings-landscape-radio',

[dpapad, 2012/04/24 01:24:56]

Why using classes and not id's for unique elements?

[Robert Toscano, 2012/04/24 22:29:56]

Using class names will allow the component to be more modular. I.e. you will be
able to have multiple layoutsettings on the page. This might be useful for unit
testing or demoing. But if you use IDs within this component, then you create an
implicit contract between this component and the HTML document it's being used
in.

What do you think?

+    PORTRAIT_RADIO: 'layout-settings-portrait-radio'
+  };
+
+  LayoutSettings.prototype = {
+    __proto__: print_preview.Component.prototype,
+
+    set isEnabled(isEnabled) {
+      this.landscapeRadioButton_.disabled = !isEnabled;
+      this.portraitRadioButton_.disabled = !isEnabled;
+    },
+
+    /** @override */
+    enterDocument: function() {
+      print_preview.Component.prototype.enterDocument.call(this);
+      this.addEventListeners_();
+    },
+
+    get portraitRadioButton_() {
+      return this.getElement().getElementsByClassName(

[dpapad, 2012/04/24 01:24:56]

This could be getElementById() combined with previous comment.

[Robert Toscano, 2012/04/24 22:29:56]

See previous comment.

+          LayoutSettings.Classes_.PORTRAIT_RADIO)[0];
+    },
+
+    get landscapeRadioButton_() {
+      return this.getElement().getElementsByClassName(
+          LayoutSettings.Classes_.LANDSCAPE_RADIO)[0];
+    },
+
+    /**
+     * Adding listeners to all layout related controls. The listeners take care
+     * of altering their behavior depending on |hasPendingPreviewRequest|.
+     * @private
+     */
+    addEventListeners_: function() {
+      this.tracker.add(
+          this.portraitRadioButton_,
+          'click',
+          this.onLayoutButtonClick_.bind(this));
+      this.tracker.add(
+          this.landscapeRadioButton_,
+          'click',
+          this.onLayoutButtonClick_.bind(this));
+      this.tracker.add(
+          this.printTicketStore_,
+          print_preview.PrintTicketStore.DOCUMENT_CHANGE,
+          this.onDocumentOrCapabilitiesChange_.bind(this));
+      this.tracker.add(
+          this.printTicketStore_,
+          print_preview.PrintTicketStore.CAPABILITIES_CHANGE,
+          this.onDocumentOrCapabilitiesChange_.bind(this));
+      this.tracker.add(
+          this.printTicketStore_,
+          print_preview.PrintTicketStore.TICKET_CHANGE,
+          this.onTicketChange_);
+    },
+
+    /**
+     * Called when one of the radio buttons is clicked. Updates the print ticket
+     * store.
+     * @private
+     */
+    onLayoutButtonClick_: function() {
+      this.printTicketStore_.updateOrientation(
+          this.landscapeRadioButton_.checked);
+    },
+
+    onDocumentOrCapabilitiesChange_: function() {
+      if (this.printTicketStore_.hasLayoutCapability()) {
+        var isLandscapeEnabled = this.printTicketStore_.isLandscapeEnabled();
+        this.portraitRadioButton_.checked = !isLandscapeEnabled;
+        this.landscapeRadioButton_.checked = isLandscapeEnabled;
+        fadeInOption(this.getElement());
+      } else {
+        fadeOutOption(this.getElement());
+      }
+    },
+
+    onTicketChange_: function() {
+      if (this.printTicketStore_.hasLayoutCapability()) {
+        var isLandscapeEnabled = this.printTicketStore_.isLandscapeEnabled();
+        this.portraitRadioButton_.checked = !isLandscapeEnabled;
+        this.landscapeRadioButton_.checked = isLandscapeEnabled;
+      }
+    }
+  };
+
+  // Export
+  return {
+    LayoutSettings: LayoutSettings
+  };
+});