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