Usage: var myAnim = new YAHOO.util.Anim(el, { width: { from: 10, to: 100 } }, 1, YAHOO.util.Easing.easeOut);
* @class Anim
* @namespace YAHOO.util
* @requires YAHOO.util.AnimMgr
* @requires YAHOO.util.Easing
* @requires YAHOO.util.Dom
* @requires YAHOO.util.Event
* @requires YAHOO.util.CustomEvent
* @constructor
* @param {String | HTMLElement} el Reference to the element that will be animated
* @param {Object} attributes The attribute(s) to be animated.
* Each attribute is an object with at minimum a "to" or "by" member defined.
* Additional optional members are "from" (defaults to current value), "units" (defaults to "px").
* All attribute names use camelCase.
* @param {Number} duration (optional, defaults to 1 second) Length of animation (frames or seconds), defaults to time-based
* @param {Function} method (optional, defaults to YAHOO.util.Easing.easeNone) Computes the values that are applied to the attributes per frame (generally a YAHOO.util.Easing method)
*/
YAHOO.util.Anim = function(el, attributes, duration, method) {
if (!el) {
}
this.init(el, attributes, duration, method);
};
YAHOO.util.Anim.prototype = {
/**
* Provides a readable name for the Anim instance.
* @method toString
* @return {String}
*/
toString: function() {
var el = this.getEl();
var id = el.id || el.tagName || el;
return ("Anim " + id);
},
patterns: { // cached for performance
noNegatives: /width|height|opacity|padding/i, // keep at zero or above
offsetAttribute: /^((width|height)|(top|left))$/, // use offsetValue as default
defaultUnit: /width|height|top$|bottom$|left$|right$/i, // use 'px' by default
offsetUnit: /\d+(em|%|en|ex|pt|in|cm|mm|pc)$/i // IE may return these, so convert these to offset
},
/**
* Returns the value computed by the animation's "method".
* @method doMethod
* @param {String} attr The name of the attribute.
* @param {Number} start The value this attribute should start from for this animation.
* @param {Number} end The value this attribute should end at for this animation.
* @return {Number} The Value to be applied to the attribute.
*/
doMethod: function(attr, start, end) {
return this.method(this.currentFrame, start, end - start, this.totalFrames);
},
/**
* Applies a value to an attribute.
* @method setAttribute
* @param {String} attr The name of the attribute.
* @param {Number} val The value to be applied to the attribute.
* @param {String} unit The unit ('px', '%', etc.) of the value.
*/
setAttribute: function(attr, val, unit) {
if ( this.patterns.noNegatives.test(attr) ) {
val = (val > 0) ? val : 0;
}
YAHOO.util.Dom.setStyle(this.getEl(), attr, val + unit);
},
/**
* Returns current value of the attribute.
* @method getAttribute
* @param {String} attr The name of the attribute.
* @return {Number} val The current value of the attribute.
*/
getAttribute: function(attr) {
var el = this.getEl();
var val = YAHOO.util.Dom.getStyle(el, attr);
if (val !== 'auto' && !this.patterns.offsetUnit.test(val)) {
return parseFloat(val);
}
var a = this.patterns.offsetAttribute.exec(attr) || [];
var pos = !!( a[3] ); // top or left
var box = !!( a[2] ); // width or height
// use offsets for width/height and abs pos top/left
if ( box || (YAHOO.util.Dom.getStyle(el, 'position') == 'absolute' && pos) ) {
val = el['offset' + a[0].charAt(0).toUpperCase() + a[0].substr(1)];
} else { // default to zero for other 'auto'
val = 0;
}
return val;
},
/**
* Returns the unit to use when none is supplied.
* @method getDefaultUnit
* @param {attr} attr The name of the attribute.
* @return {String} The default unit to be used.
*/
getDefaultUnit: function(attr) {
if ( this.patterns.defaultUnit.test(attr) ) {
return 'px';
}
return '';
},
/**
* Sets the actual values to be used during the animation. Should only be needed for subclass use.
* @method setRuntimeAttribute
* @param {Object} attr The attribute object
* @private
*/
setRuntimeAttribute: function(attr) {
var start;
var end;
var attributes = this.attributes;
this.runtimeAttributes[attr] = {};
var isset = function(prop) {
return (typeof prop !== 'undefined');
};
if ( !isset(attributes[attr]['to']) && !isset(attributes[attr]['by']) ) {
return false; // note return; nothing to animate to
}
start = ( isset(attributes[attr]['from']) ) ? attributes[attr]['from'] : this.getAttribute(attr);
// To beats by, per SMIL 2.1 spec
if ( isset(attributes[attr]['to']) ) {
end = attributes[attr]['to'];
} else if ( isset(attributes[attr]['by']) ) {
if (start.constructor == Array) {
end = [];
for (var i = 0, len = start.length; i < len; ++i) {
end[i] = start[i] + attributes[attr]['by'][i] * 1; // times 1 to cast "by"
}
} else {
end = start + attributes[attr]['by'] * 1;
}
}
this.runtimeAttributes[attr].start = start;
this.runtimeAttributes[attr].end = end;
// set units if needed
this.runtimeAttributes[attr].unit = ( isset(attributes[attr].unit) ) ?
attributes[attr]['unit'] : this.getDefaultUnit(attr);
return true;
},
/**
* Constructor for Anim instance.
* @method init
* @param {String | HTMLElement} el Reference to the element that will be animated
* @param {Object} attributes The attribute(s) to be animated.
* Each attribute is an object with at minimum a "to" or "by" member defined.
* Additional optional members are "from" (defaults to current value), "units" (defaults to "px").
* All attribute names use camelCase.
* @param {Number} duration (optional, defaults to 1 second) Length of animation (frames or seconds), defaults to time-based
* @param {Function} method (optional, defaults to YAHOO.util.Easing.easeNone) Computes the values that are applied to the attributes per frame (generally a YAHOO.util.Easing method)
*/
init: function(el, attributes, duration, method) {
/**
* Whether or not the animation is running.
* @property isAnimated
* @private
* @type Boolean
*/
var isAnimated = false;
/**
* A Date object that is created when the animation begins.
* @property startTime
* @private
* @type Date
*/
var startTime = null;
/**
* The number of frames this animation was able to execute.
* @property actualFrames
* @private
* @type Int
*/
var actualFrames = 0;
/**
* The element to be animated.
* @property el
* @private
* @type HTMLElement
*/
el = YAHOO.util.Dom.get(el);
/**
* The collection of attributes to be animated.
* Each attribute must have at least a "to" or "by" defined in order to animate.
* If "to" is supplied, the animation will end with the attribute at that value.
* If "by" is supplied, the animation will end at that value plus its starting value.
* If both are supplied, "to" is used, and "by" is ignored.
* Optional additional member include "from" (the value the attribute should start animating from, defaults to current value), and "unit" (the units to apply to the values).
* @property attributes
* @type Object
*/
this.attributes = attributes || {};
/**
* The length of the animation. Defaults to "1" (second).
* @property duration
* @type Number
*/
this.duration = !YAHOO.lang.isUndefined(duration) ? duration : 1;
/**
* The method that will provide values to the attribute(s) during the animation.
* Defaults to "YAHOO.util.Easing.easeNone".
* @property method
* @type Function
*/
this.method = method || YAHOO.util.Easing.easeNone;
/**
* Whether or not the duration should be treated as seconds.
* Defaults to true.
* @property useSeconds
* @type Boolean
*/
this.useSeconds = true; // default to seconds
/**
* The location of the current animation on the timeline.
* In time-based animations, this is used by AnimMgr to ensure the animation finishes on time.
* @property currentFrame
* @type Int
*/
this.currentFrame = 0;
/**
* The total number of frames to be executed.
* In time-based animations, this is used by AnimMgr to ensure the animation finishes on time.
* @property totalFrames
* @type Int
*/
this.totalFrames = YAHOO.util.AnimMgr.fps;
/**
* Changes the animated element
* @method setEl
*/
this.setEl = function(element) {
el = YAHOO.util.Dom.get(element);
};
/**
* Returns a reference to the animated element.
* @method getEl
* @return {HTMLElement}
*/
this.getEl = function() { return el; };
/**
* Checks whether the element is currently animated.
* @method isAnimated
* @return {Boolean} current value of isAnimated.
*/
this.isAnimated = function() {
return isAnimated;
};
/**
* Returns the animation start time.
* @method getStartTime
* @return {Date} current value of startTime.
*/
this.getStartTime = function() {
return startTime;
};
this.runtimeAttributes = {};
/**
* Starts the animation by registering it with the animation manager.
* @method animate
*/
this.animate = function() {
if ( this.isAnimated() ) {
return false;
}
this.currentFrame = 0;
this.totalFrames = ( this.useSeconds ) ? Math.ceil(YAHOO.util.AnimMgr.fps * this.duration) : this.duration;
if (this.duration === 0 && this.useSeconds) {
this.totalFrames = 1; // jump to last frame if no duration
}
YAHOO.util.AnimMgr.registerElement(this);
return true;
};
/**
* Stops the animation. Normally called by AnimMgr when animation completes.
* @method stop
* @param {Boolean} finish (optional) If true, animation will jump to final frame.
*/
this.stop = function(finish) {
if (finish) {
this.currentFrame = this.totalFrames;
this._onTween.fire();
}
YAHOO.util.AnimMgr.stop(this);
};
var onStart = function() {
this.onStart.fire();
this.runtimeAttributes = {};
for (var attr in this.attributes) {
this.setRuntimeAttribute(attr);
}
isAnimated = true;
actualFrames = 0;
startTime = new Date();
};
/**
* Feeds the starting and ending values for each animated attribute to doMethod once per frame, then applies the resulting value to the attribute(s).
* @private
*/
var onTween = function() {
var data = {
duration: new Date() - this.getStartTime(),
currentFrame: this.currentFrame
};
data.toString = function() {
return (
'duration: ' + data.duration +
', currentFrame: ' + data.currentFrame
);
};
this.onTween.fire(data);
var runtimeAttributes = this.runtimeAttributes;
for (var attr in runtimeAttributes) {
this.setAttribute(attr, this.doMethod(attr, runtimeAttributes[attr].start, runtimeAttributes[attr].end), runtimeAttributes[attr].unit);
}
actualFrames += 1;
};
var onComplete = function() {
var actual_duration = (new Date() - startTime) / 1000 ;
var data = {
duration: actual_duration,
frames: actualFrames,
fps: actualFrames / actual_duration
};
data.toString = function() {
return (
'duration: ' + data.duration +
', frames: ' + data.frames +
', fps: ' + data.fps
);
};
isAnimated = false;
actualFrames = 0;
this.onComplete.fire(data);
};
/**
* Custom event that fires after onStart, useful in subclassing
* @private
*/
this._onStart = new YAHOO.util.CustomEvent('_start', this, true);
/**
* Custom event that fires when animation begins
* Listen via subscribe method (e.g. myAnim.onStart.subscribe(someFunction)
* @event onStart
*/
this.onStart = new YAHOO.util.CustomEvent('start', this);
/**
* Custom event that fires between each frame
* Listen via subscribe method (e.g. myAnim.onTween.subscribe(someFunction)
* @event onTween
*/
this.onTween = new YAHOO.util.CustomEvent('tween', this);
/**
* Custom event that fires after onTween
* @private
*/
this._onTween = new YAHOO.util.CustomEvent('_tween', this, true);
/**
* Custom event that fires when animation ends
* Listen via subscribe method (e.g. myAnim.onComplete.subscribe(someFunction)
* @event onComplete
*/
this.onComplete = new YAHOO.util.CustomEvent('complete', this);
/**
* Custom event that fires after onComplete
* @private
*/
this._onComplete = new YAHOO.util.CustomEvent('_complete', this, true);
this._onStart.subscribe(onStart);
this._onTween.subscribe(onTween);
this._onComplete.subscribe(onComplete);
}
};
/**
* Handles animation queueing and threading.
* Used by Anim and subclasses.
* @class AnimMgr
* @namespace YAHOO.util
*/
YAHOO.util.AnimMgr = new function() {
/**
* Reference to the animation Interval.
* @property thread
* @private
* @type Int
*/
var thread = null;
/**
* The current queue of registered animation objects.
* @property queue
* @private
* @type Array
*/
var queue = [];
/**
* The number of active animations.
* @property tweenCount
* @private
* @type Int
*/
var tweenCount = 0;
/**
* Base frame rate (frames per second).
* Arbitrarily high for better x-browser calibration (slower browsers drop more frames).
* @property fps
* @type Int
*
*/
this.fps = 1000;
/**
* Interval delay in milliseconds, defaults to fastest possible.
* @property delay
* @type Int
*
*/
this.delay = 1;
/**
* Adds an animation instance to the animation queue.
* All animation instances must be registered in order to animate.
* @method registerElement
* @param {object} tween The Anim instance to be be registered
*/
this.registerElement = function(tween) {
queue[queue.length] = tween;
tweenCount += 1;
tween._onStart.fire();
this.start();
};
/**
* removes an animation instance from the animation queue.
* All animation instances must be registered in order to animate.
* @method unRegister
* @param {object} tween The Anim instance to be be registered
* @param {Int} index The index of the Anim instance
* @private
*/
this.unRegister = function(tween, index) {
tween._onComplete.fire();
index = index || getIndex(tween);
if (index == -1) {
return false;
}
queue.splice(index, 1);
tweenCount -= 1;
if (tweenCount <= 0) {
this.stop();
}
return true;
};
/**
* Starts the animation thread.
* Only one thread can run at a time.
* @method start
*/
this.start = function() {
if (thread === null) {
thread = setInterval(this.run, this.delay);
}
};
/**
* Stops the animation thread or a specific animation instance.
* @method stop
* @param {object} tween A specific Anim instance to stop (optional)
* If no instance given, Manager stops thread and all animations.
*/
this.stop = function(tween) {
if (!tween) {
clearInterval(thread);
for (var i = 0, len = queue.length; i < len; ++i) {
if ( queue[0].isAnimated() ) {
this.unRegister(queue[0], 0);
}
}
queue = [];
thread = null;
tweenCount = 0;
}
else {
this.unRegister(tween);
}
};
/**
* Called per Interval to handle each animation frame.
* @method run
*/
this.run = function() {
for (var i = 0, len = queue.length; i < len; ++i) {
var tween = queue[i];
if ( !tween || !tween.isAnimated() ) { continue; }
if (tween.currentFrame < tween.totalFrames || tween.totalFrames === null)
{
tween.currentFrame += 1;
if (tween.useSeconds) {
correctFrame(tween);
}
tween._onTween.fire();
}
else { YAHOO.util.AnimMgr.stop(tween, i); }
}
};
var getIndex = function(anim) {
for (var i = 0, len = queue.length; i < len; ++i) {
if (queue[i] == anim) {
return i; // note return;
}
}
return -1;
};
/**
* On the fly frame correction to keep animation on time.
* @method correctFrame
* @private
* @param {Object} tween The Anim instance being corrected.
*/
var correctFrame = function(tween) {
var frames = tween.totalFrames;
var frame = tween.currentFrame;
var expected = (tween.currentFrame * tween.duration * 1000 / tween.totalFrames);
var elapsed = (new Date() - tween.getStartTime());
var tweak = 0;
if (elapsed < tween.duration * 1000) { // check if falling behind
tweak = Math.round((elapsed / expected - 1) * tween.currentFrame);
} else { // went over duration, so jump to end
tweak = frames - (frame + 1);
}
if (tweak > 0 && isFinite(tweak)) { // adjust if needed
if (tween.currentFrame + tweak >= frames) {// dont go past last frame
tweak = frames - (frame + 1);
}
tween.currentFrame += tweak;
}
};
};
/**
* Used to calculate Bezier splines for any number of control points.
* @class Bezier
* @namespace YAHOO.util
*
*/
YAHOO.util.Bezier = new function() {
/**
* Get the current position of the animated element based on t.
* Each point is an array of "x" and "y" values (0 = x, 1 = y)
* At least 2 points are required (start and end).
* First point is start. Last point is end.
* Additional control points are optional.
* @method getPosition
* @param {Array} points An array containing Bezier points
* @param {Number} t A number between 0 and 1 which is the basis for determining current position
* @return {Array} An array containing int x and y member data
*/
this.getPosition = function(points, t) {
var n = points.length;
var tmp = [];
for (var i = 0; i < n; ++i){
tmp[i] = [points[i][0], points[i][1]]; // save input
}
for (var j = 1; j < n; ++j) {
for (i = 0; i < n - j; ++i) {
tmp[i][0] = (1 - t) * tmp[i][0] + t * tmp[parseInt(i + 1, 10)][0];
tmp[i][1] = (1 - t) * tmp[i][1] + t * tmp[parseInt(i + 1, 10)][1];
}
}
return [ tmp[0][0], tmp[0][1] ];
};
};
(function() {
/**
* Anim subclass for color transitions.
* Usage: var myAnim = new Y.ColorAnim(el, { backgroundColor: { from: '#FF0000', to: '#FFFFFF' } }, 1, Y.Easing.easeOut); Color values can be specified with either 112233, #112233,
* [255,255,255], or rgb(255,255,255)
* @class ColorAnim
* @namespace YAHOO.util
* @requires YAHOO.util.Anim
* @requires YAHOO.util.AnimMgr
* @requires YAHOO.util.Easing
* @requires YAHOO.util.Bezier
* @requires YAHOO.util.Dom
* @requires YAHOO.util.Event
* @constructor
* @extends YAHOO.util.Anim
* @param {HTMLElement | String} el Reference to the element that will be animated
* @param {Object} attributes The attribute(s) to be animated.
* Each attribute is an object with at minimum a "to" or "by" member defined.
* Additional optional members are "from" (defaults to current value), "units" (defaults to "px").
* All attribute names use camelCase.
* @param {Number} duration (optional, defaults to 1 second) Length of animation (frames or seconds), defaults to time-based
* @param {Function} method (optional, defaults to YAHOO.util.Easing.easeNone) Computes the values that are applied to the attributes per frame (generally a YAHOO.util.Easing method)
*/
YAHOO.util.ColorAnim = function(el, attributes, duration, method) {
YAHOO.util.ColorAnim.superclass.constructor.call(this, el, attributes, duration, method);
};
YAHOO.extend(YAHOO.util.ColorAnim, YAHOO.util.Anim);
// shorthand
var Y = YAHOO.util;
var superclass = Y.ColorAnim.superclass;
var proto = Y.ColorAnim.prototype;
proto.toString = function() {
var el = this.getEl();
var id = el.id || el.tagName;
return ("ColorAnim " + id);
};
proto.patterns.color = /color$/i;
proto.patterns.rgb = /^rgb\(([0-9]+)\s*,\s*([0-9]+)\s*,\s*([0-9]+)\)$/i;
proto.patterns.hex = /^#?([0-9A-F]{2})([0-9A-F]{2})([0-9A-F]{2})$/i;
proto.patterns.hex3 = /^#?([0-9A-F]{1})([0-9A-F]{1})([0-9A-F]{1})$/i;
proto.patterns.transparent = /^transparent|rgba\(0, 0, 0, 0\)$/; // need rgba for safari
/**
* Attempts to parse the given string and return a 3-tuple.
* @method parseColor
* @param {String} s The string to parse.
* @return {Array} The 3-tuple of rgb values.
*/
proto.parseColor = function(s) {
if (s.length == 3) { return s; }
var c = this.patterns.hex.exec(s);
if (c && c.length == 4) {
return [ parseInt(c[1], 16), parseInt(c[2], 16), parseInt(c[3], 16) ];
}
c = this.patterns.rgb.exec(s);
if (c && c.length == 4) {
return [ parseInt(c[1], 10), parseInt(c[2], 10), parseInt(c[3], 10) ];
}
c = this.patterns.hex3.exec(s);
if (c && c.length == 4) {
return [ parseInt(c[1] + c[1], 16), parseInt(c[2] + c[2], 16), parseInt(c[3] + c[3], 16) ];
}
return null;
};
proto.getAttribute = function(attr) {
var el = this.getEl();
if ( this.patterns.color.test(attr) ) {
var val = YAHOO.util.Dom.getStyle(el, attr);
if (this.patterns.transparent.test(val)) { // bgcolor default
var parent = el.parentNode; // try and get from an ancestor
val = Y.Dom.getStyle(parent, attr);
while (parent && this.patterns.transparent.test(val)) {
parent = parent.parentNode;
val = Y.Dom.getStyle(parent, attr);
if (parent.tagName.toUpperCase() == 'HTML') {
val = '#fff';
}
}
}
} else {
val = superclass.getAttribute.call(this, attr);
}
return val;
};
proto.doMethod = function(attr, start, end) {
var val;
if ( this.patterns.color.test(attr) ) {
val = [];
for (var i = 0, len = start.length; i < len; ++i) {
val[i] = superclass.doMethod.call(this, attr, start[i], end[i]);
}
val = 'rgb('+Math.floor(val[0])+','+Math.floor(val[1])+','+Math.floor(val[2])+')';
}
else {
val = superclass.doMethod.call(this, attr, start, end);
}
return val;
};
proto.setRuntimeAttribute = function(attr) {
superclass.setRuntimeAttribute.call(this, attr);
if ( this.patterns.color.test(attr) ) {
var attributes = this.attributes;
var start = this.parseColor(this.runtimeAttributes[attr].start);
var end = this.parseColor(this.runtimeAttributes[attr].end);
// fix colors if going "by"
if ( typeof attributes[attr]['to'] === 'undefined' && typeof attributes[attr]['by'] !== 'undefined' ) {
end = this.parseColor(attributes[attr].by);
for (var i = 0, len = start.length; i < len; ++i) {
end[i] = start[i] + end[i];
}
}
this.runtimeAttributes[attr].start = start;
this.runtimeAttributes[attr].end = end;
}
};
})();
/*
TERMS OF USE - EASING EQUATIONS
Open source under the BSD License.
Copyright 2001 Robert Penner All rights reserved.
Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
* Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
* Neither the name of the author nor the names of contributors may be used to endorse or promote products derived from this software without specific prior written permission.
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*/
/**
* Singleton that determines how an animation proceeds from start to end.
* @class Easing
* @namespace YAHOO.util
*/
YAHOO.util.Easing = {
/**
* Uniform speed between points.
* @method easeNone
* @param {Number} t Time value used to compute current value
* @param {Number} b Starting value
* @param {Number} c Delta between start and end values
* @param {Number} d Total length of animation
* @return {Number} The computed value for the current animation frame
*/
easeNone: function (t, b, c, d) {
return c*t/d + b;
},
/**
* Begins slowly and accelerates towards end. (quadratic)
* @method easeIn
* @param {Number} t Time value used to compute current value
* @param {Number} b Starting value
* @param {Number} c Delta between start and end values
* @param {Number} d Total length of animation
* @return {Number} The computed value for the current animation frame
*/
easeIn: function (t, b, c, d) {
return c*(t/=d)*t + b;
},
/**
* Begins quickly and decelerates towards end. (quadratic)
* @method easeOut
* @param {Number} t Time value used to compute current value
* @param {Number} b Starting value
* @param {Number} c Delta between start and end values
* @param {Number} d Total length of animation
* @return {Number} The computed value for the current animation frame
*/
easeOut: function (t, b, c, d) {
return -c *(t/=d)*(t-2) + b;
},
/**
* Begins slowly and decelerates towards end. (quadratic)
* @method easeBoth
* @param {Number} t Time value used to compute current value
* @param {Number} b Starting value
* @param {Number} c Delta between start and end values
* @param {Number} d Total length of animation
* @return {Number} The computed value for the current animation frame
*/
easeBoth: function (t, b, c, d) {
if ((t/=d/2) < 1) {
return c/2*t*t + b;
}
return -c/2 * ((--t)*(t-2) - 1) + b;
},
/**
* Begins slowly and accelerates towards end. (quartic)
* @method easeInStrong
* @param {Number} t Time value used to compute current value
* @param {Number} b Starting value
* @param {Number} c Delta between start and end values
* @param {Number} d Total length of animation
* @return {Number} The computed value for the current animation frame
*/
easeInStrong: function (t, b, c, d) {
return c*(t/=d)*t*t*t + b;
},
/**
* Begins quickly and decelerates towards end. (quartic)
* @method easeOutStrong
* @param {Number} t Time value used to compute current value
* @param {Number} b Starting value
* @param {Number} c Delta between start and end values
* @param {Number} d Total length of animation
* @return {Number} The computed value for the current animation frame
*/
easeOutStrong: function (t, b, c, d) {
return -c * ((t=t/d-1)*t*t*t - 1) + b;
},
/**
* Begins slowly and decelerates towards end. (quartic)
* @method easeBothStrong
* @param {Number} t Time value used to compute current value
* @param {Number} b Starting value
* @param {Number} c Delta between start and end values
* @param {Number} d Total length of animation
* @return {Number} The computed value for the current animation frame
*/
easeBothStrong: function (t, b, c, d) {
if ((t/=d/2) < 1) {
return c/2*t*t*t*t + b;
}
return -c/2 * ((t-=2)*t*t*t - 2) + b;
},
/**
* Snap in elastic effect.
* @method elasticIn
* @param {Number} t Time value used to compute current value
* @param {Number} b Starting value
* @param {Number} c Delta between start and end values
* @param {Number} d Total length of animation
* @param {Number} a Amplitude (optional)
* @param {Number} p Period (optional)
* @return {Number} The computed value for the current animation frame
*/
elasticIn: function (t, b, c, d, a, p) {
if (t == 0) {
return b;
}
if ( (t /= d) == 1 ) {
return b+c;
}
if (!p) {
p=d*.3;
}
if (!a || a < Math.abs(c)) {
a = c;
var s = p/4;
}
else {
var s = p/(2*Math.PI) * Math.asin (c/a);
}
return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
},
/**
* Snap out elastic effect.
* @method elasticOut
* @param {Number} t Time value used to compute current value
* @param {Number} b Starting value
* @param {Number} c Delta between start and end values
* @param {Number} d Total length of animation
* @param {Number} a Amplitude (optional)
* @param {Number} p Period (optional)
* @return {Number} The computed value for the current animation frame
*/
elasticOut: function (t, b, c, d, a, p) {
if (t == 0) {
return b;
}
if ( (t /= d) == 1 ) {
return b+c;
}
if (!p) {
p=d*.3;
}
if (!a || a < Math.abs(c)) {
a = c;
var s = p / 4;
}
else {
var s = p/(2*Math.PI) * Math.asin (c/a);
}
return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
},
/**
* Snap both elastic effect.
* @method elasticBoth
* @param {Number} t Time value used to compute current value
* @param {Number} b Starting value
* @param {Number} c Delta between start and end values
* @param {Number} d Total length of animation
* @param {Number} a Amplitude (optional)
* @param {Number} p Period (optional)
* @return {Number} The computed value for the current animation frame
*/
elasticBoth: function (t, b, c, d, a, p) {
if (t == 0) {
return b;
}
if ( (t /= d/2) == 2 ) {
return b+c;
}
if (!p) {
p = d*(.3*1.5);
}
if ( !a || a < Math.abs(c) ) {
a = c;
var s = p/4;
}
else {
var s = p/(2*Math.PI) * Math.asin (c/a);
}
if (t < 1) {
return -.5*(a*Math.pow(2,10*(t-=1)) *
Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
}
return a*Math.pow(2,-10*(t-=1)) *
Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
},
/**
* Backtracks slightly, then reverses direction and moves to end.
* @method backIn
* @param {Number} t Time value used to compute current value
* @param {Number} b Starting value
* @param {Number} c Delta between start and end values
* @param {Number} d Total length of animation
* @param {Number} s Overshoot (optional)
* @return {Number} The computed value for the current animation frame
*/
backIn: function (t, b, c, d, s) {
if (typeof s == 'undefined') {
s = 1.70158;
}
return c*(t/=d)*t*((s+1)*t - s) + b;
},
/**
* Overshoots end, then reverses and comes back to end.
* @method backOut
* @param {Number} t Time value used to compute current value
* @param {Number} b Starting value
* @param {Number} c Delta between start and end values
* @param {Number} d Total length of animation
* @param {Number} s Overshoot (optional)
* @return {Number} The computed value for the current animation frame
*/
backOut: function (t, b, c, d, s) {
if (typeof s == 'undefined') {
s = 1.70158;
}
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
},
/**
* Backtracks slightly, then reverses direction, overshoots end,
* then reverses and comes back to end.
* @method backBoth
* @param {Number} t Time value used to compute current value
* @param {Number} b Starting value
* @param {Number} c Delta between start and end values
* @param {Number} d Total length of animation
* @param {Number} s Overshoot (optional)
* @return {Number} The computed value for the current animation frame
*/
backBoth: function (t, b, c, d, s) {
if (typeof s == 'undefined') {
s = 1.70158;
}
if ((t /= d/2 ) < 1) {
return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
}
return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
},
/**
* Bounce off of start.
* @method bounceIn
* @param {Number} t Time value used to compute current value
* @param {Number} b Starting value
* @param {Number} c Delta between start and end values
* @param {Number} d Total length of animation
* @return {Number} The computed value for the current animation frame
*/
bounceIn: function (t, b, c, d) {
return c - YAHOO.util.Easing.bounceOut(d-t, 0, c, d) + b;
},
/**
* Bounces off end.
* @method bounceOut
* @param {Number} t Time value used to compute current value
* @param {Number} b Starting value
* @param {Number} c Delta between start and end values
* @param {Number} d Total length of animation
* @return {Number} The computed value for the current animation frame
*/
bounceOut: function (t, b, c, d) {
if ((t/=d) < (1/2.75)) {
return c*(7.5625*t*t) + b;
} else if (t < (2/2.75)) {
return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
} else if (t < (2.5/2.75)) {
return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
}
return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
},
/**
* Bounces off start and end.
* @method bounceBoth
* @param {Number} t Time value used to compute current value
* @param {Number} b Starting value
* @param {Number} c Delta between start and end values
* @param {Number} d Total length of animation
* @return {Number} The computed value for the current animation frame
*/
bounceBoth: function (t, b, c, d) {
if (t < d/2) {
return YAHOO.util.Easing.bounceIn(t*2, 0, c, d) * .5 + b;
}
return YAHOO.util.Easing.bounceOut(t*2-d, 0, c, d) * .5 + c*.5 + b;
}
};
(function() {
/**
* Anim subclass for moving elements along a path defined by the "points"
* member of "attributes". All "points" are arrays with x, y coordinates.
* Usage: var myAnim = new YAHOO.util.Motion(el, { points: { to: [800, 800] } }, 1, YAHOO.util.Easing.easeOut);
* @class Motion
* @namespace YAHOO.util
* @requires YAHOO.util.Anim
* @requires YAHOO.util.AnimMgr
* @requires YAHOO.util.Easing
* @requires YAHOO.util.Bezier
* @requires YAHOO.util.Dom
* @requires YAHOO.util.Event
* @requires YAHOO.util.CustomEvent
* @constructor
* @extends YAHOO.util.Anim
* @param {String | HTMLElement} el Reference to the element that will be animated
* @param {Object} attributes The attribute(s) to be animated.
* Each attribute is an object with at minimum a "to" or "by" member defined.
* Additional optional members are "from" (defaults to current value), "units" (defaults to "px").
* All attribute names use camelCase.
* @param {Number} duration (optional, defaults to 1 second) Length of animation (frames or seconds), defaults to time-based
* @param {Function} method (optional, defaults to YAHOO.util.Easing.easeNone) Computes the values that are applied to the attributes per frame (generally a YAHOO.util.Easing method)
*/
YAHOO.util.Motion = function(el, attributes, duration, method) {
if (el) { // dont break existing subclasses not using YAHOO.extend
YAHOO.util.Motion.superclass.constructor.call(this, el, attributes, duration, method);
}
};
YAHOO.extend(YAHOO.util.Motion, YAHOO.util.ColorAnim);
// shorthand
var Y = YAHOO.util;
var superclass = Y.Motion.superclass;
var proto = Y.Motion.prototype;
proto.toString = function() {
var el = this.getEl();
var id = el.id || el.tagName;
return ("Motion " + id);
};
proto.patterns.points = /^points$/i;
proto.setAttribute = function(attr, val, unit) {
if ( this.patterns.points.test(attr) ) {
unit = unit || 'px';
superclass.setAttribute.call(this, 'left', val[0], unit);
superclass.setAttribute.call(this, 'top', val[1], unit);
} else {
superclass.setAttribute.call(this, attr, val, unit);
}
};
proto.getAttribute = function(attr) {
if ( this.patterns.points.test(attr) ) {
var val = [
superclass.getAttribute.call(this, 'left'),
superclass.getAttribute.call(this, 'top')
];
} else {
val = superclass.getAttribute.call(this, attr);
}
return val;
};
proto.doMethod = function(attr, start, end) {
var val = null;
if ( this.patterns.points.test(attr) ) {
var t = this.method(this.currentFrame, 0, 100, this.totalFrames) / 100;
val = Y.Bezier.getPosition(this.runtimeAttributes[attr], t);
} else {
val = superclass.doMethod.call(this, attr, start, end);
}
return val;
};
proto.setRuntimeAttribute = function(attr) {
if ( this.patterns.points.test(attr) ) {
var el = this.getEl();
var attributes = this.attributes;
var start;
var control = attributes['points']['control'] || [];
var end;
var i, len;
if (control.length > 0 && !(control[0] instanceof Array) ) { // could be single point or array of points
control = [control];
} else { // break reference to attributes.points.control
var tmp = [];
for (i = 0, len = control.length; i< len; ++i) {
tmp[i] = control[i];
}
control = tmp;
}
if (Y.Dom.getStyle(el, 'position') == 'static') { // default to relative
Y.Dom.setStyle(el, 'position', 'relative');
}
if ( isset(attributes['points']['from']) ) {
Y.Dom.setXY(el, attributes['points']['from']); // set position to from point
}
else { Y.Dom.setXY( el, Y.Dom.getXY(el) ); } // set it to current position
start = this.getAttribute('points'); // get actual top & left
// TO beats BY, per SMIL 2.1 spec
if ( isset(attributes['points']['to']) ) {
end = translateValues.call(this, attributes['points']['to'], start);
var pageXY = Y.Dom.getXY(this.getEl());
for (i = 0, len = control.length; i < len; ++i) {
control[i] = translateValues.call(this, control[i], start);
}
} else if ( isset(attributes['points']['by']) ) {
end = [ start[0] + attributes['points']['by'][0], start[1] + attributes['points']['by'][1] ];
for (i = 0, len = control.length; i < len; ++i) {
control[i] = [ start[0] + control[i][0], start[1] + control[i][1] ];
}
}
this.runtimeAttributes[attr] = [start];
if (control.length > 0) {
this.runtimeAttributes[attr] = this.runtimeAttributes[attr].concat(control);
}
this.runtimeAttributes[attr][this.runtimeAttributes[attr].length] = end;
}
else {
superclass.setRuntimeAttribute.call(this, attr);
}
};
var translateValues = function(val, start) {
var pageXY = Y.Dom.getXY(this.getEl());
val = [ val[0] - pageXY[0] + start[0], val[1] - pageXY[1] + start[1] ];
return val;
};
var isset = function(prop) {
return (typeof prop !== 'undefined');
};
})();
(function() {
/**
* Anim subclass for scrolling elements to a position defined by the "scroll"
* member of "attributes". All "scroll" members are arrays with x, y scroll positions.
* Usage: var myAnim = new YAHOO.util.Scroll(el, { scroll: { to: [0, 800] } }, 1, YAHOO.util.Easing.easeOut);
* @class Scroll
* @namespace YAHOO.util
* @requires YAHOO.util.Anim
* @requires YAHOO.util.AnimMgr
* @requires YAHOO.util.Easing
* @requires YAHOO.util.Bezier
* @requires YAHOO.util.Dom
* @requires YAHOO.util.Event
* @requires YAHOO.util.CustomEvent
* @extends YAHOO.util.Anim
* @constructor
* @param {String or HTMLElement} el Reference to the element that will be animated
* @param {Object} attributes The attribute(s) to be animated.
* Each attribute is an object with at minimum a "to" or "by" member defined.
* Additional optional members are "from" (defaults to current value), "units" (defaults to "px").
* All attribute names use camelCase.
* @param {Number} duration (optional, defaults to 1 second) Length of animation (frames or seconds), defaults to time-based
* @param {Function} method (optional, defaults to YAHOO.util.Easing.easeNone) Computes the values that are applied to the attributes per frame (generally a YAHOO.util.Easing method)
*/
YAHOO.util.Scroll = function(el, attributes, duration, method) {
if (el) { // dont break existing subclasses not using YAHOO.extend
YAHOO.util.Scroll.superclass.constructor.call(this, el, attributes, duration, method);
}
};
YAHOO.extend(YAHOO.util.Scroll, YAHOO.util.ColorAnim);
// shorthand
var Y = YAHOO.util;
var superclass = Y.Scroll.superclass;
var proto = Y.Scroll.prototype;
proto.toString = function() {
var el = this.getEl();
var id = el.id || el.tagName;
return ("Scroll " + id);
};
proto.doMethod = function(attr, start, end) {
var val = null;
if (attr == 'scroll') {
val = [
this.method(this.currentFrame, start[0], end[0] - start[0], this.totalFrames),
this.method(this.currentFrame, start[1], end[1] - start[1], this.totalFrames)
];
} else {
val = superclass.doMethod.call(this, attr, start, end);
}
return val;
};
proto.getAttribute = function(attr) {
var val = null;
var el = this.getEl();
if (attr == 'scroll') {
val = [ el.scrollLeft, el.scrollTop ];
} else {
val = superclass.getAttribute.call(this, attr);
}
return val;
};
proto.setAttribute = function(attr, val, unit) {
var el = this.getEl();
if (attr == 'scroll') {
el.scrollLeft = val[0];
el.scrollTop = val[1];
} else {
superclass.setAttribute.call(this, attr, val, unit);
}
};
})();
YAHOO.register("animation", YAHOO.util.Anim, {version: "2.3.1", build: "541"});
/*
Copyright (c) 2007, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 2.3.1
*/
(function () {
/**
* Config is a utility used within an Object to allow the implementer to
* maintain a list of local configuration properties and listen for changes
* to those properties dynamically using CustomEvent. The initial values are
* also maintained so that the configuration can be reset at any given point
* to its initial state.
* @namespace YAHOO.util
* @class Config
* @constructor
* @param {Object} owner The owner Object to which this Config Object belongs
*/
YAHOO.util.Config = function (owner) {
if (owner) {
this.init(owner);
}
if (!owner) {
}
};
var Lang = YAHOO.lang,
CustomEvent = YAHOO.util.CustomEvent,
Config = YAHOO.util.Config;
/**
* Constant representing the CustomEvent type for the config changed event.
* @property YAHOO.util.Config.CONFIG_CHANGED_EVENT
* @private
* @static
* @final
*/
Config.CONFIG_CHANGED_EVENT = "configChanged";
/**
* Constant representing the boolean type string
* @property YAHOO.util.Config.BOOLEAN_TYPE
* @private
* @static
* @final
*/
Config.BOOLEAN_TYPE = "boolean";
Config.prototype = {
/**
* Object reference to the owner of this Config Object
* @property owner
* @type Object
*/
owner: null,
/**
* Boolean flag that specifies whether a queue is currently
* being executed
* @property queueInProgress
* @type Boolean
*/
queueInProgress: false,
/**
* Maintains the local collection of configuration property objects and
* their specified values
* @property config
* @private
* @type Object
*/
config: null,
/**
* Maintains the local collection of configuration property objects as
* they were initially applied.
* This object is used when resetting a property.
* @property initialConfig
* @private
* @type Object
*/
initialConfig: null,
/**
* Maintains the local, normalized CustomEvent queue
* @property eventQueue
* @private
* @type Object
*/
eventQueue: null,
/**
* Custom Event, notifying subscribers when Config properties are set
* (setProperty is called without the silent flag
* @event configChangedEvent
*/
configChangedEvent: null,
/**
* Initializes the configuration Object and all of its local members.
* @method init
* @param {Object} owner The owner Object to which this Config
* Object belongs
*/
init: function (owner) {
this.owner = owner;
this.configChangedEvent =
this.createEvent(Config.CONFIG_CHANGED_EVENT);
this.configChangedEvent.signature = CustomEvent.LIST;
this.queueInProgress = false;
this.config = {};
this.initialConfig = {};
this.eventQueue = [];
},
/**
* Validates that the value passed in is a Boolean.
* @method checkBoolean
* @param {Object} val The value to validate
* @return {Boolean} true, if the value is valid
*/
checkBoolean: function (val) {
return (typeof val == Config.BOOLEAN_TYPE);
},
/**
* Validates that the value passed in is a number.
* @method checkNumber
* @param {Object} val The value to validate
* @return {Boolean} true, if the value is valid
*/
checkNumber: function (val) {
return (!isNaN(val));
},
/**
* Fires a configuration property event using the specified value.
* @method fireEvent
* @private
* @param {String} key The configuration property's name
* @param {value} Object The value of the correct type for the property
*/
fireEvent: function ( key, value ) {
var property = this.config[key];
if (property && property.event) {
property.event.fire(value);
}
},
/**
* Adds a property to the Config Object's private config hash.
* @method addProperty
* @param {String} key The configuration property's name
* @param {Object} propertyObject The Object containing all of this
* property's arguments
*/
addProperty: function ( key, propertyObject ) {
key = key.toLowerCase();
this.config[key] = propertyObject;
propertyObject.event = this.createEvent(key, { scope: this.owner });
propertyObject.event.signature = CustomEvent.LIST;
propertyObject.key = key;
if (propertyObject.handler) {
propertyObject.event.subscribe(propertyObject.handler,
this.owner);
}
this.setProperty(key, propertyObject.value, true);
if (! propertyObject.suppressEvent) {
this.queueProperty(key, propertyObject.value);
}
},
/**
* Returns a key-value configuration map of the values currently set in
* the Config Object.
* @method getConfig
* @return {Object} The current config, represented in a key-value map
*/
getConfig: function () {
var cfg = {},
prop,
property;
for (prop in this.config) {
property = this.config[prop];
if (property && property.event) {
cfg[prop] = property.value;
}
}
return cfg;
},
/**
* Returns the value of specified property.
* @method getProperty
* @param {String} key The name of the property
* @return {Object} The value of the specified property
*/
getProperty: function (key) {
var property = this.config[key.toLowerCase()];
if (property && property.event) {
return property.value;
} else {
return undefined;
}
},
/**
* Resets the specified property's value to its initial value.
* @method resetProperty
* @param {String} key The name of the property
* @return {Boolean} True is the property was reset, false if not
*/
resetProperty: function (key) {
key = key.toLowerCase();
var property = this.config[key];
if (property && property.event) {
if (this.initialConfig[key] &&
!Lang.isUndefined(this.initialConfig[key])) {
this.setProperty(key, this.initialConfig[key]);
return true;
}
} else {
return false;
}
},
/**
* Sets the value of a property. If the silent property is passed as
* true, the property's event will not be fired.
* @method setProperty
* @param {String} key The name of the property
* @param {String} value The value to set the property to
* @param {Boolean} silent Whether the value should be set silently,
* without firing the property event.
* @return {Boolean} True, if the set was successful, false if it failed.
*/
setProperty: function (key, value, silent) {
var property;
key = key.toLowerCase();
if (this.queueInProgress && ! silent) {
// Currently running through a queue...
this.queueProperty(key,value);
return true;
} else {
property = this.config[key];
if (property && property.event) {
if (property.validator && !property.validator(value)) {
return false;
} else {
property.value = value;
if (! silent) {
this.fireEvent(key, value);
this.configChangedEvent.fire([key, value]);
}
return true;
}
} else {
return false;
}
}
},
/**
* Sets the value of a property and queues its event to execute. If the
* event is already scheduled to execute, it is
* moved from its current position to the end of the queue.
* @method queueProperty
* @param {String} key The name of the property
* @param {String} value The value to set the property to
* @return {Boolean} true, if the set was successful, false if
* it failed.
*/
queueProperty: function (key, value) {
key = key.toLowerCase();
var property = this.config[key],
foundDuplicate = false,
iLen,
queueItem,
queueItemKey,
queueItemValue,
sLen,
supercedesCheck,
qLen,
queueItemCheck,
queueItemCheckKey,
queueItemCheckValue,
i,
s,
q;
if (property && property.event) {
if (!Lang.isUndefined(value) && property.validator &&
!property.validator(value)) { // validator
return false;
} else {
if (!Lang.isUndefined(value)) {
property.value = value;
} else {
value = property.value;
}
foundDuplicate = false;
iLen = this.eventQueue.length;
for (i = 0; i < iLen; i++) {
queueItem = this.eventQueue[i];
if (queueItem) {
queueItemKey = queueItem[0];
queueItemValue = queueItem[1];
if (queueItemKey == key) {
/*
found a dupe... push to end of queue, null
current item, and break
*/
this.eventQueue[i] = null;
this.eventQueue.push(
[key, (!Lang.isUndefined(value) ?
value : queueItemValue)]);
foundDuplicate = true;
break;
}
}
}
// this is a refire, or a new property in the queue
if (! foundDuplicate && !Lang.isUndefined(value)) {
this.eventQueue.push([key, value]);
}
}
if (property.supercedes) {
sLen = property.supercedes.length;
for (s = 0; s < sLen; s++) {
supercedesCheck = property.supercedes[s];
qLen = this.eventQueue.length;
for (q = 0; q < qLen; q++) {
queueItemCheck = this.eventQueue[q];
if (queueItemCheck) {
queueItemCheckKey = queueItemCheck[0];
queueItemCheckValue = queueItemCheck[1];
if (queueItemCheckKey ==
supercedesCheck.toLowerCase() ) {
this.eventQueue.push([queueItemCheckKey,
queueItemCheckValue]);
this.eventQueue[q] = null;
break;
}
}
}
}
}
return true;
} else {
return false;
}
},
/**
* Fires the event for a property using the property's current value.
* @method refireEvent
* @param {String} key The name of the property
*/
refireEvent: function (key) {
key = key.toLowerCase();
var property = this.config[key];
if (property && property.event &&
!Lang.isUndefined(property.value)) {
if (this.queueInProgress) {
this.queueProperty(key);
} else {
this.fireEvent(key, property.value);
}
}
},
/**
* Applies a key-value Object literal to the configuration, replacing
* any existing values, and queueing the property events.
* Although the values will be set, fireQueue() must be called for their
* associated events to execute.
* @method applyConfig
* @param {Object} userConfig The configuration Object literal
* @param {Boolean} init When set to true, the initialConfig will
* be set to the userConfig passed in, so that calling a reset will
* reset the properties to the passed values.
*/
applyConfig: function (userConfig, init) {
var sKey,
oValue,
oConfig;
if (init) {
oConfig = {};
for (sKey in userConfig) {
if (Lang.hasOwnProperty(userConfig, sKey)) {
oConfig[sKey.toLowerCase()] = userConfig[sKey];
}
}
this.initialConfig = oConfig;
}
for (sKey in userConfig) {
if (Lang.hasOwnProperty(userConfig, sKey)) {
this.queueProperty(sKey, userConfig[sKey]);
}
}
},
/**
* Refires the events for all configuration properties using their
* current values.
* @method refresh
*/
refresh: function () {
var prop;
for (prop in this.config) {
this.refireEvent(prop);
}
},
/**
* Fires the normalized list of queued property change events
* @method fireQueue
*/
fireQueue: function () {
var i,
queueItem,
key,
value,
property;
this.queueInProgress = true;
for (i = 0;i < this.eventQueue.length; i++) {
queueItem = this.eventQueue[i];
if (queueItem) {
key = queueItem[0];
value = queueItem[1];
property = this.config[key];
property.value = value;
this.fireEvent(key,value);
}
}
this.queueInProgress = false;
this.eventQueue = [];
},
/**
* Subscribes an external handler to the change event for any
* given property.
* @method subscribeToConfigEvent
* @param {String} key The property name
* @param {Function} handler The handler function to use subscribe to
* the property's event
* @param {Object} obj The Object to use for scoping the event handler
* (see CustomEvent documentation)
* @param {Boolean} override Optional. If true, will override "this"
* within the handler to map to the scope Object passed into the method.
* @return {Boolean} True, if the subscription was successful,
* otherwise false.
*/
subscribeToConfigEvent: function (key, handler, obj, override) {
var property = this.config[key.toLowerCase()];
if (property && property.event) {
if (!Config.alreadySubscribed(property.event, handler, obj)) {
property.event.subscribe(handler, obj, override);
}
return true;
} else {
return false;
}
},
/**
* Unsubscribes an external handler from the change event for any
* given property.
* @method unsubscribeFromConfigEvent
* @param {String} key The property name
* @param {Function} handler The handler function to use subscribe to
* the property's event
* @param {Object} obj The Object to use for scoping the event
* handler (see CustomEvent documentation)
* @return {Boolean} True, if the unsubscription was successful,
* otherwise false.
*/
unsubscribeFromConfigEvent: function (key, handler, obj) {
var property = this.config[key.toLowerCase()];
if (property && property.event) {
return property.event.unsubscribe(handler, obj);
} else {
return false;
}
},
/**
* Returns a string representation of the Config object
* @method toString
* @return {String} The Config object in string format.
*/
toString: function () {
var output = "Config";
if (this.owner) {
output += " [" + this.owner.toString() + "]";
}
return output;
},
/**
* Returns a string representation of the Config object's current
* CustomEvent queue
* @method outputEventQueue
* @return {String} The string list of CustomEvents currently queued
* for execution
*/
outputEventQueue: function () {
var output = "",
queueItem,
q,
nQueue = this.eventQueue.length;
for (q = 0; q < nQueue; q++) {
queueItem = this.eventQueue[q];
if (queueItem) {
output += queueItem[0] + "=" + queueItem[1] + ", ";
}
}
return output;
},
/**
* Sets all properties to null, unsubscribes all listeners from each
* property's change event and all listeners from the configChangedEvent.
* @method destroy
*/
destroy: function () {
var oConfig = this.config,
sProperty,
oProperty;
for (sProperty in oConfig) {
if (Lang.hasOwnProperty(oConfig, sProperty)) {
oProperty = oConfig[sProperty];
oProperty.event.unsubscribeAll();
oProperty.event = null;
}
}
this.configChangedEvent.unsubscribeAll();
this.configChangedEvent = null;
this.owner = null;
this.config = null;
this.initialConfig = null;
this.eventQueue = null;
}
};
/**
* Checks to determine if a particular function/Object pair are already
* subscribed to the specified CustomEvent
* @method YAHOO.util.Config.alreadySubscribed
* @static
* @param {YAHOO.util.CustomEvent} evt The CustomEvent for which to check
* the subscriptions
* @param {Function} fn The function to look for in the subscribers list
* @param {Object} obj The execution scope Object for the subscription
* @return {Boolean} true, if the function/Object pair is already subscribed
* to the CustomEvent passed in
*/
Config.alreadySubscribed = function (evt, fn, obj) {
var nSubscribers = evt.subscribers.length,
subsc,
i;
if (nSubscribers > 0) {
i = nSubscribers - 1;
do {
subsc = evt.subscribers[i];
if (subsc && subsc.obj == obj && subsc.fn == fn) {
return true;
}
}
while (i--);
}
return false;
};
YAHOO.lang.augmentProto(Config, YAHOO.util.EventProvider);
}());
(function () {
/**
* The Container family of components is designed to enable developers to
* create different kinds of content-containing modules on the web. Module
* and Overlay are the most basic containers, and they can be used directly
* or extended to build custom containers. Also part of the Container family
* are four UI controls that extend Module and Overlay: Tooltip, Panel,
* Dialog, and SimpleDialog.
* @module container
* @title Container
* @requires yahoo, dom, event
* @optional dragdrop, animation, button
*/
/**
* Module is a JavaScript representation of the Standard Module Format.
* Standard Module Format is a simple standard for markup containers where
* child nodes representing the header, body, and footer of the content are
* denoted using the CSS classes "hd", "bd", and "ft" respectively.
* Module is the base class for all other classes in the YUI
* Container package.
* @namespace YAHOO.widget
* @class Module
* @constructor
* @param {String} el The element ID representing the Module OR
* @param {HTMLElement} el The element representing the Module
* @param {Object} userConfig The configuration Object literal containing
* the configuration that should be set for this module. See configuration
* documentation for more details.
*/
YAHOO.widget.Module = function (el, userConfig) {
if (el) {
this.init(el, userConfig);
} else {
}
};
var Dom = YAHOO.util.Dom,
Config = YAHOO.util.Config,
Event = YAHOO.util.Event,
CustomEvent = YAHOO.util.CustomEvent,
Module = YAHOO.widget.Module,
m_oModuleTemplate,
m_oHeaderTemplate,
m_oBodyTemplate,
m_oFooterTemplate,
/**
* Constant representing the name of the Module's events
* @property EVENT_TYPES
* @private
* @final
* @type Object
*/
EVENT_TYPES = {
"BEFORE_INIT": "beforeInit",
"INIT": "init",
"APPEND": "append",
"BEFORE_RENDER": "beforeRender",
"RENDER": "render",
"CHANGE_HEADER": "changeHeader",
"CHANGE_BODY": "changeBody",
"CHANGE_FOOTER": "changeFooter",
"CHANGE_CONTENT": "changeContent",
"DESTORY": "destroy",
"BEFORE_SHOW": "beforeShow",
"SHOW": "show",
"BEFORE_HIDE": "beforeHide",
"HIDE": "hide"
},
/**
* Constant representing the Module's configuration properties
* @property DEFAULT_CONFIG
* @private
* @final
* @type Object
*/
DEFAULT_CONFIG = {
"VISIBLE": {
key: "visible",
value: true,
validator: YAHOO.lang.isBoolean
},
"EFFECT": {
key: "effect",
suppressEvent: true,
supercedes: ["visible"]
},
"MONITOR_RESIZE": {
key: "monitorresize",
value: true
},
"APPEND_TO_DOCUMENT_BODY": {
key: "appendtodocumentbody",
value: false
}
};
/**
* Constant representing the prefix path to use for non-secure images
* @property YAHOO.widget.Module.IMG_ROOT
* @static
* @final
* @type String
*/
Module.IMG_ROOT = null;
/**
* Constant representing the prefix path to use for securely served images
* @property YAHOO.widget.Module.IMG_ROOT_SSL
* @static
* @final
* @type String
*/
Module.IMG_ROOT_SSL = null;
/**
* Constant for the default CSS class name that represents a Module
* @property YAHOO.widget.Module.CSS_MODULE
* @static
* @final
* @type String
*/
Module.CSS_MODULE = "yui-module";
/**
* Constant representing the module header
* @property YAHOO.widget.Module.CSS_HEADER
* @static
* @final
* @type String
*/
Module.CSS_HEADER = "hd";
/**
* Constant representing the module body
* @property YAHOO.widget.Module.CSS_BODY
* @static
* @final
* @type String
*/
Module.CSS_BODY = "bd";
/**
* Constant representing the module footer
* @property YAHOO.widget.Module.CSS_FOOTER
* @static
* @final
* @type String
*/
Module.CSS_FOOTER = "ft";
/**
* Constant representing the url for the "src" attribute of the iframe
* used to monitor changes to the browser's base font size
* @property YAHOO.widget.Module.RESIZE_MONITOR_SECURE_URL
* @static
* @final
* @type String
*/
Module.RESIZE_MONITOR_SECURE_URL = "javascript:false;";
/**
* Singleton CustomEvent fired when the font size is changed in the browser.
* Opera's "zoom" functionality currently does not support text
* size detection.
* @event YAHOO.widget.Module.textResizeEvent
*/
Module.textResizeEvent = new CustomEvent("textResize");
function createModuleTemplate() {
if (!m_oModuleTemplate) {
m_oModuleTemplate = document.createElement("div");
m_oModuleTemplate.innerHTML = ("" + "");
m_oHeaderTemplate = m_oModuleTemplate.firstChild;
m_oBodyTemplate = m_oHeaderTemplate.nextSibling;
m_oFooterTemplate = m_oBodyTemplate.nextSibling;
}
return m_oModuleTemplate;
}
function createHeader() {
if (!m_oHeaderTemplate) {
createModuleTemplate();
}
return (m_oHeaderTemplate.cloneNode(false));
}
function createBody() {
if (!m_oBodyTemplate) {
createModuleTemplate();
}
return (m_oBodyTemplate.cloneNode(false));
}
function createFooter() {
if (!m_oFooterTemplate) {
createModuleTemplate();
}
return (m_oFooterTemplate.cloneNode(false));
}
Module.prototype = {
/**
* The class's constructor function
* @property contructor
* @type Function
*/
constructor: Module,
/**
* The main module element that contains the header, body, and footer
* @property element
* @type HTMLElement
*/
element: null,
/**
* The header element, denoted with CSS class "hd"
* @property header
* @type HTMLElement
*/
header: null,
/**
* The body element, denoted with CSS class "bd"
* @property body
* @type HTMLElement
*/
body: null,
/**
* The footer element, denoted with CSS class "ft"
* @property footer
* @type HTMLElement
*/
footer: null,
/**
* The id of the element
* @property id
* @type String
*/
id: null,
/**
* A string representing the root path for all images created by
* a Module instance.
* @deprecated It is recommend that any images for a Module be applied
* via CSS using the "background-image" property.
* @property imageRoot
* @type String
*/
imageRoot: Module.IMG_ROOT,
/**
* Initializes the custom events for Module which are fired
* automatically at appropriate times by the Module class.
* @method initEvents
*/
initEvents: function () {
var SIGNATURE = CustomEvent.LIST;
/**
* CustomEvent fired prior to class initalization.
* @event beforeInitEvent
* @param {class} classRef class reference of the initializing
* class, such as this.beforeInitEvent.fire(Module)
*/
this.beforeInitEvent = this.createEvent(EVENT_TYPES.BEFORE_INIT);
this.beforeInitEvent.signature = SIGNATURE;
/**
* CustomEvent fired after class initalization.
* @event initEvent
* @param {class} classRef class reference of the initializing
* class, such as this.beforeInitEvent.fire(Module)
*/
this.initEvent = this.createEvent(EVENT_TYPES.INIT);
this.initEvent.signature = SIGNATURE;
/**
* CustomEvent fired when the Module is appended to the DOM
* @event appendEvent
*/
this.appendEvent = this.createEvent(EVENT_TYPES.APPEND);
this.appendEvent.signature = SIGNATURE;
/**
* CustomEvent fired before the Module is rendered
* @event beforeRenderEvent
*/
this.beforeRenderEvent = this.createEvent(EVENT_TYPES.BEFORE_RENDER);
this.beforeRenderEvent.signature = SIGNATURE;
/**
* CustomEvent fired after the Module is rendered
* @event renderEvent
*/
this.renderEvent = this.createEvent(EVENT_TYPES.RENDER);
this.renderEvent.signature = SIGNATURE;
/**
* CustomEvent fired when the header content of the Module
* is modified
* @event changeHeaderEvent
* @param {String/HTMLElement} content String/element representing
* the new header content
*/
this.changeHeaderEvent = this.createEvent(EVENT_TYPES.CHANGE_HEADER);
this.changeHeaderEvent.signature = SIGNATURE;
/**
* CustomEvent fired when the body content of the Module is modified
* @event changeBodyEvent
* @param {String/HTMLElement} content String/element representing
* the new body content
*/
this.changeBodyEvent = this.createEvent(EVENT_TYPES.CHANGE_BODY);
this.changeBodyEvent.signature = SIGNATURE;
/**
* CustomEvent fired when the footer content of the Module
* is modified
* @event changeFooterEvent
* @param {String/HTMLElement} content String/element representing
* the new footer content
*/
this.changeFooterEvent = this.createEvent(EVENT_TYPES.CHANGE_FOOTER);
this.changeFooterEvent.signature = SIGNATURE;
/**
* CustomEvent fired when the content of the Module is modified
* @event changeContentEvent
*/
this.changeContentEvent = this.createEvent(EVENT_TYPES.CHANGE_CONTENT);
this.changeContentEvent.signature = SIGNATURE;
/**
* CustomEvent fired when the Module is destroyed
* @event destroyEvent
*/
this.destroyEvent = this.createEvent(EVENT_TYPES.DESTORY);
this.destroyEvent.signature = SIGNATURE;
/**
* CustomEvent fired before the Module is shown
* @event beforeShowEvent
*/
this.beforeShowEvent = this.createEvent(EVENT_TYPES.BEFORE_SHOW);
this.beforeShowEvent.signature = SIGNATURE;
/**
* CustomEvent fired after the Module is shown
* @event showEvent
*/
this.showEvent = this.createEvent(EVENT_TYPES.SHOW);
this.showEvent.signature = SIGNATURE;
/**
* CustomEvent fired before the Module is hidden
* @event beforeHideEvent
*/
this.beforeHideEvent = this.createEvent(EVENT_TYPES.BEFORE_HIDE);
this.beforeHideEvent.signature = SIGNATURE;
/**
* CustomEvent fired after the Module is hidden
* @event hideEvent
*/
this.hideEvent = this.createEvent(EVENT_TYPES.HIDE);
this.hideEvent.signature = SIGNATURE;
},
/**
* String representing the current user-agent platform
* @property platform
* @type String
*/
platform: function () {
var ua = navigator.userAgent.toLowerCase();
if (ua.indexOf("windows") != -1 || ua.indexOf("win32") != -1) {
return "windows";
} else if (ua.indexOf("macintosh") != -1) {
return "mac";
} else {
return false;
}
}(),
/**
* String representing the user-agent of the browser
* @deprecated Use YAHOO.env.ua
* @property browser
* @type String
*/
browser: function () {
var ua = navigator.userAgent.toLowerCase();
/*
Check Opera first in case of spoof and check Safari before
Gecko since Safari's user agent string includes "like Gecko"
*/
if (ua.indexOf('opera') != -1) {
return 'opera';
} else if (ua.indexOf('msie 7') != -1) {
return 'ie7';
} else if (ua.indexOf('msie') != -1) {
return 'ie';
} else if (ua.indexOf('safari') != -1) {
return 'safari';
} else if (ua.indexOf('gecko') != -1) {
return 'gecko';
} else {
return false;
}
}(),
/**
* Boolean representing whether or not the current browsing context is
* secure (https)
* @property isSecure
* @type Boolean
*/
isSecure: function () {
if (window.location.href.toLowerCase().indexOf("https") === 0) {
return true;
} else {
return false;
}
}(),
/**
* Initializes the custom events for Module which are fired
* automatically at appropriate times by the Module class.
*/
initDefaultConfig: function () {
// Add properties //
/**
* Specifies whether the Module is visible on the page.
* @config visible
* @type Boolean
* @default true
*/
this.cfg.addProperty(DEFAULT_CONFIG.VISIBLE.key, {
handler: this.configVisible,
value: DEFAULT_CONFIG.VISIBLE.value,
validator: DEFAULT_CONFIG.VISIBLE.validator
});
/**
* Object or array of objects representing the ContainerEffect
* classes that are active for animating the container.
* @config effect
* @type Object
* @default null
*/
this.cfg.addProperty(DEFAULT_CONFIG.EFFECT.key, {
suppressEvent: DEFAULT_CONFIG.EFFECT.suppressEvent,
supercedes: DEFAULT_CONFIG.EFFECT.supercedes
});
/**
* Specifies whether to create a special proxy iframe to monitor
* for user font resizing in the document
* @config monitorresize
* @type Boolean
* @default true
*/
this.cfg.addProperty(DEFAULT_CONFIG.MONITOR_RESIZE.key, {
handler: this.configMonitorResize,
value: DEFAULT_CONFIG.MONITOR_RESIZE.value
});
/**
* Specifies if the module should be rendered as the first child
* of document.body or appended as the last child when render is called
* with document.body as the "appendToNode".
*
* Appending to the body while the DOM is still being constructed can
* lead to Operation Aborted errors in IE hence this flag is set to
* false by default.
*
*
* @config appendtodocumentbody
* @type Boolean
* @default false
*/
this.cfg.addProperty(DEFAULT_CONFIG.APPEND_TO_DOCUMENT_BODY.key, {
value: DEFAULT_CONFIG.APPEND_TO_DOCUMENT_BODY.value
});
},
/**
* The Module class's initialization method, which is executed for
* Module and all of its subclasses. This method is automatically
* called by the constructor, and sets up all DOM references for
* pre-existing markup, and creates required markup if it is not
* already present.
* @method init
* @param {String} el The element ID representing the Module OR
* @param {HTMLElement} el The element representing the Module
* @param {Object} userConfig The configuration Object literal
* containing the configuration that should be set for this module.
* See configuration documentation for more details.
*/
init: function (el, userConfig) {
var elId, i, child;
this.initEvents();
this.beforeInitEvent.fire(Module);
/**
* The Module's Config object used for monitoring
* configuration properties.
* @property cfg
* @type YAHOO.util.Config
*/
this.cfg = new Config(this);
if (this.isSecure) {
this.imageRoot = Module.IMG_ROOT_SSL;
}
if (typeof el == "string") {
elId = el;
el = document.getElementById(el);
if (! el) {
el = (createModuleTemplate()).cloneNode(false);
el.id = elId;
}