diff options
Diffstat (limited to 'includes/js/dojox/fx/_base.js')
-rw-r--r-- | includes/js/dojox/fx/_base.js | 240 |
1 files changed, 240 insertions, 0 deletions
diff --git a/includes/js/dojox/fx/_base.js b/includes/js/dojox/fx/_base.js new file mode 100644 index 0000000..61d23a7 --- /dev/null +++ b/includes/js/dojox/fx/_base.js @@ -0,0 +1,240 @@ +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 +} + +} |