Blame | Last modification | View Log | RSS feed
if(!dojo._hasResource["dojo.fx"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
dojo._hasResource["dojo.fx"] = true;
dojo.provide("dojo.fx");
dojo.provide("dojo.fx.Toggler");
dojo.fx.chain = function(/*dojo._Animation[]*/ animations){
// summary: Chain a list of dojo._Animation s to run in sequence
// example:
// | dojo.fx.chain([
// | dojo.fadeIn({ node:node }),
// | dojo.fadeOut({ node:otherNode })
// | ]).play();
//
var first = animations.shift();
var previous = first;
dojo.forEach(animations, function(current){
dojo.connect(previous, "onEnd", current, "play");
previous = current;
});
return first; // dojo._Animation
};
dojo.fx.combine = function(/*dojo._Animation[]*/ animations){
// summary: Combine a list of dojo._Animation s to run in parallel
// example:
// | dojo.fx.combine([
// | dojo.fadeIn({ node:node }),
// | dojo.fadeOut({ node:otherNode })
// | ]).play();
var ctr = new dojo._Animation({ curve: [0, 1] });
if(!animations.length){ return ctr; }
// animations.sort(function(a, b){ return a.duration-b.duration; });
ctr.duration = animations[0].duration;
dojo.forEach(animations, function(current){
dojo.forEach([ "play", "pause", "stop" ],
function(e){
if(current[e]){
dojo.connect(ctr, e, current, e);
}
}
);
});
return ctr; // dojo._Animation
};
dojo.declare("dojo.fx.Toggler", null, {
// summary:
// class constructor for an animation toggler. It accepts a packed
// set of arguments about what type of animation to use in each
// direction, duration, etc.
//
// example:
// | var t = new dojo.fx.Toggler({
// | node: "nodeId",
// | showDuration: 500,
// | // hideDuration will default to "200"
// | showFunc: dojo.wipeIn,
// | // hideFunc will default to "fadeOut"
// | });
// | t.show(100); // delay showing for 100ms
// | // ...time passes...
// | t.hide();
// FIXME: need a policy for where the toggler should "be" the next
// time show/hide are called if we're stopped somewhere in the
// middle.
constructor: function(args){
var _t = this;
dojo.mixin(_t, args);
_t.node = args.node;
_t._showArgs = dojo.mixin({}, args);
_t._showArgs.node = _t.node;
_t._showArgs.duration = _t.showDuration;
_t.showAnim = _t.showFunc(_t._showArgs);
_t._hideArgs = dojo.mixin({}, args);
_t._hideArgs.node = _t.node;
_t._hideArgs.duration = _t.hideDuration;
_t.hideAnim = _t.hideFunc(_t._hideArgs);
dojo.connect(_t.showAnim, "beforeBegin", dojo.hitch(_t.hideAnim, "stop", true));
dojo.connect(_t.hideAnim, "beforeBegin", dojo.hitch(_t.showAnim, "stop", true));
},
// node: DomNode
// the node to toggle
node: null,
// showFunc: Function
// The function that returns the dojo._Animation to show the node
showFunc: dojo.fadeIn,
// hideFunc: Function
// The function that returns the dojo._Animation to hide the node
hideFunc: dojo.fadeOut,
// showDuration:
// Time in milliseconds to run the show Animation
showDuration: 200,
// hideDuration:
// Time in milliseconds to run the hide Animation
hideDuration: 200,
/*=====
_showArgs: null,
_showAnim: null,
_hideArgs: null,
_hideAnim: null,
_isShowing: false,
_isHiding: false,
=====*/
show: function(delay){
// summary: Toggle the node to showing
return this.showAnim.play(delay || 0);
},
hide: function(delay){
// summary: Toggle the node to hidden
return this.hideAnim.play(delay || 0);
}
});
dojo.fx.wipeIn = function(/*Object*/ args){
// summary
// Returns an animation that will expand the
// node defined in 'args' object from it's current height to
// it's natural height (with no scrollbar).
// Node must have no margin/border/padding.
args.node = dojo.byId(args.node);
var node = args.node, s = node.style;
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: function(){
return node.scrollHeight;
}
}
}
}, args));
dojo.connect(anim, "onEnd", function(){
s.height = "auto";
});
return anim; // dojo._Animation
}
dojo.fx.wipeOut = function(/*Object*/ args){
// summary
// Returns an animation that will shrink node defined in "args"
// from it's current height to 1px, and then hide it.
var node = args.node = dojo.byId(args.node);
var s = node.style;
var anim = dojo.animateProperty(dojo.mixin({
properties: {
height: {
end: 1 // 0 causes IE to display the whole panel
}
}
}, args));
dojo.connect(anim, "beforeBegin", function(){
s.overflow = "hidden";
s.display = "";
});
dojo.connect(anim, "onEnd", function(){
s.height = "auto";
s.display = "none";
});
return anim; // dojo._Animation
}
dojo.fx.slideTo = function(/*Object?*/ args){
// summary
// Returns an animation that will slide "node"
// defined in args Object from its current position to
// the position defined by (args.left, args.top).
// example:
// | dojo.fx.slideTo({ node: node, left:"40", top:"50", unit:"px" }).play()
var node = (args.node = dojo.byId(args.node));
var top = null;
var left = null;
var init = (function(n){
return function(){
var cs = dojo.getComputedStyle(n);
var pos = cs.position;
top = (pos == 'absolute' ? n.offsetTop : parseInt(cs.top) || 0);
left = (pos == 'absolute' ? n.offsetLeft : parseInt(cs.left) || 0);
if(pos != 'absolute' && pos != 'relative'){
var ret = dojo.coords(n, true);
top = ret.y;
left = ret.x;
n.style.position="absolute";
n.style.top=top+"px";
n.style.left=left+"px";
}
};
})(node);
init();
var anim = dojo.animateProperty(dojo.mixin({
properties: {
top: { end: args.top||0 },
left: { end: args.left||0 }
}
}, args));
dojo.connect(anim, "beforeBegin", anim, init);
return anim; // dojo._Animation
}
}