upgraded yui to 2.2.2 and yui-ext to 1.0.1a
This commit is contained in:
JT Smith
parent
4d9af2c691
commit
547ced6500
1992 changed files with 645731 additions and 0 deletions
437
www/extras/yui-ext/source/widgets/SplitBar.js
vendored
Normal file
437
www/extras/yui-ext/source/widgets/SplitBar.js
vendored
Normal file
|
|
@ -0,0 +1,437 @@
|
|||
/*
|
||||
* Ext JS Library 1.0.1
|
||||
* Copyright(c) 2006-2007, Ext JS, LLC.
|
||||
* licensing@extjs.com
|
||||
*
|
||||
* http://www.extjs.com/license
|
||||
*/
|
||||
|
||||
/**
|
||||
* @class Ext.SplitBar
|
||||
* @extends Ext.util.Observable
|
||||
* Creates draggable splitter bar functionality from two elements.
|
||||
* <br><br>
|
||||
* Usage:
|
||||
* <pre><code>
|
||||
var split = new Ext.SplitBar("elementToDrag", "elementToSize",
|
||||
Ext.SplitBar.HORIZONTAL, Ext.SplitBar.LEFT);
|
||||
split.setAdapter(new Ext.SplitBar.AbsoluteLayoutAdapter("container"));
|
||||
split.minSize = 100;
|
||||
split.maxSize = 600;
|
||||
split.animate = true;
|
||||
split.on('moved', splitterMoved);
|
||||
</code></pre>
|
||||
* @constructor
|
||||
* Create a new SplitBar
|
||||
* @param {String/HTMLElement/Element} dragElement The element to be dragged and act as the SplitBar.
|
||||
* @param {String/HTMLElement/Element} 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 intial position
|
||||
position of the SplitBar).
|
||||
*/
|
||||
Ext.SplitBar = function(dragElement, resizingElement, orientation, placement, existingProxy){
|
||||
|
||||
/** @private */
|
||||
this.el = Ext.get(dragElement, true);
|
||||
this.el.dom.unselectable = "on";
|
||||
/** @private */
|
||||
this.resizingEl = Ext.get(resizingElement, true);
|
||||
|
||||
/**
|
||||
* @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;
|
||||
|
||||
/**
|
||||
* The minimum size of the resizing element. (Defaults to 0)
|
||||
* @type Number
|
||||
*/
|
||||
this.minSize = 0;
|
||||
|
||||
/**
|
||||
* The maximum size of the resizing element. (Defaults to 2000)
|
||||
* @type Number
|
||||
*/
|
||||
this.maxSize = 2000;
|
||||
|
||||
/**
|
||||
* Whether to animate the transition to the new size
|
||||
* @type Boolean
|
||||
*/
|
||||
this.animate = false;
|
||||
|
||||
/**
|
||||
* Whether to create a transparent shim that overlays the page when dragging, enables dragging across iframes.
|
||||
* @type Boolean
|
||||
*/
|
||||
this.useShim = false;
|
||||
|
||||
/** @private */
|
||||
this.shim = null;
|
||||
|
||||
if(!existingProxy){
|
||||
/** @private */
|
||||
this.proxy = Ext.SplitBar.createProxy(this.orientation);
|
||||
}else{
|
||||
this.proxy = Ext.get(existingProxy).dom;
|
||||
}
|
||||
/** @private */
|
||||
this.dd = new Ext.dd.DDProxy(this.el.dom.id, "XSplitBars", {dragElId : this.proxy.id});
|
||||
|
||||
/** @private */
|
||||
this.dd.b4StartDrag = this.onStartProxyDrag.createDelegate(this);
|
||||
|
||||
/** @private */
|
||||
this.dd.endDrag = this.onEndProxyDrag.createDelegate(this);
|
||||
|
||||
/** @private */
|
||||
this.dragSpecs = {};
|
||||
|
||||
/**
|
||||
* @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){
|
||||
/** @private */
|
||||
this.placement = placement || (this.el.getX() > this.resizingEl.getX() ? Ext.SplitBar.LEFT : Ext.SplitBar.RIGHT);
|
||||
this.el.addClass("x-splitbar-h");
|
||||
}else{
|
||||
/** @private */
|
||||
this.placement = placement || (this.el.getY() > this.resizingEl.getY() ? Ext.SplitBar.TOP : Ext.SplitBar.BOTTOM);
|
||||
this.el.addClass("x-splitbar-v");
|
||||
}
|
||||
|
||||
this.addEvents({
|
||||
/**
|
||||
* @event resize
|
||||
* Fires when the splitter is moved (alias for moved)
|
||||
* @param {Ext.SplitBar} this
|
||||
* @param {Number} newSize the new width or height
|
||||
*/
|
||||
"resize" : true,
|
||||
/**
|
||||
* @event moved
|
||||
* Fires when the splitter is moved
|
||||
* @param {Ext.SplitBar} this
|
||||
* @param {Number} newSize the new width or height
|
||||
*/
|
||||
"moved" : true,
|
||||
/**
|
||||
* @event beforeresize
|
||||
* Fires before the splitter is dragged
|
||||
* @param {Ext.SplitBar} this
|
||||
*/
|
||||
"beforeresize" : true,
|
||||
|
||||
"beforeapply" : true
|
||||
});
|
||||
|
||||
Ext.SplitBar.superclass.constructor.call(this);
|
||||
};
|
||||
|
||||
Ext.extend(Ext.SplitBar, Ext.util.Observable, {
|
||||
onStartProxyDrag : function(x, y){
|
||||
this.fireEvent("beforeresize", this);
|
||||
if(!this.overlay){
|
||||
var o = Ext.DomHelper.insertFirst(document.body, {cls: "x-drag-overlay", html: " "}, true);
|
||||
o.unselectable();
|
||||
o.enableDisplayMode("block");
|
||||
// all splitbars share the same overlay
|
||||
Ext.SplitBar.prototype.overlay = o;
|
||||
}
|
||||
this.overlay.setSize(Ext.lib.Dom.getViewWidth(true), Ext.lib.Dom.getViewHeight(true));
|
||||
this.overlay.show();
|
||||
Ext.get(this.proxy).setDisplayed("block");
|
||||
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.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.dragSpecs.startSize = size;
|
||||
this.dragSpecs.startPoint = [x, y];
|
||||
Ext.dd.DDProxy.prototype.b4StartDrag.call(this.dd, x, y);
|
||||
},
|
||||
|
||||
/**
|
||||
* @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){
|
||||
this.overlay.hide();
|
||||
}
|
||||
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("moved", this, newSize);
|
||||
this.fireEvent("resize", this, newSize);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Get the adapter this SplitBar uses
|
||||
* @return The adapter object
|
||||
*/
|
||||
getAdapter : function(){
|
||||
return this.adapter;
|
||||
},
|
||||
|
||||
/**
|
||||
* Set the adapter this SplitBar uses
|
||||
* @param {Object} adapter A SplitBar adapter object
|
||||
*/
|
||||
setAdapter : function(adapter){
|
||||
this.adapter = adapter;
|
||||
this.adapter.init(this);
|
||||
},
|
||||
|
||||
/**
|
||||
* Gets the minimum size for the resizing element
|
||||
* @return {Number} The minimum size
|
||||
*/
|
||||
getMinimumSize : function(){
|
||||
return this.minSize;
|
||||
},
|
||||
|
||||
/**
|
||||
* Sets the minimum size for the resizing element
|
||||
* @param {Number} minSize The minimum size
|
||||
*/
|
||||
setMinimumSize : function(minSize){
|
||||
this.minSize = minSize;
|
||||
},
|
||||
|
||||
/**
|
||||
* Gets the maximum size for the resizing element
|
||||
* @return {Number} The maximum size
|
||||
*/
|
||||
getMaximumSize : function(){
|
||||
return this.maxSize;
|
||||
},
|
||||
|
||||
/**
|
||||
* Sets the maximum size for the resizing element
|
||||
* @param {Number} maxSize The maximum size
|
||||
*/
|
||||
setMaximumSize : function(maxSize){
|
||||
this.maxSize = maxSize;
|
||||
},
|
||||
|
||||
/**
|
||||
* 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;
|
||||
},
|
||||
|
||||
/**
|
||||
* Destroy this splitbar.
|
||||
* @param {Boolean} removeEl True to remove the element
|
||||
*/
|
||||
destroy : function(removeEl){
|
||||
if(this.shim){
|
||||
this.shim.remove();
|
||||
}
|
||||
this.dd.unreg();
|
||||
this.proxy.parentNode.removeChild(this.proxy);
|
||||
if(removeEl){
|
||||
this.el.remove();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* @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("div"));
|
||||
proxy.unselectable();
|
||||
var cls = 'x-splitbar-proxy';
|
||||
proxy.addClass(cls + ' ' + (dir == Ext.SplitBar.HORIZONTAL ? cls +'-h' : cls + '-v'));
|
||||
document.body.appendChild(proxy.dom);
|
||||
return proxy.dom;
|
||||
};
|
||||
|
||||
/**
|
||||
* @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){
|
||||
|
||||
},
|
||||
/**
|
||||
* 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();
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 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 invoke 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');
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
*@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 {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.
|
||||
*/
|
||||
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("right", (this.container.getWidth() - s.resizingEl.getLeft()) + "px");
|
||||
break;
|
||||
case yes.TOP:
|
||||
s.el.setY(s.resizingEl.getBottom());
|
||||
break;
|
||||
case yes.BOTTOM:
|
||||
s.el.setY(s.resizingEl.getTop() - s.el.getHeight());
|
||||
break;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Orientation constant - Create a vertical SplitBar
|
||||
* @static
|
||||
* @type Number
|
||||
*/
|
||||
Ext.SplitBar.VERTICAL = 1;
|
||||
|
||||
/**
|
||||
* Orientation constant - Create a horizontal SplitBar
|
||||
* @static
|
||||
* @type Number
|
||||
*/
|
||||
Ext.SplitBar.HORIZONTAL = 2;
|
||||
|
||||
/**
|
||||
* Placement constant - The resizing element is to the left of the splitter element
|
||||
* @static
|
||||
* @type Number
|
||||
*/
|
||||
Ext.SplitBar.LEFT = 1;
|
||||
|
||||
/**
|
||||
* Placement constant - The resizing element is to the right of the splitter element
|
||||
* @static
|
||||
* @type Number
|
||||
*/
|
||||
Ext.SplitBar.RIGHT = 2;
|
||||
|
||||
/**
|
||||
* Placement constant - The resizing element is positioned above the splitter element
|
||||
* @static
|
||||
* @type Number
|
||||
*/
|
||||
Ext.SplitBar.TOP = 3;
|
||||
|
||||
/**
|
||||
* Placement constant - The resizing element is positioned under splitter element
|
||||
* @static
|
||||
* @type Number
|
||||
*/
|
||||
Ext.SplitBar.BOTTOM = 4;
|
||||
Loading…
Add table
Add a link
Reference in a new issue