| New file |
|---|
| 0,0 → 1,195 |
|---|
| 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"); |
| |
| // convenience functions: |
| dojox.fx.chain = dojo.fx.chain; |
| dojox.fx.combine = dojo.fx.combine; |
| dojox.fx.wipeIn = dojo.fx.wipeIn; |
| dojox.fx.wipeOut = dojo.fx.wipeOut; |
| dojox.fx.slideTo = dojo.fx.slideTo; |
| |
| 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 compute = dojo.getComputedStyle; |
| |
| var method = args.method || "chain"; |
| if (method=="chain"){ args.duration = Math.floor(args.duration/2); } |
| |
| var top, newTop, left, newLeft, width, height = null; |
| |
| var init = (function(){ |
| var innerNode = node; |
| return function(){ |
| var pos = compute(innerNode).position; |
| top = (pos == 'absolute' ? node.offsetTop : parseInt(compute(node).top) || 0); |
| left = (pos == 'absolute' ? node.offsetLeft : parseInt(compute(node).left) || 0); |
| width = parseInt(dojo.style(node,'width')); |
| height = parseInt(dojo.style(node,'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(innerNode, true); |
| top = ret.y; |
| left = ret.x; |
| innerNode.style.position="absolute"; |
| innerNode.style.top=top+"px"; |
| innerNode.style.left=left+"px"; |
| } |
| } |
| })(); |
| init(); // hmmm, do we need to init() or just the once beforeBegin? |
| |
| 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 compute = dojo.getComputedStyle; |
| var top = null; var left = null; |
| var init = (function(){ |
| var innerNode = node; |
| return function(){ |
| var pos = compute(innerNode,'position'); |
| top = (pos == 'absolute' ? node.offsetTop : parseInt(compute(node, 'top')) || 0); |
| left = (pos == 'absolute' ? node.offsetLeft : parseInt(compute(node, 'left')) || 0); |
| if(pos != 'absolute' && pos != 'relative'){ |
| var ret = dojo.coords(innerNode, true); |
| top = ret.y; |
| left = ret.x; |
| innerNode.style.position="absolute"; |
| innerNode.style.top=top+"px"; |
| innerNode.style.left=left+"px"; |
| } |
| } |
| })(); |
| 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 |
| }; |
| |
| } |