Subversion Repositories Applications.papyrus

if(!dojo._hasResource["dojox.fx.style"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.

dojo._hasResource["dojox.fx.style"] = true;

dojo.provide("dojox.fx.style");

dojo.experimental("dojox.fx.style");

//

// summary: dojox.fx CSS Class _Animations:

//

// description: a set of functions to animate properties based on

// 	normalized CSS class definitions.

//

//	provides: addClass, removeClass, and toggleClass

//

dojo.require("dojox.fx._base");

// FIXME: should the call signatures match dojo.addClass/removeClass/toggleClass and extend

// 	by having a third (or fourth) param to mix in additional _Animation args for advanced

//	usage (delay: curve: repeat: easing: etc ... )

dojox.fx.addClass = function(/*dojox.fx._arg.StyleArgs*/ args){

	// summary: Animate the effects of adding a class to a node

	// description:

	//	Creates an animation that will animate

	//	the properties of a node to the properties

	//	defined in a standard CSS .class definition.

	//	(calculating the differences itself)

	//

	// example:

	//

	// 	.bar { line-height: 12px; }

	// 	.foo { line-height: 40px; }

	// 	<div class="bar" id="test">

	//	Multi<br>line<br>text

	//	</div>

	//

	// 	// animate to line-height:40px

	// 	dojo.fx.addClass({ node:"test", cssClass:"foo" }).play();

	//

	var node = (args.node = dojo.byId(args.node));

	var pushClass = (function(){

		// summary: onEnd we want to add the class to the node

		//	(as dojo.addClass naturally would) in case our

		//	class parsing misses anything the browser would

		// 	otherwise interpret. this may cause some flicker,

		//	and will only apply the class so children can inherit

		//	after the animation is done (potentially more flicker)

		var innerNode = node; // FIXME: why do we do this like this?

		return function(){

			dojo.addClass(innerNode, args.cssClass);

			innerNode.style.cssText = _beforeStyle;

		}

	})();

	// _getCalculatedStleChanges is the core of our style/class animations

	var mixedProperties = dojox.fx._getCalculatedStyleChanges(args,true);

	var _beforeStyle = node.style.cssText;

	var _anim = dojo.animateProperty(dojo.mixin({

		properties: mixedProperties

	},args));

	dojo.connect(_anim,"onEnd",_anim,pushClass);

	return _anim; // dojo._Animation

};

dojox.fx.removeClass = function(/*dojox.fx._arg.StyleArgs*/ args){

	// summary: Animate the effects of removing a class from a node

	// description:

	//	Creates an animation that will animate the properties of a

	// 	node (args.node) to the properties calculated after removing

	//	a standard CSS className from a that node.

	//

	//	calls dojo.removeClass(args.cssClass) onEnd of animation

	//

	//	standard dojo._Animation object rules apply.

	//

	// example:

	// |	// animate the removal of "foo" from a node with id="bar"

	// |	dojox.fx.removeClass({

	// |		node: "bar",

	// |		cssClass: "foo"

	// |	}).play();

	var node = (args.node = dojo.byId(args.node));

	var pullClass = (function(){

		// summary: onEnd we want to remove the class from the node

		//	(as dojo.removeClass naturally would) in case our class

		//	parsing misses anything the browser would otherwise

		//	interpret. this may cause some flicker, and will only

		//	apply the class so children can inherit after the

		//	animation is done (potentially more flicker)

		//

		var innerNode = node;

		return function(){

			dojo.removeClass(innerNode, args.cssClass);

			innerNode.style.cssText = _beforeStyle;

		}

	})();

	var mixedProperties = dojox.fx._getCalculatedStyleChanges(args,false);

	var _beforeStyle = node.style.cssText;

	var _anim = dojo.animateProperty(dojo.mixin({

		properties: mixedProperties

	},args));

	dojo.connect(_anim,"onEnd",_anim,pullClass);

	return _anim; // dojo._Animation

};

dojox.fx.toggleClass = function(/*DomNode|String*/node, /*String*/cssClass, /*Boolean?*/condition){

        // summary:

	//	Animate the effects of Toggling a class on a Node

	//

	// description:

	//	creates an animation that will animate the effect of

	//	toggling a class on or off of a node.

        //	Adds a class to node if not present, or removes if present.

        //	Pass a boolean condition if you want to explicitly add or remove.

	// node:

	//	The domNode (or string of the id) to toggle

	// cssClass:

	//	String of the classname to add to the node

        // condition:

        //	If passed, true means to add the class, false means to remove.

	//

	// example:

	// |	// add the class "sampleClass" to a node id="theNode"

	// |	dojox.fx.toggleClass("theNode","sampleClass",true).play();

	// example:

	// |	// toggle the class "sampleClass" on the node id="theNode"

	// |	dojox.fx.toggleClass("theNode","sampleClass").play();

        if(typeof condition == "undefined"){

                condition = !dojo.hasClass(node, cssClass);

        }

        return dojox.fx[(condition ? "addClass" : "removeClass")]({ node: node, cssClass:cssClass }); // dojo._Animation

	// TODO: support 4th param animMixin to allow passing of easing and duration and other _Animtion options

};

dojox.fx._allowedProperties = [

	// summary:

	//	this is our pseudo map of properties we will check for.

	//	it should be much more intuitive. a way to normalize and

	//	"predict" intent, or even something more clever ...

	//	open to suggestions.

	// no-brainers:

	"width",

	"height",

	// only if position = absolute || relative?

	"left", "top", "right", "bottom",

	// these need to be filtered through dojo.colors?

	// "background", // normalize to:

	/* "backgroundImage", */

	// "backgroundPosition", // FIXME: to be effective, this needs "#px #px"?

	"backgroundColor",

	"color",

	// "border",

	"borderBottomColor", "borderBottomWidth",

	"borderTopColor","borderTopWidth",

	"borderLeftColor","borderLeftWidth",

	"borderRightColor","borderRightWidth",

	// "padding", // normalize to:

	"paddingLeft", "paddingRight", "paddingTop", "paddingBottom",

	// "margin", // normalize to:

	"marginLeft", "marginTop", "marginRight", "marginBottom",

	// unit import/delicate?:

	"lineHeight",

	"letterSpacing",

	"fontSize"

];

dojox.fx._getStyleSnapshot = function(/* Object */cache){

	// summary:

	//	uses a dojo.getComputedStyle(node) cache reference and

	// 	iterates through the 'documented/supported animate-able'

	// 	properties.

	//

	// returns:  Array

	//	an array of raw, calculcated values (no keys), to be normalized/compared

	//	elsewhere

	return dojo.map(dojox.fx._allowedProperties,function(style){

		return cache[style]; // String

	}); // Array

};

dojox.fx._getCalculatedStyleChanges = function(/*dojox.fx._arg.StyleArgs*/ args, /*Boolean*/addClass){

	// summary: calclate the difference in style properties between two states

	// description:

	//	calculate and normalize(?) the differences between two states

	//	of a node (args.node) by quickly adding or removing a class, and

	//	iterateing over the results of dojox.fx._getStyleSnapshot()

	//

	// addClass:

	// 	true to calculate what adding a class would do,

	// 	false to calculate what removing the class would do

	var node = (args.node = dojo.byId(args.node));

	var compute = dojo.getComputedStyle(node);

	// take our snapShots

	var _before = dojox.fx._getStyleSnapshot(compute);

	dojo[(addClass ? "addClass" : "removeClass")](node,args.cssClass);

	var _after = dojox.fx._getStyleSnapshot(compute);

	dojo[(addClass ? "removeClass" : "addClass")](node,args.cssClass);

	var calculated = {};

	var i = 0;

	dojo.forEach(dojox.fx._allowedProperties,function(prop){

		if(_before[i] != _after[i]){

			// FIXME: the static unit: px is not good, either. need to parse unit from computed style?

			calculated[prop] = { end: parseInt(_after[i]) /* start: parseInt(_before[i]), unit: 'px' */ };

		}

		i++;

	});

	return calculated;

};

}