src/chrome/browser/resources/print_preview/settings/more_settings.js

   1 // Copyright 2014 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   /**
   9    * Toggles visibility of the specified printing options sections.
  10    * @param {!print_preview.DestinationStore} destinationStore To listen for
  11    *     destination changes.
  12    * @param {!Array.<print_preview.SettingsSection>} settingsSections Sections
  13    *     to toggle by this component.
  14    * @constructor
  15    * @extends {print_preview.Component}
  16    */
  17   function MoreSettings(destinationStore, settingsSections) {
  18     print_preview.Component.call(this);
  19
  20     /** @private {!print_preview.DestinationStore} */
  21     this.destinationStore_ = destinationStore;
  22
  23     /** @private {!Array.<print_preview.SettingsSection>} */
  24     this.settingsSections_ = settingsSections;
  25
  26     /** @private {MoreSettings.SettingsToShow} */
  27     this.settingsToShow_ = MoreSettings.SettingsToShow.MOST_POPULAR;
  28
  29     /** @private {boolean} */
  30     this.capabilitiesReady_ = false;
  31
  32     /** @private {boolean} */
  33     this.firstDestinationReady_ = false;
  34
  35     /**
  36      * Used to record usage statistics.
  37      * @private {!print_preview.PrintSettingsUiMetricsContext}
  38      */
  39     this.metrics_ = new print_preview.PrintSettingsUiMetricsContext();
  40   };
  41
  42   /**
  43    * Which settings are visible to the user.
  44    * @enum {number}
  45    */
  46   MoreSettings.SettingsToShow = {
  47     MOST_POPULAR: 1,
  48     ALL: 2
  49   };
  50
  51   MoreSettings.prototype = {
  52     __proto__: print_preview.Component.prototype,
  53
  54     /** @return {boolean} Returns {@code true} if settings are expanded. */
  55     get isExpanded() {
  56       return this.settingsToShow_ == MoreSettings.SettingsToShow.ALL;
  57     },
  58
  59     /** @override */
  60     enterDocument: function() {
  61       print_preview.Component.prototype.enterDocument.call(this);
  62
  63       this.tracker.add(this.getElement(), 'click', this.onClick_.bind(this));
  64       this.tracker.add(
  65           this.destinationStore_,
  66           print_preview.DestinationStore.EventType.DESTINATION_SELECT,
  67           this.onDestinationChanged_.bind(this));
  68       this.tracker.add(
  69           this.destinationStore_,
  70           print_preview.DestinationStore.EventType.
  71               SELECTED_DESTINATION_CAPABILITIES_READY,
  72           this.onDestinationCapabilitiesReady_.bind(this));
  73       this.settingsSections_.forEach(function(section) {
  74         this.tracker.add(
  75             section,
  76             print_preview.SettingsSection.EventType.COLLAPSIBLE_CONTENT_CHANGED,
  77             this.updateState_.bind(this));
  78       }.bind(this));
  79
  80       this.updateState_(true);
  81     },
  82
  83     /**
  84      * Toggles "more/fewer options" state and notifies all the options sections
  85      *     to reflect the new state.
  86      * @private
  87      */
  88     onClick_: function() {
  89       this.settingsToShow_ =
  90           this.settingsToShow_ == MoreSettings.SettingsToShow.MOST_POPULAR ?
  91               MoreSettings.SettingsToShow.ALL :
  92               MoreSettings.SettingsToShow.MOST_POPULAR;
  93       this.updateState_(false);
  94       this.metrics_.record(this.isExpanded ?
  95           print_preview.Metrics.PrintSettingsUiBucket.MORE_SETTINGS_CLICKED :
  96           print_preview.Metrics.PrintSettingsUiBucket.LESS_SETTINGS_CLICKED);
  97     },
  98
  99     /**
 100      * Called when the destination selection has changed. Updates UI elements.
 101      * @private
 102      */
 103     onDestinationChanged_: function() {
 104       this.firstDestinationReady_ = true;
 105       this.capabilitiesReady_ = false;
 106       this.updateState_(false);
 107     },
 108
 109     /**
 110      * Called when the destination selection has changed. Updates UI elements.
 111      * @private
 112      */
 113     onDestinationCapabilitiesReady_: function() {
 114       this.capabilitiesReady_ = true;
 115       this.updateState_(false);
 116     },
 117
 118     /**
 119      * Updates the component appearance according to the current state.
 120      * @param {boolean} noAnimation Whether section visibility transitions
 121      *     should not be animated.
 122      * @private
 123      */
 124     updateState_: function(noAnimation) {
 125       if (!this.firstDestinationReady_) {
 126         fadeOutElement(this.getElement(), noAnimation);
 127         return;
 128       }
 129       // When capabilities are not known yet, don't change the state to avoid
 130       // unnecessary fade in/out cycles.
 131       if (!this.capabilitiesReady_)
 132         return;
 133
 134       var all = this.settingsToShow_ == MoreSettings.SettingsToShow.ALL;
 135       this.getChildElement('.more-settings-label').textContent =
 136           loadTimeData.getString(all ? 'lessOptionsLabel' : 'moreOptionsLabel');
 137       var iconEl = this.getChildElement('.more-settings-icon');
 138       iconEl.classList.toggle('more-settings-icon-plus', !all);
 139       iconEl.classList.toggle('more-settings-icon-minus', all);
 140
 141       var availableSections = this.settingsSections_.reduce(
 142           function(count, section) {
 143             return count + (section.isAvailable() ? 1 : 0);
 144           }, 0);
 145
 146       // Magic 6 is chosen as the number of sections when it still feels like
 147       // manageable and not too crowded.
 148       var hasSectionsToToggle =
 149           availableSections > 6 &&
 150           this.settingsSections_.some(function(section) {
 151             return section.hasCollapsibleContent();
 152           });
 153
 154       if (hasSectionsToToggle)
 155         fadeInElement(this.getElement(), noAnimation);
 156       else
 157         fadeOutElement(this.getElement(), noAnimation);
 158
 159       var collapseContent =
 160           this.settingsToShow_ == MoreSettings.SettingsToShow.MOST_POPULAR &&
 161           hasSectionsToToggle;
 162       this.settingsSections_.forEach(function(section) {
 163         section.setCollapseContent(collapseContent, noAnimation);
 164       });
 165     }
 166   };
 167
 168   // Export
 169   return {
 170     MoreSettings: MoreSettings
 171   };
 172 });