Home | History | Annotate | Download | only in front_end 
      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 {WebInspector.View} view
     34  * @param {string} widthSettingName
     35  * @param {number} minimalWidth
     36  */
     37 WebInspector.SidebarOverlay = function(view, widthSettingName, minimalWidth)
     38 {
     39     this.element = document.createElement("div");
     40     this.element.className = "sidebar-overlay";
     41 
     42     this._view = view;
     43     this._widthSettingName = widthSettingName;
     44     this._minimalWidth = minimalWidth;
     45     this._savedWidth = minimalWidth || 300;
     46 
     47     if (this._widthSettingName)
     48         WebInspector.settings[this._widthSettingName] = WebInspector.settings.createSetting(this._widthSettingName, undefined);
     49 
     50     this._resizerElement = document.createElement("div");
     51     this._resizerElement.className = "sidebar-overlay-resizer";
     52     this._installResizer(this._resizerElement);
     53 }
     54 
     55 WebInspector.SidebarOverlay.prototype = {
     56     /**
     57      * @param {Element} relativeToElement
     58      */
     59     show: function(relativeToElement)
     60     {
     61         relativeToElement.appendChild(this.element);
     62         relativeToElement.addStyleClass("sidebar-overlay-shown");
     63         this._view.show(this.element);
     64         this.element.appendChild(this._resizerElement);
     65         if (this._resizerWidgetElement)
     66             this.element.appendChild(this._resizerWidgetElement);
     67         this.position(relativeToElement);
     68     },
     69 
     70     /**
     71      * @param {Element} relativeToElement
     72      */
     73     position: function(relativeToElement)
     74     {
     75         this._totalWidth = relativeToElement.offsetWidth;
     76         this._setWidth(this._preferredWidth());
     77     },
     78 
     79     focus: function()
     80     {
     81         WebInspector.setCurrentFocusElement(this._view.element);
     82     },
     83 
     84     hide: function()
     85     {
     86         var element = this.element.parentElement;
     87         if (!element)
     88             return;
     89 
     90         this._view.detach();
     91         element.removeChild(this.element);
     92         element.removeStyleClass("sidebar-overlay-shown");
     93         this.element.removeChild(this._resizerElement);
     94         if (this._resizerWidgetElement)
     95             this.element.removeChild(this._resizerWidgetElement);
     96     },
     97 
     98     /**
     99      * @param {number} newWidth
    100      */
    101     _setWidth: function(newWidth)
    102     {
    103         var width = Number.constrain(newWidth, this._minimalWidth, this._totalWidth);
    104 
    105         if (this._width === width)
    106             return;
    107 
    108         this.element.style.width = width + "px";
    109         this._resizerElement.style.left = (width - 3) + "px";
    110         this._width = width;
    111         this._view.doResize();
    112         this._saveWidth();
    113     },
    114 
    115     /**
    116      * @return {number}
    117      */
    118     _preferredWidth: function()
    119     {
    120         if (!this._widthSettingName)
    121             return this._savedWidth;
    122 
    123         return WebInspector.settings[this._widthSettingName].get() || this._savedWidth;
    124     },
    125 
    126     _saveWidth: function()
    127     {
    128         this._savedWidth = this._width;
    129         if (!this._widthSettingName)
    130             return;
    131 
    132         WebInspector.settings[this._widthSettingName].set(this._width);
    133     },
    134 
    135     /**
    136      * @param {Event} event
    137      * @return {boolean}
    138      */
    139     _startResizerDragging: function(event)
    140     {
    141         var width = this._width;
    142         this._dragOffset = width - event.pageX;
    143         return true;
    144     },
    145 
    146     /**
    147      * @param {Event} event
    148      */
    149     _resizerDragging: function(event)
    150     {
    151         var width = event.pageX + this._dragOffset;
    152         this._setWidth(width);
    153         event.preventDefault();
    154     },
    155 
    156     /**
    157      * @param {Event} event
    158      */
    159     _endResizerDragging: function(event)
    160     {
    161         delete this._dragOffset;
    162     },
    163 
    164     /**
    165      * @param {Element} resizerElement
    166      */
    167     _installResizer: function(resizerElement)
    168     {
    169         WebInspector.installDragHandle(resizerElement, this._startResizerDragging.bind(this), this._resizerDragging.bind(this), this._endResizerDragging.bind(this), "ew-resize");
    170     },
    171 
    172     /**
    173      * @type {Element}
    174      */
    175     set resizerWidgetElement(resizerWidgetElement)
    176     {
    177         this._resizerWidgetElement = resizerWidgetElement;
    178         this._installResizer(resizerWidgetElement);
    179     }
    180 }
    181