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.ALL; |
57 }, | 61 }, |
58 | 62 |
59 /** @override */ | 63 /** @override */ |
60 enterDocument: function() { | 64 enterDocument: function() { |
61 print_preview.Component.prototype.enterDocument.call(this); | 65 print_preview.Component.prototype.enterDocument.call(this); |
62 | 66 |
63 this.tracker.add(this.getElement(), 'click', this.onClick_.bind(this)); | 67 this.tracker.add(this.getElement(), 'click', this.onClick_.bind(this)); |
64 this.tracker.add( | 68 this.tracker.add( |
65 this.destinationStore_, | 69 this.destinationStore_, |
66 print_preview.DestinationStore.EventType.DESTINATION_SELECT, | 70 print_preview.DestinationStore.EventType.DESTINATION_SELECT, |
(...skipping 13 matching lines...) Expand all Loading... |
80 this.updateState_(true); | 84 this.updateState_(true); |
81 }, | 85 }, |
82 | 86 |
83 /** | 87 /** |
84 * Toggles "more/fewer options" state and notifies all the options sections | 88 * Toggles "more/fewer options" state and notifies all the options sections |
85 * to reflect the new state. | 89 * to reflect the new state. |
86 * @private | 90 * @private |
87 */ | 91 */ |
88 onClick_: function() { | 92 onClick_: function() { |
89 this.settingsToShow_ = | 93 this.settingsToShow_ = |
90 this.settingsToShow_ == MoreSettings.SettingsToShow.MOST_POPULAR ? | 94 this.settingsToShow_ == SettingsToShow.MOST_POPULAR ? |
91 MoreSettings.SettingsToShow.ALL : | 95 SettingsToShow.ALL : |
92 MoreSettings.SettingsToShow.MOST_POPULAR; | 96 SettingsToShow.MOST_POPULAR; |
93 this.updateState_(false); | 97 this.updateState_(false); |
94 this.metrics_.record(this.isExpanded ? | 98 this.metrics_.record(this.isExpanded ? |
95 print_preview.Metrics.PrintSettingsUiBucket.MORE_SETTINGS_CLICKED : | 99 print_preview.Metrics.PrintSettingsUiBucket.MORE_SETTINGS_CLICKED : |
96 print_preview.Metrics.PrintSettingsUiBucket.LESS_SETTINGS_CLICKED); | 100 print_preview.Metrics.PrintSettingsUiBucket.LESS_SETTINGS_CLICKED); |
97 }, | 101 }, |
98 | 102 |
99 /** | 103 /** |
100 * Called when the destination selection has changed. Updates UI elements. | 104 * Called when the destination selection has changed. Updates UI elements. |
101 * @private | 105 * @private |
102 */ | 106 */ |
(...skipping 21 matching lines...) Expand all Loading... |
124 updateState_: function(noAnimation) { | 128 updateState_: function(noAnimation) { |
125 if (!this.firstDestinationReady_) { | 129 if (!this.firstDestinationReady_) { |
126 fadeOutElement(this.getElement()); | 130 fadeOutElement(this.getElement()); |
127 return; | 131 return; |
128 } | 132 } |
129 // When capabilities are not known yet, don't change the state to avoid | 133 // When capabilities are not known yet, don't change the state to avoid |
130 // unnecessary fade in/out cycles. | 134 // unnecessary fade in/out cycles. |
131 if (!this.capabilitiesReady_) | 135 if (!this.capabilitiesReady_) |
132 return; | 136 return; |
133 | 137 |
134 var all = this.settingsToShow_ == MoreSettings.SettingsToShow.ALL; | 138 var all = this.settingsToShow_ == SettingsToShow.ALL; |
135 this.getChildElement('.more-settings-label').textContent = | 139 this.getChildElement('.more-settings-label').textContent = |
136 loadTimeData.getString(all ? 'lessOptionsLabel' : 'moreOptionsLabel'); | 140 loadTimeData.getString(all ? 'lessOptionsLabel' : 'moreOptionsLabel'); |
137 var iconEl = this.getChildElement('.more-settings-icon'); | 141 var iconEl = this.getChildElement('.more-settings-icon'); |
138 iconEl.classList.toggle('more-settings-icon-plus', !all); | 142 iconEl.classList.toggle('more-settings-icon-plus', !all); |
139 iconEl.classList.toggle('more-settings-icon-minus', all); | 143 iconEl.classList.toggle('more-settings-icon-minus', all); |
140 | 144 |
141 var availableSections = this.settingsSections_.reduce( | 145 var availableSections = this.settingsSections_.reduce( |
142 function(count, section) { | 146 function(count, section) { |
143 return count + (section.isAvailable() ? 1 : 0); | 147 return count + (section.isAvailable() ? 1 : 0); |
144 }, 0); | 148 }, 0); |
145 | 149 |
146 // Magic 6 is chosen as the number of sections when it still feels like | 150 // Magic 6 is chosen as the number of sections when it still feels like |
147 // manageable and not too crowded. | 151 // manageable and not too crowded. |
148 var hasSectionsToToggle = | 152 var hasSectionsToToggle = |
149 availableSections > 6 && | 153 availableSections > 6 && |
150 this.settingsSections_.some(function(section) { | 154 this.settingsSections_.some(function(section) { |
151 return section.hasCollapsibleContent(); | 155 return section.hasCollapsibleContent(); |
152 }); | 156 }); |
153 | 157 |
154 if (hasSectionsToToggle) | 158 if (hasSectionsToToggle) |
155 fadeInElement(this.getElement(), noAnimation); | 159 fadeInElement(this.getElement(), noAnimation); |
156 else | 160 else |
157 fadeOutElement(this.getElement()); | 161 fadeOutElement(this.getElement()); |
158 | 162 |
159 var collapseContent = | 163 var collapseContent = |
160 this.settingsToShow_ == MoreSettings.SettingsToShow.MOST_POPULAR && | 164 this.settingsToShow_ == SettingsToShow.MOST_POPULAR && |
161 hasSectionsToToggle; | 165 hasSectionsToToggle; |
162 this.settingsSections_.forEach(function(section) { | 166 this.settingsSections_.forEach(function(section) { |
163 section.setCollapseContent(collapseContent, noAnimation); | 167 section.setCollapseContent(collapseContent, noAnimation); |
164 }); | 168 }); |
165 } | 169 } |
166 }; | 170 }; |
167 | 171 |
168 // Export | 172 // Export |
169 return { | 173 return { |
170 MoreSettings: MoreSettings | 174 MoreSettings: MoreSettings |
171 }; | 175 }; |
172 }); | 176 }); |
OLD | NEW |