Refactor print preview web ui

chrome/browser/resources/print_preview/search/destination_search.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.
+
+// TODO Make sub classes for this widget, one for chrome (logged in and not
+// logged in) and one for chrome OS.
+
+cr.define('print_preview', function() {
+  'use strict';
+
+  /**
+   * Component used for searching for a print destination.
+   *
+   * This is a modal dialog that allows the user to search and select a
+   * destination to print to. When a destination is selected, it is written to
+   * the destination store.
+   *
+   * @param {!print_preview.DestinationStore} destinationStore Data store
+   *     containing the destinations to search through.
+   * @constructor
+   * @extends {print_preview.Component}
+   */
+  function DestinationSearch(destinationStore) {
+    print_preview.Component.call(this);
+
+    /**
+     * Data store containing the destinations to search through.
+     * @type {!print_preview.DestinationStore}
+     * @private
+     */
+    this.destinationStore_ = destinationStore;
+
+    /**
+     * Search box used to search through the destination lists.
+     * @type {print_preview.SearchBox}
+     * @private
+     */
+    this.searchBox_ = new print_preview.SearchBox();
+    this.addChild(this.searchBox_);
+
+    /**
+     * Destination list containing recent destinations.
+     * @type {print_preview.DestinationList}
+     * @private
+     */
+    this.recentList_ = new print_preview.DestinationList(
+        this, 'Recent Destinations', 3);
+    this.addChild(this.recentList_);
+
+    /**
+     * Destination list containing local destinations.
+     * TODO Internationalize link text
+     * @type {print_preview.DestinationList}
+     * @private
+     */
+    this.localList_ = new print_preview.DestinationList(
+        this,
+        'Local Destinations',
+        0 /*opt_maxSize*/,
+        'Manage Local Printers...');
+    this.addChild(this.localList_);
+
+    /**
+     * Destination list containing cloud destinations.
+     * TODO Internationalize link text
+     * @type {print_preview.DestinationList}
+     * @private
+     */
+    this.cloudList_ = new print_preview.DestinationList(
+        this,
+        'Cloud Destinations',
+        0 /*opt_maxSize*/,
+        'Manage Google Cloud Print...');
+    this.addChild(this.cloudList_);
+  };
+
+  DestinationSearch.Event = {
+    SIGN_IN: 'print_preview.DestinationSearch.SIGN_IN'
+  },
+
+  /**
+   * CSS classes used by the search widget.
+   * @enum {string}
+   * @private
+   */
+  DestinationSearch.Classes_ = {
+    CLOSE_BUTTON: 'destination-search-close-button',
+    CLOUDPRINT_PROMO: 'destination-search-cloudprint-promo',
+    CLOUD_LIST: 'destination-search-cloud-list',
+    LOCAL_LIST: 'destination-search-local-list',
+    RECENT_LIST: 'destination-search-recent-list',
+    SEARCH_BOX_CONTAINER: 'destination-search-search-box-container',
+    SIGN_IN: 'destination-search-sign-in',
+    USER_EMAIL: 'destination-search-user-email',
+    USER_INFO: 'destination-search-user-info'
+  };
+
+  /**
+   * Chrome API ID of the manage cloud printers action.
+   * @type {string}
+   * @private
+   */
+  DestinationSearch.MANAGE_CLOUD_PRINTERS_ACTION_ = 'manageCloudPrinters';
+
+  /**
+   * Chrome API ID of the manage local printers action.
+   * @type {string}
+   * @private
+   */
+  DestinationSearch.MANAGE_LOCAL_PRINTERS_ACTION_ = 'manageLocalPrinters';
+
+  DestinationSearch.prototype = {
+    __proto__: print_preview.Component.prototype,
+
+    get isVisible() {
+      return this.getElement().style.display == '';
+    },
+
+    set isVisible(isVisible) {
+      this.getElement().style.display = isVisible ? '' : 'none';
+      if (!isVisible) {
+        // Collapse all destination lists
+        this.localList_.isShowAll = false;
+        this.cloudList_.isShowAll = false;
+      }
+    },
+
+    set cloudPrintEmail(email) {
+      var userEmailEl = this.getElement().getElementsByClassName(
+          DestinationSearch.Classes_.USER_EMAIL)[0];
+      userEmailEl.textContent = email;
+      var userInfoEl = this.getElement().getElementsByClassName(
+          DestinationSearch.Classes_.USER_INFO)[0];
+      userInfoEl.style.display = '';
+      var cloudListEl = this.getElement().getElementsByClassName(
+          DestinationSearch.Classes_.CLOUD_LIST)[0];
+      cloudListEl.style.display = '';
+      var promoEl = this.getElement().getElementsByClassName(
+          DestinationSearch.Classes_.CLOUDPRINT_PROMO)[0];
+      promoEl.style.display = 'none';
+    },
+
+    showCloudPrintPromo: function() {
+      var promoEl = this.getElement().getElementsByClassName(
+          DestinationSearch.Classes_.CLOUDPRINT_PROMO)[0];
+      promoEl.style.display = '';
+    },
+
+    /** @override */
+    decorateInternal: function() {
+      this.searchBox_.decorate($('search-box'));
+
+      var recentListEl = this.getElement().getElementsByClassName(
+          DestinationSearch.Classes_.RECENT_LIST)[0];
+      this.recentList_.render(recentListEl);
+
+      var localListEl = this.getElement().getElementsByClassName(
+          DestinationSearch.Classes_.LOCAL_LIST)[0];
+      this.localList_.render(localListEl);
+
+      var cloudListEl = this.getElement().getElementsByClassName(
+          DestinationSearch.Classes_.CLOUD_LIST)[0];
+      this.cloudList_.render(cloudListEl);
+    },
+
+    /** @override */
+    enterDocument: function() {
+      print_preview.Component.prototype.enterDocument.call(this);
+      var closeButtonEl = this.getElement().getElementsByClassName(
+          DestinationSearch.Classes_.CLOSE_BUTTON)[0];
+      var signInButton = this.getElement().getElementsByClassName(
+          DestinationSearch.Classes_.SIGN_IN)[0];
+
+      this.tracker.add(
+          closeButtonEl, 'click', this.onCloseClick_.bind(this));
+      this.tracker.add(
+          signInButton, 'click', this.onSignInActivated_.bind(this));
+      this.tracker.add(
+          this.searchBox_,
+          print_preview.SearchBox.Event.SEARCH,
+          this.onSearch_.bind(this));
+      this.tracker.add(
+          this,
+          print_preview.DestinationListItem.Event.SELECT,
+          this.onDestinationSelect_.bind(this));
+
+      this.tracker.add(
+          this.destinationStore_,
+          print_preview.DestinationStore.Event.DESTINATIONS_INSERTED,
+          this.onDestinationsInserted_.bind(this));
+      this.tracker.add(
+          this.destinationStore_,
+          print_preview.DestinationStore.Event.DESTINATION_SELECT,
+          this.onDestinationStoreSelect_.bind(this));
+
+      this.tracker.add(
+          this.localList_,
+          print_preview.DestinationList.Event.ACTION_LINK_ACTIVATED,
+          this.onManageLocalPrintersActivated_.bind(this));
+      this.tracker.add(
+          this.cloudList_,
+          print_preview.DestinationList.Event.ACTION_LINK_ACTIVATED,
+          this.onManageCloudPrintersActivated_.bind(this));
+    },
+
+    /**
+     * Filters all destination lists with the given query.
+     * @param {string?} query Query to filter destination lists by.
+     * @private
+     */
+    filterLists_: function(query) {
+      this.recentList_.filter(query);
+      this.localList_.filter(query);
+      this.cloudList_.filter(query);
+    },
+
+    /**
+     * Resets the search query.
+     * @private
+     */
+    resetSearch_: function() {
+      this.searchBox_.query = null;
+      this.filterLists_(null);
+    },
+
+    /**
+     * Called when a destination search should be executed. Filters the
+     * destination lists with the given query.
+     * @param {cr.Event} evt Contains the search query.
+     * @private
+     */
+    onSearch_: function(evt) {
+      this.filterLists_(evt.query);
+    },
+
+    /**
+     * Called when the close button is clicked. Hides the search widget.
+     * @private
+     */
+    onCloseClick_: function() {
+      this.isVisible = false;
+      this.resetSearch_();
+    },
+
+    /**
+     * Called when a destination is selected. Clears the search and hides the
+     * widget.
+     * @param {cr.Event} evt Contains the selected destination.
+     * @private
+     */
+    onDestinationSelect_: function(evt) {
+      this.isVisible = false;
+      this.resetSearch_();
+      this.destinationStore_.selectDestination(evt.destination);
+    },
+
+    /**
+     * Called when destinations are added to the destination store. Refreshes UI
+     * with new destinations.
+     * @private
+     */
+    onDestinationsInserted_: function() {
+      var destinations = this.destinationStore_.destinations;
+      var recentDestinations = [];
+      var localDestinations = [];
+      var cloudDestinations = [];
+      for (var destination, i = 0; destination = destinations[i]; i++) {
+        if (destination.isRecent) {
+          recentDestinations.push(destination);
+        }
+        if (destination.isLocal) {
+          localDestinations.push(destination);
+        } else {
+          cloudDestinations.push(destination);
+        }
+      }
+      this.recentList_.updateDestinations(recentDestinations);
+      this.localList_.updateDestinations(localDestinations);
+      this.cloudList_.updateDestinations(cloudDestinations);
+    },
+
+    /**
+     * Called when a destination is selected. Selected destination are marked as
+     * recent, so we have to update our recent destinations list.
+     * @private
+     */
+    onDestinationStoreSelect_: function() {
+      var destinations = this.destinationStore_.destinations;
+      var recentDestinations = [];
+      for (var destination, i = 0; destination = destinations[i]; i++) {
+        if (destination.isRecent) {
+          recentDestinations.push(destination);
+        }
+      }
+      this.recentList_.updateDestinations(recentDestinations);
+    },
+
+    /**
+     * Called when the manage cloud printers action is activated.
+     * @private
+     */
+    onManageCloudPrintersActivated_: function() {
+      cr.dispatchSimpleEvent(
+          document, print_preview.CommonEvent.MANAGE_CLOUD_PRINTERS);
+    },
+
+    /**
+     * Called when the manage local printers action is activated.
+     * @private
+     */
+    onManageLocalPrintersActivated_: function() {
+      cr.dispatchSimpleEvent(
+          document, print_preview.CommonEvent.MANAGE_LOCAL_PRINTERS);
+    },
+
+    /**
+     * Called when the "Sign in" link on the Google Cloud Print promo is
+     * activated.
+     * @private
+     */
+    onSignInActivated_: function() {
+      cr.dispatchSimpleEvent(this, DestinationSearch.Event.SIGN_IN);
+    }
+  };
+
+  // Export
+  return {
+    DestinationSearch: DestinationSearch
+  };
+});