goog.ui.splitpane.js Maven / Gradle / Ivy
Go to download
Show more of this group Show more artifacts with this name
Show all versions of google-closure-library
Show all versions of google-closure-library
The Google Closure Library is a collection of JavaScript code
designed for use with the Google Closure JavaScript Compiler.
This non-official distribution was prepared by the ClojureScript
team at http://clojure.org/
// Copyright 2007 The Closure Library Authors. All Rights Reserved.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS-IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.
/**
* @fileoverview Class for splitting two areas with draggable control for
* changing size.
*
* The DOM that is created (or that can be decorated) looks like this:
*
*
*
*
*
*
* The content to be split goes in the first and second DIVs, the third one
* is for managing (and styling) the splitter handle.
*
* @see ../demos/splitpane.html
*/
goog.provide('goog.ui.SplitPane');
goog.provide('goog.ui.SplitPane.Orientation');
goog.require('goog.asserts');
goog.require('goog.dom');
goog.require('goog.dom.TagName');
goog.require('goog.dom.classlist');
goog.require('goog.events.EventType');
goog.require('goog.fx.Dragger');
goog.require('goog.math.Rect');
goog.require('goog.math.Size');
goog.require('goog.style');
goog.require('goog.ui.Component');
goog.require('goog.userAgent');
/**
* A left/right up/down Container SplitPane.
* Create SplitPane with two goog.ui.Component opjects to split.
* TODO(user): Support minimum splitpane size.
* TODO(user): Allow component change/orientation after init.
* TODO(user): Support hiding either side of handle (plus handle).
* TODO(user): Look at setBorderBoxSize fixes and revist borderwidth code.
*
* @param {goog.ui.Component} firstComponent Left or Top component.
* @param {goog.ui.Component} secondComponent Right or Bottom component.
* @param {goog.ui.SplitPane.Orientation} orientation SplitPane orientation.
* @param {goog.dom.DomHelper=} opt_domHelper Optional DOM helper.
* @extends {goog.ui.Component}
* @constructor
*/
goog.ui.SplitPane = function(
firstComponent, secondComponent, orientation, opt_domHelper) {
goog.ui.SplitPane.base(this, 'constructor', opt_domHelper);
/**
* The orientation of the containers.
* @type {goog.ui.SplitPane.Orientation}
* @private
*/
this.orientation_ = orientation;
/**
* The left/top component.
* @type {goog.ui.Component}
* @private
*/
this.firstComponent_ = firstComponent;
this.addChild(firstComponent);
/**
* The right/bottom component.
* @type {goog.ui.Component}
* @private
*/
this.secondComponent_ = secondComponent;
this.addChild(secondComponent);
/** @private {Element} */
this.splitpaneHandle_ = null;
};
goog.inherits(goog.ui.SplitPane, goog.ui.Component);
goog.tagUnsealableClass(goog.ui.SplitPane);
/**
* Events.
* @enum {string}
*/
goog.ui.SplitPane.EventType = {
/**
* Dispatched after handle drag.
*/
HANDLE_DRAG: 'handle_drag',
/**
* Dispatched after handle drag end.
*/
HANDLE_DRAG_END: 'handle_drag_end',
/**
* Dispatched after handle snap (double-click splitter).
*/
HANDLE_SNAP: 'handle_snap'
};
/**
* CSS class names for splitpane outer container.
* @type {string}
* @private
*/
goog.ui.SplitPane.CLASS_NAME_ = goog.getCssName('goog-splitpane');
/**
* CSS class name for first splitpane container.
* @type {string}
* @private
*/
goog.ui.SplitPane.FIRST_CONTAINER_CLASS_NAME_ =
goog.getCssName('goog-splitpane-first-container');
/**
* CSS class name for second splitpane container.
* @type {string}
* @private
*/
goog.ui.SplitPane.SECOND_CONTAINER_CLASS_NAME_ =
goog.getCssName('goog-splitpane-second-container');
/**
* CSS class name for the splitpane handle.
* @type {string}
* @private
*/
goog.ui.SplitPane.HANDLE_CLASS_NAME_ = goog.getCssName('goog-splitpane-handle');
/**
* CSS class name for the splitpane handle in horizontal orientation.
* @type {string}
* @private
*/
goog.ui.SplitPane.HANDLE_CLASS_NAME_HORIZONTAL_ =
goog.getCssName('goog-splitpane-handle-horizontal');
/**
* CSS class name for the splitpane handle in horizontal orientation.
* @type {string}
* @private
*/
goog.ui.SplitPane.HANDLE_CLASS_NAME_VERTICAL_ =
goog.getCssName('goog-splitpane-handle-vertical');
/**
* The dragger to move the drag handle.
* @type {goog.fx.Dragger?}
* @private
*/
goog.ui.SplitPane.prototype.splitDragger_ = null;
/**
* The left/top component dom container.
* @type {Element}
* @private
*/
goog.ui.SplitPane.prototype.firstComponentContainer_ = null;
/**
* The right/bottom component dom container.
* @type {Element}
* @private
*/
goog.ui.SplitPane.prototype.secondComponentContainer_ = null;
/**
* The size (width or height) of the splitpane handle, default = 5.
* @type {number}
* @private
*/
goog.ui.SplitPane.prototype.handleSize_ = 5;
/**
* The initial size (width or height) of the left or top component.
* @type {?number}
* @private
*/
goog.ui.SplitPane.prototype.initialSize_ = null;
/**
* The saved size (width or height) of the left or top component on a
* double-click (snap).
* This needs to be saved so it can be restored after another double-click.
* @type {?number}
* @private
*/
goog.ui.SplitPane.prototype.savedSnapSize_ = null;
/**
* The first component size, so we don't change it on a window resize.
* @type {?number}
* @private
*/
goog.ui.SplitPane.prototype.firstComponentSize_ = null;
/**
* If we resize as they user moves the handle (default = true).
* @type {boolean}
* @private
*/
goog.ui.SplitPane.prototype.continuousResize_ = true;
/**
* Iframe overlay to prevent iframes from grabbing events.
* @type {Element}
* @private
*/
goog.ui.SplitPane.prototype.iframeOverlay_ = null;
/**
* Z indices for iframe overlay and splitter handle.
* @enum {number}
* @private
*/
goog.ui.SplitPane.IframeOverlayIndex_ = {
HIDDEN: -1,
OVERLAY: 1,
SPLITTER_HANDLE: 2
};
/**
* Orientation values for the splitpane.
* @enum {string}
*/
goog.ui.SplitPane.Orientation = {
/**
* Horizontal orientation means splitter moves right-left.
*/
HORIZONTAL: 'horizontal',
/**
* Vertical orientation means splitter moves up-down.
*/
VERTICAL: 'vertical'
};
/**
* Create the DOM node & text node needed for the splitpane.
* @override
*/
goog.ui.SplitPane.prototype.createDom = function() {
var dom = this.getDomHelper();
// Create the components.
var firstContainer = dom.createDom(
goog.dom.TagName.DIV, goog.ui.SplitPane.FIRST_CONTAINER_CLASS_NAME_);
var secondContainer = dom.createDom(
goog.dom.TagName.DIV, goog.ui.SplitPane.SECOND_CONTAINER_CLASS_NAME_);
var splitterHandle =
dom.createDom(goog.dom.TagName.DIV, goog.ui.SplitPane.HANDLE_CLASS_NAME_);
// Create the primary element, a DIV that holds the two containers and handle.
this.setElementInternal(
dom.createDom(
goog.dom.TagName.DIV, goog.ui.SplitPane.CLASS_NAME_, firstContainer,
secondContainer, splitterHandle));
this.firstComponentContainer_ = firstContainer;
this.secondComponentContainer_ = secondContainer;
this.splitpaneHandle_ = splitterHandle;
this.setUpHandle_();
this.finishSetup_();
};
/**
* Determines if a given element can be decorated by this type of component.
* @param {Element} element Element to decorate.
* @return {boolean} True if the element can be decorated, false otherwise.
* @override
*/
goog.ui.SplitPane.prototype.canDecorate = function(element) {
var className = goog.ui.SplitPane.FIRST_CONTAINER_CLASS_NAME_;
var firstContainer = this.getElementToDecorate_(element, className);
if (!firstContainer) {
return false;
}
// Since we have this component, save it so we don't have to get it
// again in decorateInternal. Same w/other components.
this.firstComponentContainer_ = firstContainer;
className = goog.ui.SplitPane.SECOND_CONTAINER_CLASS_NAME_;
var secondContainer = this.getElementToDecorate_(element, className);
if (!secondContainer) {
return false;
}
this.secondComponentContainer_ = secondContainer;
className = goog.ui.SplitPane.HANDLE_CLASS_NAME_;
var splitpaneHandle = this.getElementToDecorate_(element, className);
if (!splitpaneHandle) {
return false;
}
this.splitpaneHandle_ = splitpaneHandle;
// We found all the components we're looking for, so return true.
return true;
};
/**
* Obtains the element to be decorated by class name. If multiple such elements
* are found, preference is given to those directly attached to the specified
* root element.
* @param {Element} rootElement The root element from which to retrieve the
* element to be decorated.
* @param {!string} className The target class name.
* @return {Element} The element to decorate.
* @private
*/
goog.ui.SplitPane.prototype.getElementToDecorate_ = function(
rootElement, className) {
// Decorate the root element's children, if available.
var childElements = goog.dom.getChildren(rootElement);
for (var i = 0; i < childElements.length; i++) {
var childElement = goog.asserts.assertElement(childElements[i]);
if (goog.dom.classlist.contains(childElement, className)) {
return childElement;
}
}
// Default to the first descendent element with the correct class.
return goog.dom.getElementsByTagNameAndClass(null, className, rootElement)[0];
};
/**
* Decorates the given HTML element as a SplitPane. Overrides {@link
* goog.ui.Component#decorateInternal}. Considered protected.
* @param {Element} element Element (SplitPane div) to decorate.
* @protected
* @override
*/
goog.ui.SplitPane.prototype.decorateInternal = function(element) {
goog.ui.SplitPane.base(this, 'decorateInternal', element);
this.setUpHandle_();
var elSize = goog.style.getBorderBoxSize(element);
this.setSize(new goog.math.Size(elSize.width, elSize.height));
this.finishSetup_();
};
/**
* Parent the passed in components to the split containers. Call their
* createDom methods if necessary.
* @private
*/
goog.ui.SplitPane.prototype.finishSetup_ = function() {
var dom = this.getDomHelper();
if (!this.firstComponent_.getElement()) {
this.firstComponent_.createDom();
}
dom.appendChild(
this.firstComponentContainer_, this.firstComponent_.getElement());
if (!this.secondComponent_.getElement()) {
this.secondComponent_.createDom();
}
dom.appendChild(
this.secondComponentContainer_, this.secondComponent_.getElement());
this.splitDragger_ =
new goog.fx.Dragger(this.splitpaneHandle_, this.splitpaneHandle_);
this.firstComponentContainer_.style.position = 'absolute';
this.secondComponentContainer_.style.position = 'absolute';
var handleStyle = this.splitpaneHandle_.style;
handleStyle.position = 'absolute';
handleStyle.overflow = 'hidden';
handleStyle.zIndex = goog.ui.SplitPane.IframeOverlayIndex_.SPLITTER_HANDLE;
};
/**
* Setup all events and do an initial resize.
* @override
*/
goog.ui.SplitPane.prototype.enterDocument = function() {
goog.ui.SplitPane.base(this, 'enterDocument');
// If position is not set in the inline style of the element, it is not
// possible to get the element's real CSS position until the element is in
// the document.
// When position:relative is set in the CSS and the element is not in the
// document, Safari, Chrome, and Opera always return the empty string; while
// IE always return "static".
// Do the final check to see if element's position is set as "relative",
// "absolute" or "fixed".
var element = this.getElement();
if (goog.style.getComputedPosition(element) == 'static') {
element.style.position = 'relative';
}
this.getHandler()
.listen(
this.splitpaneHandle_, goog.events.EventType.DBLCLICK,
this.handleDoubleClick_)
.listen(
this.splitDragger_, goog.fx.Dragger.EventType.START,
this.handleDragStart_)
.listen(
this.splitDragger_, goog.fx.Dragger.EventType.DRAG, this.handleDrag_)
.listen(
this.splitDragger_, goog.fx.Dragger.EventType.END,
this.handleDragEnd_);
this.setFirstComponentSize(this.initialSize_);
};
/**
* Sets the initial size of the left or top component.
* @param {number} size The size in Pixels of the container.
*/
goog.ui.SplitPane.prototype.setInitialSize = function(size) {
this.initialSize_ = size;
};
/**
* Sets the SplitPane handle size.
* TODO(user): Make sure this works after initialization.
* @param {number} size The size of the handle in pixels.
*/
goog.ui.SplitPane.prototype.setHandleSize = function(size) {
this.handleSize_ = size;
};
/**
* Sets whether we resize on handle drag.
* @param {boolean} continuous The continuous resize value.
*/
goog.ui.SplitPane.prototype.setContinuousResize = function(continuous) {
this.continuousResize_ = continuous;
};
/**
* Returns whether the orientation for the split pane is vertical
* or not.
* @return {boolean} True if the orientation is vertical, false otherwise.
*/
goog.ui.SplitPane.prototype.isVertical = function() {
return this.orientation_ == goog.ui.SplitPane.Orientation.VERTICAL;
};
/**
* Initializes the handle by assigning the correct height/width and adding
* the correct class as per the orientation.
* @private
*/
goog.ui.SplitPane.prototype.setUpHandle_ = function() {
if (this.isVertical()) {
this.splitpaneHandle_.style.height = this.handleSize_ + 'px';
goog.dom.classlist.add(
this.splitpaneHandle_, goog.ui.SplitPane.HANDLE_CLASS_NAME_VERTICAL_);
} else {
this.splitpaneHandle_.style.width = this.handleSize_ + 'px';
goog.dom.classlist.add(
this.splitpaneHandle_, goog.ui.SplitPane.HANDLE_CLASS_NAME_HORIZONTAL_);
}
};
/**
* Sets the orientation class for the split pane handle.
* @protected
*/
goog.ui.SplitPane.prototype.setOrientationClassForHandle = function() {
goog.asserts.assert(this.splitpaneHandle_);
if (this.isVertical()) {
goog.dom.classlist.swap(
this.splitpaneHandle_, goog.ui.SplitPane.HANDLE_CLASS_NAME_HORIZONTAL_,
goog.ui.SplitPane.HANDLE_CLASS_NAME_VERTICAL_);
} else {
goog.dom.classlist.swap(
this.splitpaneHandle_, goog.ui.SplitPane.HANDLE_CLASS_NAME_VERTICAL_,
goog.ui.SplitPane.HANDLE_CLASS_NAME_HORIZONTAL_);
}
};
/**
* Sets the orientation of the split pane.
* @param {goog.ui.SplitPane.Orientation} orientation SplitPane orientation.
*/
goog.ui.SplitPane.prototype.setOrientation = function(orientation) {
if (this.orientation_ != orientation) {
this.orientation_ = orientation;
var isVertical = this.isVertical();
// If the split pane is already in document, then the positions and sizes
// need to be adjusted.
if (this.isInDocument()) {
this.setOrientationClassForHandle();
// TODO(user): Should handleSize_ and initialSize_ also be adjusted ?
if (goog.isNumber(this.firstComponentSize_)) {
var splitpaneSize = goog.style.getBorderBoxSize(this.getElement());
var ratio = isVertical ? splitpaneSize.height / splitpaneSize.width :
splitpaneSize.width / splitpaneSize.height;
// TODO(user): Fix the behaviour for the case when the handle is
// placed on either of the edges of the split pane. Also, similar
// behaviour is present in {@link #setSize}. Probably need to modify
// {@link #setFirstComponentSize}.
this.setFirstComponentSize(this.firstComponentSize_ * ratio);
} else {
this.setFirstComponentSize();
}
}
}
};
/**
* Gets the orientation of the split pane.
* @return {goog.ui.SplitPane.Orientation} The orientation.
*/
goog.ui.SplitPane.prototype.getOrientation = function() {
return this.orientation_;
};
/**
* Move and resize a container. The sizing changes the BorderBoxSize.
* @param {Element} element The element to move and size.
* @param {goog.math.Rect} rect The top, left, width and height to change to.
* @private
*/
goog.ui.SplitPane.prototype.moveAndSize_ = function(element, rect) {
goog.style.setPosition(element, rect.left, rect.top);
// TODO(user): Add a goog.math.Size.max call for below.
goog.style.setBorderBoxSize(
element,
new goog.math.Size(Math.max(rect.width, 0), Math.max(rect.height, 0)));
};
/**
* @return {?number} The size of the left/top component.
*/
goog.ui.SplitPane.prototype.getFirstComponentSize = function() {
return this.firstComponentSize_;
};
/**
* Set the size of the left/top component, and resize the other component based
* on that size and handle size.
* @param {?number=} opt_size The size of the top or left, in pixels. If
* unspecified, leaves the size of the first component unchanged but adjusts
* the size of the second component to fit the split pane size.
*/
goog.ui.SplitPane.prototype.setFirstComponentSize = function(opt_size) {
this.setFirstComponentSize_(
goog.style.getBorderBoxSize(this.getElement()), opt_size);
};
/**
* Set the size of the left/top component, and resize the other component based
* on that size and handle size. Unlike the public method, this takes the
* current pane size which avoids the expensive getBorderBoxSize() call
* when we have the size available.
*
* @param {!goog.math.Size} splitpaneSize The current size of the splitpane.
* @param {?number=} opt_size The size of the top or left, in pixels.
* @private
*/
goog.ui.SplitPane.prototype.setFirstComponentSize_ = function(
splitpaneSize, opt_size) {
var top = 0, left = 0;
var isVertical = this.isVertical();
// Figure out first component size; it's either passed in, taken from the
// saved size, or is half of the total size.
var firstComponentSize = goog.isNumber(opt_size) ?
opt_size :
goog.isNumber(this.firstComponentSize_) ?
this.firstComponentSize_ :
Math.floor((isVertical ? splitpaneSize.height : splitpaneSize.width) / 2);
this.firstComponentSize_ = firstComponentSize;
var firstComponentWidth;
var firstComponentHeight;
var secondComponentWidth;
var secondComponentHeight;
var handleWidth;
var handleHeight;
var secondComponentLeft;
var secondComponentTop;
var handleLeft;
var handleTop;
if (isVertical) {
// Width for the handle and the first and second components will be the
// width of the split pane. The height for the first component will be
// the calculated first component size. The height for the second component
// will be the total height minus the heights of the first component and
// the handle.
firstComponentHeight = firstComponentSize;
firstComponentWidth = splitpaneSize.width;
handleWidth = splitpaneSize.width;
handleHeight = this.handleSize_;
secondComponentHeight =
splitpaneSize.height - firstComponentHeight - handleHeight;
secondComponentWidth = splitpaneSize.width;
handleTop = top + firstComponentHeight;
handleLeft = left;
secondComponentTop = handleTop + handleHeight;
secondComponentLeft = left;
} else {
// Height for the handle and the first and second components will be the
// height of the split pane. The width for the first component will be
// the calculated first component size. The width for the second component
// will be the total width minus the widths of the first component and
// the handle.
firstComponentWidth = firstComponentSize;
firstComponentHeight = splitpaneSize.height;
handleWidth = this.handleSize_;
handleHeight = splitpaneSize.height;
secondComponentWidth =
splitpaneSize.width - firstComponentWidth - handleWidth;
secondComponentHeight = splitpaneSize.height;
handleLeft = left + firstComponentWidth;
handleTop = top;
secondComponentLeft = handleLeft + handleWidth;
secondComponentTop = top;
}
// Now move and size the containers.
this.moveAndSize_(
this.firstComponentContainer_,
new goog.math.Rect(left, top, firstComponentWidth, firstComponentHeight));
if (typeof this.firstComponent_.resize == 'function') {
this.firstComponent_.resize(
new goog.math.Size(firstComponentWidth, firstComponentHeight));
}
this.moveAndSize_(
this.splitpaneHandle_,
new goog.math.Rect(handleLeft, handleTop, handleWidth, handleHeight));
this.moveAndSize_(
this.secondComponentContainer_,
new goog.math.Rect(
secondComponentLeft, secondComponentTop, secondComponentWidth,
secondComponentHeight));
if (typeof this.secondComponent_.resize == 'function') {
this.secondComponent_.resize(
new goog.math.Size(secondComponentWidth, secondComponentHeight));
}
// Fire a CHANGE event.
this.dispatchEvent(goog.ui.Component.EventType.CHANGE);
};
/**
* Set the size of the splitpane. This is usually called by the controlling
* application. This will set the SplitPane BorderBoxSize.
* @param {!goog.math.Size} size The size to set the splitpane.
* @param {?number=} opt_firstComponentSize The size of the top or left
* component, in pixels.
*/
goog.ui.SplitPane.prototype.setSize = function(size, opt_firstComponentSize) {
goog.style.setBorderBoxSize(this.getElement(), size);
if (this.iframeOverlay_) {
goog.style.setBorderBoxSize(this.iframeOverlay_, size);
}
this.setFirstComponentSize_(size, opt_firstComponentSize);
};
/**
* Snap the container to the left or top on a Double-click.
* @private
*/
goog.ui.SplitPane.prototype.snapIt_ = function() {
var handlePos = goog.style.getRelativePosition(
this.splitpaneHandle_, this.firstComponentContainer_);
var firstBorderBoxSize =
goog.style.getBorderBoxSize(this.firstComponentContainer_);
var firstContentBoxSize =
goog.style.getContentBoxSize(this.firstComponentContainer_);
var isVertical = this.isVertical();
// Where do we snap the handle (what size to make the component) and what
// is the current handle position.
var snapSize;
var handlePosition;
if (isVertical) {
snapSize = firstBorderBoxSize.height - firstContentBoxSize.height;
handlePosition = handlePos.y;
} else {
snapSize = firstBorderBoxSize.width - firstContentBoxSize.width;
handlePosition = handlePos.x;
}
if (snapSize == handlePosition) {
// This means we're 'unsnapping', set it back to where it was.
this.setFirstComponentSize(this.savedSnapSize_);
} else {
// This means we're 'snapping', set the size to snapSize, and hide the
// first component.
if (isVertical) {
this.savedSnapSize_ =
goog.style.getBorderBoxSize(this.firstComponentContainer_).height;
} else {
this.savedSnapSize_ =
goog.style.getBorderBoxSize(this.firstComponentContainer_).width;
}
this.setFirstComponentSize(snapSize);
}
// Fire a SNAP event.
this.dispatchEvent(goog.ui.SplitPane.EventType.HANDLE_SNAP);
};
/**
* Handle the start drag event - set up the dragger.
* @param {goog.events.Event} e The event.
* @private
*/
goog.ui.SplitPane.prototype.handleDragStart_ = function(e) {
// Setup iframe overlay to prevent iframes from grabbing events.
if (!this.iframeOverlay_) {
// Create the overlay.
var cssStyles = 'position: relative';
if (goog.userAgent.IE && !goog.userAgent.isVersionOrHigher('10')) {
// IE doesn't look at this div unless it has a background, so we'll
// put one on, but make it opaque.
cssStyles += ';background-color: #000;filter: Alpha(Opacity=0)';
}
this.iframeOverlay_ = this.getDomHelper().createDom(
goog.dom.TagName.DIV, {'style': cssStyles});
this.getDomHelper().appendChild(this.getElement(), this.iframeOverlay_);
}
this.iframeOverlay_.style.zIndex =
goog.ui.SplitPane.IframeOverlayIndex_.OVERLAY;
goog.style.setBorderBoxSize(
this.iframeOverlay_, goog.style.getBorderBoxSize(this.getElement()));
var pos = goog.style.getPosition(this.firstComponentContainer_);
// For the size of the limiting box, we add the container content box sizes
// so that if the handle is placed all the way to the end or the start, the
// border doesn't exceed the total size. For position, we add the difference
// between the border box and content box sizes of the first container to the
// position of the first container. The start position should be such that
// there is no overlap of borders.
var limitWidth = 0;
var limitHeight = 0;
var limitx = pos.x;
var limity = pos.y;
var firstBorderBoxSize =
goog.style.getBorderBoxSize(this.firstComponentContainer_);
var firstContentBoxSize =
goog.style.getContentBoxSize(this.firstComponentContainer_);
var secondContentBoxSize =
goog.style.getContentBoxSize(this.secondComponentContainer_);
if (this.isVertical()) {
limitHeight = firstContentBoxSize.height + secondContentBoxSize.height;
limity += firstBorderBoxSize.height - firstContentBoxSize.height;
} else {
limitWidth = firstContentBoxSize.width + secondContentBoxSize.width;
limitx += firstBorderBoxSize.width - firstContentBoxSize.width;
}
var limits = new goog.math.Rect(limitx, limity, limitWidth, limitHeight);
this.splitDragger_.setLimits(limits);
};
/**
* Find the location relative to the splitpane.
* @param {number} left The x location relative to the window.
* @return {number} The relative x location.
* @private
*/
goog.ui.SplitPane.prototype.getRelativeLeft_ = function(left) {
return left - goog.style.getPosition(this.firstComponentContainer_).x;
};
/**
* Find the location relative to the splitpane.
* @param {number} top The y location relative to the window.
* @return {number} The relative y location.
* @private
*/
goog.ui.SplitPane.prototype.getRelativeTop_ = function(top) {
return top - goog.style.getPosition(this.firstComponentContainer_).y;
};
/**
* Handle the drag event. Move the containers.
* @param {!goog.fx.DragEvent} e The event.
* @private
*/
goog.ui.SplitPane.prototype.handleDrag_ = function(e) {
if (this.continuousResize_) {
if (this.isVertical()) {
var top = this.getRelativeTop_(e.top);
this.setFirstComponentSize(top);
} else {
var left = this.getRelativeLeft_(e.left);
this.setFirstComponentSize(left);
}
this.dispatchEvent(goog.ui.SplitPane.EventType.HANDLE_DRAG);
}
};
/**
* Handle the drag end event. If we're not doing continuous resize,
* resize the component. If we're doing continuous resize, the component
* is already the correct size.
* @param {!goog.fx.DragEvent} e The event.
* @private
*/
goog.ui.SplitPane.prototype.handleDragEnd_ = function(e) {
// Push iframe overlay down.
this.iframeOverlay_.style.zIndex =
goog.ui.SplitPane.IframeOverlayIndex_.HIDDEN;
if (!this.continuousResize_) {
if (this.isVertical()) {
var top = this.getRelativeTop_(e.top);
this.setFirstComponentSize(top);
} else {
var left = this.getRelativeLeft_(e.left);
this.setFirstComponentSize(left);
}
}
this.dispatchEvent(goog.ui.SplitPane.EventType.HANDLE_DRAG_END);
};
/**
* Handle the Double-click. Call the snapIt method which snaps the container
* to the top or left.
* @param {goog.events.Event} e The event.
* @private
*/
goog.ui.SplitPane.prototype.handleDoubleClick_ = function(e) {
this.snapIt_();
};
/** @override */
goog.ui.SplitPane.prototype.disposeInternal = function() {
goog.dispose(this.splitDragger_);
this.splitDragger_ = null;
goog.dom.removeNode(this.iframeOverlay_);
this.iframeOverlay_ = null;
goog.ui.SplitPane.base(this, 'disposeInternal');
};
© 2015 - 2025 Weber Informatics LLC | Privacy Policy