Source/devtools/front_end/SidebarOverlay.js

/*
 * Copyright (C) 2012 Google Inc. All rights reserved.
 *
 * Redistribution and use in source and binary forms, with or without
 * modification, are permitted provided that the following conditions are
 * met:
 *
 *     * Redistributions of source code must retain the above copyright
 * notice, this list of conditions and the following disclaimer.
 *     * Redistributions in binary form must reproduce the above
 * copyright notice, this list of conditions and the following disclaimer
 * in the documentation and/or other materials provided with the
 * distribution.
 *     * Neither the name of Google Inc. nor the names of its
 * contributors may be used to endorse or promote products derived from
 * this software without specific prior written permission.
 *
 * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
 * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
 * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
 * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
 * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
 * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
 * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
 * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
 * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
 * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 */

/**
 * @constructor
 * @param {!WebInspector.View} view
 * @param {string} widthSettingName
 * @param {number} minimalWidth
 */
WebInspector.SidebarOverlay = function(view, widthSettingName, minimalWidth)
{
    this.element = document.createElement("div");
    this.element.className = "sidebar-overlay";

    this._view = view;
    this._widthSettingName = widthSettingName;
    this._minimalWidth = minimalWidth;
    this._savedWidth = minimalWidth || 300;
    
    if (this._widthSettingName)
        WebInspector.settings[this._widthSettingName] = WebInspector.settings.createSetting(this._widthSettingName, undefined);
    
    this._resizerElement = document.createElement("div");
    this._resizerElement.className = "sidebar-overlay-resizer";
    this._installResizer(this._resizerElement);
}

WebInspector.SidebarOverlay.prototype = {
    /**
     * @param {!Element} relativeToElement
     */
    show: function(relativeToElement)
    {
        relativeToElement.appendChild(this.element);
        relativeToElement.classList.add("sidebar-overlay-shown");
        this._view.show(this.element);
        this.element.appendChild(this._resizerElement);
        if (this._resizerWidgetElement)
            this.element.appendChild(this._resizerWidgetElement);
        this.position(relativeToElement);
    },

    /**
     * @param {!Element} relativeToElement
     */
    position: function(relativeToElement)
    {
        this._totalWidth = relativeToElement.offsetWidth;
        this._setWidth(this._preferredWidth());
    },

    focus: function()
    {
        WebInspector.setCurrentFocusElement(this._view.element);
    },

    hide: function()
    {
        var element = this.element.parentElement;
        if (!element)
            return;

        this._view.detach();
        element.removeChild(this.element);
        element.classList.remove("sidebar-overlay-shown");
        this.element.removeChild(this._resizerElement);
        if (this._resizerWidgetElement)
            this.element.removeChild(this._resizerWidgetElement);
    },
    
    /**
     * @param {number} newWidth
     */
    _setWidth: function(newWidth)
    {
        var width = Number.constrain(newWidth, this._minimalWidth, this._totalWidth);
        
        if (this._width === width)
            return;

        this.element.style.width = width + "px";
        this._resizerElement.style.left = (width - 3) + "px";
        this._width = width;
        this._view.doResize();
        this._saveWidth();
    },

    /**
     * @return {number}
     */
    _preferredWidth: function()
    {
        if (!this._widthSettingName)
            return this._savedWidth;

        return WebInspector.settings[this._widthSettingName].get() || this._savedWidth;
    },
    
    _saveWidth: function()
    {
        this._savedWidth = this._width;
        if (!this._widthSettingName)
            return;

        WebInspector.settings[this._widthSettingName].set(this._width);
    },

    /**
     * @param {!Event} event
     * @return {boolean}
     */
    _startResizerDragging: function(event)
    {
        var width = this._width;
        this._dragOffset = width - event.pageX;
        return true;
    },

    /**
     * @param {!Event} event
     */
    _resizerDragging: function(event)
    {
        var width = event.pageX + this._dragOffset;
        this._setWidth(width);
        event.preventDefault();
    },

    /**
     * @param {!Event} event
     */
    _endResizerDragging: function(event)
    {
        delete this._dragOffset;
    },

    /**
     * @param {!Element} resizerElement
     */
    _installResizer: function(resizerElement)
    {
        WebInspector.installDragHandle(resizerElement, this._startResizerDragging.bind(this), this._resizerDragging.bind(this), this._endResizerDragging.bind(this), "ew-resize");
    },

    /**
     * @param {!Element} resizerWidgetElement
     */
    set resizerWidgetElement(resizerWidgetElement)
    {
        this._resizerWidgetElement = resizerWidgetElement;
        this._installResizer(resizerWidgetElement);
    }
}