4f68a0933c
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
1307 lines
78 KiB
HTML
1307 lines
78 KiB
HTML
<!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="Element.js Overview";
|
|
|
|
}
|
|
</script>
|
|
</head>
|
|
<body bgcolor="white" onload="asd();" style="margin:15px;">
|
|
<center>
|
|
|
|
<h2>Element.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.Element.html">YAHOO.ext.Element</a></b></td>
|
|
<td>Wraps around a DOM element and provides convenient access to Yahoo
|
|
UI library functionality.<br><br>
|
|
Usage:<br>
|
|
<pre><code>
|
|
var el = YAHOO.ext.Element.get('myElementId');
|
|
// or the shorter
|
|
var el = getEl('myElementId');
|
|
</code></pre>
|
|
Using YAHOO.ext.Element.get() instead of calling the constructor directly ensures you get the same object
|
|
each call instead of constructing a new one.<br>
|
|
</td>
|
|
</tr>
|
|
|
|
</table>
|
|
<hr/>
|
|
|
|
|
|
<!-- ========== METHOD SUMMARY =========== -->
|
|
|
|
<!-- ========== END METHOD SUMMARY =========== -->
|
|
|
|
|
|
<pre class="sourceview"><span class="comment">/**
|
|
* <span class="attrib">@class</span> Wraps around a DOM element and provides convenient access to Yahoo
|
|
* UI library functionality.<br><br>
|
|
* Usage:<br>
|
|
* <pre><code>
|
|
* var el = YAHOO.ext.Element.get('myElementId');
|
|
* // or the shorter
|
|
* var el = getEl('myElementId');
|
|
* </code></pre>
|
|
* Using YAHOO.ext.Element.get() instead of calling the constructor directly ensures you get the same object
|
|
* each call instead of constructing a new one.<br>
|
|
* <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.Anim (optional) to support animation
|
|
* <span class="attrib">@requires</span> YAHOO.util.Motion (optional) to support animation
|
|
* <span class="attrib">@requires</span> YAHOO.util.Easing (optional) to support animation
|
|
* <span class="attrib">@constructor</span> Create a new Element directly.
|
|
* <span class="attrib">@param</span> {String} elementId
|
|
* <span class="attrib">@param</span> {<i>Boolean</i>} forceNew (optional) By default the constructor checks to see if there is already an instance of this element in the cache and if there is it returns the same instance. This will skip that check (useful for extending this class).
|
|
*/</span>
|
|
YAHOO.ext.Element = <span class="reserved">function</span>(elementId, forceNew){
|
|
var dom = YAHOO.util.Dom.get(elementId);
|
|
<span class="reserved">if</span>(!dom){ <span class="comment">// invalid id/element</span>
|
|
<span class="reserved">return</span>;
|
|
}
|
|
<span class="reserved">if</span>(!forceNew && YAHOO.ext.Element.cache[dom.id]){ <span class="comment">// element object already exists</span>
|
|
<span class="reserved">return</span> YAHOO.ext.Element.cache[dom.id];
|
|
}
|
|
<span class="comment">/**
|
|
* The DOM element
|
|
* <span class="attrib">@type</span> HTMLElement
|
|
*/</span>
|
|
<span class="reserved">this</span>.dom = dom;
|
|
<span class="comment">/**
|
|
* The DOM element ID
|
|
* <span class="attrib">@type</span> String
|
|
*/</span>
|
|
<span class="reserved">this</span>.id = <span class="reserved">this</span>.dom.id;
|
|
<span class="comment">/**
|
|
* <span class="attrib">@private</span> the current visibility mode
|
|
*/</span>
|
|
<span class="reserved">this</span>.visibilityMode = YAHOO.ext.Element.VISIBILITY;
|
|
|
|
|
|
<span class="comment">/**
|
|
* <span class="attrib">@private</span> the element's default display mode
|
|
*/</span>
|
|
<span class="reserved">this</span>.originalDisplay = YAHOO.util.Dom.getStyle(<span class="reserved">this</span>.dom, <span class="literal">'display'</span>);
|
|
<span class="reserved">if</span> (!<span class="reserved">this</span>.originalDisplay || <span class="reserved">this</span>.originalDisplay == <span class="literal">'none'</span>) {
|
|
<span class="reserved">this</span>.originalDisplay = <span class="literal">''</span>;
|
|
}
|
|
|
|
<span class="comment">/**
|
|
* The default unit to append to CSS values where a unit isn't provided (Defaults to px).
|
|
* <span class="attrib">@type</span> String
|
|
*/</span>
|
|
<span class="reserved">this</span>.defaultUnit = <span class="literal">'px'</span>;
|
|
|
|
<span class="comment">/**
|
|
* <span class="attrib">@private</span> the element's default overflow
|
|
*/</span>
|
|
<span class="reserved">this</span>.originalClip = YAHOO.util.Dom.getStyle(<span class="reserved">this</span>.dom, <span class="literal">'overflow'</span>);
|
|
|
|
|
|
<span class="comment">/**
|
|
* Fires when visibility changes. Uses fireDirect with signature: (oElement, boolean isVisible)
|
|
* <span class="attrib">@type</span> CustomEvent
|
|
*/</span>
|
|
<span class="reserved">this</span>.onVisibilityChanged = new YAHOO.util.CustomEvent(<span class="literal">'visibilityChanged'</span>);
|
|
|
|
<span class="comment">/**
|
|
* Fires when element moves. Uses fireDirect with signature: (oElement, newX, newY)
|
|
* <span class="attrib">@type</span> CustomEvent
|
|
*/</span>
|
|
<span class="reserved">this</span>.onMoved = new YAHOO.util.CustomEvent(<span class="literal">'moved'</span>);
|
|
|
|
<span class="comment">/**
|
|
* Fires when element is resized. Uses fireDirect with signature: (oElement, newWidth, newHeight)
|
|
* <span class="attrib">@type</span> CustomEvent
|
|
*/</span>
|
|
<span class="reserved">this</span>.onResized = new YAHOO.util.CustomEvent(<span class="literal">'resized'</span>);
|
|
|
|
<span class="comment">// The delegates below handle setting of 'this' when being called from other objects.</span>
|
|
|
|
<span class="comment">/**
|
|
* <span class="attrib">@private</span>
|
|
*/</span>
|
|
<span class="reserved">this</span>.visibilityDelegate = <span class="reserved">this</span>.fireVisibilityChanged.createDelegate(<span class="reserved">this</span>);
|
|
<span class="comment">/**
|
|
* <span class="attrib">@private</span>
|
|
*/</span>
|
|
<span class="reserved">this</span>.resizedDelegate = <span class="reserved">this</span>.fireResized.createDelegate(<span class="reserved">this</span>);
|
|
<span class="comment">/**
|
|
* <span class="attrib">@private</span>
|
|
*/</span>
|
|
<span class="reserved">this</span>.movedDelegate = <span class="reserved">this</span>.fireMoved.createDelegate(<span class="reserved">this</span>);
|
|
}
|
|
|
|
YAHOO.ext.Element.<span class="reserved">prototype</span> = {
|
|
<span class="comment">// Utility methods to make firing events painless.</span>
|
|
<span class="comment">/**
|
|
*<span class="attrib">@private</span>
|
|
*/</span>
|
|
fireMoved : <span class="reserved">function</span>(){
|
|
<span class="reserved">this</span>.onMoved.fireDirect(<span class="reserved">this</span>, <span class="reserved">this</span>.getX(), <span class="reserved">this</span>.getY());
|
|
},
|
|
|
|
<span class="comment">/**
|
|
*<span class="attrib">@private</span>
|
|
*/</span>
|
|
fireVisibilityChanged : <span class="reserved">function</span>(){
|
|
<span class="reserved">this</span>.onVisibilityChanged.fireDirect(<span class="reserved">this</span>, <span class="reserved">this</span>.isVisible());
|
|
},
|
|
|
|
<span class="comment">/**
|
|
*<span class="attrib">@private</span>
|
|
*/</span>
|
|
fireResized : <span class="reserved">function</span>(){
|
|
<span class="reserved">this</span>.onResized.fireDirect(<span class="reserved">this</span>, <span class="reserved">this</span>.getWidth(), <span class="reserved">this</span>.getHeight());
|
|
},
|
|
|
|
<span class="comment">/**
|
|
* Sets the elements visibility mode. When setVisible() is called it
|
|
* will use this to determine whether to set the visibility or the display property.
|
|
* <span class="attrib">@param</span> visMode Element.VISIBILITY or Element.DISPLAY
|
|
*/</span>
|
|
setVisibilityMode : <span class="reserved">function</span>(visMode){
|
|
<span class="reserved">this</span>.visibilityMode = visMode;
|
|
},
|
|
|
|
<span class="comment">/**
|
|
* Convenience method for setVisibilityMode(Element.DISPLAY)
|
|
*/</span>
|
|
enableDisplayMode : <span class="reserved">function</span>(){
|
|
<span class="reserved">this</span>.setVisibilityMode(YAHOO.ext.Element.DISPLAY)
|
|
},
|
|
|
|
<span class="comment">/**
|
|
* Perform Yahoo UI animation on this element.
|
|
* <span class="attrib">@param</span> {Object} args The YUI animation control args
|
|
* <span class="attrib">@param</span> {<i>Float</i>} duration (optional) How long the animation lasts. (Defaults to .35 seconds)
|
|
* <span class="attrib">@param</span> {<i>Function</i>} onComplete (optional) Function to call when animation completes.
|
|
* <span class="attrib">@param</span> {<i>Function</i>} easing (optional) YAHOO.util.Easing method to use. (Defaults to YAHOO.util.Easing.easeBoth)
|
|
* <span class="attrib">@param</span> {<i>Function</i>} animType (optional) YAHOO.util.Anim subclass to use. For example: YAHOO.util.Motion
|
|
*/</span>
|
|
animate : <span class="reserved">function</span>(args, duration, onComplete, easing, animType){
|
|
<span class="reserved">this</span>.anim(args, duration, onComplete, easing, animType);
|
|
},
|
|
|
|
<span class="comment">/**
|
|
* <span class="attrib">@private</span> Internal animation call
|
|
*/</span>
|
|
anim : <span class="reserved">function</span>(args, duration, onComplete, easing, animType){
|
|
animType = animType || YAHOO.util.Anim;
|
|
var anim = new animType(<span class="reserved">this</span>.dom, args, duration || .35,
|
|
easing || YAHOO.util.Easing.easeBoth);
|
|
<span class="reserved">if</span>(onComplete){
|
|
<span class="reserved">if</span>(!(onComplete instanceof Array)){
|
|
anim.onComplete.subscribe(onComplete);
|
|
}<span class="reserved">else</span>{
|
|
<span class="reserved">for</span>(var i = 0; i < onComplete.length; i++){
|
|
var fn = onComplete[i];
|
|
<span class="reserved">if</span>(fn) anim.onComplete.subscribe(fn);
|
|
}
|
|
}
|
|
}
|
|
anim.animate();
|
|
},
|
|
|
|
<span class="comment">/**
|
|
* Checks whether the element is currently visible using both visibility and display properties.
|
|
* <span class="attrib">@param</span> {<i>Boolean</i>} deep True to walk the dom and see if parent elements are hidden
|
|
* <span class="attrib">@return</span> {Boolean} Whether the element is currently visible
|
|
*/</span>
|
|
isVisible : <span class="reserved">function</span>(deep) {
|
|
var vis = YAHOO.util.Dom.getStyle(<span class="reserved">this</span>.dom, <span class="literal">'visibility'</span>) != <span class="literal">'hidden'</span>
|
|
&& YAHOO.util.Dom.getStyle(<span class="reserved">this</span>.dom, <span class="literal">'display'</span>) != <span class="literal">'none'</span>;
|
|
<span class="reserved">if</span>(!deep || !vis){
|
|
<span class="reserved">return</span> vis;
|
|
}
|
|
var p = <span class="reserved">this</span>.dom.parentNode;
|
|
<span class="reserved">while</span>(p && p.tagName.toLowerCase() != <span class="literal">'body'</span>){
|
|
<span class="reserved">if</span>(YAHOO.util.Dom.getStyle(p, <span class="literal">'visibility'</span>) == <span class="literal">'hidden'</span> || YAHOO.util.Dom.getStyle(p, <span class="literal">'display'</span>) == <span class="literal">'none'</span>){
|
|
<span class="reserved">return</span> false;
|
|
}
|
|
p = p.parentNode;
|
|
}
|
|
<span class="reserved">return</span> true;
|
|
},
|
|
|
|
<span class="comment">/**
|
|
* Sets the visibility of the element (see details). If the visibilityMode is set to Element.DISPLAY, it will use
|
|
* the display property to hide the element, otherwise it uses visibility. The default is to hide and show using the visibility property.
|
|
* <span class="attrib">@param</span> {Boolean} visible Whether the element is visible
|
|
* <span class="attrib">@param</span> {<i>Boolean</i>} animate (optional) Fade the element in or out (Default is false)
|
|
* <span class="attrib">@param</span> {<i>Float</i>} duration (optional) How long the fade effect lasts. (Defaults to .35 seconds)
|
|
* <span class="attrib">@param</span> {<i>Function</i>} onComplete (optional) Function to call when animation completes.
|
|
* <span class="attrib">@param</span> {<i>Function</i>} easing (optional) YAHOO.util.Easing method to use. (Defaults to YAHOO.util.Easing.easeOut for hiding or YAHOO.util.Easing.easeIn for showing)
|
|
*/</span>
|
|
setVisible : <span class="reserved">function</span>(visible, animate, duration, onComplete, easing){
|
|
<span class="comment">//if(this.isVisible() == visible) return; // nothing to do</span>
|
|
<span class="reserved">if</span>(!animate || !YAHOO.util.Anim){
|
|
<span class="reserved">if</span>(<span class="reserved">this</span>.visibilityMode == YAHOO.ext.Element.DISPLAY){
|
|
<span class="reserved">this</span>.setDisplayed(visible);
|
|
}<span class="reserved">else</span>{
|
|
YAHOO.util.Dom.setStyle(<span class="reserved">this</span>.dom, <span class="literal">'visibility'</span>, visible ? <span class="literal">'visible'</span> : <span class="literal">'hidden'</span>);
|
|
}
|
|
<span class="reserved">this</span>.fireVisibilityChanged();
|
|
}<span class="reserved">else</span>{
|
|
<span class="comment">// make sure they can see the transition</span>
|
|
YAHOO.util.Dom.setStyle(<span class="reserved">this</span>.dom, <span class="literal">'visibility'</span>, <span class="literal">'visible'</span>);
|
|
<span class="reserved">if</span>(<span class="reserved">this</span>.visibilityMode == YAHOO.ext.Element.DISPLAY){
|
|
<span class="reserved">this</span>.setDisplayed(true);
|
|
}
|
|
var args = {opacity: { from: (visible?0:1), to: (visible?1:0) }};
|
|
var anim = new YAHOO.util.Anim(<span class="reserved">this</span>.dom, args, duration || .35,
|
|
easing || (visible ? YAHOO.util.Easing.easeIn : YAHOO.util.Easing.easeOut));
|
|
anim.onComplete.subscribe((<span class="reserved">function</span>(){
|
|
<span class="reserved">if</span>(<span class="reserved">this</span>.visibilityMode == YAHOO.ext.Element.DISPLAY){
|
|
<span class="reserved">this</span>.setDisplayed(visible);
|
|
}<span class="reserved">else</span>{
|
|
YAHOO.util.Dom.setStyle(<span class="reserved">this</span>.dom, <span class="literal">'visibility'</span>, visible ? <span class="literal">'visible'</span> : <span class="literal">'hidden'</span>);
|
|
}
|
|
<span class="reserved">this</span>.fireVisibilityChanged();
|
|
}).createDelegate(<span class="reserved">this</span>));
|
|
<span class="reserved">if</span>(onComplete){
|
|
anim.onComplete.subscribe(onComplete);
|
|
}
|
|
anim.animate();
|
|
}
|
|
},
|
|
|
|
<span class="comment">/**
|
|
*<span class="attrib">@private</span>
|
|
*/</span>
|
|
isDisplayed : <span class="reserved">function</span>() {
|
|
<span class="reserved">return</span> YAHOO.util.Dom.getStyle(<span class="reserved">this</span>.dom, <span class="literal">'display'</span>) != <span class="literal">'none'</span>;
|
|
},
|
|
|
|
<span class="comment">/**
|
|
* Toggles the elements visibility or display, depending on visibility mode.
|
|
* <span class="attrib">@param</span> {<i>Boolean</i>} animate (optional) Fade the element in or out (Default is false)
|
|
* <span class="attrib">@param</span> {<i>float</i>} duration (optional) How long the fade effect lasts. (Defaults to .35 seconds)
|
|
* <span class="attrib">@param</span> {<i>Function</i>} onComplete (optional) Function to call when animation completes.
|
|
* <span class="attrib">@param</span> {<i>Function</i>} easing (optional) YAHOO.util.Easing method to use. (Defaults to YAHOO.util.Easing.easeOut for hiding or YAHOO.util.Easing.easeIn for showing)
|
|
*/</span>
|
|
toggle : <span class="reserved">function</span>(animate, duration, onComplete, easing){
|
|
<span class="reserved">this</span>.setVisible(!<span class="reserved">this</span>.isVisible(), animate, duration, onComplete, easing);
|
|
},
|
|
|
|
<span class="comment">/**
|
|
*<span class="attrib">@private</span>
|
|
*/</span>
|
|
setDisplayed : <span class="reserved">function</span>(value) {
|
|
YAHOO.util.Dom.setStyle(<span class="reserved">this</span>.dom, <span class="literal">'display'</span>, value ? <span class="reserved">this</span>.originalDisplay : <span class="literal">'none'</span>);
|
|
},
|
|
|
|
<span class="comment">/**
|
|
* Tries to focus the element. Any exceptions are caught.
|
|
*/</span>
|
|
focus : <span class="reserved">function</span>() {
|
|
try{
|
|
<span class="reserved">this</span>.dom.focus();
|
|
}catch(e){}
|
|
},
|
|
|
|
<span class="comment">/**
|
|
* Add a CSS class to the element.
|
|
* <span class="attrib">@param</span> {String} className The CSS class to add
|
|
*/</span>
|
|
addClass : <span class="reserved">function</span>(className){
|
|
YAHOO.util.Dom.addClass(<span class="reserved">this</span>.dom, className);
|
|
},
|
|
|
|
<span class="comment">/**
|
|
* Adds the passed className to this element and removes the class from all siblings
|
|
*/</span>
|
|
radioClass : <span class="reserved">function</span>(className){
|
|
var siblings = <span class="reserved">this</span>.dom.parentNode.childNodes;
|
|
<span class="reserved">for</span>(var i = 0; i < siblings.length; i++) {
|
|
var s = siblings[i];
|
|
<span class="reserved">if</span>(s.nodeType == 1){
|
|
YAHOO.util.Dom.removeClass(s, className);
|
|
}
|
|
}
|
|
YAHOO.util.Dom.addClass(<span class="reserved">this</span>.dom, className);
|
|
},
|
|
<span class="comment">/**
|
|
* Removes a CSS class from the element.
|
|
* <span class="attrib">@param</span> {String} className The CSS class to remove
|
|
*/</span>
|
|
removeClass : <span class="reserved">function</span>(className){
|
|
YAHOO.util.Dom.removeClass(<span class="reserved">this</span>.dom, className);
|
|
},
|
|
|
|
toggleClass : <span class="reserved">function</span>(className){
|
|
<span class="reserved">if</span>(YAHOO.util.Dom.hasClass(<span class="reserved">this</span>.dom, className)){
|
|
YAHOO.util.Dom.removeClass(<span class="reserved">this</span>.dom, className);
|
|
}<span class="reserved">else</span>{
|
|
YAHOO.util.Dom.addClass(<span class="reserved">this</span>.dom, className);
|
|
}
|
|
},
|
|
|
|
<span class="comment">/**
|
|
* Checks if a CSS class is in use by the element.
|
|
* <span class="attrib">@param</span> {String} className The CSS class to check
|
|
* <span class="attrib">@return</span> {Boolean} true or false
|
|
*/</span>
|
|
hasClass : <span class="reserved">function</span>(className){
|
|
<span class="reserved">return</span> YAHOO.util.Dom.hasClass(<span class="reserved">this</span>.dom, className);
|
|
},
|
|
|
|
<span class="comment">/**
|
|
* Replaces a CSS class on the element with another.
|
|
* <span class="attrib">@param</span> {String} oldClassName The CSS class to replace
|
|
* <span class="attrib">@param</span> {String} newClassName The replacement CSS class
|
|
*/</span>
|
|
replaceClass : <span class="reserved">function</span>(oldClassName, newClassName){
|
|
YAHOO.util.Dom.replaceClass(<span class="reserved">this</span>.dom, oldClassName, newClassName);
|
|
},
|
|
|
|
<span class="comment">/**
|
|
* Normalizes currentStyle and ComputedStyle.
|
|
* <span class="attrib">@param</span> {String} property The style property whose value is returned.
|
|
* <span class="attrib">@return</span> {String} The current value of the style property for this element.
|
|
*/</span>
|
|
getStyle : <span class="reserved">function</span>(name){
|
|
<span class="reserved">return</span> YAHOO.util.Dom.getStyle(<span class="reserved">this</span>.dom, name);
|
|
},
|
|
|
|
<span class="comment">/**
|
|
* Wrapper for setting style properties
|
|
* <span class="attrib">@param</span> {String} property The style property to be set.
|
|
* <span class="attrib">@param</span> {String} val The value to apply to the given property.
|
|
*/</span>
|
|
setStyle : <span class="reserved">function</span>(name, value){
|
|
YAHOO.util.Dom.setStyle(<span class="reserved">this</span>.dom, name, value);
|
|
},
|
|
|
|
<span class="comment">/**
|
|
* Gets the current X position of the element based on page coordinates. Element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).
|
|
@ return {String} The X position of the element
|
|
*/</span>
|
|
getX : <span class="reserved">function</span>(){
|
|
<span class="reserved">return</span> YAHOO.util.Dom.getX(<span class="reserved">this</span>.dom);
|
|
},
|
|
|
|
<span class="comment">/**
|
|
* Gets the current Y position of the element based on page coordinates. Element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).
|
|
@ return {String} The Y position of the element
|
|
*/</span>
|
|
getY : <span class="reserved">function</span>(){
|
|
<span class="reserved">return</span> YAHOO.util.Dom.getY(<span class="reserved">this</span>.dom);
|
|
},
|
|
|
|
<span class="comment">/**
|
|
* Gets the current position of the element based on page coordinates. Element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).
|
|
@ return {Array} The XY position of the element
|
|
*/</span>
|
|
getXY : <span class="reserved">function</span>(){
|
|
<span class="reserved">return</span> YAHOO.util.Dom.getXY(<span class="reserved">this</span>.dom);
|
|
},
|
|
|
|
<span class="comment">/**
|
|
* Sets the X position of the element based on page coordinates. Element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).
|
|
<span class="attrib">@param</span> {String} The X position of the element
|
|
*/</span>
|
|
setX : <span class="reserved">function</span>(x){
|
|
YAHOO.util.Dom.setX(<span class="reserved">this</span>.dom, x);
|
|
<span class="reserved">this</span>.fireMoved();
|
|
},
|
|
|
|
<span class="comment">/**
|
|
* Sets the Y position of the element based on page coordinates. Element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).
|
|
<span class="attrib">@param</span> {String} The Y position of the element
|
|
*/</span>
|
|
setY : <span class="reserved">function</span>(y){
|
|
YAHOO.util.Dom.setY(<span class="reserved">this</span>.dom, y);
|
|
<span class="reserved">this</span>.fireMoved();
|
|
},
|
|
|
|
<span class="comment">/**
|
|
* Set the element's X position directly using CSS style (instead of setX())
|
|
* <span class="attrib">@param</span> {String} left The left CSS property value
|
|
*/</span>
|
|
setLeft : <span class="reserved">function</span>(left){
|
|
YAHOO.util.Dom.setStyle(<span class="reserved">this</span>.dom, <span class="literal">'left'</span>, <span class="reserved">this</span>.addUnits(left));
|
|
<span class="reserved">this</span>.fireMoved();
|
|
},
|
|
|
|
<span class="comment">/**
|
|
* Set the element's Y position directly using CSS style (instead of setY())
|
|
* <span class="attrib">@param</span> {String} top The top CSS property value
|
|
*/</span>
|
|
setTop : <span class="reserved">function</span>(top){
|
|
YAHOO.util.Dom.setStyle(<span class="reserved">this</span>.dom, <span class="literal">'top'</span>, <span class="reserved">this</span>.addUnits(top));
|
|
<span class="reserved">this</span>.fireMoved();
|
|
},
|
|
|
|
<span class="comment">/**
|
|
* Set the element's css right style
|
|
* <span class="attrib">@param</span> {String} left The right CSS property value
|
|
*/</span>
|
|
setRight : <span class="reserved">function</span>(right){
|
|
YAHOO.util.Dom.setStyle(<span class="reserved">this</span>.dom, <span class="literal">'right'</span>, <span class="reserved">this</span>.addUnits(right));
|
|
<span class="reserved">this</span>.fireMoved();
|
|
},
|
|
|
|
<span class="comment">/**
|
|
* Set the element's css bottom style
|
|
* <span class="attrib">@param</span> {String} top The bottom CSS property value
|
|
*/</span>
|
|
setBottom : <span class="reserved">function</span>(bottom){
|
|
YAHOO.util.Dom.setStyle(<span class="reserved">this</span>.dom, <span class="literal">'bottom'</span>, <span class="reserved">this</span>.addUnits(bottom));
|
|
<span class="reserved">this</span>.fireMoved();
|
|
},
|
|
|
|
<span class="comment">/**
|
|
* Set the position of the element in page coordinates, regardless of how the element is positioned.
|
|
* The element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).
|
|
* <span class="attrib">@param</span> {Array} pos Contains X & Y [x, y] values for new position (coordinates are page-based)
|
|
* <span class="attrib">@param</span> {<i>Boolean</i>} animate (optional) Animate the transition (Default is false)
|
|
* <span class="attrib">@param</span> {<i>float</i>} duration (optional) How long the animation lasts. (Defaults to .35 seconds)
|
|
* <span class="attrib">@param</span> {<i>Function</i>} onComplete (optional) Function to call when animation completes.
|
|
* <span class="attrib">@param</span> {<i>Function</i>} easing (optional) YAHOO.util.Easing method to use. (Defaults to YAHOO.util.Easing.easeBoth)
|
|
*/</span>
|
|
setXY : <span class="reserved">function</span>(pos, animate, duration, onComplete, easing){
|
|
<span class="reserved">if</span>(!animate || !YAHOO.util.Anim){
|
|
YAHOO.util.Dom.setXY(<span class="reserved">this</span>.dom, pos);
|
|
<span class="reserved">this</span>.fireMoved();
|
|
}<span class="reserved">else</span>{
|
|
<span class="reserved">this</span>.anim({points: {to: pos}}, duration, [onComplete, <span class="reserved">this</span>.movedDelegate], easing, YAHOO.util.Motion);
|
|
}
|
|
},
|
|
|
|
<span class="comment">/**
|
|
* Set the position of the element in page coordinates, regardless of how the element is positioned.
|
|
* The element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).
|
|
* <span class="attrib">@param</span> {Number} x X value for new position (coordinates are page-based)
|
|
* <span class="attrib">@param</span> {Number} y Y value for new position (coordinates are page-based)
|
|
* <span class="attrib">@param</span> {<i>Boolean</i>} animate (optional) Animate the transition (Default is false)
|
|
* <span class="attrib">@param</span> {<i>float</i>} duration (optional) How long the animation lasts. (Defaults to .35 seconds)
|
|
* <span class="attrib">@param</span> {<i>Function</i>} onComplete (optional) Function to call when animation completes.
|
|
* <span class="attrib">@param</span> {<i>Function</i>} easing (optional) YAHOO.util.Easing method to use. (Defaults to YAHOO.util.Easing.easeBoth)
|
|
*/</span>
|
|
setLocation : <span class="reserved">function</span>(x, y, animate, duration, onComplete, easing){
|
|
<span class="reserved">this</span>.setXY([x, y], animate, duration, onComplete, easing);
|
|
},
|
|
|
|
<span class="comment">/**
|
|
* Set the position of the element in page coordinates, regardless of how the element is positioned.
|
|
* The element must be part of the DOM tree to have page coordinates (display:none or elements not appended return false).
|
|
* <span class="attrib">@param</span> {Number} x X value for new position (coordinates are page-based)
|
|
* <span class="attrib">@param</span> {Number} y Y value for new position (coordinates are page-based)
|
|
* <span class="attrib">@param</span> {<i>Boolean</i>} animate (optional) Animate the transition (Default is false)
|
|
* <span class="attrib">@param</span> {<i>float</i>} duration (optional) How long the animation lasts. (Defaults to .35 seconds)
|
|
* <span class="attrib">@param</span> {<i>Function</i>} onComplete (optional) Function to call when animation completes.
|
|
* <span class="attrib">@param</span> {<i>Function</i>} easing (optional) YAHOO.util.Easing method to use. (Defaults to YAHOO.util.Easing.easeBoth)
|
|
*/</span>
|
|
moveTo : <span class="reserved">function</span>(x, y, animate, duration, onComplete, easing){
|
|
<span class="comment">//YAHOO.util.Dom.setStyle(this.dom, 'left', this.addUnits(x));</span>
|
|
<span class="comment">//YAHOO.util.Dom.setStyle(this.dom, 'top', this.addUnits(y));</span>
|
|
<span class="reserved">this</span>.setXY([x, y], animate, duration, onComplete, easing);
|
|
},
|
|
|
|
<span class="comment">/**
|
|
* Returns the region position of the given element.
|
|
* The element must be part of the DOM tree to have a region (display:none or elements not appended return false).
|
|
* <span class="attrib">@return</span> {Region} A YAHOO.util.Region containing "top, left, bottom, right" member data.
|
|
*/</span>
|
|
getRegion : <span class="reserved">function</span>(){
|
|
<span class="reserved">return</span> YAHOO.util.Dom.getRegion(<span class="reserved">this</span>.dom);
|
|
},
|
|
|
|
<span class="comment">/**
|
|
* Returns the offset height of the element
|
|
* <span class="attrib">@return</span> {Number} The element's height
|
|
*/</span>
|
|
getHeight : <span class="reserved">function</span>(){
|
|
<span class="reserved">return</span> <span class="reserved">this</span>.dom.offsetHeight;
|
|
},
|
|
|
|
<span class="comment">/**
|
|
* Returns the offset width of the element
|
|
* <span class="attrib">@return</span> {Number} The element's width
|
|
*/</span>
|
|
getWidth : <span class="reserved">function</span>(){
|
|
<span class="reserved">return</span> <span class="reserved">this</span>.dom.offsetWidth;
|
|
},
|
|
|
|
<span class="comment">/**
|
|
* Returns the size of the element
|
|
* <span class="attrib">@return</span> {Object} An object containing the element's size {width: (element width), height: (element height)}
|
|
*/</span>
|
|
getSize : <span class="reserved">function</span>(){
|
|
<span class="reserved">return</span> {width: <span class="reserved">this</span>.getWidth(), height: <span class="reserved">this</span>.getHeight()};
|
|
},
|
|
|
|
<span class="comment">/** <span class="attrib">@private</span> */</span>
|
|
adjustWidth : <span class="reserved">function</span>(width){
|
|
<span class="reserved">if</span>(<span class="reserved">this</span>.autoBoxAdjust && typeof width == <span class="literal">'number'</span> && !<span class="reserved">this</span>.isBorderBox()){
|
|
width -= (<span class="reserved">this</span>.getBorderWidth(<span class="literal">'lr'</span>) + <span class="reserved">this</span>.getPadding(<span class="literal">'lr'</span>));
|
|
}
|
|
<span class="reserved">return</span> width;
|
|
},
|
|
|
|
<span class="comment">/** <span class="attrib">@private</span> */</span>
|
|
adjustHeight : <span class="reserved">function</span>(height){
|
|
<span class="reserved">if</span>(<span class="reserved">this</span>.autoBoxAdjust && typeof height == <span class="literal">'number'</span> && !<span class="reserved">this</span>.isBorderBox()){
|
|
height -= (<span class="reserved">this</span>.getBorderWidth(<span class="literal">'tb'</span>) + <span class="reserved">this</span>.getPadding(<span class="literal">'tb'</span>));
|
|
}
|
|
<span class="reserved">return</span> height;
|
|
},
|
|
|
|
<span class="comment">/**
|
|
* Set the width of the element
|
|
* <span class="attrib">@param</span> {Number} width The new width
|
|
* <span class="attrib">@param</span> {<i>Boolean</i>} animate (optional) Animate the transition (Default is false)
|
|
* <span class="attrib">@param</span> {<i>float</i>} duration (optional) How long the animation lasts. (Defaults to .35 seconds)
|
|
* <span class="attrib">@param</span> {<i>Function</i>} onComplete (optional) Function to call when animation completes.
|
|
* <span class="attrib">@param</span> {<i>Function</i>} easing (optional) YAHOO.util.Easing method to use. (Defaults to YAHOO.util.Easing.easeOut if width is larger or YAHOO.util.Easing.easeIn if it is smaller)
|
|
*/</span>
|
|
setWidth : <span class="reserved">function</span>(width, animate, duration, onComplete, easing){
|
|
width = <span class="reserved">this</span>.adjustWidth(width);
|
|
<span class="reserved">if</span>(!animate || !YAHOO.util.Anim){
|
|
YAHOO.util.Dom.setStyle(<span class="reserved">this</span>.dom, <span class="literal">'width'</span>, <span class="reserved">this</span>.addUnits(width));
|
|
<span class="reserved">this</span>.fireResized();
|
|
}<span class="reserved">else</span>{
|
|
<span class="reserved">this</span>.anim({width: {to: width}}, duration, [onComplete, <span class="reserved">this</span>.resizedDelegate],
|
|
easing || (width > <span class="reserved">this</span>.getWidth() ? YAHOO.util.Easing.easeOut : YAHOO.util.Easing.easeIn));
|
|
}
|
|
},
|
|
|
|
<span class="comment">/**
|
|
* Set the height of the element
|
|
* <span class="attrib">@param</span> {Number} height The new height
|
|
* <span class="attrib">@param</span> {<i>Boolean</i>} animate (optional) Animate the transition (Default is false)
|
|
* <span class="attrib">@param</span> {<i>float</i>} duration (optional) How long the animation lasts. (Defaults to .35 seconds)
|
|
* <span class="attrib">@param</span> {<i>Function</i>} onComplete (optional) Function to call when animation completes.
|
|
* <span class="attrib">@param</span> {<i>Function</i>} easing (optional) YAHOO.util.Easing method to use. (Defaults to YAHOO.util.Easing.easeOut if height is larger or YAHOO.util.Easing.easeIn if it is smaller)
|
|
*/</span>
|
|
setHeight : <span class="reserved">function</span>(height, animate, duration, onComplete, easing){
|
|
height = <span class="reserved">this</span>.adjustHeight(height);
|
|
<span class="reserved">if</span>(!animate || !YAHOO.util.Anim){
|
|
YAHOO.util.Dom.setStyle(<span class="reserved">this</span>.dom, <span class="literal">'height'</span>, <span class="reserved">this</span>.addUnits(height));
|
|
<span class="reserved">this</span>.fireResized();
|
|
}<span class="reserved">else</span>{
|
|
<span class="reserved">this</span>.anim({height: {to: height}}, duration, [onComplete, <span class="reserved">this</span>.resizedDelegate],
|
|
easing || (height > <span class="reserved">this</span>.getHeight() ? YAHOO.util.Easing.easeOut : YAHOO.util.Easing.easeIn));
|
|
}
|
|
},
|
|
|
|
<span class="comment">/**
|
|
* Set the size of the element. If animation is true, both width an height will be animated concurrently.
|
|
* <span class="attrib">@param</span> {Number} width The new width
|
|
* <span class="attrib">@param</span> {Number} height The new height
|
|
* <span class="attrib">@param</span> {<i>Boolean</i>} animate (optional) Animate the transition (Default is false)
|
|
* <span class="attrib">@param</span> {<i>float</i>} duration (optional) How long the animation lasts. (Defaults to .35 seconds)
|
|
* <span class="attrib">@param</span> {<i>Function</i>} onComplete (optional) Function to call when animation completes.
|
|
* <span class="attrib">@param</span> {<i>Function</i>} easing (optional) YAHOO.util.Easing method to use. (Defaults to YAHOO.util.Easing.easeBoth)
|
|
*/</span>
|
|
setSize : <span class="reserved">function</span>(width, height, animate, duration, onComplete, easing){
|
|
<span class="reserved">if</span>(!animate || !YAHOO.util.Anim){
|
|
<span class="reserved">this</span>.setWidth(width);
|
|
<span class="reserved">this</span>.setHeight(height);
|
|
<span class="reserved">this</span>.fireResized();
|
|
}<span class="reserved">else</span>{
|
|
width = <span class="reserved">this</span>.adjustWidth(width); height = <span class="reserved">this</span>.adjustHeight(height);
|
|
<span class="reserved">this</span>.anim({width: {to: width}, height: {to: height}}, duration, [onComplete, <span class="reserved">this</span>.resizedDelegate], easing);
|
|
}
|
|
},
|
|
|
|
<span class="comment">/**
|
|
* Sets the element's position and size in one shot. If animation is true then width, height, x and y will be animated concurrently.
|
|
* <span class="attrib">@param</span> {Number} x X value for new position (coordinates are page-based)
|
|
* <span class="attrib">@param</span> {Number} y Y value for new position (coordinates are page-based)
|
|
* <span class="attrib">@param</span> {Number} width The new width
|
|
* <span class="attrib">@param</span> {Number} height The new height
|
|
* <span class="attrib">@param</span> {<i>Boolean</i>} animate (optional) Animate the transition (Default is false)
|
|
* <span class="attrib">@param</span> {<i>float</i>} duration (optional) How long the animation lasts. (Defaults to .35 seconds)
|
|
* <span class="attrib">@param</span> {<i>Function</i>} onComplete (optional) Function to call when animation completes.
|
|
* <span class="attrib">@param</span> {<i>Function</i>} easing (optional) YAHOO.util.Easing method to use. (Defaults to YAHOO.util.Easing.easeBoth)
|
|
*/</span>
|
|
setBounds : <span class="reserved">function</span>(x, y, width, height, animate, duration, onComplete, easing){
|
|
<span class="reserved">if</span>(!animate || !YAHOO.util.Anim){
|
|
<span class="reserved">this</span>.setWidth(width);
|
|
<span class="reserved">this</span>.setHeight(height);
|
|
<span class="reserved">this</span>.setLocation(x, y);
|
|
<span class="reserved">this</span>.fireResized();
|
|
<span class="reserved">this</span>.fireMoved();
|
|
}<span class="reserved">else</span>{
|
|
width = <span class="reserved">this</span>.adjustWidth(width); height = <span class="reserved">this</span>.adjustHeight(height);
|
|
<span class="reserved">this</span>.anim({points: {to: [x, y]}, width: {to: width}, height: {to: height}}, duration, [onComplete, <span class="reserved">this</span>.movedDelegate], easing, YAHOO.util.Motion);
|
|
}
|
|
},
|
|
|
|
<span class="comment">/**
|
|
* Sets the element's position and size the the specified region. If animation is true then width, height, x and y will be animated concurrently.
|
|
* <span class="attrib">@param</span> {YAHOO.util.Region} region The region to fill
|
|
* <span class="attrib">@param</span> {<i>Boolean</i>} animate (optional) Animate the transition (Default is false)
|
|
* <span class="attrib">@param</span> {<i>float</i>} duration (optional) How long the animation lasts. (Defaults to .35 seconds)
|
|
* <span class="attrib">@param</span> {<i>Function</i>} onComplete (optional) Function to call when animation completes.
|
|
* <span class="attrib">@param</span> {<i>Function</i>} easing (optional) YAHOO.util.Easing method to use. (Defaults to YAHOO.util.Easing.easeBoth)
|
|
*/</span>
|
|
setRegion : <span class="reserved">function</span>(region, animate, duration, onComplete, easing){
|
|
<span class="reserved">this</span>.setBounds(region.left, region.top, region.right-region.left, region.bottom-region.top, animate, duration, onComplete, easing);
|
|
},
|
|
|
|
<span class="comment">/**
|
|
* Appends an event handler to this element
|
|
* <span class="attrib">@param</span> {String} eventName The type of event to listen for
|
|
* <span class="attrib">@param</span> {Function} handler The method the event invokes
|
|
* <span class="attrib">@param</span> {<i>Object</i>} scope (optional) An arbitrary object that will be
|
|
* passed as a parameter to the handler
|
|
* <span class="attrib">@param</span> {<i>boolean</i>} override (optional) If true, the obj passed in becomes
|
|
* the execution scope of the listener
|
|
*/</span>
|
|
addListener : <span class="reserved">function</span>(eventName, handler, scope, override){
|
|
YAHOO.util.Event.addListener(<span class="reserved">this</span>.dom, eventName, handler, scope, override);
|
|
},
|
|
|
|
<span class="comment">/**
|
|
* Appends an event handler to this element and automatically prevents the default action, and if set stops propagation (bubbling) as well
|
|
* <span class="attrib">@param</span> {String} eventName The type of event to listen for
|
|
* <span class="attrib">@param</span> {Boolean} stopPropagation Whether to also stopPropagation (bubbling)
|
|
* <span class="attrib">@param</span> {Function} handler The method the event invokes
|
|
* <span class="attrib">@param</span> {<i>Object</i>} scope (optional) An arbitrary object that will be
|
|
* passed as a parameter to the handler
|
|
* <span class="attrib">@param</span> {<i>boolean</i>} override (optional) If true, the obj passed in becomes
|
|
* the execution scope of the listener
|
|
*/</span>
|
|
addHandler : <span class="reserved">function</span>(eventName, stopPropagation, handler, scope, override){
|
|
var fn = YAHOO.ext.Element.createStopHandler(stopPropagation, handler, scope, override);
|
|
YAHOO.util.Event.addListener(<span class="reserved">this</span>.dom, eventName, fn);
|
|
},
|
|
|
|
<span class="comment">/** <span class="attrib">@private</span> */</span>
|
|
|
|
<span class="comment">/**
|
|
* Appends an event handler to this element (Same as addListener)
|
|
* <span class="attrib">@param</span> {String} eventName The type of event to listen for
|
|
* <span class="attrib">@param</span> {Function} handler The method the event invokes
|
|
* <span class="attrib">@param</span> {<i>Object</i>} scope (optional) An arbitrary object that will be
|
|
* passed as a parameter to the handler
|
|
* <span class="attrib">@param</span> {<i>boolean</i>} override (optional) If true, the obj passed in becomes
|
|
* the execution scope of the listener
|
|
*/</span>
|
|
on : <span class="reserved">function</span>(eventName, handler, scope, override){
|
|
YAHOO.util.Event.addListener(<span class="reserved">this</span>.dom, eventName, handler, scope, override);
|
|
},
|
|
|
|
<span class="comment">/**
|
|
* Append a managed listener - See {<span class="attrib">@link</span> YAHOO.ext.EventObject} for more details.
|
|
* <span class="attrib">@param</span> {String} eventName The type of event to listen for
|
|
* <span class="attrib">@param</span> {Function} fn The method the event invokes
|
|
* <span class="attrib">@param</span> {<i>Object</i>} scope (optional) An arbitrary object that will be
|
|
* passed as a parameter to the handler
|
|
* <span class="attrib">@param</span> {<i>boolean</i>} override (optional) If true, the obj passed in becomes
|
|
* the execution scope of the listener
|
|
*/</span>
|
|
addManagedListener : <span class="reserved">function</span>(eventName, fn, scope, override){
|
|
<span class="reserved">return</span> YAHOO.ext.EventManager.on(<span class="reserved">this</span>.dom, eventName, fn, scope, override);
|
|
},
|
|
|
|
<span class="comment">/**
|
|
* Append a managed listener (shorthanded for {<span class="attrib">@link</span> #addManagedListener})
|
|
* <span class="attrib">@param</span> {String} eventName The type of event to listen for
|
|
* <span class="attrib">@param</span> {Function} fn The method the event invokes
|
|
* <span class="attrib">@param</span> {<i>Object</i>} scope (optional) An arbitrary object that will be
|
|
* passed as a parameter to the handler
|
|
* <span class="attrib">@param</span> {<i>boolean</i>} override (optional) If true, the obj passed in becomes
|
|
* the execution scope of the listener
|
|
*/</span>
|
|
mon : <span class="reserved">function</span>(eventName, fn, scope, override){
|
|
<span class="reserved">return</span> YAHOO.ext.EventManager.on(<span class="reserved">this</span>.dom, eventName, fn, scope, override);
|
|
},
|
|
<span class="comment">/**
|
|
* Removes an event handler from this element
|
|
* <span class="attrib">@param</span> {String} sType the type of event to remove
|
|
* <span class="attrib">@param</span> {Function} fn the method the event invokes
|
|
*/</span>
|
|
removeListener : <span class="reserved">function</span>(eventName, handler){
|
|
YAHOO.util.Event.removeListener(<span class="reserved">this</span>.dom, eventName, handler);
|
|
},
|
|
|
|
<span class="comment">/**
|
|
* Removes all previous added listeners from this element
|
|
*/</span>
|
|
removeAllListeners : <span class="reserved">function</span>(){
|
|
YAHOO.util.Event.purgeElement(<span class="reserved">this</span>.dom);
|
|
},
|
|
|
|
|
|
<span class="comment">/**
|
|
* Set the opacity of the element
|
|
* <span class="attrib">@param</span> {Float} opacity The new opacity. 0 = transparent, .5 = 50% visibile, 1 = fully visible, etc
|
|
* <span class="attrib">@param</span> {<i>Boolean</i>} animate (optional) Animate (fade) the transition (Default is false)
|
|
* <span class="attrib">@param</span> {<i>Float</i>} duration (optional) How long the animation lasts. (Defaults to .35 seconds)
|
|
* <span class="attrib">@param</span> {<i>Function</i>} onComplete (optional) Function to call when animation completes.
|
|
* <span class="attrib">@param</span> {<i>Function</i>} easing (optional) YAHOO.util.Easing method to use. (Defaults to YAHOO.util.Easing.easeOut if height is larger or YAHOO.util.Easing.easeIn if it is smaller)
|
|
*/</span>
|
|
setOpacity : <span class="reserved">function</span>(opacity, animate, duration, onComplete, easing){
|
|
<span class="reserved">if</span>(!animate || !YAHOO.util.Anim){
|
|
YAHOO.util.Dom.setStyle(<span class="reserved">this</span>.dom, <span class="literal">'opacity'</span>, opacity);
|
|
}<span class="reserved">else</span>{
|
|
<span class="reserved">this</span>.anim({opacity: {to: opacity}}, duration, onComplete, easing);
|
|
}
|
|
},
|
|
|
|
<span class="comment">/**
|
|
* Same as getX()
|
|
*/</span>
|
|
getLeft : <span class="reserved">function</span>(){
|
|
<span class="reserved">return</span> <span class="reserved">this</span>.getX();
|
|
},
|
|
|
|
<span class="comment">/**
|
|
* Gets the right X coordinate of the element (element X position + element width)
|
|
* <span class="attrib">@return</span> {String} The left position of the element
|
|
*/</span>
|
|
getRight : <span class="reserved">function</span>(){
|
|
<span class="reserved">return</span> <span class="reserved">this</span>.getX() + <span class="reserved">this</span>.getWidth();
|
|
},
|
|
|
|
<span class="comment">/**
|
|
* Same as getY()
|
|
*/</span>
|
|
getTop : <span class="reserved">function</span>() {
|
|
<span class="reserved">return</span> <span class="reserved">this</span>.getY();
|
|
},
|
|
|
|
<span class="comment">/**
|
|
* Gets the bottom Y coordinate of the element (element Y position + element height)
|
|
* <span class="attrib">@return</span> {String} The bottom position of the element
|
|
*/</span>
|
|
getBottom : <span class="reserved">function</span>(){
|
|
<span class="reserved">return</span> <span class="reserved">this</span>.getY() + <span class="reserved">this</span>.getHeight();
|
|
},
|
|
|
|
<span class="comment">/**
|
|
* Set the element as absolute positioned with the specified z-index
|
|
* <span class="attrib">@param</span> {<i>Number</i>} zIndex (optional)
|
|
*/</span>
|
|
setAbsolutePositioned : <span class="reserved">function</span>(zIndex){
|
|
<span class="reserved">this</span>.setStyle(<span class="literal">'position'</span>, <span class="literal">'absolute'</span>);
|
|
<span class="reserved">if</span>(zIndex){
|
|
<span class="reserved">this</span>.setStyle(<span class="literal">'z-index'</span>, zIndex);
|
|
}
|
|
},
|
|
|
|
<span class="comment">/**
|
|
* Set the element as relative positioned with the specified z-index
|
|
* <span class="attrib">@param</span> {<i>Number</i>} zIndex (optional)
|
|
*/</span>
|
|
setRelativePositioned : <span class="reserved">function</span>(zIndex){
|
|
<span class="reserved">this</span>.setStyle(<span class="literal">'position'</span>, <span class="literal">'relative'</span>);
|
|
<span class="reserved">if</span>(zIndex){
|
|
<span class="reserved">this</span>.setStyle(<span class="literal">'z-index'</span>, zIndex);
|
|
}
|
|
<span class="comment">//this.setStyle('left', 0);</span>
|
|
<span class="comment">//this.setStyle('top', 0);</span>
|
|
},
|
|
|
|
<span class="comment">/**
|
|
* Clear positioning back to the default when the document was loaded
|
|
*/</span>
|
|
clearPositioning : <span class="reserved">function</span>(){
|
|
<span class="reserved">this</span>.setStyle(<span class="literal">'position'</span>, <span class="literal">''</span>);
|
|
<span class="reserved">this</span>.setStyle(<span class="literal">'left'</span>, <span class="literal">''</span>);
|
|
<span class="reserved">this</span>.setStyle(<span class="literal">'right'</span>, <span class="literal">''</span>);
|
|
<span class="reserved">this</span>.setStyle(<span class="literal">'top'</span>, <span class="literal">''</span>);
|
|
<span class="reserved">this</span>.setStyle(<span class="literal">'bottom'</span>, <span class="literal">''</span>);
|
|
},
|
|
|
|
<span class="comment">/**
|
|
* Gets an object with all CSS positioning properties. Useful along with {<span class="attrib">@link</span> #setPositioning} to get snapshot before performing an update and then restoring the element.
|
|
*/</span>
|
|
getPositioning : <span class="reserved">function</span>(){
|
|
<span class="reserved">return</span> {
|
|
<span class="literal">'position'</span> : <span class="reserved">this</span>.getStyle(<span class="literal">'position'</span>),
|
|
<span class="literal">'left'</span> : <span class="reserved">this</span>.getStyle(<span class="literal">'left'</span>),
|
|
<span class="literal">'right'</span> : <span class="reserved">this</span>.getStyle(<span class="literal">'right'</span>),
|
|
<span class="literal">'top'</span> : <span class="reserved">this</span>.getStyle(<span class="literal">'top'</span>),
|
|
<span class="literal">'bottom'</span> : <span class="reserved">this</span>.getStyle(<span class="literal">'bottom'</span>)
|
|
};
|
|
},
|
|
|
|
<span class="comment">/**
|
|
* Gets the width of the border(s) for the specified side(s)
|
|
* <span class="attrib">@param</span> {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.
|
|
* <span class="attrib">@return</span> {Number} The width of the sides passed added together
|
|
*/</span>
|
|
getBorderWidth : <span class="reserved">function</span>(side){
|
|
var width = 0;
|
|
var b = YAHOO.ext.Element.borders;
|
|
<span class="reserved">for</span>(var s in b){
|
|
<span class="reserved">if</span>(typeof b[s] != <span class="literal">'function'</span>){
|
|
<span class="reserved">if</span>(side.indexOf(s) !== -1){
|
|
var w = parseInt(<span class="reserved">this</span>.getStyle(b[s]), 10);
|
|
<span class="reserved">if</span>(!isNaN(w)) width += w;
|
|
}
|
|
}
|
|
}
|
|
<span class="reserved">return</span> width;
|
|
},
|
|
|
|
<span class="comment">/**
|
|
* Gets the width of the padding(s) for the specified side(s)
|
|
* <span class="attrib">@param</span> {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.
|
|
* <span class="attrib">@return</span> {Number} The padding of the sides passed added together
|
|
*/</span>
|
|
getPadding : <span class="reserved">function</span>(side){
|
|
var pad = 0;
|
|
var b = YAHOO.ext.Element.paddings;
|
|
<span class="reserved">for</span>(var s in b){
|
|
<span class="reserved">if</span>(typeof s[b] != <span class="literal">'function'</span>){
|
|
<span class="reserved">if</span>(side.indexOf(s) !== -1){
|
|
var w = parseInt(<span class="reserved">this</span>.getStyle(b[s]), 10);
|
|
<span class="reserved">if</span>(!isNaN(w)) pad += w;
|
|
}
|
|
}
|
|
}
|
|
<span class="reserved">return</span> pad;
|
|
},
|
|
|
|
<span class="comment">/**
|
|
* Set positioning with an object returned by {<span class="attrib">@link</span> #getPositioning}.
|
|
*/</span>
|
|
setPositioning : <span class="reserved">function</span>(positionCfg){
|
|
<span class="reserved">this</span>.setStyle(<span class="literal">'position'</span>, positionCfg.position);
|
|
<span class="reserved">this</span>.setStyle(<span class="literal">'left'</span>, positionCfg.left);
|
|
<span class="reserved">this</span>.setStyle(<span class="literal">'right'</span>, positionCfg.right);
|
|
<span class="reserved">this</span>.setStyle(<span class="literal">'top'</span>, positionCfg.top);
|
|
<span class="reserved">this</span>.setStyle(<span class="literal">'bottom'</span>, positionCfg.bottom);
|
|
},
|
|
|
|
<span class="comment">/**
|
|
* Move this element relative to it's current position.
|
|
* <span class="attrib">@param</span> {String} direction Possible values are: 'left', 'right', 'up', 'down'.
|
|
* <span class="attrib">@param</span> {Number} distance How far to move the element in pixels
|
|
* <span class="attrib">@param</span> {<i>Boolean</i>} animate (optional) Animate the movement (Default is false)
|
|
* <span class="attrib">@param</span> {<i>Float</i>} duration (optional) How long the animation lasts. (Defaults to .35 seconds)
|
|
* <span class="attrib">@param</span> {<i>Function</i>} onComplete (optional) Function to call when animation completes.
|
|
* <span class="attrib">@param</span> {<i>Function</i>} easing (optional) YAHOO.util.Easing method to use.
|
|
*/</span>
|
|
move : <span class="reserved">function</span>(direction, distance, animate, duration, onComplete, easing){
|
|
var xy = <span class="reserved">this</span>.getXY();
|
|
direction = direction.toLowerCase();
|
|
switch(direction){
|
|
case <span class="literal">'left'</span>:
|
|
<span class="reserved">this</span>.moveTo(xy[0]-distance, xy[1], animate, duration, onComplete, easing);
|
|
<span class="reserved">return</span>;
|
|
case <span class="literal">'right'</span>:
|
|
<span class="reserved">this</span>.moveTo(xy[0]+distance, xy[1], animate, duration, onComplete, easing);
|
|
<span class="reserved">return</span>;
|
|
case <span class="literal">'up'</span>:
|
|
<span class="reserved">this</span>.moveTo(xy[0], xy[1]-distance, animate, duration, onComplete, easing);
|
|
<span class="reserved">return</span>;
|
|
case <span class="literal">'down'</span>:
|
|
<span class="reserved">this</span>.moveTo(xy[0], xy[1]+distance, animate, duration, onComplete, easing);
|
|
<span class="reserved">return</span>;
|
|
}
|
|
},
|
|
|
|
<span class="comment">/**
|
|
* Clip overflow on the element - use {<span class="attrib">@link</span> #unclip} to remove
|
|
*/</span>
|
|
clip : <span class="reserved">function</span>(){
|
|
<span class="reserved">this</span>.setStyle(<span class="literal">'overflow'</span>, <span class="literal">'hidden'</span>);
|
|
},
|
|
|
|
<span class="comment">/**
|
|
* Return clipping (overflow) to original clipping when the document loaded
|
|
*/</span>
|
|
unclip : <span class="reserved">function</span>(){
|
|
<span class="reserved">this</span>.setStyle(<span class="literal">'overflow'</span>, <span class="reserved">this</span>.originalClip);
|
|
},
|
|
|
|
<span class="comment">/**
|
|
* Align this element with another element.
|
|
* <span class="attrib">@param</span> {String/HTMLElement/YAHOO.ext.Element} element The element to align to.
|
|
* <span class="attrib">@param</span> {String} position The position to align to. Possible values are 'tl' - top left, 'tr' - top right, 'bl' - bottom left, and 'br' - bottom right.
|
|
* <span class="attrib">@param</span> {<i>Array</i>} offsets (optional) Offset the positioning by [x, y]
|
|
* <span class="attrib">@param</span> {<i>Boolean</i>} animate (optional) Animate the movement (Default is false)
|
|
* <span class="attrib">@param</span> {<i>Float</i>} duration (optional) How long the animation lasts. (Defaults to .35 seconds)
|
|
* <span class="attrib">@param</span> {<i>Function</i>} onComplete (optional) Function to call when animation completes.
|
|
* <span class="attrib">@param</span> {<i>Function</i>} easing (optional) YAHOO.util.Easing method to use.
|
|
*/</span>
|
|
alignTo : <span class="reserved">function</span>(element, position, offsets, animate, duration, onComplete, easing){
|
|
var otherEl = getEl(element);
|
|
<span class="reserved">if</span>(!otherEl){
|
|
<span class="reserved">return</span>; <span class="comment">// must not exist</span>
|
|
}
|
|
offsets = offsets || [0, 0];
|
|
var r = otherEl.getRegion();
|
|
position = position.toLowerCase();
|
|
switch(position){
|
|
case <span class="literal">'bl'</span>:
|
|
<span class="reserved">this</span>.moveTo(r.left + offsets[0], r.bottom + offsets[1],
|
|
animate, duration, onComplete, easing);
|
|
<span class="reserved">return</span>;
|
|
case <span class="literal">'br'</span>:
|
|
<span class="reserved">this</span>.moveTo(r.right + offsets[0], r.bottom + offsets[1],
|
|
animate, duration, onComplete, easing);
|
|
<span class="reserved">return</span>;
|
|
case <span class="literal">'tl'</span>:
|
|
<span class="reserved">this</span>.moveTo(r.left + offsets[0], r.top + offsets[1],
|
|
animate, duration, onComplete, easing);
|
|
<span class="reserved">return</span>;
|
|
case <span class="literal">'tr'</span>:
|
|
<span class="reserved">this</span>.moveTo(r.right + offsets[0], r.top + offsets[1],
|
|
animate, duration, onComplete, easing);
|
|
<span class="reserved">return</span>;
|
|
}
|
|
},
|
|
|
|
<span class="comment">/**
|
|
* Clears any opacity settings from this element. Required in some cases for IE.
|
|
*/</span>
|
|
clearOpacity : <span class="reserved">function</span>(){
|
|
<span class="reserved">if</span> (window.ActiveXObject) {
|
|
<span class="reserved">this</span>.dom.style.filter = <span class="literal">''</span>;
|
|
} <span class="reserved">else</span> {
|
|
<span class="reserved">this</span>.dom.style.opacity = <span class="literal">''</span>;
|
|
<span class="reserved">this</span>.dom.style[<span class="literal">'-moz-opacity'</span>] = <span class="literal">''</span>;
|
|
<span class="reserved">this</span>.dom.style[<span class="literal">'-khtml-opacity'</span>] = <span class="literal">''</span>;
|
|
}
|
|
},
|
|
|
|
<span class="comment">/**
|
|
* Hide this element - Uses display mode to determine whether to use "display" or "visibility". See {<span class="attrib">@link</span> #setVisible}.
|
|
* <span class="attrib">@param</span> {<i>Boolean</i>} animate (optional) Animate (fade) the transition (Default is false)
|
|
* <span class="attrib">@param</span> {<i>Float</i>} duration (optional) How long the animation lasts. (Defaults to .35 seconds)
|
|
* <span class="attrib">@param</span> {<i>Function</i>} onComplete (optional) Function to call when animation completes.
|
|
* <span class="attrib">@param</span> {<i>Function</i>} easing (optional) YAHOO.util.Easing method to use. (Defaults to YAHOO.util.Easing.easeBoth)
|
|
*/</span>
|
|
hide : <span class="reserved">function</span>(animate, duration, onComplete, easing){
|
|
<span class="reserved">this</span>.setVisible(false, animate, duration, onComplete, easing);
|
|
},
|
|
|
|
<span class="comment">/**
|
|
* Show this element - Uses display mode to determine whether to use "display" or "visibility". See {<span class="attrib">@link</span> #setVisible}.
|
|
* <span class="attrib">@param</span> {<i>Boolean</i>} animate (optional) Animate (fade in) the transition (Default is false)
|
|
* <span class="attrib">@param</span> {<i>Float</i>} duration (optional) How long the animation lasts. (Defaults to .35 seconds)
|
|
* <span class="attrib">@param</span> {<i>Function</i>} onComplete (optional) Function to call when animation completes.
|
|
* <span class="attrib">@param</span> {<i>Function</i>} easing (optional) YAHOO.util.Easing method to use. (Defaults to YAHOO.util.Easing.easeBoth)
|
|
*/</span>
|
|
show : <span class="reserved">function</span>(animate, duration, onComplete, easing){
|
|
<span class="reserved">this</span>.setVisible(true, animate, duration, onComplete, easing);
|
|
},
|
|
|
|
<span class="comment">/**
|
|
* <span class="attrib">@private</span> Test if size has a unit, otherwise appends the default
|
|
*/</span>
|
|
addUnits : <span class="reserved">function</span>(size){
|
|
<span class="reserved">if</span>(typeof size == <span class="literal">'number'</span> || !YAHOO.ext.Element.unitPattern.test(size)){
|
|
<span class="reserved">return</span> size + <span class="reserved">this</span>.defaultUnit;
|
|
}
|
|
<span class="reserved">return</span> size;
|
|
},
|
|
|
|
beginMeasure : <span class="reserved">function</span>(){
|
|
var p = <span class="reserved">this</span>.dom;
|
|
<span class="reserved">if</span>(p.offsetWidth || p.offsetHeight){
|
|
<span class="reserved">return</span>; <span class="comment">// offsets work already</span>
|
|
}
|
|
var changed = [];
|
|
var p = <span class="reserved">this</span>.dom; <span class="comment">// start with this element</span>
|
|
<span class="reserved">while</span>(p && p.tagName.toLowerCase() != <span class="literal">'body'</span>){
|
|
<span class="reserved">if</span>(YAHOO.util.Dom.getStyle(p, <span class="literal">'display'</span>) == <span class="literal">'none'</span>){
|
|
changed.push({el: p, visibility: YAHOO.util.Dom.getStyle(p, <span class="literal">'visibility'</span>)});
|
|
p.style.visibility = <span class="literal">'hidden'</span>;
|
|
p.style.display = <span class="literal">'block'</span>;
|
|
}
|
|
p = p.parentNode;
|
|
}
|
|
<span class="reserved">this</span>._measureChanged = changed;
|
|
},
|
|
|
|
endMeasure : <span class="reserved">function</span>(){
|
|
var changed = <span class="reserved">this</span>._measureChanged;
|
|
<span class="reserved">if</span>(changed){
|
|
<span class="reserved">for</span>(var i = 0, len = changed.length; i < len; i++) {
|
|
var r = changed[i];
|
|
r.el.style.visibility = r.visibility;
|
|
r.el.style.display = <span class="literal">'none'</span>;
|
|
}
|
|
<span class="reserved">this</span>._measureChanged = null;
|
|
}
|
|
},
|
|
<span class="comment">/**
|
|
* Update the innerHTML of this element, optionally searching for and processing scripts
|
|
* <span class="attrib">@param</span> {String} html The new HTML
|
|
* <span class="attrib">@param</span> {<i>Boolean</i>} loadScripts (optional) true to look for and process scripts
|
|
*/</span>
|
|
update : <span class="reserved">function</span>(html, loadScripts){
|
|
<span class="reserved">this</span>.dom.innerHTML = html;
|
|
<span class="reserved">if</span>(!loadScripts) <span class="reserved">return</span>;
|
|
|
|
var dom = <span class="reserved">this</span>.dom;
|
|
var _parseScripts = <span class="reserved">function</span>(){
|
|
var s = <span class="reserved">this</span>.dom.getElementsByTagName(<span class="literal">"script"</span>);
|
|
var docHead = document.getElementsByTagName(<span class="literal">"head"</span>)[0];
|
|
|
|
<span class="comment">// For browsers which discard scripts when inserting innerHTML, extract the scripts using a RegExp</span>
|
|
<span class="reserved">if</span>(s.length == 0){
|
|
var re = /(?:<script.*(?:src=[\<span class="literal">"\'](.*)[\"</span>\<span class="literal">']).*>.*<\/script>)|(?:<script.*>([\S\s]*?)<\/script>)/ig; // assumes HTML well formed and then loop through it.
|
|
var match;
|
|
while(match = re.exec(html)){
|
|
var s0 = document.createElement("script");
|
|
if (match[1])
|
|
s0.src = match[1];
|
|
else if (match[2])
|
|
s0.text = match[2];
|
|
else
|
|
continue;
|
|
docHead.appendChild(s0);
|
|
}
|
|
}else {
|
|
for(var i = 0; i < s.length; i++){
|
|
var s0 = document.createElement("script");
|
|
s0.type = s[i].type;
|
|
if (s[i].text) {
|
|
s0.text = s[i].text;
|
|
} else {
|
|
s0.src = s[i].src;
|
|
}
|
|
docHead.appendChild(s0);
|
|
}
|
|
}
|
|
}
|
|
// set timeout to give DOM opportunity to catch up
|
|
setTimeout(_parseScripts, 10);
|
|
},
|
|
|
|
/**
|
|
* Gets this elements UpdateManager
|
|
* @return The UpdateManager
|
|
* @type YAHOO.ext.UpdateManager
|
|
*/
|
|
getUpdateManager : function(){
|
|
if(!this.updateManager){
|
|
this.updateManager = new YAHOO.ext.UpdateManager(this);
|
|
}
|
|
return this.updateManager;
|
|
},
|
|
|
|
/**
|
|
* Calculates the x, y to center this element on the screen
|
|
* @return {Array} The x, y values [x, y]
|
|
*/
|
|
getCenterXY : function(offsetScroll){
|
|
var centerX = Math.round((YAHOO.util.Dom.getViewportWidth()-this.getWidth())/2);
|
|
var centerY = Math.round((YAHOO.util.Dom.getViewportHeight()-this.getHeight())/2);
|
|
if(!offsetScroll){
|
|
return [centerX, centerY];
|
|
}else{
|
|
var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft || 0;
|
|
var scrollY = document.documentElement.scrollTop || document.body.scrollTop || 0;
|
|
return[centerX + scrollX, centerY + scrollY];
|
|
}
|
|
},
|
|
/**
|
|
* Gets an array of child YAHOO.ext.Element objects by tag name
|
|
* @param {String} tagName
|
|
* @return {Array} The children
|
|
*/
|
|
getChildrenByTagName : function(tagName){
|
|
var children = this.dom.getElementsByTagName(tagName);
|
|
var len = children.length;
|
|
var ce = [len];
|
|
for(var i = 0; i < len; ++i){
|
|
ce[i] = YAHOO.ext.Element.get(children[i], true);
|
|
}
|
|
return ce;
|
|
},
|
|
|
|
/**
|
|
* Gets an array of child YAHOO.ext.Element objects by class name and optional tagName
|
|
* @param {String} className
|
|
* @param {<i>String</i>} tagName (optional)
|
|
* @return {Array} The children
|
|
*/
|
|
getChildrenByClassName : function(className, tagName){
|
|
var children = YAHOO.util.Dom.getElementsByClassName(className, tagName, this.dom);
|
|
var len = children.length;
|
|
var ce = [len];
|
|
for(var i = 0; i < len; ++i){
|
|
ce[i] = YAHOO.ext.Element.get(children[i], true);
|
|
}
|
|
return ce;
|
|
},
|
|
|
|
/**
|
|
* Tests various css rules/browsers to determine if this element uses a border box
|
|
*/
|
|
isBorderBox : function(){
|
|
var el = this.dom;
|
|
var b = YAHOO.ext.util.Browser;
|
|
var strict = YAHOO.ext.Strict;
|
|
return((b.isIE && !b.isIE7) || (b.isIE7 && !strict && el.style.boxSizing != '</span>content-box<span class="literal">') ||
|
|
(b.isGecko && YAHOO.util.Dom.getStyle(el, "-moz-box-sizing") == '</span>border-box<span class="literal">') ||
|
|
(!b.isSafari && YAHOO.util.Dom.getStyle(el, "box-sizing") == '</span>border-box<span class="literal">'));
|
|
},
|
|
|
|
/**
|
|
* Return a box {x, y, width, height} that can be used to set another elements
|
|
* size to match this element. If contentBox is true, a box for the content
|
|
* of the element is returned.
|
|
*/
|
|
getBox : function(contentBox){
|
|
var xy = this.getXY();
|
|
var el = this.dom;
|
|
var w = el.offsetWidth;
|
|
var h = el.offsetHeight;
|
|
if(!contentBox){
|
|
return {x: xy[0], y: xy[1], width: w, height: h};
|
|
}else{
|
|
var l = this.getBorderWidth('</span>l<span class="literal">')+this.getPadding('</span>l<span class="literal">');
|
|
var r = this.getBorderWidth('</span>r<span class="literal">')+this.getPadding('</span>r<span class="literal">');
|
|
var t = this.getBorderWidth('</span>t<span class="literal">')+this.getPadding('</span>t<span class="literal">');
|
|
var b = this.getBorderWidth('</span>b<span class="literal">')+this.getPadding('</span>b<span class="literal">');
|
|
return {x: xy[0]+l, y: xy[1]+t, width: w-(l+r), height: h-(t+b)};
|
|
}
|
|
},
|
|
|
|
/**
|
|
* Sets the element'</span>s box. Use getBox() on another element to get a box obj. If animate is true then width, height, x and y will be animated concurrently.
|
|
* @param {Object} box The box to fill {x, y, width, height}
|
|
* @param {<i>Boolean</i>} adjust (optional) Whether to adjust <span class="reserved">for</span> box-model issues automatically
|
|
* @param {<i>Boolean</i>} animate (optional) Animate the transition (Default is false)
|
|
* @param {<i>float</i>} duration (optional) How long the animation lasts. (Defaults to .35 seconds)
|
|
* @param {<i>Function</i>} onComplete (optional) Function to call when animation completes.
|
|
* @param {<i>Function</i>} easing (optional) YAHOO.util.Easing method to use. (Defaults to YAHOO.util.Easing.easeBoth)
|
|
*/
|
|
setBox : <span class="reserved">function</span>(box, adjust, animate, duration, onComplete, easing){
|
|
var w = box.width, h = box.height;
|
|
<span class="reserved">if</span>((adjust && !<span class="reserved">this</span>.autoBoxAdjust) && !<span class="reserved">this</span>.isBorderBox()){
|
|
w -= (<span class="reserved">this</span>.getBorderWidth(<span class="literal">'lr'</span>) + <span class="reserved">this</span>.getPadding(<span class="literal">'lr'</span>));
|
|
h -= (<span class="reserved">this</span>.getBorderWidth(<span class="literal">'tb'</span>) + <span class="reserved">this</span>.getPadding(<span class="literal">'tb'</span>));
|
|
}
|
|
<span class="reserved">this</span>.setBounds(box.x, box.y, w, h, animate, duration, onComplete, easing);
|
|
}
|
|
};
|
|
|
|
<span class="comment">/**
|
|
* Whether to automatically adjust width and height settings for box-model issues
|
|
*/</span>
|
|
YAHOO.ext.Element.<span class="reserved">prototype</span>.autoBoxAdjust = true;
|
|
|
|
<span class="comment">/**
|
|
* <span class="attrib">@private</span> Used to check if a value has a unit
|
|
*/</span>
|
|
YAHOO.ext.Element.unitPattern = /\d+(px|em|%|en|ex|pt|in|cm|mm|pc)$/i;
|
|
<span class="comment">/**
|
|
* Visibility mode constant - Use visibility to hide element
|
|
* <span class="attrib">@type</span> Number
|
|
*/</span>
|
|
YAHOO.ext.Element.VISIBILITY = 1;
|
|
<span class="comment">/**
|
|
* Visibility mode constant - Use display to hide element
|
|
* <span class="attrib">@type</span> Number
|
|
*/</span>
|
|
YAHOO.ext.Element.DISPLAY = 2;
|
|
|
|
<span class="comment">/** <span class="attrib">@ignore</span> */</span>
|
|
YAHOO.ext.Element.borders = {l: <span class="literal">'border-left-width'</span>, r: <span class="literal">'border-right-width'</span>, t: <span class="literal">'border-top-width'</span>, b: <span class="literal">'border-bottom-width'</span>};
|
|
<span class="comment">/** <span class="attrib">@ignore</span> */</span>
|
|
YAHOO.ext.Element.paddings = {l: <span class="literal">'padding-left'</span>, r: <span class="literal">'padding-right'</span>, t: <span class="literal">'padding-top'</span>, b: <span class="literal">'padding-bottom'</span>};
|
|
|
|
<span class="comment">/**
|
|
* <span class="attrib">@private</span> Call out to here so we make minimal closure
|
|
*/</span>
|
|
YAHOO.ext.Element.createStopHandler = <span class="reserved">function</span>(stopPropagation, handler, scope, override){
|
|
<span class="reserved">return</span> <span class="reserved">function</span>(e){
|
|
<span class="reserved">if</span>(e){
|
|
<span class="reserved">if</span>(stopPropagation){
|
|
YAHOO.util.Event.stopEvent(e);
|
|
}<span class="reserved">else</span> {
|
|
YAHOO.util.Event.preventDefault(e);
|
|
}
|
|
}
|
|
handler.call(override && scope ? scope : window, e, scope);
|
|
};
|
|
};
|
|
|
|
<span class="comment">/**
|
|
* <span class="attrib">@private</span>
|
|
*/</span>
|
|
YAHOO.ext.Element.cache = {};
|
|
|
|
<span class="comment">/**
|
|
* Static method to retreive Element objects. Uses simple caching to consistently return the same object.
|
|
* Automatically fixes if an object was recreated with the same id via AJAX or DOM.
|
|
* <span class="attrib">@param</span> {String/HTMLElement/Element} el The id of the element or the element to wrap (must have an id). If you pass in an element, it is returned
|
|
* <span class="attrib">@param</span> {<i>Boolean</i>} autoGenerateId (optional) Set this flag to true if you are passing an element without an id (like document.body). It will auto generate an id if one isn't present.
|
|
* <span class="attrib">@return</span> {Element} The element object
|
|
*/</span>
|
|
YAHOO.ext.Element.get = <span class="reserved">function</span>(el, autoGenerateId){
|
|
<span class="reserved">if</span>(!el){ <span class="reserved">return</span> null; }
|
|
<span class="reserved">if</span>(el instanceof YAHOO.ext.Element){
|
|
el.dom = YAHOO.util.Dom.get(el.id); <span class="comment">// refresh dom element in case no longer valid</span>
|
|
YAHOO.ext.Element.cache[el.id] = el; <span class="comment">// in case it was created directly with Element(), let's cache it</span>
|
|
<span class="reserved">return</span> el;
|
|
}
|
|
var key = el;
|
|
<span class="reserved">if</span>(typeof el != <span class="literal">'string'</span>){ <span class="comment">// must be an element</span>
|
|
<span class="reserved">if</span>(!el.id && !autoGenerateId){ <span class="reserved">return</span> null; }
|
|
YAHOO.util.Dom.generateId(el, <span class="literal">'elgen-'</span>);
|
|
key = el.id;
|
|
}
|
|
var element = YAHOO.ext.Element.cache[key];
|
|
<span class="reserved">if</span>(!element){
|
|
element = new YAHOO.ext.Element(key);
|
|
YAHOO.ext.Element.cache[key] = element;
|
|
}<span class="reserved">else</span>{
|
|
element.dom = YAHOO.util.Dom.get(key);
|
|
}
|
|
<span class="reserved">return</span> element;
|
|
};
|
|
|
|
<span class="comment">/**
|
|
* Shorthand function for YAHOO.ext.Element.get()
|
|
*/</span>
|
|
var getEl = YAHOO.ext.Element.get;
|
|
|
|
<span class="comment">// clean up refs</span>
|
|
YAHOO.util.Event.addListener(window, <span class="literal">'unload'</span>, <span class="reserved">function</span>(){ YAHOO.ext.Element.cache = null; });</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>
|