src/chrome/common/extensions/docs/examples/api/fontSettings/js/cr/ui/overlay.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 /**
   6  * @fileoverview Provides dialog-like behaviors for the tracing UI.
   7  */
   8 cr.define('cr.ui.overlay', function() {
   9
  10   /**
  11    * Gets the top, visible overlay. It makes the assumption that if multiple
  12    * overlays are visible, the last in the byte order is topmost.
  13    * TODO(estade): rely on aria-visibility instead?
  14    * @return {HTMLElement} The overlay.
  15    */
  16   function getTopOverlay() {
  17     var overlays = document.querySelectorAll('.overlay:not([hidden])');
  18     return overlays[overlays.length - 1];
  19   }
  20
  21   /**
  22    * Makes initializations which must hook at the document level.
  23    */
  24   function globalInitialization() {
  25     // Close the overlay on escape.
  26     document.addEventListener('keydown', function(e) {
  27       if (e.keyCode == 27) {  // Escape
  28         var overlay = getTopOverlay();
  29         if (!overlay)
  30           return;
  31
  32         cr.dispatchSimpleEvent(overlay, 'cancelOverlay');
  33       }
  34     });
  35
  36     window.addEventListener('resize', setMaxHeightAllPages);
  37
  38     setMaxHeightAllPages();
  39   }
  40
  41   /**
  42    * Sets the max-height of all pages in all overlays, based on the window
  43    * height.
  44    */
  45   function setMaxHeightAllPages() {
  46     var pages = document.querySelectorAll('.overlay .page');
  47
  48     var maxHeight = Math.min(0.9 * window.innerHeight, 640) + 'px';
  49     for (var i = 0; i < pages.length; i++)
  50       pages[i].style.maxHeight = maxHeight;
  51   }
  52
  53   /**
  54    * Adds behavioral hooks for the given overlay.
  55    * @param {HTMLElement} overlay The .overlay.
  56    */
  57   function setupOverlay(overlay) {
  58     // Close the overlay on clicking any of the pages' close buttons.
  59     var closeButtons = overlay.querySelectorAll('.page > .close-button');
  60     for (var i = 0; i < closeButtons.length; i++) {
  61       closeButtons[i].addEventListener('click', function(e) {
  62         cr.dispatchSimpleEvent(overlay, 'cancelOverlay');
  63       });
  64     }
  65
  66     // Remove the 'pulse' animation any time the overlay is hidden or shown.
  67     overlay.__defineSetter__('hidden', function(value) {
  68       this.classList.remove('pulse');
  69       if (value)
  70         this.setAttribute('hidden', true);
  71       else
  72         this.removeAttribute('hidden');
  73     });
  74     overlay.__defineGetter__('hidden', function() {
  75       return this.hasAttribute('hidden');
  76     });
  77
  78     // Shake when the user clicks away.
  79     overlay.addEventListener('click', function(e) {
  80       // Only pulse if the overlay was the target of the click.
  81       if (this != e.target)
  82         return;
  83
  84       // This may be null while the overlay is closing.
  85       var overlayPage = this.querySelector('.page:not([hidden])');
  86       if (overlayPage)
  87         overlayPage.classList.add('pulse');
  88     });
  89     overlay.addEventListener('webkitAnimationEnd', function(e) {
  90       e.target.classList.remove('pulse');
  91     });
  92   }
  93
  94   return {
  95     globalInitialization: globalInitialization,
  96     setupOverlay: setupOverlay,
  97   };
  98 });
  99
 100 document.addEventListener('DOMContentLoaded',
 101                           cr.ui.overlay.globalInitialization);