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.keyCode == 27 && !e.shiftKey && !e.ctrlKey && !e.altKey &&
  44             !e.metaKey) {
  45           e.stopPropagation();
  46           e.preventDefault();
  47           this.cancel();
  48         }
  49       }.bind(this));
  50
  51       this.tracker.add(
  52           this.getChildElement('.page > .close-button'),
  53           'click',
  54           this.cancel.bind(this));
  55
  56       this.tracker.add(
  57           this.getElement(), 'click', this.onOverlayClick_.bind(this));
  58       this.tracker.add(
  59           this.getChildElement('.page'),
  60           'webkitAnimationEnd',
  61           this.onAnimationEnd_.bind(this));
  62     },
  63
  64     /** @return {boolean} Whether the component is visible. */
  65     getIsVisible: function() {
  66       return !this.getElement().classList.contains('transparent');
  67     },
  68
  69     /** @param {boolean} isVisible Whether the component is visible. */
  70     setIsVisible: function(isVisible) {
  71       if (this.getIsVisible() == isVisible)
  72         return;
  73       if (isVisible) {
  74         setIsVisible(this.getElement(), true);
  75         setTimeout(function(element) {
  76           element.classList.remove('transparent');
  77         }.bind(this, this.getElement()), 0);
  78       } else {
  79         this.getElement().classList.add('transparent');
  80       }
  81       this.onSetVisibleInternal(isVisible);
  82     },
  83
  84     /** Closes the dialog. */
  85     cancel: function() {
  86       this.setIsVisible(false);
  87       this.onCancelInternal();
  88     },
  89
  90     /**
  91      * @param {boolean} isVisible Whether the component is visible.
  92      * @protected
  93      */
  94     onSetVisibleInternal: function(isVisible) {},
  95
  96     /** @protected */
  97     onCancelInternal: function() {},
  98
  99     /**
 100      * Called when the overlay is clicked. Pulses the page.
 101      * @param {Event} e Contains the element that was clicked.
 102      * @private
 103      */
 104     onOverlayClick_: function(e) {
 105       if (e.target && e.target.classList.contains('overlay'))
 106         e.target.querySelector('.page').classList.add('pulse');
 107     },
 108
 109     /**
 110      * Called when an animation ends on the page.
 111      * @param {Event} e Contains the target done animating.
 112      * @private
 113      */
 114     onAnimationEnd_: function(e) {
 115       if (e.target && e.animationName == 'pulse')
 116         e.target.classList.remove('pulse');
 117     }
 118   };
 119
 120   // Export
 121   return {
 122     Overlay: Overlay
 123   };
 124 });