oqapi/webgui
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
webgui/www/extras/yui-ext/docs/overview-summary-SplitBar.js.html
JT Smith 4f68a0933c added YUI and YUI-ext 
fixed the resizable text area with IE problem
fixed the ad space with IE problem
merged the 7.2.0 and 7.1.4 change logs
2006-11-07 23:15:57 +00:00

497 lines
24 KiB
HTML
Raw Blame History

<!doctype html public "-//W3C//DTD HTML 4.0 Frameset//EN""http://www.w3.org/TR/REC-html40/frameset.dtd">
<html>
<head>
<title>
Overview
</title>
<link rel ="stylesheet" type="text/css" href="stylesheet.css" title="Style">
<script>
function asd() {
parent.document.title="SplitBar.js Overview";
}
</script>
</head>
<body bgcolor="white" onload="asd();" style="margin:15px;">
<center>
<h2>SplitBar.js</h2>
</center>
<h4>Summary</h4>
<p>
</p>
<table border="1" cellpadding="3" cellspacing="0" width="100%">
<tr bgcolor="#CCCCFF" class="TableHeadingColor">
<td colspan="2" class="title-cell">
<b>Class Summary</b>
</td>
</tr>
<tr bgcolor="white" class="TableRowColor">
<td width="15%"><b><a href="YAHOO.ext.SplitBar.html">YAHOO.ext.SplitBar</a></b></td>
<td>Creates draggable splitter bar functionality from two elements.</td>
</tr>
<tr bgcolor="white" class="TableRowColor">
<td width="15%"><b><a href="YAHOO.ext.SplitBar.AbsoluteLayoutAdapter.html">YAHOO.ext.SplitBar.AbsoluteLayoutAdapter</a></b></td>
<td>Adapter that moves the splitter element to align with the resized sizing element.</td>
</tr>
<tr bgcolor="white" class="TableRowColor">
<td width="15%"><b><a href="YAHOO.ext.SplitBar.BasicLayoutAdapter.html">YAHOO.ext.SplitBar.BasicLayoutAdapter</a></b></td>
<td>Default Adapter.</td>
</tr>
</table>
<hr/>
<!-- ========== METHOD SUMMARY =========== -->
<!-- ========== END METHOD SUMMARY =========== -->
<pre class="sourceview"><span class="comment">/*
* splitbar.js, version .7
* Copyright(c) 2006, Jack Slocum.
* Code licensed under the BSD License
*/</span>
YAHOO.util.DragDropMgr.clickTimeThresh = 350;
<span class="comment">/**
* <span class="attrib">@class</span> Creates draggable splitter bar functionality from two elements.
* &lt;br&gt;&lt;br&gt;
* Usage:
* &lt;pre&gt;&lt;code&gt;
* var split = new YAHOO.ext.SplitBar('elementToDrag', 'elementToSize',
* YAHOO.ext.SplitBar.HORIZONTAL, YAHOO.ext.SplitBar.LEFT);
* split.setAdapter(new YAHOO.ext.SplitBar.AbsoluteLayoutAdapter("container"));
* split.minSize = 100;
* split.maxSize = 600;
* split.animate = true;
* split.onMoved.subscribe(splitterMoved);
* &lt;/code&gt;&lt;/pre&gt;
* <span class="attrib">@requires</span> YAHOO.ext.Element
* <span class="attrib">@requires</span> YAHOO.util.Dom
* <span class="attrib">@requires</span> YAHOO.util.Event
* <span class="attrib">@requires</span> YAHOO.util.CustomEvent
* <span class="attrib">@requires</span> YAHOO.util.DDProxy
* <span class="attrib">@requires</span> YAHOO.util.Anim (optional) to support animation
* <span class="attrib">@requires</span> YAHOO.util.Easing (optional) to support animation
* <span class="attrib">@constructor</span>
* <span class="attrib">@param</span> {String/HTMLElement/Element} dragElement The element to be dragged and act as the SplitBar.
* <span class="attrib">@param</span> {String/HTMLElement/Element} resizingElement The element to be resized based on where the SplitBar element is dragged
* <span class="attrib">@param</span> {Number} orientation (optional) Either YAHOO.ext.SplitBar.HORIZONTAL or YAHOO.ext.SplitBar.VERTICAL. (Defaults to HORIZONTAL)
* <span class="attrib">@param</span> {Number} placement (optional) Either YAHOO.ext.SplitBar.LEFT or YAHOO.ext.SplitBar.RIGHT for horizontal or
YAHOO.ext.SplitBar.TOP or YAHOO.ext.SplitBar.BOTTOM for vertical. (By default, this is determined automatically by the intial position
position of the SplitBar).
*/</span>
YAHOO.ext.SplitBar = <span class="reserved">function</span>(dragElement, resizingElement, orientation, placement){
<span class="comment">/** <span class="attrib">@private</span> */</span>
<span class="reserved">this</span>.el = YAHOO.ext.Element.get(dragElement, true);
<span class="comment">/** <span class="attrib">@private</span> */</span>
<span class="reserved">this</span>.resizingEl = YAHOO.ext.Element.get(resizingElement, true);
<span class="comment">/**
* <span class="attrib">@private</span>
* The orientation of the split. Either YAHOO.ext.SplitBar.HORIZONTAL or YAHOO.ext.SplitBar.VERTICAL. (Defaults to HORIZONTAL)
* Note: If this is changed after creating the SplitBar, the placement property must be manually updated
* <span class="attrib">@type</span> Number
*/</span>
<span class="reserved">this</span>.orientation = orientation || YAHOO.ext.SplitBar.HORIZONTAL;
<span class="comment">/**
* The minimum size of the resizing element. (Defaults to 0)
* <span class="attrib">@type</span> Number
*/</span>
<span class="reserved">this</span>.minSize = 0;
<span class="comment">/**
* The maximum size of the resizing element. (Defaults to 2000)
* <span class="attrib">@type</span> Number
*/</span>
<span class="reserved">this</span>.maxSize = 2000;
<span class="comment">/**
* Fires when the SplitBar is moved. Uses fireDirect with signature: (this, newSize)
* <span class="attrib">@type</span> CustomEvent
*/</span>
<span class="reserved">this</span>.onMoved = new YAHOO.util.CustomEvent(<span class="literal">"SplitBarMoved"</span>, <span class="reserved">this</span>);
<span class="comment">/**
* Whether to animate the transition to the new size
* <span class="attrib">@type</span> Boolean
*/</span>
<span class="reserved">this</span>.animate = false;
<span class="comment">/**
* Whether to create a transparent shim that overlays the page when dragging, enables dragging across iframes.
* <span class="attrib">@type</span> Boolean
*/</span>
<span class="reserved">this</span>.useShim = false;
<span class="comment">/** <span class="attrib">@private</span> */</span>
<span class="reserved">this</span>.shim = null;
<span class="comment">/** <span class="attrib">@private</span> */</span>
<span class="reserved">this</span>.proxy = YAHOO.ext.SplitBar.createProxy(<span class="reserved">this</span>.orientation);
<span class="comment">/** <span class="attrib">@private</span> */</span>
<span class="reserved">this</span>.dd = new YAHOO.util.DDProxy(<span class="reserved">this</span>.el.dom.id, <span class="literal">"SplitBars"</span>, {dragElId : <span class="reserved">this</span>.proxy.id});
<span class="comment">/** <span class="attrib">@private</span> */</span>
<span class="reserved">this</span>.dd.b4StartDrag = <span class="reserved">this</span>.onStartProxyDrag.createDelegate(<span class="reserved">this</span>);
<span class="comment">/** <span class="attrib">@private</span> */</span>
<span class="reserved">this</span>.dd.endDrag = <span class="reserved">this</span>.onEndProxyDrag.createDelegate(<span class="reserved">this</span>);
<span class="comment">/** <span class="attrib">@private</span> */</span>
<span class="reserved">this</span>.dragSpecs = {};
<span class="comment">/**
* <span class="attrib">@private</span> The adapter to use to positon and resize elements
*/</span>
<span class="reserved">this</span>.adapter = new YAHOO.ext.SplitBar.BasicLayoutAdapter();
<span class="reserved">this</span>.adapter.init(<span class="reserved">this</span>);
<span class="reserved">if</span>(<span class="reserved">this</span>.orientation == YAHOO.ext.SplitBar.HORIZONTAL){
<span class="comment">/** <span class="attrib">@private</span> */</span>
<span class="reserved">this</span>.placement = placement || (<span class="reserved">this</span>.el.getX() &gt; <span class="reserved">this</span>.resizingEl.getX() ? YAHOO.ext.SplitBar.LEFT : YAHOO.ext.SplitBar.RIGHT);
<span class="reserved">this</span>.el.setStyle(<span class="literal">'cursor'</span>, <span class="literal">'e-resize'</span>);
}<span class="reserved">else</span>{
<span class="comment">/** <span class="attrib">@private</span> */</span>
<span class="reserved">this</span>.placement = placement || (<span class="reserved">this</span>.el.getY() &gt; <span class="reserved">this</span>.resizingEl.getY() ? YAHOO.ext.SplitBar.TOP : YAHOO.ext.SplitBar.BOTTOM);
<span class="reserved">this</span>.el.setStyle(<span class="literal">'cursor'</span>, <span class="literal">'n-resize'</span>);
}
}
YAHOO.ext.SplitBar.<span class="reserved">prototype</span> = {
<span class="comment">/**
* <span class="attrib">@private</span> Called before drag operation begins by the DDProxy
*/</span>
onStartProxyDrag : <span class="reserved">function</span>(x, y){
<span class="reserved">if</span>(<span class="reserved">this</span>.useShim){
<span class="reserved">if</span>(!<span class="reserved">this</span>.shim){
<span class="reserved">this</span>.shim = YAHOO.ext.SplitBar.createShim();
}
<span class="reserved">this</span>.shim.setVisible(true);
}
YAHOO.util.Dom.setStyle(<span class="reserved">this</span>.proxy, <span class="literal">'display'</span>, <span class="literal">'block'</span>);
var size = <span class="reserved">this</span>.adapter.getElementSize(<span class="reserved">this</span>);
var c1 = size - <span class="reserved">this</span>.minSize;
var c2 = Math.max(<span class="reserved">this</span>.maxSize - size, 0);
<span class="reserved">if</span>(<span class="reserved">this</span>.orientation == YAHOO.ext.SplitBar.HORIZONTAL){
<span class="reserved">this</span>.dd.resetConstraints();
<span class="reserved">this</span>.dd.setXConstraint(
<span class="reserved">this</span>.placement == YAHOO.ext.SplitBar.LEFT ? c1 : c2,
<span class="reserved">this</span>.placement == YAHOO.ext.SplitBar.LEFT ? c2 : c1
);
<span class="reserved">this</span>.dd.setYConstraint(0, 0);
}<span class="reserved">else</span>{
<span class="reserved">this</span>.dd.resetConstraints();
<span class="reserved">this</span>.dd.setXConstraint(0, 0);
<span class="reserved">this</span>.dd.setYConstraint(
<span class="reserved">this</span>.placement == YAHOO.ext.SplitBar.TOP ? c1 : c2,
<span class="reserved">this</span>.placement == YAHOO.ext.SplitBar.TOP ? c2 : c1
);
}
<span class="reserved">this</span>.dragSpecs.startSize = size;
<span class="reserved">this</span>.dragSpecs.startPoint = [x, y];
YAHOO.util.DDProxy.<span class="reserved">prototype</span>.b4StartDrag.call(<span class="reserved">this</span>.dd, x, y);
},
<span class="comment">/**
* <span class="attrib">@private</span> Called after the drag operation by the DDProxy
*/</span>
onEndProxyDrag : <span class="reserved">function</span>(e){
YAHOO.util.Dom.setStyle(<span class="reserved">this</span>.proxy, <span class="literal">'display'</span>, <span class="literal">'none'</span>);
var endPoint = YAHOO.util.Event.getXY(e);
<span class="reserved">if</span>(<span class="reserved">this</span>.useShim){
<span class="reserved">this</span>.shim.setVisible(false);
}
var newSize;
<span class="reserved">if</span>(<span class="reserved">this</span>.orientation == YAHOO.ext.SplitBar.HORIZONTAL){
newSize = <span class="reserved">this</span>.dragSpecs.startSize +
(<span class="reserved">this</span>.placement == YAHOO.ext.SplitBar.LEFT ?
endPoint[0] - <span class="reserved">this</span>.dragSpecs.startPoint[0] :
<span class="reserved">this</span>.dragSpecs.startPoint[0] - endPoint[0]
);
}<span class="reserved">else</span>{
newSize = <span class="reserved">this</span>.dragSpecs.startSize +
(<span class="reserved">this</span>.placement == YAHOO.ext.SplitBar.TOP ?
endPoint[1] - <span class="reserved">this</span>.dragSpecs.startPoint[1] :
<span class="reserved">this</span>.dragSpecs.startPoint[1] - endPoint[1]
);
}
newSize = Math.min(Math.max(newSize, <span class="reserved">this</span>.minSize), <span class="reserved">this</span>.maxSize);
<span class="reserved">if</span>(newSize != <span class="reserved">this</span>.dragSpecs.startSize){
<span class="reserved">this</span>.adapter.setElementSize(<span class="reserved">this</span>, newSize);
<span class="reserved">this</span>.onMoved.fireDirect(<span class="reserved">this</span>, newSize);
}
},
<span class="comment">/**
* Get the adapter this SplitBar uses
* <span class="attrib">@return</span> The adapter object
*/</span>
getAdapter : <span class="reserved">function</span>(){
<span class="reserved">return</span> <span class="reserved">this</span>.adapter;
},
<span class="comment">/**
* Set the adapter this SplitBar uses
* <span class="attrib">@param</span> {Object} adapter A SplitBar adapter object
*/</span>
setAdapter : <span class="reserved">function</span>(adapter){
<span class="reserved">this</span>.adapter = adapter;
<span class="reserved">this</span>.adapter.init(<span class="reserved">this</span>);
},
<span class="comment">/**
* Gets the minimum size for the resizing element
* <span class="attrib">@return</span> {Number} The minimum size
*/</span>
getMinimumSize : <span class="reserved">function</span>(){
<span class="reserved">return</span> <span class="reserved">this</span>.minSize;
},
<span class="comment">/**
* Sets the minimum size for the resizing element
* <span class="attrib">@param</span> {Number} minSize The minimum size
*/</span>
setMinimumSize : <span class="reserved">function</span>(minSize){
<span class="reserved">this</span>.minSize = minSize;
},
<span class="comment">/**
* Gets the maximum size for the resizing element
* <span class="attrib">@return</span> {Number} The maximum size
*/</span>
getMaximumSize : <span class="reserved">function</span>(){
<span class="reserved">return</span> <span class="reserved">this</span>.maxSize;
},
<span class="comment">/**
* Sets the maximum size for the resizing element
* <span class="attrib">@param</span> {Number} maxSize The maximum size
*/</span>
setMaximumSize : <span class="reserved">function</span>(maxSize){
<span class="reserved">this</span>.maxSize = maxSize;
},
<span class="comment">/**
* Sets the initialize size for the resizing element
* <span class="attrib">@param</span> {Number} size The initial size
*/</span>
setCurrentSize : <span class="reserved">function</span>(size){
var oldAnimate = <span class="reserved">this</span>.animate;
<span class="reserved">this</span>.animate = false;
<span class="reserved">this</span>.adapter.setElementSize(<span class="reserved">this</span>, size);
<span class="reserved">this</span>.animate = oldAnimate;
}
};
<span class="comment">/**
* <span class="attrib">@private</span> static Create the shim to drag over iframes
*/</span>
YAHOO.ext.SplitBar.createShim = <span class="reserved">function</span>(){
var shim = document.createElement(<span class="literal">'div'</span>);
YAHOO.util.Dom.generateId(shim, <span class="literal">'split-shim'</span>);
YAHOO.util.Dom.setStyle(shim, <span class="literal">'width'</span>, <span class="literal">'100%'</span>);
YAHOO.util.Dom.setStyle(shim, <span class="literal">'height'</span>, <span class="literal">'100%'</span>);
YAHOO.util.Dom.setStyle(shim, <span class="literal">'position'</span>, <span class="literal">'absolute'</span>);
YAHOO.util.Dom.setStyle(shim, <span class="literal">'background'</span>, <span class="literal">'white'</span>);
YAHOO.util.Dom.setStyle(shim, <span class="literal">'visibility'</span>, <span class="literal">'hidden'</span>);
YAHOO.util.Dom.setStyle(shim, <span class="literal">'z-index'</span>, 2);
window.document.body.appendChild(shim);
var shimEl = YAHOO.ext.Element.get(shim);
shimEl.setOpacity(.01);
shimEl.setXY([0, 0]);
<span class="reserved">return</span> shimEl;
}
<span class="comment">/**
* <span class="attrib">@private</span> static Create our own proxy element element. So it will be the same same size on all browsers, we won't use borders. Instead we use a background color.
*/</span>
YAHOO.ext.SplitBar.createProxy = <span class="reserved">function</span>(orientation){
var proxy = document.createElement(<span class="literal">'div'</span>);
YAHOO.util.Dom.generateId(proxy, <span class="literal">'split-proxy'</span>);
YAHOO.util.Dom.setStyle(proxy, <span class="literal">'position'</span>, <span class="literal">'absolute'</span>);
YAHOO.util.Dom.setStyle(proxy, <span class="literal">'visibility'</span>, <span class="literal">'hidden'</span>);
YAHOO.util.Dom.setStyle(proxy, <span class="literal">'z-index'</span>, 999);
YAHOO.util.Dom.setStyle(proxy, <span class="literal">'background-color'</span>, <span class="literal">"#aaa"</span>);
<span class="reserved">if</span>(orientation == YAHOO.ext.SplitBar.HORIZONTAL){
YAHOO.util.Dom.setStyle(proxy, <span class="literal">'cursor'</span>, <span class="literal">'e-resize'</span>);
}<span class="reserved">else</span>{
YAHOO.util.Dom.setStyle(proxy, <span class="literal">'cursor'</span>, <span class="literal">'n-resize'</span>);
}
<span class="comment">// the next 2 fix IE abs position div height problem</span>
YAHOO.util.Dom.setStyle(proxy, <span class="literal">'line-height'</span>, <span class="literal">'0px'</span>);
YAHOO.util.Dom.setStyle(proxy, <span class="literal">'font-size'</span>, <span class="literal">'0px'</span>);
window.document.body.appendChild(proxy);
<span class="reserved">return</span> proxy;
}
<span class="comment">/**
* <span class="attrib">@class</span>
* Default Adapter. It assumes the splitter and resizing element are not positioned
* elements and only gets/sets the width of the element. Generally used for table based layouts.
*/</span>
YAHOO.ext.SplitBar.BasicLayoutAdapter = <span class="reserved">function</span>(){
}
YAHOO.ext.SplitBar.BasicLayoutAdapter.<span class="reserved">prototype</span> = {
<span class="comment">// do nothing for now</span>
init : <span class="reserved">function</span>(s){
},
<span class="comment">/**
* Called before drag operations to get the current size of the resizing element.
* <span class="attrib">@param</span> {YAHOO.ext.SplitBar} s The SplitBar using this adapter
*/</span>
getElementSize : <span class="reserved">function</span>(s){
<span class="reserved">if</span>(s.orientation == YAHOO.ext.SplitBar.HORIZONTAL){
<span class="reserved">return</span> s.resizingEl.getWidth();
}<span class="reserved">else</span>{
<span class="reserved">return</span> s.resizingEl.getHeight();
}
},
<span class="comment">/**
* Called after drag operations to set the size of the resizing element.
* <span class="attrib">@param</span> {YAHOO.ext.SplitBar} s The SplitBar using this adapter
* <span class="attrib">@param</span> {Number} newSize The new size to set
* <span class="attrib">@param</span> {Function} onComplete A function to be invoke when resizing is complete
*/</span>
setElementSize : <span class="reserved">function</span>(s, newSize, onComplete){
<span class="reserved">if</span>(s.orientation == YAHOO.ext.SplitBar.HORIZONTAL){
<span class="reserved">if</span>(!YAHOO.util.Anim || !s.animate){
s.resizingEl.setWidth(newSize);
<span class="reserved">if</span>(onComplete){
onComplete(s, newSize);
}
}<span class="reserved">else</span>{
s.resizingEl.setWidth(newSize, true, .1, onComplete, YAHOO.util.Easing.easeOut);
}
}<span class="reserved">else</span>{
<span class="reserved">if</span>(!YAHOO.util.Anim || !s.animate){
s.resizingEl.setHeight(newSize);
<span class="reserved">if</span>(onComplete){
onComplete(s, newSize);
}
}<span class="reserved">else</span>{
s.resizingEl.setHeight(newSize, true, .1, onComplete, YAHOO.util.Easing.easeOut);
}
}
}
};
<span class="comment">/**
*<span class="attrib">@class</span>
* Adapter that moves the splitter element to align with the resized sizing element.
* Used with an absolute positioned SplitBar.
* <span class="attrib">@param</span> {String/HTMLElement/Element} container The container that wraps around the absolute positioned content. If it's
* document.body, make sure you assign an id to the body element.
*/</span>
YAHOO.ext.SplitBar.AbsoluteLayoutAdapter = <span class="reserved">function</span>(container){
<span class="reserved">this</span>.basic = new YAHOO.ext.SplitBar.BasicLayoutAdapter();
<span class="reserved">this</span>.container = getEl(container);
}
YAHOO.ext.SplitBar.AbsoluteLayoutAdapter.<span class="reserved">prototype</span> = {
init : <span class="reserved">function</span>(s){
<span class="reserved">this</span>.basic.init(s);
<span class="comment">//YAHOO.util.Event.on(window, 'resize', this.moveSplitter.createDelegate(this, [s]));</span>
},
getElementSize : <span class="reserved">function</span>(s){
<span class="reserved">return</span> <span class="reserved">this</span>.basic.getElementSize(s);
},
setElementSize : <span class="reserved">function</span>(s, newSize, onComplete){
<span class="reserved">this</span>.basic.setElementSize(s, newSize, <span class="reserved">this</span>.moveSplitter.createDelegate(<span class="reserved">this</span>, [s]));
},
moveSplitter : <span class="reserved">function</span>(s){
var yes = YAHOO.ext.SplitBar;
switch(s.placement){
case yes.LEFT:
s.el.setX(s.resizingEl.getRight());
break;
case yes.RIGHT:
s.el.setStyle(<span class="literal">'right'</span>, (<span class="reserved">this</span>.container.getWidth() - s.resizingEl.getLeft()) + <span class="literal">'px'</span>);
break;
case yes.TOP:
s.el.setY(s.resizingEl.getBottom());
break;
case yes.BOTTOM:
s.el.setY(s.resizingEl.getTop() - s.el.getHeight());
break;
}
}
};
<span class="comment">/**
* Orientation constant - Create a vertical SplitBar
* <span class="attrib">@type</span> Number
*/</span>
YAHOO.ext.SplitBar.VERTICAL = 1;
<span class="comment">/**
* Orientation constant - Create a horizontal SplitBar
* <span class="attrib">@type</span> Number
*/</span>
YAHOO.ext.SplitBar.HORIZONTAL = 2;
<span class="comment">/**
* Placement constant - The resizing element is to the left of the splitter element
* <span class="attrib">@type</span> Number
*/</span>
YAHOO.ext.SplitBar.LEFT = 1;
<span class="comment">/**
* Placement constant - The resizing element is to the right of the splitter element
* <span class="attrib">@type</span> Number
*/</span>
YAHOO.ext.SplitBar.RIGHT = 2;
<span class="comment">/**
* Placement constant - The resizing element is positioned above the splitter element
* <span class="attrib">@type</span> Number
*/</span>
YAHOO.ext.SplitBar.TOP = 3;
<span class="comment">/**
* Placement constant - The resizing element is positioned under splitter element
* <span class="attrib">@type</span> Number
*/</span>
YAHOO.ext.SplitBar.BOTTOM = 4;
</pre>
<hr>
<hr>
<font size="-1">
</font>
<div class="jsdoc_ctime">Documentation generated by <a href="http://jsdoc.sourceforge.net/" target="_parent">JSDoc</a> on Sat Oct 14 06:07:10 2006</div>
</body>
</html>
Reference in a new issue View git blame Copy permalink