/*
* Ext JS Library 2.2.1
* Copyright(c) 2006-2009, Ext JS, LLC.
* licensing@extjs.com
*
* http://extjs.com/license
*/
/**
* @class Ext.Element
* Represents an Element in the DOM.
* Usage:
// by id
var el = Ext.get("my-div");
// by DOM element reference
var el = Ext.get(myDivElement);
* AnimationsOption Default Description --------- -------- --------------------------------------------- duration .35 The duration of the animation in seconds easing easeOut The easing method callback none A function to execute when the anim completes scope this The scope (this) of the callback function* Also, the Anim object being used for the animation will be set on your options object as "anim", which allows you to stop or * manipulate the animation. Here's an example:
var el = Ext.get("my-div");
// no animation
el.setWidth(100);
// default animation
el.setWidth(100, true);
// animation with some options set
el.setWidth(100, {
duration: 1,
callback: this.foo,
scope: this
});
// using the "anim" property to get the Anim object
var opt = {
duration: 1,
callback: this.foo,
scope: this
};
el.setWidth(100, opt);
...
if(opt.anim.isAnimated()){
opt.anim.stop();
}
* Composite (Collections of) Elements
* Combining Options
* In the following examples, the shorthand form {@link #on} is used rather than the more verbose
* addListener. The two are equivalent. Using the options argument, it is possible to combine different
* types of listeners:
*
* A normalized, delayed, one-time listener that auto stops the event and adds a custom argument (forumId) to the
* options object. The options object is available as the third parameter in the handler function.
el.on('click', this.onClick, this, {
single: true,
delay: 100,
stopEvent : true,
forumId: 4
});
*
* Attaching multiple handlers in 1 call
* The method also allows for a single argument to be passed which is a config object containing properties
* which specify multiple handlers.
* Code:
el.on({
'click' : {
fn: this.onClick,
scope: this,
delay: 100
},
'mouseover' : {
fn: this.onMouseOver,
scope: this
},
'mouseout' : {
fn: this.onMouseOut,
scope: this
}
});
*
* Or a shorthand syntax:
* Code:
el.on({
'click' : this.onClick,
'mouseover' : this.onMouseOver,
'mouseout' : this.onMouseOut,
scope: this
});
*/
addListener : function(eventName, fn, scope, options){
Ext.EventManager.on(this.dom, eventName, fn, scope || this, options);
},
/**
* Removes an event handler from this element. The shorthand version {@link #un} is equivalent. Example:
*
el.removeListener('click', this.handlerFn);
// or
el.un('click', this.handlerFn);
* @param {String} eventName the type of event to remove
* @param {Function} fn the method the event invokes
* @param {Object} scope (optional) The scope (The this reference) of the handler function. Defaults
* to this Element.
* @return {Ext.Element} this
*/
removeListener : function(eventName, fn, scope){
Ext.EventManager.removeListener(this.dom, eventName, fn, scope || this);
return this;
},
/**
* Removes all previous added listeners from this element
* @return {Ext.Element} this
*/
removeAllListeners : function(){
Ext.EventManager.removeAll(this.dom);
return this;
},
/**
* Create an event handler on this element such that when the event fires and is handled by this element,
* it will be relayed to another object (i.e., fired again as if it originated from that object instead).
* @param {String} eventName The type of event to relay
* @param {Object} object Any object that extends {@link Ext.util.Observable} that will provide the context
* for firing the relayed event
*/
relayEvent : function(eventName, observable){
this.on(eventName, function(e){
observable.fireEvent(eventName, e);
});
},
/**
* Set the opacity of the element
* @param {Float} opacity The new opacity. 0 = transparent, .5 = 50% visibile, 1 = fully visible, etc
* @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
* @return {Ext.Element} this
*/
setOpacity : function(opacity, animate){
if(!animate || !A){
var s = this.dom.style;
if(Ext.isIE){
s.zoom = 1;
s.filter = (s.filter || '').replace(/alpha\([^\)]*\)/gi,"") +
(opacity == 1 ? "" : " alpha(opacity=" + opacity * 100 + ")");
}else{
s.opacity = opacity;
}
}else{
this.anim({opacity: {to: opacity}}, this.preanim(arguments, 1), null, .35, 'easeIn');
}
return this;
},
/**
* Gets the left X coordinate
* @param {Boolean} local True to get the local css position instead of page coordinate
* @return {Number}
*/
getLeft : function(local){
if(!local){
return this.getX();
}else{
return parseInt(this.getStyle("left"), 10) || 0;
}
},
/**
* Gets the right X coordinate of the element (element X position + element width)
* @param {Boolean} local True to get the local css position instead of page coordinate
* @return {Number}
*/
getRight : function(local){
if(!local){
return this.getX() + this.getWidth();
}else{
return (this.getLeft(true) + this.getWidth()) || 0;
}
},
/**
* Gets the top Y coordinate
* @param {Boolean} local True to get the local css position instead of page coordinate
* @return {Number}
*/
getTop : function(local) {
if(!local){
return this.getY();
}else{
return parseInt(this.getStyle("top"), 10) || 0;
}
},
/**
* Gets the bottom Y coordinate of the element (element Y position + element height)
* @param {Boolean} local True to get the local css position instead of page coordinate
* @return {Number}
*/
getBottom : function(local){
if(!local){
return this.getY() + this.getHeight();
}else{
return (this.getTop(true) + this.getHeight()) || 0;
}
},
/**
* Initializes positioning on this element. If a desired position is not passed, it will make the
* the element positioned relative IF it is not already positioned.
* @param {String} pos (optional) Positioning to use "relative", "absolute" or "fixed"
* @param {Number} zIndex (optional) The zIndex to apply
* @param {Number} x (optional) Set the page X position
* @param {Number} y (optional) Set the page Y position
*/
position : function(pos, zIndex, x, y){
if(!pos){
if(this.getStyle('position') == 'static'){
this.setStyle('position', 'relative');
}
}else{
this.setStyle("position", pos);
}
if(zIndex){
this.setStyle("z-index", zIndex);
}
if(x !== undefined && y !== undefined){
this.setXY([x, y]);
}else if(x !== undefined){
this.setX(x);
}else if(y !== undefined){
this.setY(y);
}
},
/**
* Clear positioning back to the default when the document was loaded
* @param {String} value (optional) The value to use for the left,right,top,bottom, defaults to '' (empty string). You could use 'auto'.
* @return {Ext.Element} this
*/
clearPositioning : function(value){
value = value ||'';
this.setStyle({
"left": value,
"right": value,
"top": value,
"bottom": value,
"z-index": "",
"position" : "static"
});
return this;
},
/**
* Gets an object with all CSS positioning properties. Useful along with setPostioning to get
* snapshot before performing an update and then restoring the element.
* @return {Object}
*/
getPositioning : function(){
var l = this.getStyle("left");
var t = this.getStyle("top");
return {
"position" : this.getStyle("position"),
"left" : l,
"right" : l ? "" : this.getStyle("right"),
"top" : t,
"bottom" : t ? "" : this.getStyle("bottom"),
"z-index" : this.getStyle("z-index")
};
},
/**
* Gets the width of the border(s) for the specified side(s)
* @param {String} side Can be t, l, r, b or any combination of those to add multiple values. For example,
* passing lr would get the border (l)eft width + the border (r)ight width.
* @return {Number} The width of the sides passed added together
*/
getBorderWidth : function(side){
return this.addStyles(side, El.borders);
},
/**
* Gets the width of the padding(s) for the specified side(s)
* @param {String} side Can be t, l, r, b or any combination of those to add multiple values. For example,
* passing lr would get the padding (l)eft + the padding (r)ight.
* @return {Number} The padding of the sides passed added together
*/
getPadding : function(side){
return this.addStyles(side, El.paddings);
},
/**
* Set positioning with an object returned by getPositioning().
* @param {Object} posCfg
* @return {Ext.Element} this
*/
setPositioning : function(pc){
this.applyStyles(pc);
if(pc.right == "auto"){
this.dom.style.right = "";
}
if(pc.bottom == "auto"){
this.dom.style.bottom = "";
}
return this;
},
// private
fixDisplay : function(){
if(this.getStyle("display") == "none"){
this.setStyle("visibility", "hidden");
this.setStyle("display", this.originalDisplay); // first try reverting to default
if(this.getStyle("display") == "none"){ // if that fails, default to block
this.setStyle("display", "block");
}
}
},
// private
setOverflow : function(v){
if(v=='auto' && Ext.isMac && Ext.isGecko2){ // work around stupid FF 2.0/Mac scroll bar bug
this.dom.style.overflow = 'hidden';
(function(){this.dom.style.overflow = 'auto';}).defer(1, this);
}else{
this.dom.style.overflow = v;
}
},
/**
* Quick set left and top adding default units
* @param {String} left The left CSS property value
* @param {String} top The top CSS property value
* @return {Ext.Element} this
*/
setLeftTop : function(left, top){
this.dom.style.left = this.addUnits(left);
this.dom.style.top = this.addUnits(top);
return this;
},
/**
* Move this element relative to its current position.
* @param {String} direction Possible values are: "l" (or "left"), "r" (or "right"), "t" (or "top", or "up"), "b" (or "bottom", or "down").
* @param {Number} distance How far to move the element in pixels
* @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
* @return {Ext.Element} this
*/
move : function(direction, distance, animate){
var xy = this.getXY();
direction = direction.toLowerCase();
switch(direction){
case "l":
case "left":
this.moveTo(xy[0]-distance, xy[1], this.preanim(arguments, 2));
break;
case "r":
case "right":
this.moveTo(xy[0]+distance, xy[1], this.preanim(arguments, 2));
break;
case "t":
case "top":
case "up":
this.moveTo(xy[0], xy[1]-distance, this.preanim(arguments, 2));
break;
case "b":
case "bottom":
case "down":
this.moveTo(xy[0], xy[1]+distance, this.preanim(arguments, 2));
break;
}
return this;
},
/**
* Store the current overflow setting and clip overflow on the element - use {@link #unclip} to remove
* @return {Ext.Element} this
*/
clip : function(){
if(!this.isClipped){
this.isClipped = true;
this.originalClip = {
"o": this.getStyle("overflow"),
"x": this.getStyle("overflow-x"),
"y": this.getStyle("overflow-y")
};
this.setStyle("overflow", "hidden");
this.setStyle("overflow-x", "hidden");
this.setStyle("overflow-y", "hidden");
}
return this;
},
/**
* Return clipping (overflow) to original clipping before clip() was called
* @return {Ext.Element} this
*/
unclip : function(){
if(this.isClipped){
this.isClipped = false;
var o = this.originalClip;
if(o.o){this.setStyle("overflow", o.o);}
if(o.x){this.setStyle("overflow-x", o.x);}
if(o.y){this.setStyle("overflow-y", o.y);}
}
return this;
},
/**
* Gets the x,y coordinates specified by the anchor position on the element.
* @param {String} anchor (optional) The specified anchor position (defaults to "c"). See {@link #alignTo}
* for details on supported anchor positions.
* @param {Boolean} local (optional) True to get the local (element top/left-relative) anchor position instead
* of page coordinates
* @param {Object} size (optional) An object containing the size to use for calculating anchor position
* {width: (target width), height: (target height)} (defaults to the element's current size)
* @return {Array} [x, y] An array containing the element's x and y coordinates
*/
getAnchorXY : function(anchor, local, s){
//Passing a different size is useful for pre-calculating anchors,
//especially for anchored animations that change the el size.
var w, h, vp = false;
if(!s){
var d = this.dom;
if(d == document.body || d == document){
vp = true;
w = D.getViewWidth(); h = D.getViewHeight();
}else{
w = this.getWidth(); h = this.getHeight();
}
}else{
w = s.width; h = s.height;
}
var x = 0, y = 0, r = Math.round;
switch((anchor || "tl").toLowerCase()){
case "c":
x = r(w*.5);
y = r(h*.5);
break;
case "t":
x = r(w*.5);
y = 0;
break;
case "l":
x = 0;
y = r(h*.5);
break;
case "r":
x = w;
y = r(h*.5);
break;
case "b":
x = r(w*.5);
y = h;
break;
case "tl":
x = 0;
y = 0;
break;
case "bl":
x = 0;
y = h;
break;
case "br":
x = w;
y = h;
break;
case "tr":
x = w;
y = 0;
break;
}
if(local === true){
return [x, y];
}
if(vp){
var sc = this.getScroll();
return [x + sc.left, y + sc.top];
}
//Add the element's offset xy
var o = this.getXY();
return [x+o[0], y+o[1]];
},
/**
* Gets the x,y coordinates to align this element with another element. See {@link #alignTo} for more info on the
* supported position values.
* @param {Mixed} element The element to align to.
* @param {String} position The position to align to.
* @param {Array} offsets (optional) Offset the positioning by [x, y]
* @return {Array} [x, y]
*/
getAlignToXY : function(el, p, o){
el = Ext.get(el);
if(!el || !el.dom){
throw "Element.alignToXY with an element that doesn't exist";
}
var d = this.dom;
var c = false; //constrain to viewport
var p1 = "", p2 = "";
o = o || [0,0];
if(!p){
p = "tl-bl";
}else if(p == "?"){
p = "tl-bl?";
}else if(p.indexOf("-") == -1){
p = "tl-" + p;
}
p = p.toLowerCase();
var m = p.match(/^([a-z]+)-([a-z]+)(\?)?$/);
if(!m){
throw "Element.alignTo with an invalid alignment " + p;
}
p1 = m[1]; p2 = m[2]; c = !!m[3];
//Subtract the aligned el's internal xy from the target's offset xy
//plus custom offset to get the aligned el's new offset xy
var a1 = this.getAnchorXY(p1, true);
var a2 = el.getAnchorXY(p2, false);
var x = a2[0] - a1[0] + o[0];
var y = a2[1] - a1[1] + o[1];
if(c){
//constrain the aligned el to viewport if necessary
var w = this.getWidth(), h = this.getHeight(), r = el.getRegion();
// 5px of margin for ie
var dw = D.getViewWidth()-5, dh = D.getViewHeight()-5;
//If we are at a viewport boundary and the aligned el is anchored on a target border that is
//perpendicular to the vp border, allow the aligned el to slide on that border,
//otherwise swap the aligned el to the opposite border of the target.
var p1y = p1.charAt(0), p1x = p1.charAt(p1.length-1);
var p2y = p2.charAt(0), p2x = p2.charAt(p2.length-1);
var swapY = ((p1y=="t" && p2y=="b") || (p1y=="b" && p2y=="t"));
var swapX = ((p1x=="r" && p2x=="l") || (p1x=="l" && p2x=="r"));
var doc = document;
var scrollX = (doc.documentElement.scrollLeft || doc.body.scrollLeft || 0)+5;
var scrollY = (doc.documentElement.scrollTop || doc.body.scrollTop || 0)+5;
if((x+w) > dw + scrollX){
x = swapX ? r.left-w : dw+scrollX-w;
}
if(x < scrollX){
x = swapX ? r.right : scrollX;
}
if((y+h) > dh + scrollY){
y = swapY ? r.top-h : dh+scrollY-h;
}
if (y < scrollY){
y = swapY ? r.bottom : scrollY;
}
}
return [x,y];
},
// private
getConstrainToXY : function(){
var os = {top:0, left:0, bottom:0, right: 0};
return function(el, local, offsets, proposedXY){
el = Ext.get(el);
offsets = offsets ? Ext.applyIf(offsets, os) : os;
var vw, vh, vx = 0, vy = 0;
if(el.dom == document.body || el.dom == document){
vw = Ext.lib.Dom.getViewWidth();
vh = Ext.lib.Dom.getViewHeight();
}else{
vw = el.dom.clientWidth;
vh = el.dom.clientHeight;
if(!local){
var vxy = el.getXY();
vx = vxy[0];
vy = vxy[1];
}
}
var s = el.getScroll();
vx += offsets.left + s.left;
vy += offsets.top + s.top;
vw -= offsets.right;
vh -= offsets.bottom;
var vr = vx+vw;
var vb = vy+vh;
var xy = proposedXY || (!local ? this.getXY() : [this.getLeft(true), this.getTop(true)]);
var x = xy[0], y = xy[1];
var w = this.dom.offsetWidth, h = this.dom.offsetHeight;
// only move it if it needs it
var moved = false;
// first validate right/bottom
if((x + w) > vr){
x = vr - w;
moved = true;
}
if((y + h) > vb){
y = vb - h;
moved = true;
}
// then make sure top/left isn't negative
if(x < vx){
x = vx;
moved = true;
}
if(y < vy){
y = vy;
moved = true;
}
return moved ? [x, y] : false;
};
}(),
// private
adjustForConstraints : function(xy, parent, offsets){
return this.getConstrainToXY(parent || document, false, offsets, xy) || xy;
},
/**
* Aligns this element with another element relative to the specified anchor points. If the other element is the
* document it aligns it to the viewport.
* The position parameter is optional, and can be specified in any one of the following formats:
* Value Description ----- ----------------------------- tl The top left corner (default) t The center of the top edge tr The top right corner l The center of the left edge c In the center of the element r The center of the right edge bl The bottom left corner b The center of the bottom edge br The bottom right cornerExample Usage:
// align el to other-el using the default positioning ("tl-bl", non-constrained)
el.alignTo("other-el");
// align the top left corner of el with the top right corner of other-el (constrained to viewport)
el.alignTo("other-el", "tr?");
// align the bottom right corner of el with the center left edge of other-el
el.alignTo("other-el", "br-l?");
// align the center of el with the bottom left corner of other-el and
// adjust the x position by -6 pixels (and the y position by 0)
el.alignTo("other-el", "c-bl", [-6, 0]);
* @param {Mixed} element The element to align to.
* @param {String} position The position to align to.
* @param {Array} offsets (optional) Offset the positioning by [x, y]
* @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
* @return {Ext.Element} this
*/
alignTo : function(element, position, offsets, animate){
var xy = this.getAlignToXY(element, position, offsets);
this.setXY(xy, this.preanim(arguments, 3));
return this;
},
/**
* Anchors an element to another element and realigns it when the window is resized.
* @param {Mixed} element The element to align to.
* @param {String} position The position to align to.
* @param {Array} offsets (optional) Offset the positioning by [x, y]
* @param {Boolean/Object} animate (optional) True for the default animation or a standard Element animation config object
* @param {Boolean/Number} monitorScroll (optional) True to monitor body scroll and reposition. If this parameter
* is a number, it is used as the buffer delay (defaults to 50ms).
* @param {Function} callback The function to call after the animation finishes
* @return {Ext.Element} this
*/
anchorTo : function(el, alignment, offsets, animate, monitorScroll, callback){
var action = function(){
this.alignTo(el, alignment, offsets, animate);
Ext.callback(callback, this);
};
Ext.EventManager.onWindowResize(action, this);
var tm = typeof monitorScroll;
if(tm != 'undefined'){
Ext.EventManager.on(window, 'scroll', action, this,
{buffer: tm == 'number' ? monitorScroll : 50});
}
action.call(this); // align immediately
return this;
},
/**
* Clears any opacity settings from this element. Required in some cases for IE.
* @return {Ext.Element} this
*/
clearOpacity : function(){
if (window.ActiveXObject) {
if(typeof this.dom.style.filter == 'string' && (/alpha/i).test(this.dom.style.filter)){
this.dom.style.filter = "";
}
} else {
this.dom.style.opacity = "";
this.dom.style["-moz-opacity"] = "";
this.dom.style["-khtml-opacity"] = "";
}
return this;
},
/**
* Hide this element - Uses display mode to determine whether to use "display" or "visibility". See {@link #setVisible}.
* @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
* @return {Ext.Element} this
*/
hide : function(animate){
this.setVisible(false, this.preanim(arguments, 0));
return this;
},
/**
* Show this element - Uses display mode to determine whether to use "display" or "visibility". See {@link #setVisible}.
* @param {Boolean/Object} animate (optional) true for the default animation or a standard Element animation config object
* @return {Ext.Element} this
*/
show : function(animate){
this.setVisible(true, this.preanim(arguments, 0));
return this;
},
/**
* @private Test if size has a unit, otherwise appends the default
*/
addUnits : function(size){
return Ext.Element.addUnits(size, this.defaultUnit);
},
/**
* Update the innerHTML of this element, optionally searching for and processing scripts
* @param {String} html The new HTML
* @param {Boolean} loadScripts (optional) True to look for and process scripts (defaults to false)
* @param {Function} callback (optional) For async script loading you can be notified when the update completes
* @return {Ext.Element} this
*/
update : function(html, loadScripts, callback){
if(typeof html == "undefined"){
html = "";
}
if(loadScripts !== true){
this.dom.innerHTML = html;
if(typeof callback == "function"){
callback();
}
return this;
}
var id = Ext.id();
var dom = this.dom;
html += '';
E.onAvailable(id, function(){
var hd = document.getElementsByTagName("head")[0];
var re = /(?: