Refactor print preview web ui

chrome/browser/resources/print_preview/search/destination_list.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';
+
+  /**
+   * Component that displays a list of destinations with a heading, action link,
+   * and "Show All..." button. An event is dispatched when the action link is
+   * activated.
+   *
+   * @param {cr.EventTarget} eventTarget Event target to pass to destination
+   *     items for dispatching SELECT events.
+   * @param {string} title Title of the destination list.
+   * @param {number?} opt_maxSize Maximum size of the list. If not specified,
+   *     defaults to no max.
+   * @param {string?} opt_actionLinkLabel Optional label of the action link. If
+   *     no label is provided, the action link will not be shown.
+   * @constructor
+   * @extends {print_preview.Component}
+   */
+  function DestinationList(
+      eventTarget, title, opt_maxSize, opt_actionLinkLabel) {
+    print_preview.Component.call(this);
+
+    /**
+     * Event target to pass to destination items for dispatching SELECT events.
+     * @private
+     */
+    this.eventTarget_ = eventTarget;
+
+    /**
+     * Title of the destination list.
+     * @type {string}
+     * @private
+     */
+    this.title_ = title;
+
+    /**
+     * Maximum size of the destination list.
+     * @type {number}
+     * @private
+     */
+    this.maxSize_ = opt_maxSize || 0;
+    if (this.maxSize_ > DestinationList.SHORT_LIST_SIZE_) {
+      throw Error(
+          'Max size must be less than ' + DestinationList.SHORT_LIST_SIZE_);
+    }
+
+    /**
+     * Label of the action link.
+     * @type {string?}
+     * @private
+     */
+    this.actionLinkLabel_ = opt_actionLinkLabel || null;
+
+    /**
+     * Backing store for the destination list.
+     * @type {Array.<print_preview.Destination>}
+     * @private
+     */
+    this.destinations_ = [];
+
+    /**
+     * Current query used for filtering.
+     * @type {string?}
+     * @private
+     */
+    this.query_ = null;
+
+    /**
+     * Whether the destination list is fully expanded.
+     * @type {boolean}
+     * @private
+     */
+    this.isShowAll_ = false;
+  };
+
+  /**
+   * Enumeration of events dispatched by the destination list.
+   * @enum {string}
+   */
+  DestinationList.Event = {
+    ACTION_LINK_ACTIVATED: 'print_preview.DestinationList.ACTION_LINK_ACTIVATED'
+  };
+
+  /**
+   * Classes used by the destination list.
+   * @enum {string}
+   * @private
+   */
+  DestinationList.Classes_ = {
+    ACTION_LINK: 'destination-list-action-link',
+    FOOTER: 'destination-list-footer',
+    NO_PRINTERS_MESSAGE: 'destination-list-no-destinations-message',
+    PRINTER_ITEM_CONTAINER: 'destination-list-destination-list-item-container',
+    SHOW_ALL_BUTTON: 'destination-list-show-all-button',
+    TITLE: 'destination-list-title',
+    TOTAL_COUNT: 'destination-list-total-count'
+  };
+
+  /**
+   * Maximum number of destinations before showing the 'Show All...' button.
+   * @type {number}
+   * @const
+   * @private
+   */
+  DestinationList.SHORT_LIST_SIZE_ = 5;
+
+  DestinationList.prototype = {
+    __proto__: print_preview.Component.prototype,
+
+    set isShowAll(isShowAll) {
+      this.isShowAll_ = isShowAll;
+      this.renderDestinations_();
+    },
+
+    /** @override */
+    createDom: function() {
+      this.setElementInternal(this.cloneTemplateInternal(
+          'destination-list-template'));
+
+      var titleEl = this.getElement().getElementsByClassName(
+          DestinationList.Classes_.TITLE)[0];
+      titleEl.textContent = this.title_;
+
+      var actionLinkEl = this.getElement().getElementsByClassName(
+          DestinationList.Classes_.ACTION_LINK)[0];
+      actionLinkEl.textContent = this.actionLinkLabel_;
+    },
+
+    /** @override */
+    enterDocument: function() {
+      print_preview.Component.prototype.enterDocument.call(this);
+      var actionLinkEl = this.getElement().getElementsByClassName(
+          DestinationList.Classes_.ACTION_LINK)[0];
+      var showAllButton = this.getElement().getElementsByClassName(
+          DestinationList.Classes_.SHOW_ALL_BUTTON)[0];
+      this.tracker.add(
+          actionLinkEl, 'click', this.onActionLinkClick_.bind(this));
+      this.tracker.add(
+          showAllButton, 'click', this.onShowAllButtonClick_.bind(this));
+    },
+
+    /**
+     * Updates the destinations to render in the destination list.
+     * @param {Array.<print_preview.Destination>} destinations Destinations to
+     *     render.
+     */
+    updateDestinations: function(destinations) {
+      this.destinations_ = destinations;
+      this.renderDestinations_();
+    },
+
+    /**
+     * Filters the destination list with the given query.
+     * @param {string?} query Query to filter the list with.
+     */
+    filter: function(query) {
+      this.query_ = query;
+      this.renderDestinations_();
+    },
+
+    get noDestinationsMessageEl_() {
+      return this.getElement().getElementsByClassName(
+          DestinationList.Classes_.NO_PRINTERS_MESSAGE)[0];
+    },
+
+    get footerEl_() {
+      return this.getElement().getElementsByClassName(
+          DestinationList.Classes_.FOOTER)[0];
+    },
+
+    get destinationListItemContainer_() {
+      return this.getElement().getElementsByClassName(
+          DestinationList.Classes_.PRINTER_ITEM_CONTAINER)[0];
+    },
+
+    /**
+     * Renders all destinations in the list that match the current query. For
+     * each render, all old destination items are first removed.
+     * @private
+     */
+    renderDestinations_: function() {
+      this.removeChildren();
+
+      var filteredDests = [];
+      for (var destination, i = 0; destination = this.destinations_[i]; i++) {
+        if (!this.query_ || destination.matches(this.query_)) {
+          filteredDests.push(destination);
+        }
+      }
+
+      // TODO Sort filtered list?
+
+      if (filteredDests.length == 0) {
+        this.renderEmptyList_();
+      } else if (this.maxSize_) {
+        this.renderListWithMaxSize_(filteredDests);
+      } else {
+        this.renderListWithNoMaxSize_(filteredDests);
+      }
+    },
+
+    renderEmptyList_: function() {
+      this.noDestinationsMessageEl_.style.display = '';
+      this.footerEl_.style.display = 'none';
+    },
+
+    renderListWithMaxSize_: function(filteredDests) {
+      this.noDestinationsMessageEl_.style.display = 'none';
+      this.footerEl_.style.display = 'none';
+      var destListItemContainerEl = this.destinationListItemContainer_;
+      for (var dest, i = 0;
+           i < this.maxSize_ && (dest = filteredDests[i]);
+           i++) {
+        var destListItem = new print_preview.DestinationListItem(
+            this.eventTarget_, dest);
+        this.addChild(destListItem);
+        destListItem.render(destListItemContainerEl);
+      }
+    },
+
+    renderListWithNoMaxSize_: function(filteredDests) {
+      this.noDestinationsMessageEl_.style.display = 'none';
+      var destListItemContainerEl = this.destinationListItemContainer_;
+      if (filteredDests.length <= DestinationList.SHORT_LIST_SIZE_ ||
+          this.isShowAll_) {
+        for (var dest, i = 0; dest = filteredDests[i]; i++) {
+          var destListItem = new print_preview.DestinationListItem(
+              this.eventTarget_, dest);
+          this.addChild(destListItem);
+          destListItem.render(destListItemContainerEl);
+        }
+        this.footerEl_.style.display = 'none';
+      } else {
+        for (var dest, i = 0; i < DestinationList.SHORT_LIST_SIZE_ - 1; i++) {
+          var destListItem = new print_preview.DestinationListItem(
+              this.eventTarget_, filteredDests[i]);
+          this.addChild(destListItem);
+          destListItem.render(destListItemContainerEl);
+        }
+        this.footerEl_.style.display = '';
+        var totalCountEl = this.getElement().getElementsByClassName(
+            DestinationList.Classes_.TOTAL_COUNT)[0];
+        totalCountEl.textContent = filteredDests.length + '';
+      }
+    },
+
+    /**
+     * Called when the action link is clicked. Dispatches an
+     * ACTION_LINK_ACTIVATED event.
+     * @private
+     */
+    onActionLinkClick_: function() {
+      cr.dispatchSimpleEvent(this, DestinationList.Event.ACTION_LINK_ACTIVATED);
+      return false;
+    },
+
+    /**
+     * Called when the "Show All..." button is clicked. Renders all
+     * destinations.
+     * @private
+     */
+    onShowAllButtonClick_: function() {
+      this.isShowAll_ = true;
+      this.renderDestinations_();
+    }
+  };
+
+  // Export
+  return {
+    DestinationList: DestinationList
+  };
+});