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 * UI component that renders checkboxes for various print options. | 9 * UI component that renders checkboxes for various print options. |
10 * @param {!print_preview.ticket_items.Duplex} duplex Duplex ticket item. | 10 * @param {!print_preview.ticket_items.Duplex} duplex Duplex ticket item. |
11 * @param {!print_preview.ticket_items.FitToPage} fitToPage Fit-to-page ticket | 11 * @param {!print_preview.ticket_items.FitToPage} fitToPage Fit-to-page ticket |
12 * item. | 12 * item. |
13 * @param {!print_preview.ticket_items.CssBackground} cssBackground CSS | 13 * @param {!print_preview.ticket_items.CssBackground} cssBackground CSS |
14 * background ticket item. | 14 * background ticket item. |
15 * @param {!print_preview.ticket_items.SelectionOnly} selectionOnly Selection | 15 * @param {!print_preview.ticket_items.SelectionOnly} selectionOnly Selection |
16 * only ticket item. | 16 * only ticket item. |
17 * @param {!print_preview.ticket_items.HeaderFooter} headerFooter Header | 17 * @param {!print_preview.ticket_items.HeaderFooter} headerFooter Header |
18 * footer ticket item. | 18 * footer ticket item. |
19 * @param {!print_preview.ticket_items.Rasterize} rasterize Rasterize ticket | |
20 * item. | |
19 * @constructor | 21 * @constructor |
20 * @extends {print_preview.SettingsSection} | 22 * @extends {print_preview.SettingsSection} |
21 */ | 23 */ |
22 function OtherOptionsSettings( | 24 function OtherOptionsSettings( |
23 duplex, fitToPage, cssBackground, selectionOnly, headerFooter) { | 25 duplex, fitToPage, cssBackground, selectionOnly, headerFooter, |
26 rasterize) { | |
24 print_preview.SettingsSection.call(this); | 27 print_preview.SettingsSection.call(this); |
25 | 28 |
26 /** | 29 /** |
27 * Duplex ticket item, used to read/write the duplex selection. | 30 * Ticket items, used to read/write. ticketItems_[i] corresponds to the HTML |
28 * @type {!print_preview.ticket_items.Duplex} | 31 * container element at index i. |
32 * @type {Array<!print_preview.ticket_items.TicketItem>} | |
29 * @private | 33 * @private |
30 */ | 34 */ |
31 this.duplexTicketItem_ = duplex; | 35 this.ticketItems_ = [headerFooter, fitToPage, duplex, cssBackground, |
dpapad
2016/12/13 23:38:18
Can this be simplified even more? We have M arrays
rbpotter
2016/12/15 00:50:58
Done.
| |
36 rasterize, selectionOnly]; | |
32 | 37 |
33 /** | 38 /** |
34 * Fit-to-page ticket item, used to read/write the fit-to-page selection. | 39 * Array indicating whether the container at index i is collapsible. |
35 * @type {!print_preview.ticket_items.FitToPage} | 40 * @type {Array<boolean>} |
36 * @private | 41 * @private |
37 */ | 42 */ |
38 this.fitToPageTicketItem_ = fitToPage; | 43 this.collapsible_ = [true, false, false, true, true, true]; |
39 | 44 |
40 /** | 45 /** |
41 * Enable CSS backgrounds ticket item, used to read/write. | 46 * Array of container elements. The element at index i corresponds to the |
42 * @type {!print_preview.ticket_items.CssBackground} | 47 * checkbox at index i of checkboxes_, the ticket item at index i of |
48 * ticketItems_, and is collapsible if collapsible_[i] is true. | |
49 * @type {Array<HTMLElement>} | |
43 * @private | 50 * @private |
44 */ | 51 */ |
45 this.cssBackgroundTicketItem_ = cssBackground; | 52 this.containers_ = [null, null, null, null, null, null]; |
46 | 53 |
47 /** | 54 /** |
48 * Print selection only ticket item, used to read/write. | 55 * Array of checkbox elements. Each checkbox is the checkbox child element |
49 * @type {!print_preview.ticket_items.SelectionOnly} | 56 * of the corresponding container element in containers_. |
57 * @type {Array<HTMLElement>} | |
50 * @private | 58 * @private |
51 */ | 59 */ |
52 this.selectionOnlyTicketItem_ = selectionOnly; | 60 this.checkboxes_ = [null, null, null, null, null, null]; |
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 }; | 61 }; |
131 | 62 |
132 OtherOptionsSettings.prototype = { | 63 OtherOptionsSettings.prototype = { |
133 __proto__: print_preview.SettingsSection.prototype, | 64 __proto__: print_preview.SettingsSection.prototype, |
134 | 65 |
135 /** @override */ | 66 /** @override */ |
136 isAvailable: function() { | 67 isAvailable: function() { |
137 return this.headerFooterTicketItem_.isCapabilityAvailable() || | 68 return this.ticketItems_.some(function(ticketItem) { |
138 this.fitToPageTicketItem_.isCapabilityAvailable() || | 69 return ticketItem.isCapabilityAvailable(); |
139 this.duplexTicketItem_.isCapabilityAvailable() || | 70 }); |
140 this.cssBackgroundTicketItem_.isCapabilityAvailable() || | |
141 this.selectionOnlyTicketItem_.isCapabilityAvailable(); | |
142 }, | 71 }, |
143 | 72 |
144 /** @override */ | 73 /** @override */ |
145 hasCollapsibleContent: function() { | 74 hasCollapsibleContent: function() { |
146 return this.headerFooterTicketItem_.isCapabilityAvailable() || | 75 return this.collapsible_.some(function(collapsible) { |
147 this.cssBackgroundTicketItem_.isCapabilityAvailable() || | 76 return collapsible; |
148 this.selectionOnlyTicketItem_.isCapabilityAvailable(); | 77 }); |
149 }, | 78 }, |
150 | 79 |
151 /** @override */ | 80 /** @override */ |
152 set isEnabled(isEnabled) { | 81 set isEnabled(isEnabled) { |
153 this.headerFooterCheckbox_.disabled = !isEnabled; | 82 for (var i = 0; i < this.checkboxes_.length - 1; i++) { |
154 this.fitToPageCheckbox_.disabled = !isEnabled; | 83 this.checkboxes_[i].disabled = !isEnabled; |
155 this.duplexCheckbox_.disabled = !isEnabled; | 84 } |
156 this.cssBackgroundCheckbox_.disabled = !isEnabled; | |
157 }, | 85 }, |
158 | 86 |
159 /** @override */ | 87 /** @override */ |
160 enterDocument: function() { | 88 enterDocument: function() { |
161 print_preview.SettingsSection.prototype.enterDocument.call(this); | 89 print_preview.SettingsSection.prototype.enterDocument.call(this); |
162 this.tracker.add( | 90 for (var i = 0; i < this.checkboxes_.length; i++) { |
163 this.headerFooterCheckbox_, | 91 this.tracker.add( |
164 'click', | 92 this.checkboxes_[i], |
165 this.onHeaderFooterCheckboxClick_.bind(this)); | 93 'click', |
166 this.tracker.add( | 94 this.onCheckboxClick_.bind(this, i)); |
167 this.fitToPageCheckbox_, | 95 this.tracker.add( |
168 'click', | 96 this.ticketItems_[i], |
169 this.onFitToPageCheckboxClick_.bind(this)); | 97 print_preview.ticket_items.TicketItem.EventType.CHANGE, |
170 this.tracker.add( | 98 this.onTicketItemChange_.bind(this, i)); |
171 this.duplexCheckbox_, | 99 } |
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 }, | 100 }, |
203 | 101 |
204 /** @override */ | 102 /** @override */ |
205 exitDocument: function() { | 103 exitDocument: function() { |
206 print_preview.SettingsSection.prototype.exitDocument.call(this); | 104 print_preview.SettingsSection.prototype.exitDocument.call(this); |
207 this.headerFooterContainer_ = null; | 105 this.containers_ = [null, null, null, null, null, null]; |
208 this.headerFooterCheckbox_ = null; | 106 this.checkboxes_ = [null, null, null, null, null, null]; |
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 }, | 107 }, |
218 | 108 |
219 /** @override */ | 109 /** @override */ |
220 decorateInternal: function() { | 110 decorateInternal: function() { |
221 this.headerFooterContainer_ = this.getElement().querySelector( | 111 this.containers_[0] = this.getElement().querySelector( |
222 '.header-footer-container'); | 112 '.header-footer-container'); |
223 this.headerFooterCheckbox_ = this.headerFooterContainer_.querySelector( | 113 this.containers_[1] = this.getElement().querySelector( |
224 '.header-footer-checkbox'); | |
225 this.fitToPageContainer_ = this.getElement().querySelector( | |
226 '.fit-to-page-container'); | 114 '.fit-to-page-container'); |
227 this.fitToPageCheckbox_ = this.fitToPageContainer_.querySelector( | 115 this.containers_[2] = this.getElement().querySelector( |
228 '.fit-to-page-checkbox'); | |
229 this.duplexContainer_ = this.getElement().querySelector( | |
230 '.duplex-container'); | 116 '.duplex-container'); |
231 this.duplexCheckbox_ = this.duplexContainer_.querySelector( | 117 this.containers_[3] = this.getElement().querySelector( |
232 '.duplex-checkbox'); | |
233 this.cssBackgroundContainer_ = this.getElement().querySelector( | |
234 '.css-background-container'); | 118 '.css-background-container'); |
235 this.cssBackgroundCheckbox_ = this.cssBackgroundContainer_.querySelector( | 119 this.containers_[4] = this.getElement().querySelector( |
236 '.css-background-checkbox'); | 120 '.rasterize-container'); |
237 this.selectionOnlyContainer_ = this.getElement().querySelector( | 121 this.containers_[5] = this.getElement().querySelector( |
238 '.selection-only-container'); | 122 '.selection-only-container'); |
239 this.selectionOnlyCheckbox_ = this.selectionOnlyContainer_.querySelector( | 123 for (var i = 0; i < this.containers_.length; i++) { |
240 '.selection-only-checkbox'); | 124 this.checkboxes_[i] = |
125 this.containers_[i].querySelector('.checkbox'); | |
126 } | |
241 }, | 127 }, |
242 | 128 |
243 /** @override */ | 129 /** @override */ |
244 updateUiStateInternal: function() { | 130 updateUiStateInternal: function() { |
245 if (this.isAvailable()) { | 131 if (this.isAvailable()) { |
246 setIsVisible(this.headerFooterContainer_, | 132 for (var i = 0; i < this.containers_.length; i++) { |
247 this.headerFooterTicketItem_.isCapabilityAvailable() && | 133 var shouldShow = this.ticketItems_[i].isCapabilityAvailable() && |
248 !this.collapseContent); | 134 (!this.collapsible_[i] || !this.collapseContent); |
249 setIsVisible(this.fitToPageContainer_, | 135 setIsVisible(this.containers_[i], shouldShow); |
250 this.fitToPageTicketItem_.isCapabilityAvailable()); | 136 } |
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 } | 137 } |
260 print_preview.SettingsSection.prototype.updateUiStateInternal.call(this); | 138 print_preview.SettingsSection.prototype.updateUiStateInternal.call(this); |
261 }, | 139 }, |
262 | 140 |
263 /** @override */ | 141 /** @override */ |
264 isSectionVisibleInternal: function() { | 142 isSectionVisibleInternal: function() { |
265 if (this.collapseContent) { | 143 for (var i = 0; i < this.containers_.length; i++) { |
266 return this.fitToPageTicketItem_.isCapabilityAvailable() || | 144 if (this.ticketItems_[i].isCapabilityAvailable() && |
267 this.duplexTicketItem_.isCapabilityAvailable(); | 145 (!this.collapsible_[i] || !this.collapseContent)) { |
146 return true; | |
147 } | |
268 } | 148 } |
269 | 149 return false; |
270 return this.isAvailable(); | |
271 }, | |
272 | |
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 }, | 150 }, |
282 | 151 |
283 /** | 152 /** |
284 * Called when the fit-to-page checkbox is clicked. Updates the print | 153 * Called when a checkbox is clicked. Updates the print ticket. |
285 * ticket. | 154 * @param {number} index : The index of the checkbox that was clicked. |
286 * @private | 155 * @private |
287 */ | 156 */ |
288 onFitToPageCheckboxClick_: function() { | 157 onCheckboxClick_: function(index) { |
289 this.fitToPageTicketItem_.updateValue(this.fitToPageCheckbox_.checked); | 158 this.ticketItems_[index].updateValue(this.checkboxes_[index].checked); |
290 }, | 159 }, |
291 | 160 |
292 /** | 161 /** |
293 * Called when the duplex checkbox is clicked. Updates the print ticket. | 162 * Called a ticket item changes. Updates the UI state. |
163 * @param {number} index : The index of the ticket item that changed. | |
294 * @private | 164 * @private |
295 */ | 165 */ |
296 onDuplexCheckboxClick_: function() { | 166 onTicketItemChange_: function(index) { |
297 this.duplexTicketItem_.updateValue(this.duplexCheckbox_.checked); | 167 this.checkboxes_[index].checked = this.ticketItems_[index].getValue(); |
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(); | 168 this.updateUiStateInternal(); |
371 }, | 169 }, |
372 }; | 170 }; |
373 | 171 |
374 // Export | 172 // Export |
375 return { | 173 return { |
376 OtherOptionsSettings: OtherOptionsSettings | 174 OtherOptionsSettings: OtherOptionsSettings |
377 }; | 175 }; |
378 }); | 176 }); |
OLD | NEW |