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.
5 cr
.define('print_preview', function() {
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.
15 * @extends {print_preview.Component}
17 function MoreSettings(destinationStore
, settingsSections
) {
18 print_preview
.Component
.call(this);
20 /** @private {!print_preview.DestinationStore} */
21 this.destinationStore_
= destinationStore
;
23 /** @private {!Array<print_preview.SettingsSection>} */
24 this.settingsSections_
= settingsSections
;
26 /** @private {MoreSettings.SettingsToShow} */
27 this.settingsToShow_
= MoreSettings
.SettingsToShow
.MOST_POPULAR
;
29 /** @private {boolean} */
30 this.capabilitiesReady_
= false;
32 /** @private {boolean} */
33 this.firstDestinationReady_
= false;
36 * Used to record usage statistics.
37 * @private {!print_preview.PrintSettingsUiMetricsContext}
39 this.metrics_
= new print_preview
.PrintSettingsUiMetricsContext();
43 * Which settings are visible to the user.
46 MoreSettings
.SettingsToShow
= {
51 MoreSettings
.prototype = {
52 __proto__
: print_preview
.Component
.prototype,
54 /** @return {boolean} Returns {@code true} if settings are expanded. */
56 return this.settingsToShow_
== MoreSettings
.SettingsToShow
.ALL
;
60 enterDocument: function() {
61 print_preview
.Component
.prototype.enterDocument
.call(this);
63 this.tracker
.add(this.getElement(), 'click', this.onClick_
.bind(this));
65 this.destinationStore_
,
66 print_preview
.DestinationStore
.EventType
.DESTINATION_SELECT
,
67 this.onDestinationChanged_
.bind(this));
69 this.destinationStore_
,
70 print_preview
.DestinationStore
.EventType
.
71 SELECTED_DESTINATION_CAPABILITIES_READY
,
72 this.onDestinationCapabilitiesReady_
.bind(this));
73 this.settingsSections_
.forEach(function(section
) {
76 print_preview
.SettingsSection
.EventType
.COLLAPSIBLE_CONTENT_CHANGED
,
77 this.updateState_
.bind(this));
80 this.updateState_(true);
84 * Toggles "more/fewer options" state and notifies all the options sections
85 * to reflect the new state.
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
);
100 * Called when the destination selection has changed. Updates UI elements.
103 onDestinationChanged_: function() {
104 this.firstDestinationReady_
= true;
105 this.capabilitiesReady_
= false;
106 this.updateState_(false);
110 * Called when the destination selection has changed. Updates UI elements.
113 onDestinationCapabilitiesReady_: function() {
114 this.capabilitiesReady_
= true;
115 this.updateState_(false);
119 * Updates the component appearance according to the current state.
120 * @param {boolean} noAnimation Whether section visibility transitions
121 * should not be animated.
124 updateState_: function(noAnimation
) {
125 if (!this.firstDestinationReady_
) {
126 fadeOutElement(this.getElement());
129 // When capabilities are not known yet, don't change the state to avoid
130 // unnecessary fade in/out cycles.
131 if (!this.capabilitiesReady_
)
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
);
141 var availableSections
= this.settingsSections_
.reduce(
142 function(count
, section
) {
143 return count
+ (section
.isAvailable() ? 1 : 0);
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();
154 if (hasSectionsToToggle
)
155 fadeInElement(this.getElement(), noAnimation
);
157 fadeOutElement(this.getElement());
159 var collapseContent
=
160 this.settingsToShow_
== MoreSettings
.SettingsToShow
.MOST_POPULAR
&&
162 this.settingsSections_
.forEach(function(section
) {
163 section
.setCollapseContent(collapseContent
, noAnimation
);
170 MoreSettings
: MoreSettings