third_party/WebKit/Source/devtools/front_end/ui/Dialog.js

   1 /*
   2  * Copyright (C) 2012 Google Inc. All rights reserved.
   3  *
   4  * Redistribution and use in source and binary forms, with or without
   5  * modification, are permitted provided that the following conditions are
   6  * met:
   7  *
   8  *     * Redistributions of source code must retain the above copyright
   9  * notice, this list of conditions and the following disclaimer.
  10  *     * Redistributions in binary form must reproduce the above
  11  * copyright notice, this list of conditions and the following disclaimer
  12  * in the documentation and/or other materials provided with the
  13  * distribution.
  14  *     * Neither the name of Google Inc. nor the names of its
  15  * contributors may be used to endorse or promote products derived from
  16  * this software without specific prior written permission.
  17  *
  18  * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
  19  * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
  20  * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
  21  * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
  22  * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
  23  * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
  24  * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
  25  * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
  26  * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  27  * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
  28  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  29  */
  30
  31 /**
  32  * @constructor
  33  * @param {!Element} relativeToElement
  34  * @param {!WebInspector.DialogDelegate} delegate
  35  * @param {boolean=} modal
  36  */
  37 WebInspector.Dialog = function(relativeToElement, delegate, modal)
  38 {
  39     this._delegate = delegate;
  40     this._relativeToElement = relativeToElement;
  41     this._modal = modal;
  42
  43     this._glassPane = new WebInspector.GlassPane(/** @type {!Document} */ (relativeToElement.ownerDocument));
  44     WebInspector.GlassPane.DefaultFocusedViewStack.push(this);
  45
  46     // Install glass pane capturing events.
  47     this._glassPane.element.tabIndex = 0;
  48     this._glassPane.element.addEventListener("focus", this._onGlassPaneFocus.bind(this), false);
  49     if (this._modal)
  50         this._glassPane.element.classList.add("tinted");
  51
  52     this._element = this._glassPane.element.createChild("div");
  53     this._element.tabIndex = 0;
  54     this._element.addEventListener("focus", this._onFocus.bind(this), false);
  55     this._element.addEventListener("keydown", this._onKeyDown.bind(this), false);
  56     this._closeKeys = [
  57         WebInspector.KeyboardShortcut.Keys.Enter.code,
  58         WebInspector.KeyboardShortcut.Keys.Esc.code,
  59     ];
  60
  61     delegate.show(this._element);
  62
  63     this._position();
  64     this._delegate.focus();
  65 }
  66
  67 /**
  68  * @return {?WebInspector.Dialog}
  69  */
  70 WebInspector.Dialog.currentInstance = function()
  71 {
  72     return WebInspector.Dialog._instance;
  73 }
  74
  75 /**
  76  * @param {?Element} relativeToElement
  77  * @param {!WebInspector.DialogDelegate} delegate
  78  * @param {boolean=} modal
  79  */
  80 WebInspector.Dialog.show = function(relativeToElement, delegate, modal)
  81 {
  82     if (WebInspector.Dialog._instance)
  83         return;
  84     WebInspector.Dialog._instance = new WebInspector.Dialog(relativeToElement || WebInspector.Dialog.modalHostView().element, delegate, modal);
  85     WebInspector.Dialog._instance.focus();
  86 }
  87
  88 WebInspector.Dialog.hide = function()
  89 {
  90     if (!WebInspector.Dialog._instance)
  91         return;
  92     WebInspector.Dialog._instance._hide();
  93 }
  94
  95 WebInspector.Dialog.prototype = {
  96     focus: function()
  97     {
  98         this._element.focus();
  99     },
 100
 101     _hide: function()
 102     {
 103         if (this._isHiding)
 104             return;
 105         this._isHiding = true;
 106
 107         this._delegate.willHide();
 108
 109         delete WebInspector.Dialog._instance;
 110         WebInspector.GlassPane.DefaultFocusedViewStack.pop();
 111         this._glassPane.dispose();
 112     },
 113
 114     /**
 115      * @param {!Event} event
 116      */
 117     _onGlassPaneFocus: function(event)
 118     {
 119         if (this._modal)
 120             return;
 121         this._hide();
 122     },
 123
 124     _onFocus: function(event)
 125     {
 126         this._delegate.focus();
 127     },
 128
 129     _position: function()
 130     {
 131         this._delegate.position(this._element, this._relativeToElement);
 132     },
 133
 134     _onKeyDown: function(event)
 135     {
 136         if (event.keyCode === WebInspector.KeyboardShortcut.Keys.Tab.code) {
 137             event.preventDefault();
 138             return;
 139         }
 140
 141         if (event.keyCode === WebInspector.KeyboardShortcut.Keys.Enter.code)
 142             this._delegate.onEnter(event);
 143
 144         this._delegate.onKeyDown(event);
 145
 146         if (!event.handled && this._closeKeys.indexOf(event.keyCode) >= 0) {
 147             this._hide();
 148             event.consume(true);
 149         }
 150     }
 151 };
 152
 153 /**
 154  * @constructor
 155  * @extends {WebInspector.Object}
 156  */
 157 WebInspector.DialogDelegate = function()
 158 {
 159     this.element = createElement("div");
 160 }
 161
 162 WebInspector.DialogDelegate.prototype = {
 163     /**
 164      * @param {!Element} element
 165      */
 166     show: function(element)
 167     {
 168         element.appendChild(this.element);
 169         this.element.classList.add("dialog-contents");
 170         element.classList.add("dialog");
 171     },
 172
 173     /**
 174      * @param {!Element} element
 175      * @param {!Element} relativeToElement
 176      */
 177     position: function(element, relativeToElement)
 178     {
 179         var container = WebInspector.Dialog._modalHostView.element;
 180         var box = relativeToElement.boxInWindow(window).relativeToElement(container);
 181
 182         var positionX = box.x + (relativeToElement.offsetWidth - element.offsetWidth) / 2;
 183         positionX = Number.constrain(positionX, 0, container.offsetWidth - element.offsetWidth);
 184
 185         var positionY = box.y + (relativeToElement.offsetHeight - element.offsetHeight) / 2;
 186         positionY = Number.constrain(positionY, 0, container.offsetHeight - element.offsetHeight);
 187
 188         element.style.position = "absolute";
 189         element.positionAt(positionX, positionY, container);
 190     },
 191
 192     focus: function() { },
 193
 194     /**
 195      * @param {!KeyboardEvent} event
 196      */
 197     onEnter: function(event) { },
 198
 199     /**
 200      * @param {!KeyboardEvent} event
 201      */
 202     onKeyDown: function(event) { },
 203
 204     willHide: function() { },
 205
 206     __proto__: WebInspector.Object.prototype
 207 }
 208
 209 /** @type {?WebInspector.Widget} */
 210 WebInspector.Dialog._modalHostView = null;
 211
 212 /**
 213  * @param {!WebInspector.Widget} view
 214  */
 215 WebInspector.Dialog.setModalHostView = function(view)
 216 {
 217     WebInspector.Dialog._modalHostView = view;
 218 };
 219
 220 /**
 221  * FIXME: make utility method in Dialog, so clients use it instead of this getter.
 222  * Method should be like Dialog.showModalElement(position params, reposition callback).
 223  * @return {?WebInspector.Widget}
 224  */
 225 WebInspector.Dialog.modalHostView = function()
 226 {
 227     return WebInspector.Dialog._modalHostView;
 228 };
 229
 230 WebInspector.Dialog.modalHostRepositioned = function()
 231 {
 232     if (WebInspector.Dialog._instance)
 233         WebInspector.Dialog._instance._position();
 234 };
 235