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.SettingsSection}
  18    */
  19   function DestinationSettings(destinationStore) {
  20     print_preview.SettingsSection.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     STALE: 'stale',
  63     THOBBER_NAME: 'destination-throbber-name'
  64   };
  65
  66   DestinationSettings.prototype = {
  67     __proto__: print_preview.SettingsSection.prototype,
  68
  69     /** @override */
  70     isAvailable: function() {
  71       return true;
  72     },
  73
  74     /** @override */
  75     hasCollapsibleContent: function() {
  76       return false;
  77     },
  78
  79     /** @override */
  80     set isEnabled(isEnabled) {
  81       var changeButton = this.getElement().getElementsByClassName(
  82           DestinationSettings.Classes_.CHANGE_BUTTON)[0];
  83       changeButton.disabled = !isEnabled;
  84     },
  85
  86     /** @override */
  87     enterDocument: function() {
  88       print_preview.SettingsSection.prototype.enterDocument.call(this);
  89       var changeButton = this.getElement().getElementsByClassName(
  90           DestinationSettings.Classes_.CHANGE_BUTTON)[0];
  91       this.tracker.add(
  92           changeButton, 'click', this.onChangeButtonClick_.bind(this));
  93       this.tracker.add(
  94           this.destinationStore_,
  95           print_preview.DestinationStore.EventType.DESTINATION_SELECT,
  96           this.onDestinationSelect_.bind(this));
  97       this.tracker_.add(
  98           this.destinationStore_,
  99           print_preview.DestinationStore.EventType.
 100               CACHED_SELECTED_DESTINATION_INFO_READY,
 101           this.onSelectedDestinationNameSet_.bind(this));
 102     },
 103
 104     /**
 105      * Called when the "Change" button is clicked. Dispatches the
 106      * CHANGE_BUTTON_ACTIVATE event.
 107      * @private
 108      */
 109     onChangeButtonClick_: function() {
 110       cr.dispatchSimpleEvent(
 111           this, DestinationSettings.EventType.CHANGE_BUTTON_ACTIVATE);
 112     },
 113
 114     /**
 115      * Called when the destination selection has changed. Updates UI elements.
 116      * @private
 117      */
 118     onDestinationSelect_: function() {
 119       var destinationSettingsBoxEl =
 120           this.getChildElement('.destination-settings-box');
 121
 122       var destination = this.destinationStore_.selectedDestination;
 123       if (destination != null) {
 124         var nameEl = this.getElement().getElementsByClassName(
 125             DestinationSettings.Classes_.NAME)[0];
 126         nameEl.textContent = destination.displayName;
 127         nameEl.title = destination.displayName;
 128
 129         var iconEl = this.getElement().getElementsByClassName(
 130             DestinationSettings.Classes_.ICON)[0];
 131         iconEl.src = destination.iconUrl;
 132
 133         var hint = destination.hint;
 134         var locationEl = this.getElement().getElementsByClassName(
 135             DestinationSettings.Classes_.LOCATION)[0];
 136         locationEl.textContent = hint;
 137         locationEl.title = hint;
 138
 139         var offlineStatusText = destination.offlineStatusText;
 140         var offlineStatusEl =
 141             this.getChildElement('.destination-settings-offline-status');
 142         offlineStatusEl.textContent = offlineStatusText;
 143         offlineStatusEl.title = offlineStatusText;
 144
 145         var isOffline = destination.isOffline;
 146         destinationSettingsBoxEl.classList.toggle(
 147             DestinationSettings.Classes_.STALE, isOffline);
 148         setIsVisible(locationEl, !isOffline);
 149         setIsVisible(offlineStatusEl, isOffline);
 150       }
 151
 152       setIsVisible(
 153           this.getChildElement('.throbber-container'),
 154           this.destinationStore_.isAutoSelectDestinationInProgress);
 155       setIsVisible(destinationSettingsBoxEl, !!destination);
 156     },
 157
 158     onSelectedDestinationNameSet_: function() {
 159       var destinationName =
 160           this.destinationStore_.selectedDestination.displayName;
 161       var nameEl = this.getElement().getElementsByClassName(
 162           DestinationSettings.Classes_.THOBBER_NAME)[0];
 163       nameEl.textContent = destinationName;
 164       nameEl.title = destinationName;
 165     }
 166   };
 167
 168   // Export
 169   return {
 170     DestinationSettings: DestinationSettings
 171   };
 172 });