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   };
  63
  64   DestinationSettings.prototype = {
  65     __proto__: print_preview.Component.prototype,
  66
  67     /** @param {boolean} Whether the component is enabled. */
  68     set isEnabled(isEnabled) {
  69       var changeButton = this.getElement().getElementsByClassName(
  70           DestinationSettings.Classes_.CHANGE_BUTTON)[0];
  71       changeButton.disabled = !isEnabled;
  72     },
  73
  74     /** @override */
  75     enterDocument: function() {
  76       print_preview.Component.prototype.enterDocument.call(this);
  77       var changeButton = this.getElement().getElementsByClassName(
  78           DestinationSettings.Classes_.CHANGE_BUTTON)[0];
  79       this.tracker.add(
  80           changeButton, 'click', this.onChangeButtonClick_.bind(this));
  81       this.tracker.add(
  82           this.destinationStore_,
  83           print_preview.DestinationStore.EventType.DESTINATION_SELECT,
  84           this.onDestinationSelect_.bind(this));
  85     },
  86
  87     /**
  88      * Called when the "Change" button is clicked. Dispatches the
  89      * CHANGE_BUTTON_ACTIVATE event.
  90      * @private
  91      */
  92     onChangeButtonClick_: function() {
  93       cr.dispatchSimpleEvent(
  94           this, DestinationSettings.EventType.CHANGE_BUTTON_ACTIVATE);
  95     },
  96
  97     /**
  98      * Called when the destination selection has changed. Updates UI elements.
  99      * @private
 100      */
 101     onDestinationSelect_: function() {
 102       var destination = this.destinationStore_.selectedDestination;
 103       var nameEl = this.getElement().getElementsByClassName(
 104           DestinationSettings.Classes_.NAME)[0];
 105       nameEl.textContent = destination.displayName;
 106       nameEl.title = destination.displayName;
 107
 108       var iconEl = this.getElement().getElementsByClassName(
 109           DestinationSettings.Classes_.ICON)[0];
 110       iconEl.src = destination.iconUrl;
 111
 112       var locationEl = this.getElement().getElementsByClassName(
 113           DestinationSettings.Classes_.LOCATION)[0];
 114       locationEl.textContent = destination.location;
 115       locationEl.title = destination.location;
 116
 117       setIsVisible(this.getElement().querySelector('.throbber'), false);
 118       setIsVisible(
 119           this.getElement().querySelector('.destination-settings-box'), true);
 120     }
 121   };
 122
 123   // Export
 124   return {
 125     DestinationSettings: DestinationSettings
 126   };
 127 });