#5213 closed defect (fixed)
[dojox][patch] wipeInToHeight Contribution
Reported by: | guest | Owned by: | dante |
---|---|---|---|
Priority: | high | Milestone: | 1.1 |
Component: | Dojox | Version: | 1.0 |
Keywords: | Cc: | [email protected]…, [email protected]… | |
Blocked By: | Blocking: |
Description
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
}
Attachments (1)
Change History (14)
Changed 13 years ago by
Attachment: | snippet.js added |
---|
comment:1 Changed 13 years ago by
comment:2 Changed 13 years ago by
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";
});
comment:3 Changed 13 years ago by
Cc: | [email protected]… added |
---|---|
Component: | Core → Dojox |
Owner: | changed from anonymous to dante |
Status: | new → assigned |
Summary: | wipeInToHeight Contribution → [dojox][patch] wipeInToHeight Contribution |
this could easily live in dojox.fx
thanks. i will get to it.
comment:4 Changed 13 years ago by
Awesome! Please let me know if there's anything else I can do to help.
comment:5 Changed 13 years ago by
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
comment:6 Changed 13 years ago by
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?
comment:7 follow-up: 9 Changed 13 years ago by
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.
comment:8 Changed 13 years ago by
Cc: | [email protected]… added |
---|
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.
comment:9 Changed 13 years ago by
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);
comment:10 Changed 13 years ago by
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 ;)
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"; });
comment:11 Changed 13 years ago by
Milestone: | → 1.1 |
---|
comment:12 follow-up: 13 Changed 13 years ago by
Resolution: | → fixed |
---|---|
Status: | assigned → closed |
comment:13 Changed 13 years ago by
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.
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.