Refactor print preview web ui

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

Index: chrome/browser/resources/print_preview/settings/destination_settings.js
diff --git a/chrome/browser/resources/print_preview/settings/destination_settings.js b/chrome/browser/resources/print_preview/settings/destination_settings.js
new file mode 100644
index 0000000000000000000000000000000000000000..18df36e019a0fd4e9ff322859adece0ebde05e0e
--- /dev/null
+++ b/chrome/browser/resources/print_preview/settings/destination_settings.js
@@ -0,0 +1,122 @@
+// 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';
+
+  // TODO This class needs a throbber while loading the destination.
+
+  /**
+   * Component used to render the print destination.
+   *
+   * The component dispatches a CHANGE event when it's "Change" button is
+   * clicked.
+   *
+   * @param {print_preview.DestinationStore!} destinationStore Used to determine
+   *     the selected destination.
+   * @constructor
+   * @extends {print_preview.Component}
+   */
+  function DestinationSettings(destinationStore) {
+    print_preview.Component.call(this);
+
+    /**
+     * Used to determine the selected destination.
+     * @type {print_preview.DestinationStore!}
+     * @private
+     */
+    this.destinationStore_ = destinationStore;
+  };
+
+  /**
+   * Enumeration of events the component dispatches.
+   * @enum {string}
+   */
+  DestinationSettings.Event = {
+    CHANGE_BUTTON_ACTIVATE:
+        'print_preview.DestinationSettings.CHANGE_BUTTON_ACTIVATE'
+  };
+
+  /**
+   * CSS classes used by the component.
+   * @enum {string}
+   * @private
+   */
+  DestinationSettings.Classes_ = {
+    CHANGE_BUTTON: 'destination-settings-change-button',
+    ICON: 'destination-settings-icon',
+    ICON_CLOUD: 'destination-settings-icon-cloud',
+    ICON_LOCAL: 'destination-settings-icon-local',
+    ICON_GOOGLE_SPONSORED: 'destination-settings-icon-google-sponsored',
+    LOCATION: 'destination-settings-location',
+    NAME: 'destination-settings-name'
+  };
+
+  DestinationSettings.prototype = {
+    __proto__: print_preview.Component.prototype,
+
+    set isEnabled(isEnabled) {
+      var changeButton = this.getElement().getElementsByClassName(
+          DestinationSettings.Classes_.CHANGE_BUTTON)[0];
+      changeButton.disabled = !isEnabled;
+    },
+
+    /** @override */
+    enterDocument: function() {
+      print_preview.Component.prototype.enterDocument.call(this);
+      var changeButton = this.getElement().getElementsByClassName(
+          DestinationSettings.Classes_.CHANGE_BUTTON)[0];
+      this.tracker.add(
+          changeButton, 'click', this.onChangeButtonClick_.bind(this));
+      this.tracker.add(
+          this.destinationStore_,
+          print_preview.DestinationStore.Event.DESTINATION_SELECT,
+          this.onDestinationSelect_.bind(this));
+    },
+
+    /**
+     * Called when the "Change" button is clicked. Dispatches the
+     * CHANGE_BUTTON_ACTIVATE event.
+     * @private
+     */
+    onChangeButtonClick_: function() {
+      cr.dispatchSimpleEvent(
+          this, DestinationSettings.Event.CHANGE_BUTTON_ACTIVATE);
+    },
+
+    /**
+     * Called when the destination selection has changed. Updates UI elements.
+     * @private
+     */
+    onDestinationSelect_: function() {
+      var destination = this.destinationStore_.selectedDestination;
+      var nameEl = this.getElement().getElementsByClassName(
+          DestinationSettings.Classes_.NAME)[0];
+      nameEl.textContent = destination.displayName;
+
+      var iconEl = this.getElement().getElementsByClassName(
+          DestinationSettings.Classes_.ICON)[0];
+      iconEl.classList.remove(DestinationSettings.Classes_.ICON_LOCAL);
+      iconEl.classList.remove(DestinationSettings.Classes_.ICON_CLOUD);
+      iconEl.classList.remove(
+          DestinationSettings.Classes_.ICON_GOOGLE_SPONSORED);
+      if (destination.isGoogleSponsored) {
+        iconEl.classList.add(
+            DestinationSettings.Classes_.ICON_GOOGLE_SPONSORED);
+      } else if (destination.isLocal) {
+        iconEl.classList.add(DestinationSettings.Classes_.ICON_LOCAL);
+      } else {
+        iconEl.classList.add(DestinationSettings.Classes_.ICON_CLOUD);
+      }
+
+      var locationEl = this.getElement().getElementsByClassName(
+          DestinationSettings.Classes_.LOCATION)[0];
+      locationEl.textContent = destination.location;
+    }
+  };
+
+  return {
+    DestinationSettings: DestinationSettings
+  };
+});