YUI recommends YUI 3.
YUI 2 has been deprecated since 2011. This site acts as an archive for files and documentation.
(function() {
/**
* Anim subclass for color transitions.
* <p>Usage: <code>var myAnim = new Y.ColorAnim(el, { backgroundColor: { from: '#FF0000', to: '#FFFFFF' } }, 1, Y.Easing.easeOut);</code> Color values can be specified with either 112233, #112233,
* [255,255,255], or rgb(255,255,255)</p>
* @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;
}
};
})();