1 if(!dojo._hasResource["dojox.fx._base"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
2 dojo._hasResource["dojox.fx._base"] = true;
3 dojo.provide("dojox.fx._base");
4 // summary: add-on Animations to dojo.fx
6 dojo.require("dojo.fx");
8 dojox.fx.sizeTo = function(/* Object */args){
9 // summary: Create an animation that will size a node
11 // Returns an animation that will size "node"
12 // defined in args Object about it's center to
13 // a width and height defined by (args.width, args.height),
14 // supporting an optional method: chain||combine mixin
15 // (defaults to chain).
17 // - works best on absolutely or relatively positioned elements?
20 // | // size #myNode to 400px x 200px over 1 second
21 // | dojo.fx.sizeTo({ node:'myNode',
28 var node = (args.node = dojo.byId(args.node));
30 var method = args.method || "chain";
31 if(!args.duration){ args.duration = 500; } // default duration needed
32 if (method=="chain"){ args.duration = Math.floor(args.duration/2); }
34 var top, newTop, left, newLeft, width, height = null;
36 var init = (function(n){
38 var cs = dojo.getComputedStyle(n);
39 var pos = cs.position;
40 top = (pos == 'absolute' ? n.offsetTop : parseInt(cs.top) || 0);
41 left = (pos == 'absolute' ? n.offsetLeft : parseInt(cs.left) || 0);
42 width = parseInt(cs.width);
43 height = parseInt(cs.height);
45 newLeft = left - Math.floor((args.width - width)/2);
46 newTop = top - Math.floor((args.height - height)/2);
48 if(pos != 'absolute' && pos != 'relative'){
49 var ret = dojo.coords(n, true);
52 n.style.position="absolute";
54 n.style.left=left+"px";
60 var anim1 = dojo.animateProperty(dojo.mixin({
62 height: { start: height, end: args.height || 0, unit:"px" },
63 top: { start: top, end: newTop }
66 var anim2 = dojo.animateProperty(dojo.mixin({
68 width: { start: width, end: args.width || 0, unit:"px" },
69 left: { start: left, end: newLeft }
73 var anim = dojo.fx[((args.method == "combine") ? "combine" : "chain")]([anim1,anim2]);
74 dojo.connect(anim, "beforeBegin", anim, init);
75 return anim; // dojo._Animation
78 dojox.fx.slideBy = function(/* Object */args){
79 // summary: Returns an animation to slide a node by a defined offset.
82 // Returns an animation that will slide a node (args.node) from it's
83 // current position to it's current posision plus the numbers defined
84 // in args.top and args.left. standard dojo.fx mixin's apply.
87 // | // slide domNode 50px down, and 22px left
88 // | dojox.fx.slideBy({
89 // | node: domNode, duration:400,
90 // | top: 50, left: -22
93 var node = (args.node = dojo.byId(args.node));
94 var top = null; var left = null;
96 var init = (function(n){
98 var cs = dojo.getComputedStyle(n);
99 var pos = cs.position;
100 top = (pos == 'absolute' ? n.offsetTop : parseInt(cs.top) || 0);
101 left = (pos == 'absolute' ? n.offsetLeft : parseInt(cs.left) || 0);
102 if(pos != 'absolute' && pos != 'relative'){
103 var ret = dojo.coords(n, true);
106 n.style.position="absolute";
107 n.style.top=top+"px";
108 n.style.left=left+"px";
113 var _anim = dojo.animateProperty(dojo.mixin({
115 // FIXME: is there a way to update the _Line after creation?
116 // null start values allow chaining to work, animateProperty will
117 // determine them for us (except in ie6? -- ugh)
118 top: { /* start: top, */ end: top+(args.top||0) },
119 left: { /* start: left,*/ end: left+(args.left||0) }
122 dojo.connect(_anim,"beforeBegin",_anim,init);
123 return _anim; // dojo._Animation
126 dojox.fx.crossFade = function(/* Object */args){
127 // summary: Returns an animation cross fading two element simultaneously
130 // args.nodes: Array - two element array of domNodes, or id's
132 // all other standard animation args mixins apply. args.node ignored.
134 if(dojo.isArray(args.nodes)){
135 // simple check for which node is visible, maybe too simple?
136 var node1 = args.nodes[0] = dojo.byId(args.nodes[0]);
137 var op1 = dojo.style(node1,"opacity");
138 var node2 = args.nodes[1] = dojo.byId(args.nodes[1]);
139 var op2 = dojo.style(node2, "opacity");
141 var _anim = dojo.fx.combine([
142 dojo[((op1==0)?"fadeIn":"fadeOut")](dojo.mixin({
145 dojo[((op1==0)?"fadeOut":"fadeIn")](dojo.mixin({
149 return _anim; // dojo._Animation
151 // improper syntax in args, needs Array
152 return false; // Boolean
156 dojox.fx.highlight = function(/*Object*/ args){
157 // summary: Highlight a node
159 // Returns an animation that sets the node background to args.color
160 // then gradually fades back the original node background color
163 // dojox.fx.highlight({ node:"foo" }).play();
165 var node = (args.node = dojo.byId(args.node));
167 args.duration = args.duration || 400;
168 // Assign default color light yellow
169 var startColor = args.color || '#ffff99';
170 var endColor = dojo.style(node, "backgroundColor");
171 var wasTransparent = (endColor == "transparent" || endColor == "rgba(0, 0, 0, 0)");
173 var anim = dojo.animateProperty(dojo.mixin({
175 backgroundColor: { start: startColor, end: endColor }
179 dojo.connect(anim, "onEnd", anim, function(){
181 node.style.backgroundColor = "transparent";
185 return anim; // dojo._Animation
189 dojox.fx.wipeTo = function(/*Object*/ args){
190 // summary: Animate a node wiping to a specific width or height
193 // Returns an animation that will expand the
194 // node defined in 'args' object from it's current to
195 // the height or width value given by the args object.
197 // default to height:, so leave height null and specify width:
198 // to wipeTo a width. note: this may be deprecated by a
200 // Note that the final value should not include
201 // units and should be an integer. Thus a valid args object
202 // would look something like this:
204 // dojox.fx.wipeTo({node: "nodeId", height: 200}).play();
206 // Node must have no margin/border/padding, so put another
207 // node inside your target node for additional styling.
209 args.node = dojo.byId(args.node);
210 var node = args.node, s = node.style;
212 var dir = (args.width ? "width" : "height");
213 var endVal = args[dir];
217 // wrapped in functions so we wait till the last second to query (in case value has changed)
219 // start at current [computed] height, but use 1px rather than 0
220 // because 0 causes IE to display the whole panel
222 if(s.visibility=="hidden"||s.display=="none"){
228 var now = dojo.style(node,dir);
229 return Math.max(now, 1);
236 var anim = dojo.animateProperty(dojo.mixin({ properties: props },args));
237 return anim; // dojo._Animation