src/chrome/browser/resources/print_preview/settings/other_options_settings.js

   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
   5 cr.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.Component}
  21    */
  22   function OtherOptionsSettings(
  23       duplex, fitToPage, cssBackground, selectionOnly, headerFooter) {
  24     print_preview.Component.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.Component.prototype,
 134
 135     /** @param {boolean} isEnabled Whether the settings is enabled. */
 136     set isEnabled(isEnabled) {
 137       this.headerFooterCheckbox_.disabled = !isEnabled;
 138       this.fitToPageCheckbox_.disabled = !isEnabled;
 139       this.duplexCheckbox_.disabled = !isEnabled;
 140       this.cssBackgroundCheckbox_.disabled = !isEnabled;
 141     },
 142
 143     /** @override */
 144     enterDocument: function() {
 145       print_preview.Component.prototype.enterDocument.call(this);
 146       this.tracker.add(
 147           this.headerFooterCheckbox_,
 148           'click',
 149           this.onHeaderFooterCheckboxClick_.bind(this));
 150       this.tracker.add(
 151           this.fitToPageCheckbox_,
 152           'click',
 153           this.onFitToPageCheckboxClick_.bind(this));
 154       this.tracker.add(
 155           this.duplexCheckbox_,
 156           'click',
 157           this.onDuplexCheckboxClick_.bind(this));
 158       this.tracker.add(
 159           this.cssBackgroundCheckbox_,
 160           'click',
 161           this.onCssBackgroundCheckboxClick_.bind(this));
 162       this.tracker.add(
 163           this.selectionOnlyCheckbox_,
 164           'click',
 165           this.onSelectionOnlyCheckboxClick_.bind(this));
 166       this.tracker.add(
 167           this.duplexTicketItem_,
 168           print_preview.ticket_items.TicketItem.EventType.CHANGE,
 169           this.onDuplexChange_.bind(this));
 170       this.tracker.add(
 171           this.fitToPageTicketItem_,
 172           print_preview.ticket_items.TicketItem.EventType.CHANGE,
 173           this.onFitToPageChange_.bind(this));
 174       this.tracker.add(
 175           this.cssBackgroundTicketItem_,
 176           print_preview.ticket_items.TicketItem.EventType.CHANGE,
 177           this.onCssBackgroundChange_.bind(this));
 178       this.tracker.add(
 179           this.selectionOnlyTicketItem_,
 180           print_preview.ticket_items.TicketItem.EventType.CHANGE,
 181           this.onSelectionOnlyChange_.bind(this));
 182       this.tracker.add(
 183           this.headerFooterTicketItem_,
 184           print_preview.ticket_items.TicketItem.EventType.CHANGE,
 185           this.onHeaderFooterChange_.bind(this));
 186     },
 187
 188     /** @override */
 189     exitDocument: function() {
 190       print_preview.Component.prototype.exitDocument.call(this);
 191       this.headerFooterContainer_ = null;
 192       this.headerFooterCheckbox_ = null;
 193       this.fitToPageContainer_ = null;
 194       this.fitToPageCheckbox_ = null;
 195       this.duplexContainer_ = null;
 196       this.duplexCheckbox_ = null;
 197       this.cssBackgroundContainer_ = null;
 198       this.cssBackgroundCheckbox_ = null;
 199       this.selectionOnlyContainer_ = null;
 200       this.selectionOnlyCheckbox_ = null;
 201     },
 202
 203     /** @override */
 204     decorateInternal: function() {
 205       this.headerFooterContainer_ = this.getElement().querySelector(
 206           '.header-footer-container');
 207       this.headerFooterCheckbox_ = this.headerFooterContainer_.querySelector(
 208           '.header-footer-checkbox');
 209       this.fitToPageContainer_ = this.getElement().querySelector(
 210           '.fit-to-page-container');
 211       this.fitToPageCheckbox_ = this.fitToPageContainer_.querySelector(
 212           '.fit-to-page-checkbox');
 213       this.duplexContainer_ = this.getElement().querySelector(
 214           '.duplex-container');
 215       this.duplexCheckbox_ = this.duplexContainer_.querySelector(
 216           '.duplex-checkbox');
 217       this.cssBackgroundContainer_ = this.getElement().querySelector(
 218           '.css-background-container');
 219       this.cssBackgroundCheckbox_ = this.cssBackgroundContainer_.querySelector(
 220           '.css-background-checkbox');
 221       this.selectionOnlyContainer_ = this.getElement().querySelector(
 222           '.selection-only-container');
 223       this.selectionOnlyCheckbox_ = this.selectionOnlyContainer_.querySelector(
 224           '.selection-only-checkbox');
 225     },
 226
 227     /**
 228      * Updates the state of the entire other options settings area.
 229      * @private
 230      */
 231     updateContainerState_: function() {
 232       if (this.headerFooterTicketItem_.isCapabilityAvailable() ||
 233           this.fitToPageTicketItem_.isCapabilityAvailable() ||
 234           this.duplexTicketItem_.isCapabilityAvailable() ||
 235           this.cssBackgroundTicketItem_.isCapabilityAvailable() ||
 236           this.selectionOnlyTicketItem_.isCapabilityAvailable()) {
 237         fadeInOption(this.getElement());
 238       } else {
 239         fadeOutOption(this.getElement());
 240       }
 241     },
 242
 243     /**
 244      * Called when the header-footer checkbox is clicked. Updates the print
 245      * ticket.
 246      * @private
 247      */
 248     onHeaderFooterCheckboxClick_: function() {
 249       this.headerFooterTicketItem_.updateValue(
 250           this.headerFooterCheckbox_.checked);
 251     },
 252
 253     /**
 254      * Called when the fit-to-page checkbox is clicked. Updates the print
 255      * ticket.
 256      * @private
 257      */
 258     onFitToPageCheckboxClick_: function() {
 259       this.fitToPageTicketItem_.updateValue(this.fitToPageCheckbox_.checked);
 260     },
 261
 262     /**
 263      * Called when the duplex checkbox is clicked. Updates the print ticket.
 264      * @private
 265      */
 266     onDuplexCheckboxClick_: function() {
 267       this.duplexTicketItem_.updateValue(this.duplexCheckbox_.checked);
 268     },
 269
 270     /**
 271      * Called when the print CSS backgrounds checkbox is clicked. Updates the
 272      * print ticket store.
 273      * @private
 274      */
 275     onCssBackgroundCheckboxClick_: function() {
 276       this.cssBackgroundTicketItem_.updateValue(
 277           this.cssBackgroundCheckbox_.checked);
 278     },
 279
 280     /**
 281      * Called when the print selection only is clicked. Updates the
 282      * print ticket store.
 283      * @private
 284      */
 285     onSelectionOnlyCheckboxClick_: function() {
 286       this.selectionOnlyTicketItem_.updateValue(
 287           this.selectionOnlyCheckbox_.checked);
 288     },
 289
 290     /**
 291      * Called when the duplex ticket item has changed. Updates the duplex
 292      * checkbox.
 293      * @private
 294      */
 295     onDuplexChange_: function() {
 296       setIsVisible(this.duplexContainer_,
 297                    this.duplexTicketItem_.isCapabilityAvailable());
 298       this.duplexCheckbox_.checked = this.duplexTicketItem_.getValue();
 299       this.updateContainerState_();
 300     },
 301
 302     /**
 303      * Called when the fit-to-page ticket item has changed. Updates the
 304      * fit-to-page checkbox.
 305      * @private
 306      */
 307     onFitToPageChange_: function() {
 308       setIsVisible(this.fitToPageContainer_,
 309                    this.fitToPageTicketItem_.isCapabilityAvailable());
 310       this.fitToPageCheckbox_.checked = this.fitToPageTicketItem_.getValue();
 311       this.updateContainerState_();
 312     },
 313
 314     /**
 315      * Called when the CSS background ticket item has changed. Updates the
 316      * CSS background checkbox.
 317      * @private
 318      */
 319     onCssBackgroundChange_: function() {
 320       setIsVisible(this.cssBackgroundContainer_,
 321                    this.cssBackgroundTicketItem_.isCapabilityAvailable());
 322       this.cssBackgroundCheckbox_.checked =
 323           this.cssBackgroundTicketItem_.getValue();
 324       this.updateContainerState_();
 325     },
 326
 327     /**
 328      * Called when the print selection only ticket item has changed. Updates the
 329      * CSS background checkbox.
 330      * @private
 331      */
 332     onSelectionOnlyChange_: function() {
 333       setIsVisible(this.selectionOnlyContainer_,
 334                    this.selectionOnlyTicketItem_.isCapabilityAvailable());
 335       this.selectionOnlyCheckbox_.checked =
 336           this.selectionOnlyTicketItem_.getValue();
 337       this.updateContainerState_();
 338     },
 339
 340     /**
 341      * Called when the header-footer ticket item has changed. Updates the
 342      * header-footer checkbox.
 343      * @private
 344      */
 345     onHeaderFooterChange_: function() {
 346       setIsVisible(this.headerFooterContainer_,
 347                    this.headerFooterTicketItem_.isCapabilityAvailable());
 348       this.headerFooterCheckbox_.checked =
 349           this.headerFooterTicketItem_.getValue();
 350       this.updateContainerState_();
 351     }
 352   };
 353
 354   // Export
 355   return {
 356     OtherOptionsSettings: OtherOptionsSettings
 357   };
 358 });