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 = {
show: function(relativeToElement)
{
relativeToElement.appendChild(this.element);
relativeToElement.addStyleClass("sidebar-overlay-shown");
this._view.show(this.element);
this.element.appendChild(this._resizerElement);
if (this._resizerWidgetElement)
this.element.appendChild(this._resizerWidgetElement);
this.position(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.removeStyleClass("sidebar-overlay-shown");
this.element.removeChild(this._resizerElement);
if (this._resizerWidgetElement)
this.element.removeChild(this._resizerWidgetElement);
},
_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();
},
_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);
},
_startResizerDragging: function(event)
{
var width = this._width;
this._dragOffset = width - event.pageX;
return true;
},
_resizerDragging: function(event)
{
var width = event.pageX + this._dragOffset;
this._setWidth(width);
event.preventDefault();
},
_endResizerDragging: function(event)
{
delete this._dragOffset;
},
_installResizer: function(resizerElement)
{
WebInspector.installDragHandle(resizerElement, this._startResizerDragging.bind(this), this._resizerDragging.bind(this), this._endResizerDragging.bind(this), "ew-resize");
},
set resizerWidgetElement(resizerWidgetElement)
{
this._resizerWidgetElement = resizerWidgetElement;
this._installResizer(resizerWidgetElement);
}
}