Chromium Code Reviews| OLD | NEW |
|---|---|
| 1 // Copyright 2014 The Chromium Authors. All rights reserved. | 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 | 2 // Use of this source code is governed by a BSD-style license that can be |
| 3 // found in the LICENSE file. | 3 // found in the LICENSE file. |
| 4 | 4 |
| 5 cr.exportPath('print_preview'); | |
| 6 | |
| 7 /** | |
| 8 * Which settings are visible to the user. | |
| 9 * @enum {number} | |
| 10 */ | |
| 11 print_preview.MoreSettingsSettingsToShow = { | |
| 12 MOST_POPULAR: 1, | |
| 13 ALL: 2 | |
| 14 }; | |
| 15 | |
| 5 cr.define('print_preview', function() { | 16 cr.define('print_preview', function() { |
| 6 'use strict'; | 17 'use strict'; |
| 7 | 18 |
| 19 var SettingsToShow = print_preview.MoreSettingsSettingsToShow; | |
| 20 | |
| 8 /** | 21 /** |
| 9 * Toggles visibility of the specified printing options sections. | 22 * Toggles visibility of the specified printing options sections. |
| 10 * @param {!print_preview.DestinationStore} destinationStore To listen for | 23 * @param {!print_preview.DestinationStore} destinationStore To listen for |
| 11 * destination changes. | 24 * destination changes. |
| 12 * @param {!Array<print_preview.SettingsSection>} settingsSections Sections | 25 * @param {!Array<print_preview.SettingsSection>} settingsSections Sections |
| 13 * to toggle by this component. | 26 * to toggle by this component. |
| 14 * @constructor | 27 * @constructor |
| 15 * @extends {print_preview.Component} | 28 * @extends {print_preview.Component} |
| 16 */ | 29 */ |
| 17 function MoreSettings(destinationStore, settingsSections) { | 30 function MoreSettings(destinationStore, settingsSections) { |
| 18 print_preview.Component.call(this); | 31 print_preview.Component.call(this); |
| 19 | 32 |
| 20 /** @private {!print_preview.DestinationStore} */ | 33 /** @private {!print_preview.DestinationStore} */ |
| 21 this.destinationStore_ = destinationStore; | 34 this.destinationStore_ = destinationStore; |
| 22 | 35 |
| 23 /** @private {!Array<print_preview.SettingsSection>} */ | 36 /** @private {!Array<print_preview.SettingsSection>} */ |
| 24 this.settingsSections_ = settingsSections; | 37 this.settingsSections_ = settingsSections; |
| 25 | 38 |
| 26 /** @private {MoreSettings.SettingsToShow} */ | 39 /** @private {print_preview.MoreSettingsSettingsToShow} */ |
| 27 this.settingsToShow_ = MoreSettings.SettingsToShow.MOST_POPULAR; | 40 this.settingsToShow_ = SettingsToShow.MOST_POPULAR; |
| 28 | 41 |
| 29 /** @private {boolean} */ | 42 /** @private {boolean} */ |
| 30 this.capabilitiesReady_ = false; | 43 this.capabilitiesReady_ = false; |
| 31 | 44 |
| 32 /** @private {boolean} */ | 45 /** @private {boolean} */ |
| 33 this.firstDestinationReady_ = false; | 46 this.firstDestinationReady_ = false; |
| 34 | 47 |
| 35 /** | 48 /** |
| 36 * Used to record usage statistics. | 49 * Used to record usage statistics. |
| 37 * @private {!print_preview.PrintSettingsUiMetricsContext} | 50 * @private {!print_preview.PrintSettingsUiMetricsContext} |
| 38 */ | 51 */ |
| 39 this.metrics_ = new print_preview.PrintSettingsUiMetricsContext(); | 52 this.metrics_ = new print_preview.PrintSettingsUiMetricsContext(); |
| 40 } | 53 } |
| 41 | 54 |
| 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 = { | 55 MoreSettings.prototype = { |
| 52 __proto__: print_preview.Component.prototype, | 56 __proto__: print_preview.Component.prototype, |
| 53 | 57 |
| 54 /** @return {boolean} Returns {@code true} if settings are expanded. */ | 58 /** @return {boolean} Returns {@code true} if settings are expanded. */ |
| 55 get isExpanded() { | 59 get isExpanded() { |
| 56 return this.settingsToShow_ == MoreSettings.SettingsToShow.ALL; | 60 return this.settingsToShow_ == SettingsToShow. |
| 61 ALL; | |
|
dpapad
2017/05/08 23:50:30
Can this fit in previous line?
rbpotter
2017/05/09 00:08:52
Done.
| |
| 57 }, | 62 }, |
| 58 | 63 |
| 59 /** @override */ | 64 /** @override */ |
| 60 enterDocument: function() { | 65 enterDocument: function() { |
| 61 print_preview.Component.prototype.enterDocument.call(this); | 66 print_preview.Component.prototype.enterDocument.call(this); |
| 62 | 67 |
| 63 this.tracker.add(this.getElement(), 'click', this.onClick_.bind(this)); | 68 this.tracker.add(this.getElement(), 'click', this.onClick_.bind(this)); |
| 64 this.tracker.add( | 69 this.tracker.add( |
| 65 this.destinationStore_, | 70 this.destinationStore_, |
| 66 print_preview.DestinationStore.EventType.DESTINATION_SELECT, | 71 print_preview.DestinationStore.EventType.DESTINATION_SELECT, |
| (...skipping 13 matching lines...) Expand all Loading... | |
| 80 this.updateState_(true); | 85 this.updateState_(true); |
| 81 }, | 86 }, |
| 82 | 87 |
| 83 /** | 88 /** |
| 84 * Toggles "more/fewer options" state and notifies all the options sections | 89 * Toggles "more/fewer options" state and notifies all the options sections |
| 85 * to reflect the new state. | 90 * to reflect the new state. |
| 86 * @private | 91 * @private |
| 87 */ | 92 */ |
| 88 onClick_: function() { | 93 onClick_: function() { |
| 89 this.settingsToShow_ = | 94 this.settingsToShow_ = |
| 90 this.settingsToShow_ == MoreSettings.SettingsToShow.MOST_POPULAR ? | 95 this.settingsToShow_ == SettingsToShow.MOST_POPULAR ? |
| 91 MoreSettings.SettingsToShow.ALL : | 96 SettingsToShow.ALL : |
| 92 MoreSettings.SettingsToShow.MOST_POPULAR; | 97 SettingsToShow.MOST_POPULAR; |
| 93 this.updateState_(false); | 98 this.updateState_(false); |
| 94 this.metrics_.record(this.isExpanded ? | 99 this.metrics_.record(this.isExpanded ? |
| 95 print_preview.Metrics.PrintSettingsUiBucket.MORE_SETTINGS_CLICKED : | 100 print_preview.Metrics.PrintSettingsUiBucket.MORE_SETTINGS_CLICKED : |
| 96 print_preview.Metrics.PrintSettingsUiBucket.LESS_SETTINGS_CLICKED); | 101 print_preview.Metrics.PrintSettingsUiBucket.LESS_SETTINGS_CLICKED); |
| 97 }, | 102 }, |
| 98 | 103 |
| 99 /** | 104 /** |
| 100 * Called when the destination selection has changed. Updates UI elements. | 105 * Called when the destination selection has changed. Updates UI elements. |
| 101 * @private | 106 * @private |
| 102 */ | 107 */ |
| (...skipping 21 matching lines...) Expand all Loading... | |
| 124 updateState_: function(noAnimation) { | 129 updateState_: function(noAnimation) { |
| 125 if (!this.firstDestinationReady_) { | 130 if (!this.firstDestinationReady_) { |
| 126 fadeOutElement(this.getElement()); | 131 fadeOutElement(this.getElement()); |
| 127 return; | 132 return; |
| 128 } | 133 } |
| 129 // When capabilities are not known yet, don't change the state to avoid | 134 // When capabilities are not known yet, don't change the state to avoid |
| 130 // unnecessary fade in/out cycles. | 135 // unnecessary fade in/out cycles. |
| 131 if (!this.capabilitiesReady_) | 136 if (!this.capabilitiesReady_) |
| 132 return; | 137 return; |
| 133 | 138 |
| 134 var all = this.settingsToShow_ == MoreSettings.SettingsToShow.ALL; | 139 var all = this.settingsToShow_ == SettingsToShow.ALL; |
| 135 this.getChildElement('.more-settings-label').textContent = | 140 this.getChildElement('.more-settings-label').textContent = |
| 136 loadTimeData.getString(all ? 'lessOptionsLabel' : 'moreOptionsLabel'); | 141 loadTimeData.getString(all ? 'lessOptionsLabel' : 'moreOptionsLabel'); |
| 137 var iconEl = this.getChildElement('.more-settings-icon'); | 142 var iconEl = this.getChildElement('.more-settings-icon'); |
| 138 iconEl.classList.toggle('more-settings-icon-plus', !all); | 143 iconEl.classList.toggle('more-settings-icon-plus', !all); |
| 139 iconEl.classList.toggle('more-settings-icon-minus', all); | 144 iconEl.classList.toggle('more-settings-icon-minus', all); |
| 140 | 145 |
| 141 var availableSections = this.settingsSections_.reduce( | 146 var availableSections = this.settingsSections_.reduce( |
| 142 function(count, section) { | 147 function(count, section) { |
| 143 return count + (section.isAvailable() ? 1 : 0); | 148 return count + (section.isAvailable() ? 1 : 0); |
| 144 }, 0); | 149 }, 0); |
| 145 | 150 |
| 146 // Magic 6 is chosen as the number of sections when it still feels like | 151 // Magic 6 is chosen as the number of sections when it still feels like |
| 147 // manageable and not too crowded. | 152 // manageable and not too crowded. |
| 148 var hasSectionsToToggle = | 153 var hasSectionsToToggle = |
| 149 availableSections > 6 && | 154 availableSections > 6 && |
| 150 this.settingsSections_.some(function(section) { | 155 this.settingsSections_.some(function(section) { |
| 151 return section.hasCollapsibleContent(); | 156 return section.hasCollapsibleContent(); |
| 152 }); | 157 }); |
| 153 | 158 |
| 154 if (hasSectionsToToggle) | 159 if (hasSectionsToToggle) |
| 155 fadeInElement(this.getElement(), noAnimation); | 160 fadeInElement(this.getElement(), noAnimation); |
| 156 else | 161 else |
| 157 fadeOutElement(this.getElement()); | 162 fadeOutElement(this.getElement()); |
| 158 | 163 |
| 159 var collapseContent = | 164 var collapseContent = |
| 160 this.settingsToShow_ == MoreSettings.SettingsToShow.MOST_POPULAR && | 165 this.settingsToShow_ == SettingsToShow.MOST_POPULAR && |
| 161 hasSectionsToToggle; | 166 hasSectionsToToggle; |
| 162 this.settingsSections_.forEach(function(section) { | 167 this.settingsSections_.forEach(function(section) { |
| 163 section.setCollapseContent(collapseContent, noAnimation); | 168 section.setCollapseContent(collapseContent, noAnimation); |
| 164 }); | 169 }); |
| 165 } | 170 } |
| 166 }; | 171 }; |
| 167 | 172 |
| 168 // Export | 173 // Export |
| 169 return { | 174 return { |
| 170 MoreSettings: MoreSettings | 175 MoreSettings: MoreSettings |
| 171 }; | 176 }; |
| 172 }); | 177 }); |
| OLD | NEW |