stv0g/tvheadend
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity
tvheadend/vendor/ext-3.4.1/docs/source/SplitBar.html
Adam Sutton bafcfff42d webui: restructure webui/extjs source files 
I want to keep the 3rd-party packages away from the main source
where possible.
2013-06-03 17:11:01 +01:00

450 lines
16 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>The source code</title>
<link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="../resources/prettify/prettify.js"></script>
<style type="text/css">
.highlight { display: block; background-color: #ddd; }
</style>
<script type="text/javascript">
function highlight() {
document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
}
</script>
</head>
<body onload="prettyPrint(); highlight();">
<pre class="prettyprint lang-js"><span id='Ext-SplitBar-method-constructor'><span id='Ext-SplitBar'>/**
</span></span> * @class Ext.SplitBar
* @extends Ext.util.Observable
* Creates draggable splitter bar functionality from two elements (element to be dragged and element to be resized).
* &lt;br&gt;&lt;br&gt;
* Usage:
* &lt;pre&gt;&lt;code&gt;
var split = new Ext.SplitBar(&quot;elementToDrag&quot;, &quot;elementToSize&quot;,
Ext.SplitBar.HORIZONTAL, Ext.SplitBar.LEFT);
split.setAdapter(new Ext.SplitBar.AbsoluteLayoutAdapter(&quot;container&quot;));
split.minSize = 100;
split.maxSize = 600;
split.animate = true;
split.on('moved', splitterMoved);
&lt;/code&gt;&lt;/pre&gt;
* @constructor
* Create a new SplitBar
* @param {Mixed} dragElement The element to be dragged and act as the SplitBar.
* @param {Mixed} resizingElement The element to be resized based on where the SplitBar element is dragged
* @param {Number} orientation (optional) Either Ext.SplitBar.HORIZONTAL or Ext.SplitBar.VERTICAL. (Defaults to HORIZONTAL)
* @param {Number} placement (optional) Either Ext.SplitBar.LEFT or Ext.SplitBar.RIGHT for horizontal or
Ext.SplitBar.TOP or Ext.SplitBar.BOTTOM for vertical. (By default, this is determined automatically by the initial
position of the SplitBar).
*/
Ext.SplitBar = function(dragElement, resizingElement, orientation, placement, existingProxy){
<span id='Ext-SplitBar-property-el'> /** @private */
</span> this.el = Ext.get(dragElement, true);
this.el.unselectable();
<span id='Ext-SplitBar-property-resizingEl'> /** @private */
</span> this.resizingEl = Ext.get(resizingElement, true);
<span id='Ext-SplitBar-property-orientation'> /**
</span> * @private
* The orientation of the split. Either Ext.SplitBar.HORIZONTAL or Ext.SplitBar.VERTICAL. (Defaults to HORIZONTAL)
* Note: If this is changed after creating the SplitBar, the placement property must be manually updated
* @type Number
*/
this.orientation = orientation || Ext.SplitBar.HORIZONTAL;
<span id='Ext-SplitBar-property-tickSize'> /**
</span> * The increment, in pixels by which to move this SplitBar. When &lt;i&gt;undefined&lt;/i&gt;, the SplitBar moves smoothly.
* @type Number
* @property tickSize
*/
<span id='Ext-SplitBar-property-minSize'> /**
</span> * The minimum size of the resizing element. (Defaults to 0)
* @type Number
*/
this.minSize = 0;
<span id='Ext-SplitBar-property-maxSize'> /**
</span> * The maximum size of the resizing element. (Defaults to 2000)
* @type Number
*/
this.maxSize = 2000;
<span id='Ext-SplitBar-property-animate'> /**
</span> * Whether to animate the transition to the new size
* @type Boolean
*/
this.animate = false;
<span id='Ext-SplitBar-property-useShim'> /**
</span> * Whether to create a transparent shim that overlays the page when dragging, enables dragging across iframes.
* @type Boolean
*/
this.useShim = false;
<span id='Ext-SplitBar-property-shim'> /** @private */
</span> this.shim = null;
if(!existingProxy){
<span id='Ext-SplitBar-property-proxy'> /** @private */
</span> this.proxy = Ext.SplitBar.createProxy(this.orientation);
}else{
this.proxy = Ext.get(existingProxy).dom;
}
<span id='Ext-SplitBar-property-dd'> /** @private */
</span> this.dd = new Ext.dd.DDProxy(this.el.dom.id, &quot;XSplitBars&quot;, {dragElId : this.proxy.id});
<span id='Ext-SplitBar-property-b4StartDrag'> /** @private */
</span> this.dd.b4StartDrag = this.onStartProxyDrag.createDelegate(this);
<span id='Ext-SplitBar-property-endDrag'> /** @private */
</span> this.dd.endDrag = this.onEndProxyDrag.createDelegate(this);
<span id='Ext-SplitBar-property-dragSpecs'> /** @private */
</span> this.dragSpecs = {};
<span id='Ext-SplitBar-property-adapter'> /**
</span> * @private The adapter to use to positon and resize elements
*/
this.adapter = new Ext.SplitBar.BasicLayoutAdapter();
this.adapter.init(this);
if(this.orientation == Ext.SplitBar.HORIZONTAL){
<span id='global-property-placement'> /** @ignore */
</span> this.placement = placement || (this.el.getX() &gt; this.resizingEl.getX() ? Ext.SplitBar.LEFT : Ext.SplitBar.RIGHT);
this.el.addClass(&quot;x-splitbar-h&quot;);
}else{
<span id='global-property-placement'> /** @ignore */
</span> this.placement = placement || (this.el.getY() &gt; this.resizingEl.getY() ? Ext.SplitBar.TOP : Ext.SplitBar.BOTTOM);
this.el.addClass(&quot;x-splitbar-v&quot;);
}
this.addEvents(
<span id='Ext-SplitBar-event-resize'> /**
</span> * @event resize
* Fires when the splitter is moved (alias for {@link #moved})
* @param {Ext.SplitBar} this
* @param {Number} newSize the new width or height
*/
&quot;resize&quot;,
<span id='Ext-SplitBar-event-moved'> /**
</span> * @event moved
* Fires when the splitter is moved
* @param {Ext.SplitBar} this
* @param {Number} newSize the new width or height
*/
&quot;moved&quot;,
<span id='Ext-SplitBar-event-beforeresize'> /**
</span> * @event beforeresize
* Fires before the splitter is dragged
* @param {Ext.SplitBar} this
*/
&quot;beforeresize&quot;,
&quot;beforeapply&quot;
);
Ext.SplitBar.superclass.constructor.call(this);
};
Ext.extend(Ext.SplitBar, Ext.util.Observable, {
onStartProxyDrag : function(x, y){
this.fireEvent(&quot;beforeresize&quot;, this);
this.overlay = Ext.DomHelper.append(document.body, {cls: &quot;x-drag-overlay&quot;, html: &quot;&amp;#160;&quot;}, true);
this.overlay.unselectable();
this.overlay.setSize(Ext.lib.Dom.getViewWidth(true), Ext.lib.Dom.getViewHeight(true));
this.overlay.show();
Ext.get(this.proxy).setDisplayed(&quot;block&quot;);
var size = this.adapter.getElementSize(this);
this.activeMinSize = this.getMinimumSize();
this.activeMaxSize = this.getMaximumSize();
var c1 = size - this.activeMinSize;
var c2 = Math.max(this.activeMaxSize - size, 0);
if(this.orientation == Ext.SplitBar.HORIZONTAL){
this.dd.resetConstraints();
this.dd.setXConstraint(
this.placement == Ext.SplitBar.LEFT ? c1 : c2,
this.placement == Ext.SplitBar.LEFT ? c2 : c1,
this.tickSize
);
this.dd.setYConstraint(0, 0);
}else{
this.dd.resetConstraints();
this.dd.setXConstraint(0, 0);
this.dd.setYConstraint(
this.placement == Ext.SplitBar.TOP ? c1 : c2,
this.placement == Ext.SplitBar.TOP ? c2 : c1,
this.tickSize
);
}
this.dragSpecs.startSize = size;
this.dragSpecs.startPoint = [x, y];
Ext.dd.DDProxy.prototype.b4StartDrag.call(this.dd, x, y);
},
<span id='Ext-SplitBar-method-onEndProxyDrag'> /**
</span> * @private Called after the drag operation by the DDProxy
*/
onEndProxyDrag : function(e){
Ext.get(this.proxy).setDisplayed(false);
var endPoint = Ext.lib.Event.getXY(e);
if(this.overlay){
Ext.destroy(this.overlay);
delete this.overlay;
}
var newSize;
if(this.orientation == Ext.SplitBar.HORIZONTAL){
newSize = this.dragSpecs.startSize +
(this.placement == Ext.SplitBar.LEFT ?
endPoint[0] - this.dragSpecs.startPoint[0] :
this.dragSpecs.startPoint[0] - endPoint[0]
);
}else{
newSize = this.dragSpecs.startSize +
(this.placement == Ext.SplitBar.TOP ?
endPoint[1] - this.dragSpecs.startPoint[1] :
this.dragSpecs.startPoint[1] - endPoint[1]
);
}
newSize = Math.min(Math.max(newSize, this.activeMinSize), this.activeMaxSize);
if(newSize != this.dragSpecs.startSize){
if(this.fireEvent('beforeapply', this, newSize) !== false){
this.adapter.setElementSize(this, newSize);
this.fireEvent(&quot;moved&quot;, this, newSize);
this.fireEvent(&quot;resize&quot;, this, newSize);
}
}
},
<span id='Ext-SplitBar-method-getAdapter'> /**
</span> * Get the adapter this SplitBar uses
* @return The adapter object
*/
getAdapter : function(){
return this.adapter;
},
<span id='Ext-SplitBar-method-setAdapter'> /**
</span> * Set the adapter this SplitBar uses
* @param {Object} adapter A SplitBar adapter object
*/
setAdapter : function(adapter){
this.adapter = adapter;
this.adapter.init(this);
},
<span id='Ext-SplitBar-method-getMinimumSize'> /**
</span> * Gets the minimum size for the resizing element
* @return {Number} The minimum size
*/
getMinimumSize : function(){
return this.minSize;
},
<span id='Ext-SplitBar-method-setMinimumSize'> /**
</span> * Sets the minimum size for the resizing element
* @param {Number} minSize The minimum size
*/
setMinimumSize : function(minSize){
this.minSize = minSize;
},
<span id='Ext-SplitBar-method-getMaximumSize'> /**
</span> * Gets the maximum size for the resizing element
* @return {Number} The maximum size
*/
getMaximumSize : function(){
return this.maxSize;
},
<span id='Ext-SplitBar-method-setMaximumSize'> /**
</span> * Sets the maximum size for the resizing element
* @param {Number} maxSize The maximum size
*/
setMaximumSize : function(maxSize){
this.maxSize = maxSize;
},
<span id='Ext-SplitBar-method-setCurrentSize'> /**
</span> * Sets the initialize size for the resizing element
* @param {Number} size The initial size
*/
setCurrentSize : function(size){
var oldAnimate = this.animate;
this.animate = false;
this.adapter.setElementSize(this, size);
this.animate = oldAnimate;
},
<span id='Ext-SplitBar-method-destroy'> /**
</span> * Destroy this splitbar.
* @param {Boolean} removeEl True to remove the element
*/
destroy : function(removeEl){
Ext.destroy(this.shim, Ext.get(this.proxy));
this.dd.unreg();
if(removeEl){
this.el.remove();
}
this.purgeListeners();
}
});
<span id='Ext-SplitBar-method-createProxy'>/**
</span> * @private 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.
*/
Ext.SplitBar.createProxy = function(dir){
var proxy = new Ext.Element(document.createElement(&quot;div&quot;));
document.body.appendChild(proxy.dom);
proxy.unselectable();
var cls = 'x-splitbar-proxy';
proxy.addClass(cls + ' ' + (dir == Ext.SplitBar.HORIZONTAL ? cls +'-h' : cls + '-v'));
return proxy.dom;
};
<span id='Ext-SplitBar-BasicLayoutAdapter'>/**
</span> * @class Ext.SplitBar.BasicLayoutAdapter
* 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.
*/
Ext.SplitBar.BasicLayoutAdapter = function(){
};
Ext.SplitBar.BasicLayoutAdapter.prototype = {
// do nothing for now
init : function(s){
},
<span id='Ext-SplitBar-BasicLayoutAdapter-method-getElementSize'> /**
</span> * Called before drag operations to get the current size of the resizing element.
* @param {Ext.SplitBar} s The SplitBar using this adapter
*/
getElementSize : function(s){
if(s.orientation == Ext.SplitBar.HORIZONTAL){
return s.resizingEl.getWidth();
}else{
return s.resizingEl.getHeight();
}
},
<span id='Ext-SplitBar-BasicLayoutAdapter-method-setElementSize'> /**
</span> * Called after drag operations to set the size of the resizing element.
* @param {Ext.SplitBar} s The SplitBar using this adapter
* @param {Number} newSize The new size to set
* @param {Function} onComplete A function to be invoked when resizing is complete
*/
setElementSize : function(s, newSize, onComplete){
if(s.orientation == Ext.SplitBar.HORIZONTAL){
if(!s.animate){
s.resizingEl.setWidth(newSize);
if(onComplete){
onComplete(s, newSize);
}
}else{
s.resizingEl.setWidth(newSize, true, .1, onComplete, 'easeOut');
}
}else{
if(!s.animate){
s.resizingEl.setHeight(newSize);
if(onComplete){
onComplete(s, newSize);
}
}else{
s.resizingEl.setHeight(newSize, true, .1, onComplete, 'easeOut');
}
}
}
};
<span id='Ext-SplitBar-AbsoluteLayoutAdapter'>/**
</span> *@class Ext.SplitBar.AbsoluteLayoutAdapter
* @extends Ext.SplitBar.BasicLayoutAdapter
* Adapter that moves the splitter element to align with the resized sizing element.
* Used with an absolute positioned SplitBar.
* @param {Mixed} 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.
*/
Ext.SplitBar.AbsoluteLayoutAdapter = function(container){
this.basic = new Ext.SplitBar.BasicLayoutAdapter();
this.container = Ext.get(container);
};
Ext.SplitBar.AbsoluteLayoutAdapter.prototype = {
init : function(s){
this.basic.init(s);
},
getElementSize : function(s){
return this.basic.getElementSize(s);
},
setElementSize : function(s, newSize, onComplete){
this.basic.setElementSize(s, newSize, this.moveSplitter.createDelegate(this, [s]));
},
moveSplitter : function(s){
var yes = Ext.SplitBar;
switch(s.placement){
case yes.LEFT:
s.el.setX(s.resizingEl.getRight());
break;
case yes.RIGHT:
s.el.setStyle(&quot;right&quot;, (this.container.getWidth() - s.resizingEl.getLeft()) + &quot;px&quot;);
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 id='Ext-SplitBar-AbsoluteLayoutAdapter-static-property-VERTICAL'>/**
</span> * Orientation constant - Create a vertical SplitBar
* @static
* @type Number
*/
Ext.SplitBar.VERTICAL = 1;
<span id='Ext-SplitBar-AbsoluteLayoutAdapter-static-property-HORIZONTAL'>/**
</span> * Orientation constant - Create a horizontal SplitBar
* @static
* @type Number
*/
Ext.SplitBar.HORIZONTAL = 2;
<span id='Ext-SplitBar-AbsoluteLayoutAdapter-static-property-LEFT'>/**
</span> * Placement constant - The resizing element is to the left of the splitter element
* @static
* @type Number
*/
Ext.SplitBar.LEFT = 1;
<span id='Ext-SplitBar-AbsoluteLayoutAdapter-static-property-RIGHT'>/**
</span> * Placement constant - The resizing element is to the right of the splitter element
* @static
* @type Number
*/
Ext.SplitBar.RIGHT = 2;
<span id='Ext-SplitBar-AbsoluteLayoutAdapter-static-property-TOP'>/**
</span> * Placement constant - The resizing element is positioned above the splitter element
* @static
* @type Number
*/
Ext.SplitBar.TOP = 3;
<span id='Ext-SplitBar-AbsoluteLayoutAdapter-static-property-BOTTOM'>/**
</span> * Placement constant - The resizing element is positioned under splitter element
* @static
* @type Number
*/
Ext.SplitBar.BOTTOM = 4;
</pre>
</body>
</html>
Reference in a new issue View git blame Copy permalink