[dojox][patch] wipeInToHeight Contribution

[guest]

This script hacks dojo.fx.wipeIn so that it wipes in to the finalHeight instead of the scrollHeight. This would be used in the Accordion (I think the dojo Accordion currently does the animation manually...) for wiping in to the calculated height of each content panel.

It's possible to use dojo.animateProperty...but then the person has to check style.display...etc. to see whether the these are set appropriately.

dojo.fx.wipeInToHeight = function(/*Object*/ args){

summary Returns an animation that will expand the node defined in 'args' object from it's current height to the finalHeight given by the args object. Note that the final height should not include units and should be an integer. Thus a valid args object would look something like this: args = {node: dojo.byId(nodeID), finalHeight: 200} Node must have no margin/border/padding. args.node = dojo.byId(args.node); var node = args.node, s = node.style; var finalHeight = args.finalHeight;

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

properties: {

height: {

wrapped in functions so we wait till the last second to query (in case value has changed) start: function(){

start at current [computed] height, but use 1px rather than 0 because 0 causes IE to display the whole panel s.overflow="hidden";

if(s.visibility=="hidden"

s.display=="none"){

s.height="1px"; s.display=""; s.visibility=""; return 1;

}else{

var height = dojo.style(node, "height"); return Math.max(height, 1);

}

}, end: finalHeight

}

}

}, args)); return anim; dojo._Animation

}

[guest]

Just a quick patch:

s.overflow="auto";

So that a scroll bar appears if the finalHeight is less than the scrollHeight

Also, I neglected to add myself in the cc. If this ends up being incorporated, could you please cc me.

[email protected]…

I have a CLA on file.

[guest]

OK - One more patch...leave s.overflow='hidden' as is and add this so that overflow gets set to auto once the animation is done:

dojo.connect(anim, "onEnd", function(){

s.overflow = "auto";

});

[dante]

this could easily live in dojox.fx

thanks. i will get to it.

[guest]

Awesome! Please let me know if there's anything else I can do to help.

[dante]

quick question: does this do anything that dojox.fx.sizeTo doesn't? iirc you can specify a height or width or combo, and get the sizing done.

see: ​http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/fx/tests/test_sizeTo.html

[guest]

Maybe. Let me provide some more background and hopefully the answer will be yes, because dojo.fx.sizeTo() is really sweet.

I looked dojo.fx.sizeTo() when I started and the nodes seemed to be wiping in from the center. What I needed was an animation that works exactly the same as dojo.fx.wipeIn() but lets me specify the height and also sets the domNode.overflow property to auto, so that a scroll bar appears in the box when the height is less than the scroll height.

The reason I hacked dojo.fx.wipeIn is because it initializes the style properties on the node that enable it to be wiped in properly. I'm guessing that dojo.fx.sizeTo() does this as well? So when creating the animation with dojo.fx.wipeInToHeight I do this:

initializeOpenAnimation: function(contentDomNode,contentHeight,wipeDuration) {

var parameters =

{

node: contentDomNode,

finalHeight: contentHeight,

duration: wipeDuration

};

this.openAnimation =

dojo.fx.wipeInToHeight(parameters);

},

And then just play the animation when the accordion header is clicked. Can dojox.fx.sizeTo() do this?

[guest]

One thing that might help things fall into the right places here is the creation of a dojo.animation.Animation base class.

This class would take a DOM node in its constructor and have a Animation.play() method that would be delegated to by subclasses. The method would look something like this

play: function() {

if ( !this.canBeAnimated(this.domNode)) {

this.prepareNodeForAnimation(this.domNode);

}

}

I think the only case for this is nodes that are wiped out. They need certain style parameters set before they can be wiped back in / sized back in. But who knows, other cases might be discovered, and then they'll have a home.

Other classes that perform specific types of animation would subclass the dojo.animation.Animation class. So for example dojo.wipeIn() would create an instance of the dojo.animation.WipeInAnimation?(/*Node*/ domNode) class that encapsulates the wipe in logic needed to wipe in a node.

The dojo.wipeIn, dojo.wipeOut...etc would stay the same / be invoked the same, but would simply create an instance of dojo.animation.WipeInAnimation? and return that instead.

Also, instead of using dojo.wipeIn...developers could do

var wipeInAnimation = dojo.animation.WipeInAnimation?(domNode, parameters); or var wipeInToHeightAnimation = dojo.animation.WipInToHeightAnimation?(domNode, parameters);

Playing the animation is still the same: wipeInToHeightAnimation.play();

I can help explore this more if there is interest.

[ptwobrussell]

I just realized that if you do a wipeIn on a node like <div style="height: 200px; width=200px">foo</div> that the node only wipes in to the height of the text, and not to the height of the full div. Since this issue is so overlapped with the current ticket, but still sort of different, I wanted to explicitly say as much.

[guest]

Just doing a little proof reading and noticed that I needed a "new" in some of the examples, such as:

var wipeInAnimation = new dojo.animation.WipeInAnimation??(domNode, parameters);

[guest]

I've written a little patch so that a div keeps its initial height for further wipeIn after a wipeOut effect. If no initial height is specified, natural height is used.

It only impacts wipeOut and wipeIn functions.

I don't know if it's the right place to post that ;)

[email protected]…

Index: fx.js
===================================================================
--- fx.js	(révision 11940)
+++ fx.js	(copie de travail)
@@ -138,6 +138,7 @@
 	//		Node must have no margin/border/padding.
 	args.node = dojo.byId(args.node);
 	var node = args.node, s = node.style;
+	var v = (s.height=="auto"||s.height=="")?"auto":parseInt(s.height);
 
 	var anim = dojo.animateProperty(dojo.mixin({
 		properties: {
@@ -158,14 +159,14 @@
 					}
 				},
 				end: function(){
-					return node.scrollHeight;
+					return (v=="auto")?node.scrollHeight:v;
 				}
 			}
 		}
 	}, args));
 
 	dojo.connect(anim, "onEnd", function(){ 
-		s.height = "auto";
+		s.height = v; //"auto";
 	});
 
 	return anim; // dojo._Animation
@@ -175,8 +176,10 @@
 	// summary
 	//		Returns an animation that will shrink node defined in "args"
 	//		from it's current height to 1px, and then hide it.
+	//		Reset initial height after animation end
 	var node = args.node = dojo.byId(args.node);
 	var s = node.style;
+	var v = s.height; // Save init height so that we can return to initial state
 
 	var anim = dojo.animateProperty(dojo.mixin({
 		properties: {
@@ -191,7 +194,7 @@
 		s.display = "";
 	});
 	dojo.connect(anim, "onEnd", function(){
-		s.height = "auto";
+		s.height = v;
 		s.display = "none";
 	});

[dante]

(In [12018]) fixes #5213 - adds a wipeTo method to dojox.fx (and dojo.query via ext-dojo.NodeList?) to wipe a node to a specified height or width without taking content size into consideration.

[guest]

Awesome - Thanks Dante. I have not had a chance to play yet, but hoping to come up for some air soon. Nice gravity on the dojo.mo.joe btw.