Refactor print preview web ui

chrome/browser/resources/print_preview/search/destination_list_item.js

Index: chrome/browser/resources/print_preview/search/destination_list_item.js
diff --git a/chrome/browser/resources/print_preview/search/destination_list_item.js b/chrome/browser/resources/print_preview/search/destination_list_item.js
new file mode 100644
index 0000000000000000000000000000000000000000..13befc158dad7ddf91a000e552f2c03760f3cabc
--- /dev/null
+++ b/chrome/browser/resources/print_preview/search/destination_list_item.js
@@ -0,0 +1,101 @@
+// 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';
+
+  /**
+   * Component that renders a destination item in a destination list.
+   *
+   * @param {!cr.EventTarget} eventTarget Event target to dispatch selection
+   *     events to.
+   * @param {!print_preview.Destination} destination Destination data object to
+   *     render.
+   * @constructor
+   * @extends {print_preview.Component}
+   */
+  function DestinationListItem(eventTarget, destination) {
+    print_preview.Component.call(this);
+
+    /**
+     * Event target to dispatch selection events to.
+     * @type {!cr.EventTarget}
+     * @private
+     */
+    this.eventTarget_ = eventTarget;
+
+    /**
+     * Destination that the widget renders.
+     * @type {!print_preview.Destination}
+     * @private
+     */
+    this.destination_ = destination;
+  };
+
+  /**
+   * Events dispatched by the destination list item.
+   * @enum {string}
+   */
+  DestinationListItem.Event = {
+    SELECT: 'print_preview.DestinationListItem.SELECT'
+  };
+
+  /**
+   * CSS classes used by the destination list item.
+   * @enum {string}
+   * @private
+   */
+  DestinationListItem.Classes_ = {
+    ICON: 'destination-list-item-icon',
+    ICON_CLOUD: 'destination-list-item-icon-cloud',
+    ICON_GOOGLE_SPONSORED: 'destination-list-item-icon-google-sponsored',
+    ICON_LOCAL: 'destination-list-item-icon-local',
+    NAME: 'destination-list-item-name'
+  };
+
+  DestinationListItem.prototype = {
+    __proto__: print_preview.Component.prototype,
+
+    /** @override */
+    createDom: function() {
+      this.setElementInternal(this.cloneTemplateInternal(
+          'destination-list-item-template'));
+      var iconEl = this.getElement().getElementsByClassName(
+          DestinationListItem.Classes_.ICON)[0];
+      if (this.destination_.isLocal) {
+        iconEl.classList.add(DestinationListItem.Classes_.ICON_LOCAL);
+      } else if (this.destination_.isGoogleSponsored) {
+        iconEl.classList.add(
+            DestinationListItem.Classes_.ICON_GOOGLE_SPONSORED);
+      } else {
+        iconEl.classList.add(DestinationListItem.Classes_.ICON_CLOUD);
+      }
+      var nameEl = this.getElement().getElementsByClassName(
+          DestinationListItem.Classes_.NAME)[0];
+      nameEl.textContent = this.destination_.displayName;
+    },
+
+    /** @override */
+    enterDocument: function() {
+      print_preview.Component.prototype.enterDocument.call(this);
+      this.tracker.add(this.getElement(), 'click', this.onActivate_.bind(this));
+    },
+
+    /**
+     * Called when the destination item is activated. Dispatches a SELECT event
+     * on the given event target.
+     * @private
+     */
+    onActivate_: function() {
+      var selectEvt = new cr.Event(DestinationListItem.Event.SELECT);
+      selectEvt.destination = this.destination_;
+      this.eventTarget_.dispatchEvent(selectEvt);
+    }
+  };
+
+  // Export
+  return {
+    DestinationListItem: DestinationListItem
+  };
+});