OLD | NEW |
---|---|
1 // Copyright (c) 2012 The Chromium Authors. All rights reserved. | 1 // Copyright (c) 2012 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.define('print_preview', function() { | 5 cr.define('print_preview', function() { |
6 'use strict'; | 6 'use strict'; |
7 | 7 |
8 /** | 8 /** |
9 * Represents a single option in the Other Options settings section. | |
10 * @param {!print_preview.ticket_items.TicketItem} ticketItem The ticket item | |
11 * for this element, used to read and write. | |
12 * @param {boolean} collapsible Whether this option is collapsible or not. | |
13 * @param {string} cssId The CSS id for the container element for this option, | |
14 * used to access the container and checkbox HTML elements. | |
15 * @constructor | |
16 */ | |
17 function CheckboxTicketItemElement(ticketItem, collapsible, cssId) { | |
18 /** | |
19 * Ticket item for this element, used to read/write. | |
20 * @private {!print_preview.ticket_items.TicketItem} | |
21 */ | |
22 this.ticketItem_ = ticketItem; | |
23 | |
24 /** | |
25 * Whether this element is collapsible. | |
26 * @private {boolean} | |
27 */ | |
28 this.collapsible_ = collapsible; | |
29 | |
30 /** | |
31 * The CSS id string for the container element. | |
32 * @private {string} | |
33 */ | |
34 this.cssId_ = cssId; | |
35 | |
36 /** | |
37 * The HTML container element. Populated when decorate() is called. | |
38 * @private {HTMLElement} | |
39 */ | |
40 this.container_ = null; | |
41 | |
42 /** | |
43 * The HTML checkbox input element. The checkbox child element of | |
44 * container_. Populated when decorate() is called. | |
45 * @private {HTMLElement} | |
46 */ | |
47 this.checkbox_ = null; | |
48 }; | |
49 | |
50 CheckboxTicketItemElement.prototype = { | |
51 | |
52 /** @return {boolean} Whether the element is collapsible */ | |
53 get collapsible() { | |
54 return this.collapsible_; | |
55 }, | |
56 | |
57 /** | |
58 * @return {!print_preview.ticket_items.TicketItem} The ticket item for this | |
59 * element. | |
60 */ | |
61 get ticketItem() { | |
62 return this.ticketItem_; | |
63 }, | |
64 | |
65 /** @return {HTMLElement} The checkbox HTML element. */ | |
66 get checkbox() { | |
67 return this.checkbox_; | |
68 }, | |
69 | |
70 /** Initializes container and checkbox */ | |
71 decorate: function() { | |
72 this.container_ = document.getElementById(this.cssId_); | |
dpapad
2016/12/16 00:53:48
-2 indent
rbpotter
2016/12/16 01:19:49
Done.
| |
73 this.checkbox_ = this.container_.querySelector('.checkbox'); | |
74 }, | |
75 | |
76 /** Resets container and checkbox. */ | |
77 exitDocument: function() { | |
78 this.container_ = null; | |
79 this.checkbox_ = null; | |
80 }, | |
81 | |
82 /** Called when the checkbox is clicked. Updates the ticket item value. */ | |
83 onCheckboxClick: function() { | |
84 this.ticketItem_.updateValue(this.checkbox_.checked); | |
85 }, | |
86 | |
87 /** | |
88 * Called when the ticket item changes. Updates the UI state. | |
89 * @param {!print_preview.SettingsSection.OtherOptionsSettings} | |
90 * otherOptionsSettings The settings section that this element is part | |
91 * of. | |
92 */ | |
93 onTicketItemChange: function(otherOptionsSettings) { | |
94 this.checkbox_.checked = this.ticketItem_.getValue(); | |
95 otherOptionsSettings.updateUiStateInternal(); | |
96 }, | |
97 | |
98 /** | |
99 * @param {boolean} collapseContent Whether the settings section has content | |
100 * collapsed. | |
101 * @return {boolean} Whether this element should be visible. | |
102 */ | |
103 isVisible: function(collapseContent) { | |
104 return this.ticketItem_.isCapabilityAvailable() && | |
105 (!this.collapsible_ || !collapseContent); | |
106 }, | |
107 | |
108 /** | |
109 * Sets the visibility of the element. | |
110 * @param {boolean} collapseContent Whether the settings section has content | |
111 * collapsed. | |
112 */ | |
113 setVisibility: function(collapseContent) { | |
114 setIsVisible(this.container_, this.isVisible(collapseContent)); | |
115 }, | |
116 | |
117 }; | |
118 | |
119 /** | |
9 * UI component that renders checkboxes for various print options. | 120 * UI component that renders checkboxes for various print options. |
10 * @param {!print_preview.ticket_items.Duplex} duplex Duplex ticket item. | 121 * @param {!print_preview.ticket_items.Duplex} duplex Duplex ticket item. |
11 * @param {!print_preview.ticket_items.FitToPage} fitToPage Fit-to-page ticket | 122 * @param {!print_preview.ticket_items.FitToPage} fitToPage Fit-to-page ticket |
12 * item. | 123 * item. |
13 * @param {!print_preview.ticket_items.CssBackground} cssBackground CSS | 124 * @param {!print_preview.ticket_items.CssBackground} cssBackground CSS |
14 * background ticket item. | 125 * background ticket item. |
15 * @param {!print_preview.ticket_items.SelectionOnly} selectionOnly Selection | 126 * @param {!print_preview.ticket_items.SelectionOnly} selectionOnly Selection |
16 * only ticket item. | 127 * only ticket item. |
17 * @param {!print_preview.ticket_items.HeaderFooter} headerFooter Header | 128 * @param {!print_preview.ticket_items.HeaderFooter} headerFooter Header |
18 * footer ticket item. | 129 * footer ticket item. |
19 * @constructor | 130 * @constructor |
20 * @extends {print_preview.SettingsSection} | 131 * @extends {print_preview.SettingsSection} |
21 */ | 132 */ |
22 function OtherOptionsSettings( | 133 function OtherOptionsSettings( |
23 duplex, fitToPage, cssBackground, selectionOnly, headerFooter) { | 134 duplex, fitToPage, cssBackground, selectionOnly, headerFooter) { |
24 print_preview.SettingsSection.call(this); | 135 print_preview.SettingsSection.call(this); |
25 | 136 |
26 /** | 137 /* |
27 * Duplex ticket item, used to read/write the duplex selection. | 138 * @private {!Array<!CheckboxTicketItemElement>} checkbox ticket item |
28 * @type {!print_preview.ticket_items.Duplex} | 139 * elements representing the different options in the section. |
29 * @private | 140 * Selection only must always be the last element in the array. |
30 */ | 141 */ |
31 this.duplexTicketItem_ = duplex; | 142 this.elements_ = [ |
143 new CheckboxTicketItemElement(headerFooter, true, | |
144 'header-footer-container'), | |
145 new CheckboxTicketItemElement(fitToPage, false, | |
146 'fit-to-page-container'), | |
147 new CheckboxTicketItemElement(duplex, false, 'duplex-container'), | |
148 new CheckboxTicketItemElement(cssBackground, true, | |
149 'css-background-container'), | |
150 new CheckboxTicketItemElement(selectionOnly, true, | |
151 'selection-only-container') | |
152 ]; | |
32 | 153 |
33 /** | |
34 * Fit-to-page ticket item, used to read/write the fit-to-page selection. | |
35 * @type {!print_preview.ticket_items.FitToPage} | |
36 * @private | |
37 */ | |
38 this.fitToPageTicketItem_ = fitToPage; | |
39 | |
40 /** | |
41 * Enable CSS backgrounds ticket item, used to read/write. | |
42 * @type {!print_preview.ticket_items.CssBackground} | |
43 * @private | |
44 */ | |
45 this.cssBackgroundTicketItem_ = cssBackground; | |
46 | |
47 /** | |
48 * Print selection only ticket item, used to read/write. | |
49 * @type {!print_preview.ticket_items.SelectionOnly} | |
50 * @private | |
51 */ | |
52 this.selectionOnlyTicketItem_ = selectionOnly; | |
53 | |
54 /** | |
55 * Header-footer ticket item, used to read/write. | |
56 * @type {!print_preview.ticket_items.HeaderFooter} | |
57 * @private | |
58 */ | |
59 this.headerFooterTicketItem_ = headerFooter; | |
60 | |
61 /** | |
62 * Header footer container element. | |
63 * @type {HTMLElement} | |
64 * @private | |
65 */ | |
66 this.headerFooterContainer_ = null; | |
67 | |
68 /** | |
69 * Header footer checkbox. | |
70 * @type {HTMLInputElement} | |
71 * @private | |
72 */ | |
73 this.headerFooterCheckbox_ = null; | |
74 | |
75 /** | |
76 * Fit-to-page container element. | |
77 * @type {HTMLElement} | |
78 * @private | |
79 */ | |
80 this.fitToPageContainer_ = null; | |
81 | |
82 /** | |
83 * Fit-to-page checkbox. | |
84 * @type {HTMLInputElement} | |
85 * @private | |
86 */ | |
87 this.fitToPageCheckbox_ = null; | |
88 | |
89 /** | |
90 * Duplex container element. | |
91 * @type {HTMLElement} | |
92 * @private | |
93 */ | |
94 this.duplexContainer_ = null; | |
95 | |
96 /** | |
97 * Duplex checkbox. | |
98 * @type {HTMLInputElement} | |
99 * @private | |
100 */ | |
101 this.duplexCheckbox_ = null; | |
102 | |
103 /** | |
104 * Print CSS backgrounds container element. | |
105 * @type {HTMLElement} | |
106 * @private | |
107 */ | |
108 this.cssBackgroundContainer_ = null; | |
109 | |
110 /** | |
111 * Print CSS backgrounds checkbox. | |
112 * @type {HTMLInputElement} | |
113 * @private | |
114 */ | |
115 this.cssBackgroundCheckbox_ = null; | |
116 | |
117 /** | |
118 * Print selection only container element. | |
119 * @type {HTMLElement} | |
120 * @private | |
121 */ | |
122 this.selectionOnlyContainer_ = null; | |
123 | |
124 /** | |
125 * Print selection only checkbox. | |
126 * @type {HTMLInputElement} | |
127 * @private | |
128 */ | |
129 this.selectionOnlyCheckbox_ = null; | |
130 }; | 154 }; |
131 | 155 |
132 OtherOptionsSettings.prototype = { | 156 OtherOptionsSettings.prototype = { |
133 __proto__: print_preview.SettingsSection.prototype, | 157 __proto__: print_preview.SettingsSection.prototype, |
134 | 158 |
135 /** @override */ | 159 /** @override */ |
136 isAvailable: function() { | 160 isAvailable: function() { |
137 return this.headerFooterTicketItem_.isCapabilityAvailable() || | 161 return this.elements_.some(function(element) { |
138 this.fitToPageTicketItem_.isCapabilityAvailable() || | 162 return element.ticketItem.isCapabilityAvailable(); |
139 this.duplexTicketItem_.isCapabilityAvailable() || | 163 }); |
140 this.cssBackgroundTicketItem_.isCapabilityAvailable() || | |
141 this.selectionOnlyTicketItem_.isCapabilityAvailable(); | |
142 }, | 164 }, |
143 | 165 |
144 /** @override */ | 166 /** @override */ |
145 hasCollapsibleContent: function() { | 167 hasCollapsibleContent: function() { |
146 return this.headerFooterTicketItem_.isCapabilityAvailable() || | 168 return this.elements_.some(function(element) { |
147 this.cssBackgroundTicketItem_.isCapabilityAvailable() || | 169 return element.collapsible; |
148 this.selectionOnlyTicketItem_.isCapabilityAvailable(); | 170 }); |
149 }, | 171 }, |
150 | 172 |
151 /** @override */ | 173 /** @override */ |
152 set isEnabled(isEnabled) { | 174 set isEnabled(isEnabled) { |
153 this.headerFooterCheckbox_.disabled = !isEnabled; | 175 /* Skip |ticket_items.SelectionOnly|, which must always be the last |
154 this.fitToPageCheckbox_.disabled = !isEnabled; | 176 * element, as this checkbox is enabled based on whether the user has |
155 this.duplexCheckbox_.disabled = !isEnabled; | 177 * selected something in the page, which is different logic from the |
156 this.cssBackgroundCheckbox_.disabled = !isEnabled; | 178 * other elements. */ |
179 for (var i = 0; i < this.elements_.length - 1; i++) | |
180 this.elements_[i].checkbox.disabled = !isEnabled; | |
157 }, | 181 }, |
158 | 182 |
159 /** @override */ | 183 /** @override */ |
160 enterDocument: function() { | 184 enterDocument: function() { |
161 print_preview.SettingsSection.prototype.enterDocument.call(this); | 185 print_preview.SettingsSection.prototype.enterDocument.call(this); |
162 this.tracker.add( | 186 this.elements_.forEach(function(element) { |
163 this.headerFooterCheckbox_, | 187 this.tracker.add( |
164 'click', | 188 element.checkbox, |
165 this.onHeaderFooterCheckboxClick_.bind(this)); | 189 'click', |
166 this.tracker.add( | 190 element.onCheckboxClick.bind(element)); |
167 this.fitToPageCheckbox_, | 191 this.tracker.add( |
168 'click', | 192 element.ticketItem, |
169 this.onFitToPageCheckboxClick_.bind(this)); | 193 print_preview.ticket_items.TicketItem.EventType.CHANGE, |
170 this.tracker.add( | 194 element.onTicketItemChange.bind(element, this)); |
171 this.duplexCheckbox_, | 195 }, this); |
172 'click', | |
173 this.onDuplexCheckboxClick_.bind(this)); | |
174 this.tracker.add( | |
175 this.cssBackgroundCheckbox_, | |
176 'click', | |
177 this.onCssBackgroundCheckboxClick_.bind(this)); | |
178 this.tracker.add( | |
179 this.selectionOnlyCheckbox_, | |
180 'click', | |
181 this.onSelectionOnlyCheckboxClick_.bind(this)); | |
182 this.tracker.add( | |
183 this.duplexTicketItem_, | |
184 print_preview.ticket_items.TicketItem.EventType.CHANGE, | |
185 this.onDuplexChange_.bind(this)); | |
186 this.tracker.add( | |
187 this.fitToPageTicketItem_, | |
188 print_preview.ticket_items.TicketItem.EventType.CHANGE, | |
189 this.onFitToPageChange_.bind(this)); | |
190 this.tracker.add( | |
191 this.cssBackgroundTicketItem_, | |
192 print_preview.ticket_items.TicketItem.EventType.CHANGE, | |
193 this.onCssBackgroundChange_.bind(this)); | |
194 this.tracker.add( | |
195 this.selectionOnlyTicketItem_, | |
196 print_preview.ticket_items.TicketItem.EventType.CHANGE, | |
197 this.onSelectionOnlyChange_.bind(this)); | |
198 this.tracker.add( | |
199 this.headerFooterTicketItem_, | |
200 print_preview.ticket_items.TicketItem.EventType.CHANGE, | |
201 this.onHeaderFooterChange_.bind(this)); | |
202 }, | 196 }, |
203 | 197 |
204 /** @override */ | 198 /** @override */ |
205 exitDocument: function() { | 199 exitDocument: function() { |
206 print_preview.SettingsSection.prototype.exitDocument.call(this); | 200 print_preview.SettingsSection.prototype.exitDocument.call(this); |
207 this.headerFooterContainer_ = null; | 201 for (var i = 0; i < this.elements_.length; i++) |
208 this.headerFooterCheckbox_ = null; | 202 this.elements_[i].exitDocument(); |
209 this.fitToPageContainer_ = null; | |
210 this.fitToPageCheckbox_ = null; | |
211 this.duplexContainer_ = null; | |
212 this.duplexCheckbox_ = null; | |
213 this.cssBackgroundContainer_ = null; | |
214 this.cssBackgroundCheckbox_ = null; | |
215 this.selectionOnlyContainer_ = null; | |
216 this.selectionOnlyCheckbox_ = null; | |
217 }, | 203 }, |
218 | 204 |
219 /** @override */ | 205 /** @override */ |
220 decorateInternal: function() { | 206 decorateInternal: function() { |
221 this.headerFooterContainer_ = this.getElement().querySelector( | 207 for (var i = 0; i < this.elements_.length; i++) |
222 '.header-footer-container'); | 208 this.elements_[i].decorate(); |
223 this.headerFooterCheckbox_ = this.headerFooterContainer_.querySelector( | |
224 '.header-footer-checkbox'); | |
225 this.fitToPageContainer_ = this.getElement().querySelector( | |
226 '.fit-to-page-container'); | |
227 this.fitToPageCheckbox_ = this.fitToPageContainer_.querySelector( | |
228 '.fit-to-page-checkbox'); | |
229 this.duplexContainer_ = this.getElement().querySelector( | |
230 '.duplex-container'); | |
231 this.duplexCheckbox_ = this.duplexContainer_.querySelector( | |
232 '.duplex-checkbox'); | |
233 this.cssBackgroundContainer_ = this.getElement().querySelector( | |
234 '.css-background-container'); | |
235 this.cssBackgroundCheckbox_ = this.cssBackgroundContainer_.querySelector( | |
236 '.css-background-checkbox'); | |
237 this.selectionOnlyContainer_ = this.getElement().querySelector( | |
238 '.selection-only-container'); | |
239 this.selectionOnlyCheckbox_ = this.selectionOnlyContainer_.querySelector( | |
240 '.selection-only-checkbox'); | |
241 }, | 209 }, |
242 | 210 |
243 /** @override */ | 211 /** @override */ |
244 updateUiStateInternal: function() { | 212 updateUiStateInternal: function() { |
245 if (this.isAvailable()) { | 213 if (this.isAvailable()) { |
246 setIsVisible(this.headerFooterContainer_, | 214 for (var i = 0; i < this.elements_.length; i++) |
247 this.headerFooterTicketItem_.isCapabilityAvailable() && | 215 this.elements_[i].setVisibility(this.collapseContent); |
248 !this.collapseContent); | |
249 setIsVisible(this.fitToPageContainer_, | |
250 this.fitToPageTicketItem_.isCapabilityAvailable()); | |
251 setIsVisible(this.duplexContainer_, | |
252 this.duplexTicketItem_.isCapabilityAvailable()); | |
253 setIsVisible(this.cssBackgroundContainer_, | |
254 this.cssBackgroundTicketItem_.isCapabilityAvailable() && | |
255 !this.collapseContent); | |
256 setIsVisible(this.selectionOnlyContainer_, | |
257 this.selectionOnlyTicketItem_.isCapabilityAvailable() && | |
258 !this.collapseContent); | |
259 } | 216 } |
260 print_preview.SettingsSection.prototype.updateUiStateInternal.call(this); | 217 print_preview.SettingsSection.prototype.updateUiStateInternal.call(this); |
261 }, | 218 }, |
262 | 219 |
263 /** @override */ | 220 /** @override */ |
264 isSectionVisibleInternal: function() { | 221 isSectionVisibleInternal: function() { |
265 if (this.collapseContent) { | 222 return this.elements_.some(function(element) { |
266 return this.fitToPageTicketItem_.isCapabilityAvailable() || | 223 return element.isVisible(this.collapseContent); |
267 this.duplexTicketItem_.isCapabilityAvailable(); | 224 }, this); |
268 } | |
269 | |
270 return this.isAvailable(); | |
271 }, | 225 }, |
272 | 226 |
273 /** | |
274 * Called when the header-footer checkbox is clicked. Updates the print | |
275 * ticket. | |
276 * @private | |
277 */ | |
278 onHeaderFooterCheckboxClick_: function() { | |
279 this.headerFooterTicketItem_.updateValue( | |
280 this.headerFooterCheckbox_.checked); | |
281 }, | |
282 | |
283 /** | |
284 * Called when the fit-to-page checkbox is clicked. Updates the print | |
285 * ticket. | |
286 * @private | |
287 */ | |
288 onFitToPageCheckboxClick_: function() { | |
289 this.fitToPageTicketItem_.updateValue(this.fitToPageCheckbox_.checked); | |
290 }, | |
291 | |
292 /** | |
293 * Called when the duplex checkbox is clicked. Updates the print ticket. | |
294 * @private | |
295 */ | |
296 onDuplexCheckboxClick_: function() { | |
297 this.duplexTicketItem_.updateValue(this.duplexCheckbox_.checked); | |
298 }, | |
299 | |
300 /** | |
301 * Called when the print CSS backgrounds checkbox is clicked. Updates the | |
302 * print ticket store. | |
303 * @private | |
304 */ | |
305 onCssBackgroundCheckboxClick_: function() { | |
306 this.cssBackgroundTicketItem_.updateValue( | |
307 this.cssBackgroundCheckbox_.checked); | |
308 }, | |
309 | |
310 /** | |
311 * Called when the print selection only is clicked. Updates the | |
312 * print ticket store. | |
313 * @private | |
314 */ | |
315 onSelectionOnlyCheckboxClick_: function() { | |
316 this.selectionOnlyTicketItem_.updateValue( | |
317 this.selectionOnlyCheckbox_.checked); | |
318 }, | |
319 | |
320 /** | |
321 * Called when the duplex ticket item has changed. Updates the duplex | |
322 * checkbox. | |
323 * @private | |
324 */ | |
325 onDuplexChange_: function() { | |
326 this.duplexCheckbox_.checked = this.duplexTicketItem_.getValue(); | |
327 this.updateUiStateInternal(); | |
328 }, | |
329 | |
330 /** | |
331 * Called when the fit-to-page ticket item has changed. Updates the | |
332 * fit-to-page checkbox. | |
333 * @private | |
334 */ | |
335 onFitToPageChange_: function() { | |
336 this.fitToPageCheckbox_.checked = this.fitToPageTicketItem_.getValue(); | |
337 this.updateUiStateInternal(); | |
338 }, | |
339 | |
340 /** | |
341 * Called when the CSS background ticket item has changed. Updates the | |
342 * CSS background checkbox. | |
343 * @private | |
344 */ | |
345 onCssBackgroundChange_: function() { | |
346 this.cssBackgroundCheckbox_.checked = | |
347 this.cssBackgroundTicketItem_.getValue(); | |
348 this.updateUiStateInternal(); | |
349 }, | |
350 | |
351 /** | |
352 * Called when the print selection only ticket item has changed. Updates the | |
353 * CSS background checkbox. | |
354 * @private | |
355 */ | |
356 onSelectionOnlyChange_: function() { | |
357 this.selectionOnlyCheckbox_.checked = | |
358 this.selectionOnlyTicketItem_.getValue(); | |
359 this.updateUiStateInternal(); | |
360 }, | |
361 | |
362 /** | |
363 * Called when the header-footer ticket item has changed. Updates the | |
364 * header-footer checkbox. | |
365 * @private | |
366 */ | |
367 onHeaderFooterChange_: function() { | |
368 this.headerFooterCheckbox_.checked = | |
369 this.headerFooterTicketItem_.getValue(); | |
370 this.updateUiStateInternal(); | |
371 }, | |
372 }; | 227 }; |
373 | 228 |
374 // Export | 229 // Export |
375 return { | 230 return { |
376 OtherOptionsSettings: OtherOptionsSettings | 231 OtherOptionsSettings: OtherOptionsSettings |
377 }; | 232 }; |
378 }); | 233 }); |
OLD | NEW |