src/chrome/browser/resources/print_preview/common/overlay.js

   1 // Copyright 2014 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    * Modal dialog base component.
  10    * @param {!print_preview.MetricsContext} metricsContext Metrics
  11    *     context to record usage statistics.
  12    * @constructor
  13    * @extends {print_preview.Component}
  14    */
  15   function Overlay(metricsContext) {
  16     print_preview.Component.call(this);
  17
  18     /** @private {!print_preview.MetricsContext} */
  19     this.metricsContext_ = metricsContext;
  20   };
  21
  22   Overlay.prototype = {
  23     __proto__: print_preview.Component.prototype,
  24
  25     /** @return {!print_preview.MetricsContext} */
  26     get metricsContext() {
  27       return this.metricsContext_;
  28     },
  29
  30     /** @override */
  31     enterDocument: function() {
  32       print_preview.Component.prototype.enterDocument.call(this);
  33
  34       this.getElement().addEventListener('webkitTransitionEnd', function f(e) {
  35         if (e.target == e.currentTarget && e.propertyName == 'opacity' &&
  36             e.target.classList.contains('transparent')) {
  37           setIsVisible(e.target, false);
  38         }
  39       });
  40
  41       this.getElement().addEventListener('keydown', function f(e) {
  42         // Escape pressed -> cancel the dialog.
  43         if (!e.shiftKey && !e.ctrlKey && !e.altKey && !e.metaKey) {
  44           if (e.keyCode == 27) {
  45             e.stopPropagation();
  46             e.preventDefault();
  47             this.cancel();
  48           } else if (e.keyCode == 13) {
  49             var activeElementTag = document.activeElement ?
  50                 document.activeElement.tagName.toUpperCase() : '';
  51             if (activeElementTag != 'BUTTON' && activeElementTag != 'SELECT') {
  52               if (this.onEnterPressedInternal()) {
  53                 e.stopPropagation();
  54                 e.preventDefault();
  55               }
  56             }
  57           }
  58         }
  59       }.bind(this));
  60
  61       this.tracker.add(
  62           this.getChildElement('.page > .close-button'),
  63           'click',
  64           this.cancel.bind(this));
  65
  66       this.tracker.add(
  67           this.getElement(), 'click', this.onOverlayClick_.bind(this));
  68       this.tracker.add(
  69           this.getChildElement('.page'),
  70           'webkitAnimationEnd',
  71           this.onAnimationEnd_.bind(this));
  72     },
  73
  74     /** @return {boolean} Whether the component is visible. */
  75     getIsVisible: function() {
  76       return !this.getElement().classList.contains('transparent');
  77     },
  78
  79     /** @param {boolean} isVisible Whether the component is visible. */
  80     setIsVisible: function(isVisible) {
  81       if (this.getIsVisible() == isVisible)
  82         return;
  83       if (isVisible) {
  84         setIsVisible(this.getElement(), true);
  85         setTimeout(function(element) {
  86           element.classList.remove('transparent');
  87         }.bind(this, this.getElement()), 0);
  88       } else {
  89         this.getElement().classList.add('transparent');
  90       }
  91       this.onSetVisibleInternal(isVisible);
  92     },
  93
  94     /** Closes the dialog. */
  95     cancel: function() {
  96       this.setIsVisible(false);
  97       this.onCancelInternal();
  98     },
  99
 100     /**
 101      * @param {boolean} isVisible Whether the component is visible.
 102      * @protected
 103      */
 104     onSetVisibleInternal: function(isVisible) {},
 105
 106     /** @protected */
 107     onCancelInternal: function() {},
 108
 109     /**
 110      * @return {boolean} Whether the event was handled.
 111      * @protected
 112      */
 113     onEnterPressedInternal: function() {
 114       return false;
 115     },
 116
 117     /**
 118      * Called when the overlay is clicked. Pulses the page.
 119      * @param {Event} e Contains the element that was clicked.
 120      * @private
 121      */
 122     onOverlayClick_: function(e) {
 123       if (e.target && e.target.classList.contains('overlay'))
 124         e.target.querySelector('.page').classList.add('pulse');
 125     },
 126
 127     /**
 128      * Called when an animation ends on the page.
 129      * @param {Event} e Contains the target done animating.
 130      * @private
 131      */
 132     onAnimationEnd_: function(e) {
 133       if (e.target && e.animationName == 'pulse')
 134         e.target.classList.remove('pulse');
 135     }
 136   };
 137
 138   // Export
 139   return {
 140     Overlay: Overlay
 141   };
 142 });