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

   1 // Copyright (c) 2012 The Chromium Authors. All rights reserved.
   2 // Use of this source code is governed by a BSD-style license that can be
   3 // found in the LICENSE file.
   4
   5 cr.define('print_preview', function() {
   6   'use strict';
   7
   8   // TODO(rltoscano): This class needs a throbber while loading the destination
   9   // or another solution is persist the settings of the printer so that next
  10   // load is fast.
  11
  12   /**
  13    * Component used to render the print destination.
  14    * @param {!print_preview.DestinationStore} destinationStore Used to determine
  15    *     the selected destination.
  16    * @constructor
  17    * @extends {print_preview.Component}
  18    */
  19   function DestinationSettings(destinationStore) {
  20     print_preview.Component.call(this);
  21
  22     /**
  23      * Used to determine the selected destination.
  24      * @type {!print_preview.DestinationStore}
  25      * @private
  26      */
  27     this.destinationStore_ = destinationStore;
  28
  29     /**
  30      * Current CSS class of the destination icon.
  31      * @type {?DestinationSettings.Classes_}
  32      * @private
  33      */
  34     this.iconClass_ = null;
  35   };
  36
  37   /**
  38    * Event types dispatched by the component.
  39    * @enum {string}
  40    */
  41   DestinationSettings.EventType = {
  42     CHANGE_BUTTON_ACTIVATE:
  43         'print_preview.DestinationSettings.CHANGE_BUTTON_ACTIVATE'
  44   };
  45
  46   /**
  47    * CSS classes used by the component.
  48    * @enum {string}
  49    * @private
  50    */
  51   DestinationSettings.Classes_ = {
  52     CHANGE_BUTTON: 'destination-settings-change-button',
  53     ICON: 'destination-settings-icon',
  54     ICON_CLOUD: 'destination-settings-icon-cloud',
  55     ICON_CLOUD_SHARED: 'destination-settings-icon-cloud-shared',
  56     ICON_GOOGLE_PROMOTED: 'destination-settings-icon-google-promoted',
  57     ICON_LOCAL: 'destination-settings-icon-local',
  58     ICON_MOBILE: 'destination-settings-icon-mobile',
  59     ICON_MOBILE_SHARED: 'destination-settings-icon-mobile-shared',
  60     LOCATION: 'destination-settings-location',
  61     NAME: 'destination-settings-name',
  62     THOBBER_NAME: 'destination-throbber-name'
  63   };
  64
  65   DestinationSettings.prototype = {
  66     __proto__: print_preview.Component.prototype,
  67
  68     /** @param {boolean} Whether the component is enabled. */
  69     set isEnabled(isEnabled) {
  70       var changeButton = this.getElement().getElementsByClassName(
  71           DestinationSettings.Classes_.CHANGE_BUTTON)[0];
  72       changeButton.disabled = !isEnabled;
  73     },
  74
  75     /** @override */
  76     enterDocument: function() {
  77       print_preview.Component.prototype.enterDocument.call(this);
  78       var changeButton = this.getElement().getElementsByClassName(
  79           DestinationSettings.Classes_.CHANGE_BUTTON)[0];
  80       this.tracker.add(
  81           changeButton, 'click', this.onChangeButtonClick_.bind(this));
  82       this.tracker.add(
  83           this.destinationStore_,
  84           print_preview.DestinationStore.EventType.DESTINATION_SELECT,
  85           this.onDestinationSelect_.bind(this));
  86       this.tracker_.add(
  87           this.destinationStore_,
  88           print_preview.DestinationStore.EventType.
  89               CACHED_SELECTED_DESTINATION_INFO_READY,
  90           this.onSelectedDestinationNameSet_.bind(this));
  91     },
  92
  93     /**
  94      * Called when the "Change" button is clicked. Dispatches the
  95      * CHANGE_BUTTON_ACTIVATE event.
  96      * @private
  97      */
  98     onChangeButtonClick_: function() {
  99       cr.dispatchSimpleEvent(
 100           this, DestinationSettings.EventType.CHANGE_BUTTON_ACTIVATE);
 101     },
 102
 103     /**
 104      * Called when the destination selection has changed. Updates UI elements.
 105      * @private
 106      */
 107     onDestinationSelect_: function() {
 108       var destination = this.destinationStore_.selectedDestination;
 109       var nameEl = this.getElement().getElementsByClassName(
 110           DestinationSettings.Classes_.NAME)[0];
 111       nameEl.textContent = destination.displayName;
 112       nameEl.title = destination.displayName;
 113
 114       var iconEl = this.getElement().getElementsByClassName(
 115           DestinationSettings.Classes_.ICON)[0];
 116       iconEl.src = destination.iconUrl;
 117
 118       var locationEl = this.getElement().getElementsByClassName(
 119           DestinationSettings.Classes_.LOCATION)[0];
 120       locationEl.textContent = destination.location;
 121       locationEl.title = destination.location;
 122
 123       setIsVisible(this.getElement().querySelector('.throbber-container'),
 124                    false);
 125       setIsVisible(
 126           this.getElement().querySelector('.destination-settings-box'), true);
 127     },
 128
 129     onSelectedDestinationNameSet_: function() {
 130       var destinationName =
 131           this.destinationStore_.selectedDestination.displayName;
 132       var nameEl = this.getElement().getElementsByClassName(
 133           DestinationSettings.Classes_.THOBBER_NAME)[0];
 134       nameEl.textContent = destinationName;
 135       nameEl.title = destinationName;
 136     }
 137   };
 138
 139   // Export
 140   return {
 141     DestinationSettings: DestinationSettings
 142   };
 143 });