src/chrome/browser/resources/print_preview/settings/advanced_settings/advanced_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    * Modal dialog for print destination's advanced settings.
  10    * @param {!print_preview.PrintTicketStore} printTicketStore Contains the
  11    *     print ticket to print.
  12    * @constructor
  13    * @extends {print_preview.Overlay}
  14    */
  15   function AdvancedSettings(printTicketStore) {
  16     print_preview.Overlay.call(this);
  17
  18     /**
  19      * Contains the print ticket to print.
  20      * @private {!print_preview.PrintTicketStore}
  21      */
  22     this.printTicketStore_ = printTicketStore;
  23
  24     /**
  25      * Used to record usage statistics.
  26      * @private {!print_preview.PrintSettingsUiMetricsContext}
  27      */
  28     this.metrics_ = new print_preview.PrintSettingsUiMetricsContext();
  29
  30     /** @private {!print_preview.SearchBox} */
  31     this.searchBox_ = new print_preview.SearchBox(
  32         loadTimeData.getString('advancedSettingsSearchBoxPlaceholder'));
  33     this.addChild(this.searchBox_);
  34
  35     /** @private {print_preview.Destination} */
  36     this.destination_ = null;
  37
  38     /** @private {!Array.<!print_preview.AdvancedSettingsItem>} */
  39     this.items_ = [];
  40   };
  41
  42   /**
  43    * CSS classes used by the component.
  44    * @enum {string}
  45    * @private
  46    */
  47   AdvancedSettings.Classes_ = {
  48     EXTRA_PADDING: 'advanced-settings-item-extra-padding'
  49   };
  50
  51   AdvancedSettings.prototype = {
  52     __proto__: print_preview.Overlay.prototype,
  53
  54     /**
  55      * @param {!print_preview.Destination} destination Destination to show
  56      *     advanced settings for.
  57      */
  58     showForDestination: function(destination) {
  59       assert(!this.destination_);
  60       this.destination_ = destination;
  61       this.getChildElement('.advanced-settings-title').textContent =
  62           loadTimeData.getStringF('advancedSettingsDialogTitle',
  63                                   this.destination_.displayName);
  64       this.setIsVisible(true);
  65       this.renderSettings_();
  66     },
  67
  68     /** @override */
  69     enterDocument: function() {
  70       print_preview.Overlay.prototype.enterDocument.call(this);
  71
  72       this.tracker.add(
  73           this.getChildElement('#cancel-button'),
  74           'click',
  75           this.cancel.bind(this));
  76
  77       this.tracker.add(
  78           this.getChildElement('#done-button'),
  79           'click',
  80           this.onApplySettings_.bind(this));
  81
  82       this.tracker.add(
  83           this.searchBox_,
  84           print_preview.SearchBox.EventType.SEARCH,
  85           this.onSearch_.bind(this));
  86     },
  87
  88     /** @override */
  89     decorateInternal: function() {
  90       this.searchBox_.render(this.getChildElement('.search-box-area'));
  91     },
  92
  93     /** @override */
  94     onSetVisibleInternal: function(isVisible) {
  95       if (isVisible) {
  96         this.searchBox_.focus();
  97         this.metrics_.record(print_preview.Metrics.PrintSettingsUiBucket.
  98             ADVANCED_SETTINGS_DIALOG_SHOWN);
  99       } else {
 100         this.resetSearch_();
 101         this.destination_ = null;
 102       }
 103     },
 104
 105     /** @override */
 106     onCancelInternal: function() {
 107       this.metrics_.record(print_preview.Metrics.PrintSettingsUiBucket.
 108           ADVANCED_SETTINGS_DIALOG_CANCELED);
 109     },
 110
 111     /** @override */
 112     onEnterPressedInternal: function() {
 113       var doneButton = this.getChildElement('#done-button');
 114       if (!doneButton.disabled)
 115         doneButton.click();
 116       return !doneButton.disabled;
 117     },
 118
 119     /**
 120      * @return {number} Height available for settings, in pixels.
 121      * @private
 122      */
 123     getAvailableContentHeight_: function() {
 124       var elStyle = window.getComputedStyle(this.getElement());
 125       return this.getElement().offsetHeight -
 126           parseInt(elStyle.getPropertyValue('padding-top'), 10) -
 127           parseInt(elStyle.getPropertyValue('padding-bottom'), 10) -
 128           this.getChildElement('.settings-area').offsetTop -
 129           this.getChildElement('.action-area').offsetHeight;
 130     },
 131
 132     /**
 133      * Filters displayed settings with the given query.
 134      * @param {?string} query Query to filter settings by.
 135      * @private
 136      */
 137     filterLists_: function(query) {
 138       var atLeastOneMatch = false;
 139       var lastVisibleItemWithBubble = null;
 140       this.items_.forEach(function(item) {
 141         item.updateSearchQuery(query);
 142         if (getIsVisible(item.getElement()))
 143           atLeastOneMatch = true;
 144         if (item.searchBubbleShown)
 145           lastVisibleItemWithBubble = item;
 146       });
 147       setIsVisible(
 148           this.getChildElement('.no-settings-match-hint'), !atLeastOneMatch);
 149       setIsVisible(
 150           this.getChildElement('.' + AdvancedSettings.Classes_.EXTRA_PADDING),
 151           !!lastVisibleItemWithBubble);
 152     },
 153
 154     /**
 155      * Resets the filter query.
 156      * @private
 157      */
 158     resetSearch_: function() {
 159       this.searchBox_.setQuery(null);
 160       this.filterLists_(null);
 161     },
 162
 163     /**
 164      * Renders all of the available settings.
 165      * @private
 166      */
 167     renderSettings_: function() {
 168       // Remove all children settings elements.
 169       this.items_.forEach(function(item) {
 170         this.removeChild(item);
 171       }.bind(this));
 172       this.items_ = [];
 173
 174       var extraPadding =
 175           this.getChildElement('.' + AdvancedSettings.Classes_.EXTRA_PADDING);
 176       if (extraPadding)
 177         extraPadding.parentNode.removeChild(extraPadding);
 178
 179       var vendorCapabilities = this.printTicketStore_.vendorItems.capability;
 180       if (!vendorCapabilities)
 181         return;
 182
 183       var availableHeight = this.getAvailableContentHeight_();
 184       var containerEl = this.getChildElement('.settings-area');
 185       containerEl.style.maxHeight = availableHeight + 'px';
 186       var settingsEl = this.getChildElement('.settings');
 187
 188       vendorCapabilities.forEach(function(capability) {
 189         var item = new print_preview.AdvancedSettingsItem(
 190             this.eventTarget_, this.printTicketStore_, capability);
 191         this.addChild(item);
 192         item.render(settingsEl);
 193         this.items_.push(item);
 194       }.bind(this));
 195
 196       extraPadding = document.createElement('div');
 197       extraPadding.classList.add(AdvancedSettings.Classes_.EXTRA_PADDING);
 198       extraPadding.hidden = true;
 199       settingsEl.appendChild(extraPadding);
 200     },
 201
 202     /**
 203      * Called when settings search query changes. Filters displayed settings
 204      * with the given query.
 205      * @param {Event} evt Contains search query.
 206      * @private
 207      */
 208     onSearch_: function(evt) {
 209       this.filterLists_(evt.queryRegExp);
 210     },
 211
 212     /**
 213      * Called when current settings selection need to be stored in the ticket.
 214      * @private
 215      */
 216     onApplySettings_: function(evt) {
 217       this.setIsVisible(false);
 218
 219       var values = {};
 220       this.items_.forEach(function(item) {
 221         if (item.isModified())
 222           values[item.id] = item.selectedValue;
 223       }.bind(this));
 224
 225       this.printTicketStore_.vendorItems.updateValue(values);
 226     }
 227   };
 228
 229   // Export
 230   return {
 231     AdvancedSettings: AdvancedSettings
 232   };
 233 });