src/chrome/browser/resources/extensions/extension_options_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('extensions', function() {
   6   'use strict';
   7
   8   /**
   9    * The ExtensionOptionsOverlay will show an extension's options page using
  10    * an <extensionoptions> element.
  11    * @constructor
  12    */
  13   function ExtensionOptionsOverlay() {}
  14
  15   cr.addSingletonGetter(ExtensionOptionsOverlay);
  16
  17   ExtensionOptionsOverlay.prototype = {
  18     /**
  19      * The function that shows the given element in the overlay.
  20      * @type {?function(HTMLDivElement)} Function that receives the element to
  21      *     show in the overlay.
  22      * @private
  23      */
  24     showOverlay_: null,
  25
  26     /**
  27      * Initialize the page.
  28      * @param {function(HTMLDivElement)} showOverlay The function to show or
  29      *     hide the ExtensionOptionsOverlay; this should take a single parameter
  30      *     which is either the overlay Div if the overlay should be displayed,
  31      *     or null if the overlay should be hidden.
  32      */
  33     initializePage: function(showOverlay) {
  34       var overlay = $('overlay');
  35
  36       cr.ui.overlay.setupOverlay(overlay);
  37       cr.ui.overlay.globalInitialization();
  38       overlay.addEventListener('cancelOverlay', this.handleDismiss_.bind(this));
  39
  40       this.showOverlay_ = showOverlay;
  41     },
  42
  43     /**
  44      * Handles a click on the close button.
  45      * @param {Event} event The click event.
  46      * @private
  47      */
  48     handleDismiss_: function(event) {
  49       this.setVisible_(false);
  50       var extensionoptions =
  51           $('extension-options-overlay-guest')
  52               .querySelector('extensionoptions');
  53
  54       if (extensionoptions)
  55         $('extension-options-overlay-guest').removeChild(extensionoptions);
  56
  57       $('extension-options-overlay-icon').removeAttribute('src');
  58
  59       // Remove the options query string.
  60       uber.replaceState({}, '');
  61     },
  62
  63     /**
  64      * Associate an extension with the overlay and display it.
  65      * @param {string} extensionId The id of the extension whose options page
  66      *     should be displayed in the overlay.
  67      * @param {string} extensionName The name of the extension, which is used
  68      *     as the header of the overlay.
  69      * @param {string} extensionIcon The URL of the extension's icon.
  70      * @suppress {checkTypes}
  71      * TODO(vitalyp): remove the suppression after adding
  72      * chrome/renderer/resources/extensions/extension_options.js
  73      * to dependencies.
  74      */
  75     setExtensionAndShowOverlay: function(extensionId,
  76                                          extensionName,
  77                                          extensionIcon) {
  78       $('extension-options-overlay-title').textContent = extensionName;
  79       $('extension-options-overlay-icon').src = extensionIcon;
  80
  81       this.setVisible_(true);
  82
  83       var extensionoptions = new window.ExtensionOptions();
  84       extensionoptions.extension = extensionId;
  85       extensionoptions.autosize = 'on';
  86
  87       // The <extensionoptions> content's size needs to be restricted to the
  88       // bounds of the overlay window. The overlay gives a min width and
  89       // max height, but the maxheight does not include our header height
  90       // (title and close button), so we need to subtract that to get the
  91       // max height for the extension options.
  92       var headerHeight = $('extension-options-overlay-header').offsetHeight;
  93       var overlayMaxHeight =
  94           parseInt($('extension-options-overlay').style.maxHeight, 10);
  95       extensionoptions.maxheight = overlayMaxHeight - headerHeight;
  96
  97       extensionoptions.minwidth =
  98           parseInt(window.getComputedStyle($('extension-options-overlay'))
  99               .minWidth, 10);
 100
 101       extensionoptions.setDeferAutoSize(true);
 102
 103       extensionoptions.onclose = function() {
 104         cr.dispatchSimpleEvent($('overlay'), 'cancelOverlay');
 105       }.bind(this);
 106
 107       /**
 108        * Resize the overlay if the <extensionoptions> changes size.
 109        * @param {{newHeight: number,
 110        *          newWidth: number,
 111        *          oldHeight: number,
 112        *          oldWidth: number}} evt
 113        */
 114       extensionoptions.onsizechanged = function(evt) {
 115         var overlayStyle =
 116             window.getComputedStyle($('extension-options-overlay'));
 117         var oldWidth = parseInt(overlayStyle.width, 10);
 118         var oldHeight = parseInt(overlayStyle.height, 10);
 119
 120         // animationTime is the amount of time in ms that will be used to resize
 121         // the overlay. It is calculated by multiplying the pythagorean distance
 122         // between old and the new size (in px) with a constant speed of
 123         // 0.25 ms/px.
 124         var animationTime = 0.25 * Math.sqrt(
 125             Math.pow(evt.newWidth - oldWidth, 2) +
 126             Math.pow(evt.newHeight - oldHeight, 2));
 127
 128         var player = $('extension-options-overlay').animate([
 129           {width: oldWidth + 'px', height: oldHeight + 'px'},
 130           {width: evt.newWidth + 'px', height: evt.newHeight + 'px'}
 131         ], {
 132           duration: animationTime,
 133           delay: 0
 134         });
 135
 136         player.onfinish = function(e) {
 137           // Allow the <extensionoptions> to autosize now that the overlay
 138           // has resized, and move it back on-screen.
 139           extensionoptions.resumeDeferredAutoSize();
 140           $('extension-options-overlay-guest').style.position = 'static';
 141           $('extension-options-overlay-guest').style.left = 'auto';
 142         };
 143       }.bind(this);
 144
 145       // Don't allow the <extensionoptions> to autosize until the overlay
 146       // animation is complete.
 147       extensionoptions.setDeferAutoSize(true);
 148
 149       // Move the <extensionoptions> off screen until the overlay is ready
 150       $('extension-options-overlay-guest').style.position = 'fixed';
 151       $('extension-options-overlay-guest').style.left =
 152           window.outerWidth + 'px';
 153
 154       $('extension-options-overlay-guest').appendChild(extensionoptions);
 155     },
 156
 157     /**
 158      * Toggles the visibility of the ExtensionOptionsOverlay.
 159      * @param {boolean} isVisible Whether the overlay should be visible.
 160      * @private
 161      */
 162     setVisible_: function(isVisible) {
 163       this.showOverlay_(isVisible ?
 164           /** @type {HTMLDivElement} */($('extension-options-overlay')) :
 165           null);
 166     }
 167   };
 168
 169   // Export
 170   return {
 171     ExtensionOptionsOverlay: ExtensionOptionsOverlay
 172   };
 173 });