--- /dev/null
+if(!dojo._hasResource["dojox.fx._base"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
+dojo._hasResource["dojox.fx._base"] = true;
+dojo.provide("dojox.fx._base");
+// summary: add-on Animations to dojo.fx
+
+dojo.require("dojo.fx");
+
+dojox.fx.sizeTo = function(/* Object */args){
+ // summary: Create an animation that will size a node
+ // description:
+ // Returns an animation that will size "node"
+ // defined in args Object about it's center to
+ // a width and height defined by (args.width, args.height),
+ // supporting an optional method: chain||combine mixin
+ // (defaults to chain).
+ //
+ // - works best on absolutely or relatively positioned elements?
+ //
+ // example:
+ // | // size #myNode to 400px x 200px over 1 second
+ // | dojo.fx.sizeTo({ node:'myNode',
+ // | duration: 1000,
+ // | width: 400,
+ // | height: 200,
+ // | method: "chain"
+ // | }).play();
+ //
+ var node = (args.node = dojo.byId(args.node));
+
+ var method = args.method || "chain";
+ if(!args.duration){ args.duration = 500; } // default duration needed
+ if (method=="chain"){ args.duration = Math.floor(args.duration/2); }
+
+ var top, newTop, left, newLeft, width, height = 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);
+ width = parseInt(cs.width);
+ height = parseInt(cs.height);
+
+ newLeft = left - Math.floor((args.width - width)/2);
+ newTop = top - Math.floor((args.height - height)/2);
+
+ 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 anim1 = dojo.animateProperty(dojo.mixin({
+ properties: {
+ height: { start: height, end: args.height || 0, unit:"px" },
+ top: { start: top, end: newTop }
+ }
+ }, args));
+ var anim2 = dojo.animateProperty(dojo.mixin({
+ properties: {
+ width: { start: width, end: args.width || 0, unit:"px" },
+ left: { start: left, end: newLeft }
+ }
+ }, args));
+
+ var anim = dojo.fx[((args.method == "combine") ? "combine" : "chain")]([anim1,anim2]);
+ dojo.connect(anim, "beforeBegin", anim, init);
+ return anim; // dojo._Animation
+};
+
+dojox.fx.slideBy = function(/* Object */args){
+ // summary: Returns an animation to slide a node by a defined offset.
+ //
+ // description:
+ // Returns an animation that will slide a node (args.node) from it's
+ // current position to it's current posision plus the numbers defined
+ // in args.top and args.left. standard dojo.fx mixin's apply.
+ //
+ // example:
+ // | // slide domNode 50px down, and 22px left
+ // | dojox.fx.slideBy({
+ // | node: domNode, duration:400,
+ // | top: 50, left: -22
+ // | }).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: {
+ // FIXME: is there a way to update the _Line after creation?
+ // null start values allow chaining to work, animateProperty will
+ // determine them for us (except in ie6? -- ugh)
+ top: { /* start: top, */ end: top+(args.top||0) },
+ left: { /* start: left,*/ end: left+(args.left||0) }
+ }
+ }, args));
+ dojo.connect(_anim,"beforeBegin",_anim,init);
+ return _anim; // dojo._Animation
+};
+
+dojox.fx.crossFade = function(/* Object */args){
+ // summary: Returns an animation cross fading two element simultaneously
+ //
+ // args:
+ // args.nodes: Array - two element array of domNodes, or id's
+ //
+ // all other standard animation args mixins apply. args.node ignored.
+ //
+ if(dojo.isArray(args.nodes)){
+ // simple check for which node is visible, maybe too simple?
+ var node1 = args.nodes[0] = dojo.byId(args.nodes[0]);
+ var op1 = dojo.style(node1,"opacity");
+ var node2 = args.nodes[1] = dojo.byId(args.nodes[1]);
+ var op2 = dojo.style(node2, "opacity");
+
+ var _anim = dojo.fx.combine([
+ dojo[((op1==0)?"fadeIn":"fadeOut")](dojo.mixin({
+ node: node1
+ },args)),
+ dojo[((op1==0)?"fadeOut":"fadeIn")](dojo.mixin({
+ node: node2
+ },args))
+ ]);
+ return _anim; // dojo._Animation
+ }else{
+ // improper syntax in args, needs Array
+ return false; // Boolean
+ }
+};
+
+dojox.fx.highlight = function(/*Object*/ args){
+ // summary: Highlight a node
+ // description:
+ // Returns an animation that sets the node background to args.color
+ // then gradually fades back the original node background color
+ //
+ // example:
+ // dojox.fx.highlight({ node:"foo" }).play();
+
+ var node = (args.node = dojo.byId(args.node));
+
+ args.duration = args.duration || 400;
+ // Assign default color light yellow
+ var startColor = args.color || '#ffff99';
+ var endColor = dojo.style(node, "backgroundColor");
+ var wasTransparent = (endColor == "transparent" || endColor == "rgba(0, 0, 0, 0)");
+
+ var anim = dojo.animateProperty(dojo.mixin({
+ properties: {
+ backgroundColor: { start: startColor, end: endColor }
+ }
+ }, args));
+
+ dojo.connect(anim, "onEnd", anim, function(){
+ if(wasTransparent){
+ node.style.backgroundColor = "transparent";
+ }
+ });
+
+ return anim; // dojo._Animation
+};
+
+
+dojox.fx.wipeTo = function(/*Object*/ args){
+ // summary: Animate a node wiping to a specific width or height
+ //
+ // description:
+ // Returns an animation that will expand the
+ // node defined in 'args' object from it's current to
+ // the height or width value given by the args object.
+ //
+ // default to height:, so leave height null and specify width:
+ // to wipeTo a width. note: this may be deprecated by a
+ //
+ // Note that the final value should not include
+ // units and should be an integer. Thus a valid args object
+ // would look something like this:
+ //
+ // dojox.fx.wipeTo({node: "nodeId", height: 200}).play();
+ //
+ // Node must have no margin/border/padding, so put another
+ // node inside your target node for additional styling.
+
+ args.node = dojo.byId(args.node);
+ var node = args.node, s = node.style;
+
+ var dir = (args.width ? "width" : "height");
+ var endVal = args[dir];
+
+ var props = {};
+ props[dir] = {
+ // 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[dir] = "1px";
+ s.display="";
+ s.visibility="";
+ return 1;
+ }else{
+ var now = dojo.style(node,dir);
+ return Math.max(now, 1);
+ }
+ },
+ end: endVal,
+ unit: "px"
+ };
+
+ var anim = dojo.animateProperty(dojo.mixin({ properties: props },args));
+ return anim; // dojo._Animation
+}
+
+}
projects / eow / blobdiff