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 function CheckboxTicketItemElement(ticketItem, collapsible, className) { | |
dpapad
2016/12/15 01:17:50
This looks like a solid improvement (removes a lot
rbpotter
2016/12/16 00:06:31
Done in http://crrev.com/2576233003. Will rebase t
| |
9 /** | |
10 * Ticket item for this element, used to read/write. | |
11 * @type {!print_preview.ticket_items.TicketItem} | |
12 */ | |
13 this.ticketItem_ = ticketItem; | |
14 | |
15 /** | |
16 * Whether this element is collapsible. | |
17 * @type {boolean} | |
18 */ | |
19 this.collapsible_ = collapsible; | |
20 | |
21 /** | |
22 * The class name for the container element. | |
23 * @type {string} | |
24 */ | |
25 this.className_ = className; | |
26 | |
27 /** | |
28 * The HTML container element. | |
29 * @type {HTMLElement} | |
30 */ | |
31 this.container_ = null; | |
32 | |
33 /** | |
34 * The HTML checkbox input element. The checkbox child element of | |
35 * container_. | |
36 * @type {HTMLElement} | |
37 */ | |
38 this.checkbox_ = null; | |
39 }; | |
40 | |
41 CheckboxTicketItemElement.prototype = { | |
42 | |
43 /** @return {boolean} Whether the element is collapsible */ | |
44 get collapsible() { | |
45 return this.collapsible_; | |
46 }, | |
47 | |
48 /** | |
49 * @return {print_preview.ticket_items.TicketItem} The ticket item for this | |
50 * element. | |
51 */ | |
52 get ticketItem() { | |
53 return this.ticketItem_; | |
54 }, | |
55 | |
56 /** @return {HTMLElement} The checkbox HTML element. */ | |
57 get checkbox() { | |
58 return this.checkbox_; | |
59 }, | |
60 | |
61 /** Initializes container and checkbox */ | |
62 decorate: function(otherOptionsSettings) { | |
63 this.container_ = otherOptionsSettings.getElement().querySelector( | |
64 this.className_); | |
65 this.checkbox_ = this.container_.querySelector('.checkbox'); | |
66 }, | |
67 | |
68 /** Resets container and checkbox. */ | |
69 exitDocument: function() { | |
70 this.container_ = null; | |
71 this.checkbox_ = null; | |
72 }, | |
73 | |
74 /** Called when the checkbox is clicked. Updates the ticket item value. */ | |
75 onCheckboxClick: function() { | |
76 if (this.checkbox_.checked != null) | |
77 this.ticketItem_.updateValue(this.checkbox_.checked); | |
78 }, | |
79 | |
80 /** | |
81 * Called when the ticket item changes. Updates the UI state. | |
82 * @param {print_preview.SettingsSection.OtherOptionsSettings} The | |
83 * settings section that this element is part of. | |
84 */ | |
85 onTicketItemChange: function(otherOptionsSettings) { | |
86 this.checkbox_.checked = this.ticketItem_.getValue(); | |
87 otherOptionsSettings.updateUiStateInternal(); | |
88 }, | |
89 | |
90 /** | |
91 * @param {boolean} Whether the settings section has content collapsed. | |
92 * @return {boolean} Whether this element should be visible. | |
93 */ | |
94 isVisible: function(collapseContent) { | |
95 return this.ticketItem_.isCapabilityAvailable() && | |
96 (!this.collapsible_ || !collapseContent); | |
97 }, | |
98 | |
99 /** | |
100 * Sets the visibility of the element. | |
101 * @param {boolean} Whether the settings section has content collapsed. | |
102 */ | |
103 setVisibility: function(collapseContent) { | |
104 setIsVisible(this.container_, this.isVisible(collapseContent)); | |
105 }, | |
106 | |
107 }; | |
108 | |
8 /** | 109 /** |
9 * UI component that renders checkboxes for various print options. | 110 * UI component that renders checkboxes for various print options. |
10 * @param {!print_preview.ticket_items.Duplex} duplex Duplex ticket item. | 111 * @param {!print_preview.ticket_items.Duplex} duplex Duplex ticket item. |
11 * @param {!print_preview.ticket_items.FitToPage} fitToPage Fit-to-page ticket | 112 * @param {!print_preview.ticket_items.FitToPage} fitToPage Fit-to-page ticket |
12 * item. | 113 * item. |
13 * @param {!print_preview.ticket_items.CssBackground} cssBackground CSS | 114 * @param {!print_preview.ticket_items.CssBackground} cssBackground CSS |
14 * background ticket item. | 115 * background ticket item. |
15 * @param {!print_preview.ticket_items.SelectionOnly} selectionOnly Selection | 116 * @param {!print_preview.ticket_items.SelectionOnly} selectionOnly Selection |
16 * only ticket item. | 117 * only ticket item. |
17 * @param {!print_preview.ticket_items.HeaderFooter} headerFooter Header | 118 * @param {!print_preview.ticket_items.HeaderFooter} headerFooter Header |
18 * footer ticket item. | 119 * footer ticket item. |
120 * @param {!print_preview.ticket_items.Rasterize} rasterize Rasterize ticket | |
121 * item. | |
19 * @constructor | 122 * @constructor |
20 * @extends {print_preview.SettingsSection} | 123 * @extends {print_preview.SettingsSection} |
21 */ | 124 */ |
22 function OtherOptionsSettings( | 125 function OtherOptionsSettings( |
23 duplex, fitToPage, cssBackground, selectionOnly, headerFooter) { | 126 duplex, fitToPage, cssBackground, selectionOnly, headerFooter, |
127 rasterize) { | |
24 print_preview.SettingsSection.call(this); | 128 print_preview.SettingsSection.call(this); |
25 | 129 |
26 /** | 130 /* |
27 * Duplex ticket item, used to read/write the duplex selection. | 131 * @type {Array<CheckboxTicketItemElement>} checkbox ticket item elements |
28 * @type {!print_preview.ticket_items.Duplex} | 132 * representing the different options in the section. |
29 * @private | 133 * @private |
30 */ | 134 */ |
31 this.duplexTicketItem_ = duplex; | 135 this.elements_ = [ |
136 new CheckboxTicketItemElement(headerFooter, true, | |
137 '.header-footer-container'), | |
138 new CheckboxTicketItemElement(fitToPage, false, | |
139 '.fit-to-page-container'), | |
140 new CheckboxTicketItemElement(duplex, false, '.duplex-container'), | |
141 new CheckboxTicketItemElement(cssBackground, true, | |
142 '.css-background-container'), | |
143 new CheckboxTicketItemElement(rasterize, true, '.rasterize-container'), | |
144 new CheckboxTicketItemElement(selectionOnly, true, | |
145 '.selection-only-container') | |
146 ]; | |
32 | 147 |
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 }; | 148 }; |
131 | 149 |
132 OtherOptionsSettings.prototype = { | 150 OtherOptionsSettings.prototype = { |
133 __proto__: print_preview.SettingsSection.prototype, | 151 __proto__: print_preview.SettingsSection.prototype, |
134 | 152 |
135 /** @override */ | 153 /** @override */ |
136 isAvailable: function() { | 154 isAvailable: function() { |
137 return this.headerFooterTicketItem_.isCapabilityAvailable() || | 155 return this.elements_.some(function(element) { |
138 this.fitToPageTicketItem_.isCapabilityAvailable() || | 156 return element.ticketItem.isCapabilityAvailable(); |
139 this.duplexTicketItem_.isCapabilityAvailable() || | 157 }); |
140 this.cssBackgroundTicketItem_.isCapabilityAvailable() || | |
141 this.selectionOnlyTicketItem_.isCapabilityAvailable(); | |
142 }, | 158 }, |
143 | 159 |
144 /** @override */ | 160 /** @override */ |
145 hasCollapsibleContent: function() { | 161 hasCollapsibleContent: function() { |
146 return this.headerFooterTicketItem_.isCapabilityAvailable() || | 162 return this.elements_.some(function(element) { |
147 this.cssBackgroundTicketItem_.isCapabilityAvailable() || | 163 return element.collapsible; |
148 this.selectionOnlyTicketItem_.isCapabilityAvailable(); | 164 }); |
149 }, | 165 }, |
150 | 166 |
151 /** @override */ | 167 /** @override */ |
152 set isEnabled(isEnabled) { | 168 set isEnabled(isEnabled) { |
153 this.headerFooterCheckbox_.disabled = !isEnabled; | 169 for (var i = 0; i < this.elements_.length - 1; i++) |
154 this.fitToPageCheckbox_.disabled = !isEnabled; | 170 this.elements_[i].checkbox.disabled = !isEnabled; |
155 this.duplexCheckbox_.disabled = !isEnabled; | |
156 this.cssBackgroundCheckbox_.disabled = !isEnabled; | |
157 }, | 171 }, |
158 | 172 |
159 /** @override */ | 173 /** @override */ |
160 enterDocument: function() { | 174 enterDocument: function() { |
161 print_preview.SettingsSection.prototype.enterDocument.call(this); | 175 print_preview.SettingsSection.prototype.enterDocument.call(this); |
162 this.tracker.add( | 176 for (var i = 0; i < this.elements_.length; i++) { |
163 this.headerFooterCheckbox_, | 177 this.tracker.add( |
164 'click', | 178 this.elements_[i].checkbox, |
165 this.onHeaderFooterCheckboxClick_.bind(this)); | 179 'click', |
166 this.tracker.add( | 180 this.elements_[i].onCheckboxClick.bind(this.elements_[i])); |
167 this.fitToPageCheckbox_, | 181 this.tracker.add( |
168 'click', | 182 this.elements_[i].ticketItem, |
169 this.onFitToPageCheckboxClick_.bind(this)); | 183 print_preview.ticket_items.TicketItem.EventType.CHANGE, |
170 this.tracker.add( | 184 this.elements_[i].onTicketItemChange.bind(this.elements_[i], |
171 this.duplexCheckbox_, | 185 this)); |
172 'click', | 186 } |
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 }, | 187 }, |
203 | 188 |
204 /** @override */ | 189 /** @override */ |
205 exitDocument: function() { | 190 exitDocument: function() { |
206 print_preview.SettingsSection.prototype.exitDocument.call(this); | 191 print_preview.SettingsSection.prototype.exitDocument.call(this); |
207 this.headerFooterContainer_ = null; | 192 for (var i = 0; i < this.elements_.length; i++) |
208 this.headerFooterCheckbox_ = null; | 193 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 }, | 194 }, |
218 | 195 |
219 /** @override */ | 196 /** @override */ |
220 decorateInternal: function() { | 197 decorateInternal: function() { |
221 this.headerFooterContainer_ = this.getElement().querySelector( | 198 for (var i = 0; i < this.elements_.length; i++) |
222 '.header-footer-container'); | 199 this.elements_[i].decorate(this); |
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 }, | 200 }, |
242 | 201 |
243 /** @override */ | 202 /** @override */ |
244 updateUiStateInternal: function() { | 203 updateUiStateInternal: function() { |
245 if (this.isAvailable()) { | 204 if (this.isAvailable()) { |
246 setIsVisible(this.headerFooterContainer_, | 205 for (var i = 0; i < this.elements_.length; i++) |
247 this.headerFooterTicketItem_.isCapabilityAvailable() && | 206 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 } | 207 } |
260 print_preview.SettingsSection.prototype.updateUiStateInternal.call(this); | 208 print_preview.SettingsSection.prototype.updateUiStateInternal.call(this); |
261 }, | 209 }, |
262 | 210 |
263 /** @override */ | 211 /** @override */ |
264 isSectionVisibleInternal: function() { | 212 isSectionVisibleInternal: function() { |
265 if (this.collapseContent) { | 213 return this.elements_.some(function(element) { |
266 return this.fitToPageTicketItem_.isCapabilityAvailable() || | 214 return element.isVisible(); |
267 this.duplexTicketItem_.isCapabilityAvailable(); | 215 }); |
268 } | |
269 | |
270 return this.isAvailable(); | |
271 }, | 216 }, |
272 | 217 |
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 }; | 218 }; |
373 | 219 |
374 // Export | 220 // Export |
375 return { | 221 return { |
376 OtherOptionsSettings: OtherOptionsSettings | 222 OtherOptionsSettings: OtherOptionsSettings |
377 }; | 223 }; |
378 }); | 224 }); |
OLD | NEW |