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.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 });