| 2150 |
mathias |
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
|
|
|
5 |
|
|
|
6 |
dojo.require("dojo.fx");
|
|
|
7 |
|
|
|
8 |
// convenience functions:
|
|
|
9 |
dojox.fx.chain = dojo.fx.chain;
|
|
|
10 |
dojox.fx.combine = dojo.fx.combine;
|
|
|
11 |
dojox.fx.wipeIn = dojo.fx.wipeIn;
|
|
|
12 |
dojox.fx.wipeOut = dojo.fx.wipeOut;
|
|
|
13 |
dojox.fx.slideTo = dojo.fx.slideTo;
|
|
|
14 |
|
|
|
15 |
dojox.fx.sizeTo = function(/* Object */args){
|
|
|
16 |
// summary: Create an animation that will size a node
|
|
|
17 |
// description:
|
|
|
18 |
// Returns an animation that will size "node"
|
|
|
19 |
// defined in args Object about it's center to
|
|
|
20 |
// a width and height defined by (args.width, args.height),
|
|
|
21 |
// supporting an optional method: chain||combine mixin
|
|
|
22 |
// (defaults to chain).
|
|
|
23 |
//
|
|
|
24 |
// - works best on absolutely or relatively positioned elements?
|
|
|
25 |
//
|
|
|
26 |
// example:
|
|
|
27 |
// | // size #myNode to 400px x 200px over 1 second
|
|
|
28 |
// | dojo.fx.sizeTo({ node:'myNode',
|
|
|
29 |
// | duration: 1000,
|
|
|
30 |
// | width: 400,
|
|
|
31 |
// | height: 200,
|
|
|
32 |
// | method: "chain"
|
|
|
33 |
// | }).play();
|
|
|
34 |
//
|
|
|
35 |
var node = (args.node = dojo.byId(args.node));
|
|
|
36 |
var compute = dojo.getComputedStyle;
|
|
|
37 |
|
|
|
38 |
var method = args.method || "chain";
|
|
|
39 |
if (method=="chain"){ args.duration = Math.floor(args.duration/2); }
|
|
|
40 |
|
|
|
41 |
var top, newTop, left, newLeft, width, height = null;
|
|
|
42 |
|
|
|
43 |
var init = (function(){
|
|
|
44 |
var innerNode = node;
|
|
|
45 |
return function(){
|
|
|
46 |
var pos = compute(innerNode).position;
|
|
|
47 |
top = (pos == 'absolute' ? node.offsetTop : parseInt(compute(node).top) || 0);
|
|
|
48 |
left = (pos == 'absolute' ? node.offsetLeft : parseInt(compute(node).left) || 0);
|
|
|
49 |
width = parseInt(dojo.style(node,'width'));
|
|
|
50 |
height = parseInt(dojo.style(node,'height'));
|
|
|
51 |
|
|
|
52 |
newLeft = left - Math.floor((args.width - width)/2);
|
|
|
53 |
newTop = top - Math.floor((args.height - height)/2);
|
|
|
54 |
|
|
|
55 |
if(pos != 'absolute' && pos != 'relative'){
|
|
|
56 |
var ret = dojo.coords(innerNode, true);
|
|
|
57 |
top = ret.y;
|
|
|
58 |
left = ret.x;
|
|
|
59 |
innerNode.style.position="absolute";
|
|
|
60 |
innerNode.style.top=top+"px";
|
|
|
61 |
innerNode.style.left=left+"px";
|
|
|
62 |
}
|
|
|
63 |
}
|
|
|
64 |
})();
|
|
|
65 |
init(); // hmmm, do we need to init() or just the once beforeBegin?
|
|
|
66 |
|
|
|
67 |
var anim1 = dojo.animateProperty(dojo.mixin({
|
|
|
68 |
properties: {
|
|
|
69 |
height: { start: height, end: args.height || 0, unit:"px" },
|
|
|
70 |
top: { start: top, end: newTop }
|
|
|
71 |
}
|
|
|
72 |
}, args));
|
|
|
73 |
var anim2 = dojo.animateProperty(dojo.mixin({
|
|
|
74 |
properties: {
|
|
|
75 |
width: { start: width, end: args.width || 0, unit:"px" },
|
|
|
76 |
left: { start: left, end: newLeft }
|
|
|
77 |
}
|
|
|
78 |
}, args));
|
|
|
79 |
|
|
|
80 |
var anim = dojo.fx[((args.method == "combine") ? "combine" : "chain")]([anim1,anim2]);
|
|
|
81 |
dojo.connect(anim, "beforeBegin", anim, init);
|
|
|
82 |
return anim; // dojo._Animation
|
|
|
83 |
};
|
|
|
84 |
|
|
|
85 |
dojox.fx.slideBy = function(/* Object */args){
|
|
|
86 |
// summary: Returns an animation to slide a node by a defined offset.
|
|
|
87 |
//
|
|
|
88 |
// description:
|
|
|
89 |
// Returns an animation that will slide a node (args.node) from it's
|
|
|
90 |
// current position to it's current posision plus the numbers defined
|
|
|
91 |
// in args.top and args.left. standard dojo.fx mixin's apply.
|
|
|
92 |
//
|
|
|
93 |
// example:
|
|
|
94 |
// | // slide domNode 50px down, and 22px left
|
|
|
95 |
// | dojox.fx.slideBy({
|
|
|
96 |
// | node: domNode, duration:400,
|
|
|
97 |
// | top: 50, left: -22
|
|
|
98 |
// | }).play();
|
|
|
99 |
|
|
|
100 |
var node = (args.node = dojo.byId(args.node));
|
|
|
101 |
var compute = dojo.getComputedStyle;
|
|
|
102 |
var top = null; var left = null;
|
|
|
103 |
var init = (function(){
|
|
|
104 |
var innerNode = node;
|
|
|
105 |
return function(){
|
|
|
106 |
var pos = compute(innerNode,'position');
|
|
|
107 |
top = (pos == 'absolute' ? node.offsetTop : parseInt(compute(node, 'top')) || 0);
|
|
|
108 |
left = (pos == 'absolute' ? node.offsetLeft : parseInt(compute(node, 'left')) || 0);
|
|
|
109 |
if(pos != 'absolute' && pos != 'relative'){
|
|
|
110 |
var ret = dojo.coords(innerNode, true);
|
|
|
111 |
top = ret.y;
|
|
|
112 |
left = ret.x;
|
|
|
113 |
innerNode.style.position="absolute";
|
|
|
114 |
innerNode.style.top=top+"px";
|
|
|
115 |
innerNode.style.left=left+"px";
|
|
|
116 |
}
|
|
|
117 |
}
|
|
|
118 |
})();
|
|
|
119 |
init();
|
|
|
120 |
var _anim = dojo.animateProperty(dojo.mixin({
|
|
|
121 |
properties: {
|
|
|
122 |
// FIXME: is there a way to update the _Line after creation?
|
|
|
123 |
// null start values allow chaining to work, animateProperty will
|
|
|
124 |
// determine them for us (except in ie6? -- ugh)
|
|
|
125 |
top: { /* start: top, */end: top+(args.top||0) },
|
|
|
126 |
left: { /* start: left, */end: left+(args.left||0) }
|
|
|
127 |
}
|
|
|
128 |
}, args));
|
|
|
129 |
dojo.connect(_anim,"beforeBegin",_anim,init);
|
|
|
130 |
return _anim; // dojo._Animation
|
|
|
131 |
};
|
|
|
132 |
|
|
|
133 |
dojox.fx.crossFade = function(/* Object */args){
|
|
|
134 |
// summary: Returns an animation cross fading two element simultaneously
|
|
|
135 |
//
|
|
|
136 |
// args:
|
|
|
137 |
// args.nodes: Array - two element array of domNodes, or id's
|
|
|
138 |
//
|
|
|
139 |
// all other standard animation args mixins apply. args.node ignored.
|
|
|
140 |
//
|
|
|
141 |
if(dojo.isArray(args.nodes)){
|
|
|
142 |
// simple check for which node is visible, maybe too simple?
|
|
|
143 |
var node1 = args.nodes[0] = dojo.byId(args.nodes[0]);
|
|
|
144 |
var op1 = dojo.style(node1,"opacity");
|
|
|
145 |
var node2 = args.nodes[1] = dojo.byId(args.nodes[1]);
|
|
|
146 |
var op2 = dojo.style(node2, "opacity");
|
|
|
147 |
|
|
|
148 |
var _anim = dojo.fx.combine([
|
|
|
149 |
dojo[((op1==0)?"fadeIn":"fadeOut")](dojo.mixin({
|
|
|
150 |
node: node1
|
|
|
151 |
},args)),
|
|
|
152 |
dojo[((op1==0)?"fadeOut":"fadeIn")](dojo.mixin({
|
|
|
153 |
node: node2
|
|
|
154 |
},args))
|
|
|
155 |
]);
|
|
|
156 |
return _anim; // dojo._Animation
|
|
|
157 |
}else{
|
|
|
158 |
// improper syntax in args, needs Array
|
|
|
159 |
return false; // Boolean
|
|
|
160 |
}
|
|
|
161 |
};
|
|
|
162 |
|
|
|
163 |
dojox.fx.highlight = function(/*Object*/ args){
|
|
|
164 |
// summary: Highlight a node
|
|
|
165 |
// description:
|
|
|
166 |
// Returns an animation that sets the node background to args.color
|
|
|
167 |
// then gradually fades back the original node background color
|
|
|
168 |
//
|
|
|
169 |
// example:
|
|
|
170 |
// dojox.fx.highlight({ node:"foo" }).play();
|
|
|
171 |
|
|
|
172 |
var node = (args.node = dojo.byId(args.node));
|
|
|
173 |
|
|
|
174 |
args.duration = args.duration || 400;
|
|
|
175 |
// Assign default color light yellow
|
|
|
176 |
var startColor = args.color || '#ffff99';
|
|
|
177 |
var endColor = dojo.style(node, "backgroundColor");
|
|
|
178 |
var wasTransparent = (endColor == "transparent" || endColor == "rgba(0, 0, 0, 0)");
|
|
|
179 |
|
|
|
180 |
var anim = dojo.animateProperty(dojo.mixin({
|
|
|
181 |
properties: {
|
|
|
182 |
backgroundColor: { start: startColor, end: endColor }
|
|
|
183 |
}
|
|
|
184 |
}, args));
|
|
|
185 |
|
|
|
186 |
dojo.connect(anim, "onEnd", anim, function(){
|
|
|
187 |
if(wasTransparent){
|
|
|
188 |
node.style.backgroundColor = "transparent";
|
|
|
189 |
}
|
|
|
190 |
});
|
|
|
191 |
|
|
|
192 |
return anim; // dojo._Animation
|
|
|
193 |
};
|
|
|
194 |
|
|
|
195 |
}
|