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
3// found in the LICENSE file.
4
5cr.define('print_preview', function() {
6  'use strict';
7
8  /**
9   * UI component that renders checkboxes for various print options.
10   * @param {!print_preview.ticket_items.Duplex} duplex Duplex ticket item.
11   * @param {!print_preview.ticket_items.FitToPage} fitToPage Fit-to-page ticket
12   *     item.
13   * @param {!print_preview.ticket_items.CssBackground} cssBackground CSS
14   *     background ticket item.
15   * @param {!print_preview.ticket_items.SelectionOnly} selectionOnly Selection
16   *     only ticket item.
17   * @param {!print_preview.ticket_items.HeaderFooter} headerFooter Header
18   *     footer ticket item.
19   * @constructor
20   * @extends {print_preview.SettingsSection}
21   */
22  function OtherOptionsSettings(
23      duplex, fitToPage, cssBackground, selectionOnly, headerFooter) {
24    print_preview.SettingsSection.call(this);
25
26    /**
27     * Duplex ticket item, used to read/write the duplex selection.
28     * @type {!print_preview.ticket_items.Duplex}
29     * @private
30     */
31    this.duplexTicketItem_ = duplex;
32
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  };
131
132  OtherOptionsSettings.prototype = {
133    __proto__: print_preview.SettingsSection.prototype,
134
135    /** @override */
136    isAvailable: function() {
137      return this.headerFooterTicketItem_.isCapabilityAvailable() ||
138             this.fitToPageTicketItem_.isCapabilityAvailable() ||
139             this.duplexTicketItem_.isCapabilityAvailable() ||
140             this.cssBackgroundTicketItem_.isCapabilityAvailable() ||
141             this.selectionOnlyTicketItem_.isCapabilityAvailable();
142    },
143
144    /** @override */
145    hasCollapsibleContent: function() {
146      return this.headerFooterTicketItem_.isCapabilityAvailable() ||
147             this.fitToPageTicketItem_.isCapabilityAvailable() ||
148             this.cssBackgroundTicketItem_.isCapabilityAvailable() ||
149             this.selectionOnlyTicketItem_.isCapabilityAvailable();
150    },
151
152    /** @override */
153    set isEnabled(isEnabled) {
154      this.headerFooterCheckbox_.disabled = !isEnabled;
155      this.fitToPageCheckbox_.disabled = !isEnabled;
156      this.duplexCheckbox_.disabled = !isEnabled;
157      this.cssBackgroundCheckbox_.disabled = !isEnabled;
158    },
159
160    /** @override */
161    enterDocument: function() {
162      print_preview.SettingsSection.prototype.enterDocument.call(this);
163      this.tracker.add(
164          this.headerFooterCheckbox_,
165          'click',
166          this.onHeaderFooterCheckboxClick_.bind(this));
167      this.tracker.add(
168          this.fitToPageCheckbox_,
169          'click',
170          this.onFitToPageCheckboxClick_.bind(this));
171      this.tracker.add(
172          this.duplexCheckbox_,
173          'click',
174          this.onDuplexCheckboxClick_.bind(this));
175      this.tracker.add(
176          this.cssBackgroundCheckbox_,
177          'click',
178          this.onCssBackgroundCheckboxClick_.bind(this));
179      this.tracker.add(
180          this.selectionOnlyCheckbox_,
181          'click',
182          this.onSelectionOnlyCheckboxClick_.bind(this));
183      this.tracker.add(
184          this.duplexTicketItem_,
185          print_preview.ticket_items.TicketItem.EventType.CHANGE,
186          this.onDuplexChange_.bind(this));
187      this.tracker.add(
188          this.fitToPageTicketItem_,
189          print_preview.ticket_items.TicketItem.EventType.CHANGE,
190          this.onFitToPageChange_.bind(this));
191      this.tracker.add(
192          this.cssBackgroundTicketItem_,
193          print_preview.ticket_items.TicketItem.EventType.CHANGE,
194          this.onCssBackgroundChange_.bind(this));
195      this.tracker.add(
196          this.selectionOnlyTicketItem_,
197          print_preview.ticket_items.TicketItem.EventType.CHANGE,
198          this.onSelectionOnlyChange_.bind(this));
199      this.tracker.add(
200          this.headerFooterTicketItem_,
201          print_preview.ticket_items.TicketItem.EventType.CHANGE,
202          this.onHeaderFooterChange_.bind(this));
203    },
204
205    /** @override */
206    exitDocument: function() {
207      print_preview.SettingsSection.prototype.exitDocument.call(this);
208      this.headerFooterContainer_ = null;
209      this.headerFooterCheckbox_ = null;
210      this.fitToPageContainer_ = null;
211      this.fitToPageCheckbox_ = null;
212      this.duplexContainer_ = null;
213      this.duplexCheckbox_ = null;
214      this.cssBackgroundContainer_ = null;
215      this.cssBackgroundCheckbox_ = null;
216      this.selectionOnlyContainer_ = null;
217      this.selectionOnlyCheckbox_ = null;
218    },
219
220    /** @override */
221    decorateInternal: function() {
222      this.headerFooterContainer_ = this.getElement().querySelector(
223          '.header-footer-container');
224      this.headerFooterCheckbox_ = this.headerFooterContainer_.querySelector(
225          '.header-footer-checkbox');
226      this.fitToPageContainer_ = this.getElement().querySelector(
227          '.fit-to-page-container');
228      this.fitToPageCheckbox_ = this.fitToPageContainer_.querySelector(
229          '.fit-to-page-checkbox');
230      this.duplexContainer_ = this.getElement().querySelector(
231          '.duplex-container');
232      this.duplexCheckbox_ = this.duplexContainer_.querySelector(
233          '.duplex-checkbox');
234      this.cssBackgroundContainer_ = this.getElement().querySelector(
235          '.css-background-container');
236      this.cssBackgroundCheckbox_ = this.cssBackgroundContainer_.querySelector(
237          '.css-background-checkbox');
238      this.selectionOnlyContainer_ = this.getElement().querySelector(
239          '.selection-only-container');
240      this.selectionOnlyCheckbox_ = this.selectionOnlyContainer_.querySelector(
241          '.selection-only-checkbox');
242    },
243
244    /** @override */
245    updateUiStateInternal: function() {
246      if (this.isAvailable()) {
247        setIsVisible(this.headerFooterContainer_,
248                     this.headerFooterTicketItem_.isCapabilityAvailable() &&
249                     !this.collapseContent);
250        setIsVisible(this.fitToPageContainer_,
251                     this.fitToPageTicketItem_.isCapabilityAvailable() &&
252                     !this.collapseContent);
253        setIsVisible(this.duplexContainer_,
254                     this.duplexTicketItem_.isCapabilityAvailable());
255        setIsVisible(this.cssBackgroundContainer_,
256                     this.cssBackgroundTicketItem_.isCapabilityAvailable() &&
257                     !this.collapseContent);
258        setIsVisible(this.selectionOnlyContainer_,
259                     this.selectionOnlyTicketItem_.isCapabilityAvailable() &&
260                     !this.collapseContent);
261      }
262      print_preview.SettingsSection.prototype.updateUiStateInternal.call(this);
263    },
264
265    /** @override */
266    isSectionVisibleInternal: function() {
267      return this.collapseContent ?
268          this.duplexTicketItem_.isCapabilityAvailable() : this.isAvailable();
269    },
270
271    /**
272     * Called when the header-footer checkbox is clicked. Updates the print
273     * ticket.
274     * @private
275     */
276    onHeaderFooterCheckboxClick_: function() {
277      this.headerFooterTicketItem_.updateValue(
278          this.headerFooterCheckbox_.checked);
279    },
280
281    /**
282     * Called when the fit-to-page checkbox is clicked. Updates the print
283     * ticket.
284     * @private
285     */
286    onFitToPageCheckboxClick_: function() {
287      this.fitToPageTicketItem_.updateValue(this.fitToPageCheckbox_.checked);
288    },
289
290    /**
291     * Called when the duplex checkbox is clicked. Updates the print ticket.
292     * @private
293     */
294    onDuplexCheckboxClick_: function() {
295      this.duplexTicketItem_.updateValue(this.duplexCheckbox_.checked);
296    },
297
298    /**
299     * Called when the print CSS backgrounds checkbox is clicked. Updates the
300     * print ticket store.
301     * @private
302     */
303    onCssBackgroundCheckboxClick_: function() {
304      this.cssBackgroundTicketItem_.updateValue(
305          this.cssBackgroundCheckbox_.checked);
306    },
307
308    /**
309     * Called when the print selection only is clicked. Updates the
310     * print ticket store.
311     * @private
312     */
313    onSelectionOnlyCheckboxClick_: function() {
314      this.selectionOnlyTicketItem_.updateValue(
315          this.selectionOnlyCheckbox_.checked);
316    },
317
318    /**
319     * Called when the duplex ticket item has changed. Updates the duplex
320     * checkbox.
321     * @private
322     */
323    onDuplexChange_: function() {
324      this.duplexCheckbox_.checked = this.duplexTicketItem_.getValue();
325      this.updateUiStateInternal();
326    },
327
328    /**
329     * Called when the fit-to-page ticket item has changed. Updates the
330     * fit-to-page checkbox.
331     * @private
332     */
333    onFitToPageChange_: function() {
334      this.fitToPageCheckbox_.checked = this.fitToPageTicketItem_.getValue();
335      this.updateUiStateInternal();
336    },
337
338    /**
339     * Called when the CSS background ticket item has changed. Updates the
340     * CSS background checkbox.
341     * @private
342     */
343    onCssBackgroundChange_: function() {
344      this.cssBackgroundCheckbox_.checked =
345          this.cssBackgroundTicketItem_.getValue();
346      this.updateUiStateInternal();
347    },
348
349    /**
350     * Called when the print selection only ticket item has changed. Updates the
351     * CSS background checkbox.
352     * @private
353     */
354    onSelectionOnlyChange_: function() {
355      this.selectionOnlyCheckbox_.checked =
356          this.selectionOnlyTicketItem_.getValue();
357      this.updateUiStateInternal();
358    },
359
360    /**
361     * Called when the header-footer ticket item has changed. Updates the
362     * header-footer checkbox.
363     * @private
364     */
365    onHeaderFooterChange_: function() {
366      this.headerFooterCheckbox_.checked =
367          this.headerFooterTicketItem_.getValue();
368      this.updateUiStateInternal();
369    }
370  };
371
372  // Export
373  return {
374    OtherOptionsSettings: OtherOptionsSettings
375  };
376});
377