diff options
Diffstat (limited to 'includes/js/dojox/fx')
36 files changed, 3394 insertions, 0 deletions
diff --git a/includes/js/dojox/fx/README b/includes/js/dojox/fx/README new file mode 100644 index 0000000..7eb06a8 --- /dev/null +++ b/includes/js/dojox/fx/README @@ -0,0 +1,77 @@ +------------------------------------------------------------------------------- +dojox.fx +------------------------------------------------------------------------------- +Version 1.0.0 +Release date: 10/31/2007 +------------------------------------------------------------------------------- +Project state: +prototype / experimental +------------------------------------------------------------------------------- +Credits + Peter Higgins (dante) + Jonathan Bond-Caron (jbondc@gmail.com) + Shane O'Sullivan (shaneosullivan1@gmail.com) + Bryan Forbes (bforbes) + +------------------------------------------------------------------------------- +Project description + + dojox.fx provides a class of animation effects to use, and + other animation and Effects additions to dojo base. + +------------------------------------------------------------------------------- +Dependencies: + + dojox.fx requires dojo (core) and the dojo.fx package + dojox.fx.easing requires only dojo core. + dojox.fx.scroll requires dojox.fx._core and dojo.fx + +------------------------------------------------------------------------------- +Documentation + + existing API surface: + + dojox.fx._base: + - dojox.fx.crossFade - crossfade two nodes easily + - dojox.fx.sizeTo - size a node about it's center to a new width/height + - dojox.fx.slideBy - slide a node by a t,l offset + - dojox.fx.highlight - animates the background color of a node, and returns + it to the color it was. + + (all use standard _Animation properties, like duration, easing, node, etc) + + dojox.fx._core: + - dojox.fx._Line - a 2-d _Line implementation, backwards compatible with + dojo._Line ... you might could safely do something akin to + dojo._Line.prototype = dojox.fx._Line.prototype; + and enable this for all dojo _Animations? + + dojox.fx.style: - experimental CSS animation via class definitions + - dojox.fx.addClass - animate the effects of applying a class to a node + - dojox.fx.removeClass - " " " " removing a class from a node + - dojox.fx.toggleClass - wrapper for addClass/removeClass + + dojox.fx.easing: - a collection of easing functions to use + this is a "stand alone" class, and can be used via: + dojo.require("dojox.fx.easing"); + to use in an _Animation easing: property + ported/decoded by Bryan Forbes from Robert Penner's Flash easing + functions, contributed under CLA. + + dojox.fx.ext-dojo.NodeList - extensions to dojo.NodeList-fx wrapping the + relevant dojox.fx animations into dojo.NodeList + + dojox.fx.Shadow - Class to add drop shadows to a node + +------------------------------------------------------------------------------- +Installation instructions + +Grab the following from the Dojo SVN Repository: +http://svn.dojotoolkit.org/dojo/dojox/trunk/fx.js +http://svn.dojotoolkit.org/dojo/dojox/trunk/fx/* + +Install into the following directory structure: +/dojox/fx/ + +...which should be at the same level as your Dojo checkout. +------------------------------------------------------------------------------- diff --git a/includes/js/dojox/fx/Shadow.js b/includes/js/dojox/fx/Shadow.js new file mode 100644 index 0000000..7ed4c55 --- /dev/null +++ b/includes/js/dojox/fx/Shadow.js @@ -0,0 +1,151 @@ +if(!dojo._hasResource["dojox.fx.Shadow"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code. +dojo._hasResource["dojox.fx.Shadow"] = true; +dojo.provide("dojox.fx.Shadow"); +dojo.experimental("dojox.fx.Shadow"); + +dojo.require("dijit._Widget"); +dojo.require("dojo.NodeList-fx"); + +dojo.declare("dojox.fx.Shadow", + dijit._Widget,{ + // summary: Adds a drop-shadow to a node. + // + // example: + // | // add drop shadows to all nodes with class="hasShadow" + // | dojo.query(".hasShadow").forEach(function(n){ + // | var foo = new dojox.fx.Shadow({ node: n }); + // | foo.startup(); + // | }); + // + // shadowPng: String + // Base location for drop-shadow images + shadowPng: dojo.moduleUrl("dojox.fx", "resources/shadow"), + + // shadowThickness: Integer + // How wide (in px) to make the shadow + shadowThickness: 7, + + // shadowOffset: Integer + // How deep to make the shadow appear to be + shadowOffset: 3, + + // opacity: Float + // Overall opacity of the shadow + opacity: 0.75, + + // animate: Boolean + // A toggle to disable animated transitions + animate: false, + + // node: DomNode + // The node we will be applying this shadow to + node: null, + + startup: function(){ + // summary: Initializes the shadow. + + this.inherited(arguments); + this.node.style.position = "relative"; + // make all the pieces of the shadow, and position/size them as much + // as possible (but a lot of the coordinates are set in sizeShadow + this.pieces={}; + var x1 = -1 * this.shadowThickness; + var y0 = this.shadowOffset; + var y1 = this.shadowOffset + this.shadowThickness; + this._makePiece("tl", "top", y0, "left", x1); + this._makePiece("l", "top", y1, "left", x1, "scale"); + this._makePiece("tr", "top", y0, "left", 0); + this._makePiece("r", "top", y1, "left", 0, "scale"); + this._makePiece("bl", "top", 0, "left", x1); + this._makePiece("b", "top", 0, "left", 0, "crop"); + this._makePiece("br", "top", 0, "left", 0); + + this.nodeList = dojo.query(".shadowPiece",this.node); + + this.setOpacity(this.opacity); + this.resize(); + }, + + _makePiece: function(name, vertAttach, vertCoord, horzAttach, horzCoord, sizing){ + // summary: append a shadow pieces to the node, and position it + var img; + var url = this.shadowPng + name.toUpperCase() + ".png"; + if((dojo.isIE)&&(dojo.isIE<7)){ + img=document.createElement("div"); + img.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+url+"'"+ + (sizing?", sizingMethod='"+sizing+"'":"") + ")"; + }else{ + img=document.createElement("img"); + img.src=url; + } + + img.style.position="absolute"; + img.style[vertAttach]=vertCoord+"px"; + img.style[horzAttach]=horzCoord+"px"; + img.style.width=this.shadowThickness+"px"; + img.style.height=this.shadowThickness+"px"; + dojo.addClass(img,"shadowPiece"); + this.pieces[name]=img; + this.node.appendChild(img); + + }, + + setOpacity: function(/* Float */n,/* Object? */animArgs){ + // summary: set the opacity of the underlay + // note: does not work in IE? FIXME. + if(dojo.isIE){ return; } + if(!animArgs){ animArgs = {}; } + if(this.animate){ + var _anims = []; + this.nodeList.forEach(function(node){ + _anims.push(dojo._fade(dojo.mixin(animArgs,{ node: node, end: n }))); + }); + dojo.fx.combine(_anims).play(); + }else{ + this.nodeList.style("opacity",n); + } + + }, + + setDisabled: function(/* Boolean */disabled){ + // summary: enable / disable the shadow + if(disabled){ + if(this.disabled){ return; } + if(this.animate){ this.nodeList.fadeOut().play(); + }else{ this.nodeList.style("visibility","hidden"); } + this.disabled = true; + }else{ + if(!this.disabled){ return; } + if(this.animate){ this.nodeList.fadeIn().play(); + }else{ this.nodeList.style("visibility","visible"); } + this.disabled = false; + } + }, + + resize: function(/* dojox.fx._arg.ShadowResizeArgs */args){ + // summary: Resizes the shadow based on width and height. + var x; var y; + if(args){ x = args.x; y = args.y; + }else{ + var co = dojo._getBorderBox(this.node); + x = co.w; y = co.h; + } + var sideHeight = y - (this.shadowOffset+this.shadowThickness); + if (sideHeight < 0) { sideHeight = 0; } + if (y < 1) { y = 1; } + if (x < 1) { x = 1; } + with(this.pieces){ + l.style.height = sideHeight+"px"; + r.style.height = sideHeight+"px"; + b.style.width = x+"px"; + bl.style.top = y+"px"; + b.style.top = y+"px"; + br.style.top = y+"px"; + tr.style.left = x+"px"; + r.style.left = x+"px"; + br.style.left = x+"px"; + } + } +}); + +} diff --git a/includes/js/dojox/fx/_arg.js b/includes/js/dojox/fx/_arg.js new file mode 100644 index 0000000..b90f0d9 --- /dev/null +++ b/includes/js/dojox/fx/_arg.js @@ -0,0 +1,27 @@ +if(!dojo._hasResource["dojox.fx._arg"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code. +dojo._hasResource["dojox.fx._arg"] = true; +dojo.provide("dojox.fx._arg"); + +dojox.fx._arg.StyleArgs = function(/*Object*/ args){ + // summary: + // The node and CSS class to use for style manipulations. + // node: DOMNode + // The node to manipulate + // cssClass: String + // The class to use during the manipulation + this.node = args.node; + this.cssClass = args.cssClass; +} + +dojox.fx._arg.ShadowResizeArgs = function(/*Object*/ args){ + // summary: + // The odd way to document object parameters. + // x: Integer + // the width to set + // y: Integer + // the height to set + this.x = args.x; + this.y = args.y; +} + +} 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 +} + +} diff --git a/includes/js/dojox/fx/_core.js b/includes/js/dojox/fx/_core.js new file mode 100644 index 0000000..54698ad --- /dev/null +++ b/includes/js/dojox/fx/_core.js @@ -0,0 +1,60 @@ +if(!dojo._hasResource["dojox.fx._core"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code. +dojo._hasResource["dojox.fx._core"] = true; +dojo.provide("dojox.fx._core"); + +dojox.fx._Line = function(start, end){ + // summary: a custom _Line to accomodate multi-dimensional values + // + // description: + // a normal dojo._Line is the curve, and does Line(start,end) + // for propertyAnimation. as we make more complicatied animations, we realize + // some properties can have 2, or 4 values relevant (x,y) or (t,l,r,b) for example + // + // this function provides support for those Lines, and is ported directly from 0.4 + // this is a lot of extra code for something so seldom used, so we'll put it here as + // and optional core addition. you can create a new line, and use it during onAnimate + // as you see fit. + // + // start: Integer|Array + // An Integer (or an Array of integers) to use as a starting point + // end: Integer|Array + // An Integer (or an Array of integers) to use as an ending point + // + // example: see dojox.fx.smoothScroll + // + // example: + // | // this is 10 .. 100 and 50 .. 500 + // | var curve = new dojox.fx._Line([10,50],[100,500]); + // | // dojo._Animation.onAnimate is called at every step of the animation + // | // to define current values. this _Line returns an array + // | // at each step. arguments[0] and [1] in this example. + // + this.start = start; + this.end = end; + if(dojo.isArray(start)){ + // multi-dimensional branch + var diff = []; + dojo.forEach(this.start, function(s,i){ + diff[i] = this.end[i] - s; + }, this); + + this.getValue = function(/*float*/ n){ + var res = []; + dojo.forEach(this.start, function(s, i){ + res[i] = (diff[i] * n) + s; + }, this); + return res; // Array + } + }else{ + // single value branch, document here for both branches: + var diff = end - start; + this.getValue = function(/*float*/ n){ + // summary: Returns the point on the line, or an array of points + // n: a floating point number greater than 0 and less than 1 + // returns: Mixed + return (diff * n) + this.start; // Decimal + } + } +}; + +} diff --git a/includes/js/dojox/fx/easing.js b/includes/js/dojox/fx/easing.js new file mode 100644 index 0000000..444a8e9 --- /dev/null +++ b/includes/js/dojox/fx/easing.js @@ -0,0 +1,223 @@ +if(!dojo._hasResource["dojox.fx.easing"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code. +dojo._hasResource["dojox.fx.easing"] = true; +dojo.provide("dojox.fx.easing"); +/* + dojox.fx.easing is in this little file so you don't need dojox.fx to utilize this. + dojox.fx has a lot of fun animations, but this module is optimized for size ... + +*/ +dojox.fx.easing = { + // summary: Collection of easing functions to use beyond the default dojo._defaultEasing + // + // description: + // Easing functions are used to manipulate the iteration through + // an _Animation's _Line. _Line being the properties of an Animation, + // and the easing function progresses through that Line determing + // how quickly (or slowly) it should go. Or more accurately: modify + // the value of the _Line based on the percentage of animation completed. + // + // example: + // | dojo.require("dojox.fx.easing"); + // | var anim = dojo.fadeOut({ + // | node: 'node', + // | duration: 2000, + // | easing: dojox.fx.easing.quadIn + // | }).play(); + // + + linear: function(/* Decimal? */n){ + // summary: A linear easing function + return n; + }, + + quadIn: function(/* Decimal? */n){ + return Math.pow(n, 2); + }, + + quadOut: function(/* Decimal? */n){ + return n * (n-2) * -1; + }, + + quadInOut: function(/* Decimal? */n){ + n=n*2; + if(n<1){ return Math.pow(n, 2) / 2; } + return -1 * ((--n)*(n-2) - 1) / 2; + }, + + cubicIn: function(/* Decimal? */n){ + return Math.pow(n, 3); + }, + + cubicOut: function(/* Decimal? */n){ + return Math.pow(n-1, 3) + 1; + }, + + cubicInOut: function(/* Decimal? */n){ + n=n*2; + if(n<1){ return Math.pow(n, 3) / 2; } + n-=2; + return (Math.pow(n, 3) + 2) / 2; + }, + + quartIn: function(/* Decimal? */n){ + return Math.pow(n, 4); + }, + + quartOut: function(/* Decimal? */n){ + return -1 * (Math.pow(n-1, 4) - 1); + }, + + quartInOut: function(/* Decimal? */n){ + n=n*2; + if(n<1){ return Math.pow(n, 4) / 2; } + n-=2; + return -1/2 * (Math.pow(n, 4) - 2); + }, + + quintIn: function(/* Decimal? */n){ + return Math.pow(n, 5); + }, + + quintOut: function(/* Decimal? */n){ + return Math.pow(n-1, 5) + 1; + }, + + quintInOut: function(/* Decimal? */n){ + n=n*2; + if(n<1){ return Math.pow(n, 5) / 2; }; + n-=2; + return (Math.pow(n, 5) + 2) / 2; + }, + + sineIn: function(/* Decimal? */n){ + return -1 * Math.cos(n * (Math.PI/2)) + 1; + }, + + sineOut: function(/* Decimal? */n){ + return Math.sin(n * (Math.PI/2)); + }, + + sineInOut: function(/* Decimal? */n){ + return -1 * (Math.cos(Math.PI*n) - 1) / 2; + }, + + expoIn: function(/* Decimal? */n){ + return (n==0) ? 0 : Math.pow(2, 10 * (n - 1)); + }, + + expoOut: function(/* Decimal? */n){ + return (n==1) ? 1 : (-1 * Math.pow(2, -10 * n) + 1); + }, + + expoInOut: function(/* Decimal? */n){ + if(n==0){ return 0; } + if(n==1){ return 1; } + n = n*2; + if(n<1){ return Math.pow(2, 10 * (n-1)) / 2; } + --n; + return (-1 * Math.pow(2, -10 * n) + 2) / 2; + }, + + circIn: function(/* Decimal? */n){ + return -1 * (Math.sqrt(1 - Math.pow(n, 2)) - 1); + }, + + circOut: function(/* Decimal? */n){ + n = n-1; + return Math.sqrt(1 - Math.pow(n, 2)); + }, + + circInOut: function(/* Decimal? */n){ + n = n*2; + if(n<1){ return -1/2 * (Math.sqrt(1 - Math.pow(n, 2)) - 1); } + n-=2; + return 1/2 * (Math.sqrt(1 - Math.pow(n, 2)) + 1); + }, + + backIn: function(/* Decimal? */n){ + var s = 1.70158; + return Math.pow(n, 2) * ((s+1)*n - s); + }, + + backOut: function(/* Decimal? */n){ + // summary: an easing function that pops past the range briefly, and + // slowly comes back. + n = n - 1; + var s = 1.70158; + return Math.pow(n, 2) * ((s + 1) * n + s) + 1; + }, + + backInOut: function(/* Decimal? */n){ + var s = 1.70158 * 1.525; + n = n*2; + if(n < 1){ return (Math.pow(n, 2)*((s+1)*n - s))/2; } + n-=2; + return (Math.pow(n, 2)*((s+1)*n + s) + 2)/2; + }, + + elasticIn: function(/* Decimal? */n){ + if(n==0){ return 0; } + if(n==1){ return 1; } + var p = .3; + var s = p/4; + n = n - 1; + return -1 * Math.pow(2,10*n) * Math.sin((n-s)*(2*Math.PI)/p); + }, + + elasticOut: function(/* Decimal? */n){ + // summary: An easing function that elasticly snaps around the target value, near the end of the Animation + if(n==0) return 0; + if(n==1) return 1; + var p = .3; + var s = p/4; + return Math.pow(2,-10*n) * Math.sin((n-s)*(2*Math.PI)/p) + 1; + }, + + elasticInOut: function(/* Decimal? */n){ + // summary: An easing function that elasticly snaps around the value, near the beginning and end of the Animation + if(n==0) return 0; + n = n*2; + if(n==2) return 1; + var p = .3*1.5; + var s = p/4; + if(n<1){ + n-=1; + return -.5*(Math.pow(2,10*n) * Math.sin((n-s)*(2*Math.PI)/p)); + } + n-=1; + return .5*(Math.pow(2,-10*n) * Math.sin((n-s)*(2*Math.PI)/p)) + 1; + }, + + bounceIn: function(/* Decimal? */n){ + // summary: An easing function that "bounces" near the beginning of an Animation + return (1 - dojox.fx.easing.bounceOut(1-n)); // Decimal + }, + + bounceOut: function(/* Decimal? */n){ + // summary: An easing function that "bounces" near the end of an Animation + var s=7.5625; + var p=2.75; + var l; + if(n < (1 / p)){ + l = s*Math.pow(n, 2); + }else if(n < (2 / p)){ + n -= (1.5 / p); + l = s * Math.pow(n, 2) + .75; + }else if(n < (2.5 / p)){ + n -= (2.25 / p); + l = s * Math.pow(n, 2) + .9375; + }else{ + n -= (2.625 / p); + l = s * Math.pow(n, 2) + .984375; + } + return l; + }, + + bounceInOut: function(/* Decimal? */n){ + // summary: An easing function that "bounces" at the beginning and end of the Animation + if(n<0.5){ return dojox.fx.easing.bounceIn(n*2) / 2; } + return (dojox.fx.easing.bounceOut(n*2-1) / 2) + 0.5; // Decimal + } +}; + +} diff --git a/includes/js/dojox/fx/ext-dojo/NodeList.js b/includes/js/dojox/fx/ext-dojo/NodeList.js new file mode 100644 index 0000000..486b5fe --- /dev/null +++ b/includes/js/dojox/fx/ext-dojo/NodeList.js @@ -0,0 +1,66 @@ +if(!dojo._hasResource["dojox.fx.ext-dojo.NodeList"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code. +dojo._hasResource["dojox.fx.ext-dojo.NodeList"] = true; +dojo.provide("dojox.fx.ext-dojo.NodeList"); +dojo.experimental("dojox.fx.ext-dojo.NodeList"); +// summary: Core extensions to dojo.NodeList providing addtional fx to dojo.NodeList-fx +// description: +// A Package to extend dojo base NodeList with fx provided by the dojox.fx project. +// These are experimental animations, in an experimental + +dojo.require("dojo.NodeList-fx"); +dojo.require("dojox.fx"); + +dojo.extend(dojo.NodeList, { + + sizeTo: function(args){ + // summary: + // size all elements of this NodeList. Returns an instance of dojo._Animation + // example: + // | // size all divs with class "blah" + // | dojo.query("div.blah").sizeTo({ + // | width:50, + // | height:50 + // | }).play(); + return this._anim(dojox.fx, "sizeTo", args); // dojo._Animation + }, + + slideBy: function(args){ + // summary: + // slide all elements of this NodeList. Returns an instance of dojo._Animation + // + // example: + // | // slide all tables with class "blah" 10 px + // | dojo.query("table.blah").slideBy({ top:10, left:10 }).play(); + return this._anim(dojox.fx, "slideBy", args); // dojo._Animation + }, + + highlight: function(args){ + // summary: + // highlight all elements of the node list. + // Returns an instance of dojo._Animation + // example: + // | // highlight all links with class "foo" + // | dojo.query("a.foo").hightlight().play(); + return this._anim(dojox.fx, "highlight", args); // dojo._Animation + }, + + fadeTo: function(args){ + // summary: + // fade all elements of the node list to a specified opacity + // example: + // | // fade all elements with class "bar" to to 50% opacity + // | dojo.query(".bar").fadeTo({ end: 0.5 }).play(); + return this._anim(dojo,"_fade",args); + }, + + wipeTo: function(args){ + // summary: + // Wipe all elements of the NodeList to a specified width: or height: + // example: + // | dojo.query(".box").wipeTo({ width: 300px }).play(); + return this._anim(dojox.fx, "wipeTo", args); + } + +}); + +} diff --git a/includes/js/dojox/fx/resources/shadowB.png b/includes/js/dojox/fx/resources/shadowB.png Binary files differnew file mode 100644 index 0000000..0da8a2a --- /dev/null +++ b/includes/js/dojox/fx/resources/shadowB.png diff --git a/includes/js/dojox/fx/resources/shadowBL.png b/includes/js/dojox/fx/resources/shadowBL.png Binary files differnew file mode 100644 index 0000000..4926283 --- /dev/null +++ b/includes/js/dojox/fx/resources/shadowBL.png diff --git a/includes/js/dojox/fx/resources/shadowBR.png b/includes/js/dojox/fx/resources/shadowBR.png Binary files differnew file mode 100644 index 0000000..ee704df --- /dev/null +++ b/includes/js/dojox/fx/resources/shadowBR.png diff --git a/includes/js/dojox/fx/resources/shadowL.png b/includes/js/dojox/fx/resources/shadowL.png Binary files differnew file mode 100644 index 0000000..67ebc2e --- /dev/null +++ b/includes/js/dojox/fx/resources/shadowL.png diff --git a/includes/js/dojox/fx/resources/shadowR.png b/includes/js/dojox/fx/resources/shadowR.png Binary files differnew file mode 100644 index 0000000..8d0c99d --- /dev/null +++ b/includes/js/dojox/fx/resources/shadowR.png diff --git a/includes/js/dojox/fx/resources/shadowT.png b/includes/js/dojox/fx/resources/shadowT.png Binary files differnew file mode 100644 index 0000000..ea99436 --- /dev/null +++ b/includes/js/dojox/fx/resources/shadowT.png diff --git a/includes/js/dojox/fx/resources/shadowTL.png b/includes/js/dojox/fx/resources/shadowTL.png Binary files differnew file mode 100644 index 0000000..388742a --- /dev/null +++ b/includes/js/dojox/fx/resources/shadowTL.png diff --git a/includes/js/dojox/fx/resources/shadowTR.png b/includes/js/dojox/fx/resources/shadowTR.png Binary files differnew file mode 100644 index 0000000..c9d4f04 --- /dev/null +++ b/includes/js/dojox/fx/resources/shadowTR.png diff --git a/includes/js/dojox/fx/scroll.js b/includes/js/dojox/fx/scroll.js new file mode 100644 index 0000000..34111a2 --- /dev/null +++ b/includes/js/dojox/fx/scroll.js @@ -0,0 +1,40 @@ +if(!dojo._hasResource["dojox.fx.scroll"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code. +dojo._hasResource["dojox.fx.scroll"] = true; +dojo.provide("dojox.fx.scroll"); +dojo.experimental("dojox.fx.scroll"); + +dojo.require("dojox.fx._core"); + +dojox.fx.smoothScroll = function(/* Object */args){ + // summary: Returns an animation that will smooth-scroll to a node (specified in etup()) + // description: This implementation support either horizental or vertical scroll, as well as + // both. In addition, element in iframe can be scrolled to correctly. + // offset: {x: int, y: int} this will be added to the target position + // duration: Duration of the animation in milliseconds. + // win: a node or window object to scroll + + if(!args.target){ args.target = dojo.coords(args.node,true); } + + var isWindow = dojo[(dojo.isIE ? "isObject" : "isFunction")](args["win"].scrollTo); + + var _anim = (isWindow) ? + (function(val){ + args.win.scrollTo(val[0],val[1]); + }) : + (function(val){ + args.win.scrollLeft = val[0]; + args.win.scrollTop = val[1]; + }); + + var anim = new dojo._Animation(dojo.mixin({ + beforeBegin: function(){ + if(this.curve){ delete this.curve; } + var current = isWindow ? dojo._docScroll() : {x: args.win.scrollLeft, y: args.win.scrollTop}; + anim.curve = new dojox.fx._Line([current.x,current.y],[args.target.x,args.target.y]); + }, + onAnimate: _anim + },args)); + return anim; // dojo._Animation +}; + +} diff --git a/includes/js/dojox/fx/style.js b/includes/js/dojox/fx/style.js new file mode 100644 index 0000000..895de9a --- /dev/null +++ b/includes/js/dojox/fx/style.js @@ -0,0 +1,219 @@ +if(!dojo._hasResource["dojox.fx.style"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code. +dojo._hasResource["dojox.fx.style"] = true; +dojo.provide("dojox.fx.style"); +dojo.experimental("dojox.fx.style"); +// +// summary: dojox.fx CSS Class _Animations: +// +// description: a set of functions to animate properties based on +// normalized CSS class definitions. +// +// provides: addClass, removeClass, and toggleClass +// +dojo.require("dojox.fx._base"); + +// FIXME: should the call signatures match dojo.addClass/removeClass/toggleClass and extend +// by having a third (or fourth) param to mix in additional _Animation args for advanced +// usage (delay: curve: repeat: easing: etc ... ) + +dojox.fx.addClass = function(/*dojox.fx._arg.StyleArgs*/ args){ + // summary: Animate the effects of adding a class to a node + // description: + // Creates an animation that will animate + // the properties of a node to the properties + // defined in a standard CSS .class definition. + // (calculating the differences itself) + // + // example: + // | + // | .bar { line-height: 12px; } + // | .foo { line-height: 40px; } + // | <div class="bar" id="test"> + // | Multi<br>line<br>text + // | </div> + // | + // | // animate to line-height:40px + // | dojo.fx.addClass({ node:"test", cssClass:"foo" }).play(); + // + var node = (args.node = dojo.byId(args.node)); + + var pushClass = (function(n){ + // summary: onEnd we want to add the class to the node + // (as dojo.addClass naturally would) in case our + // class parsing misses anything the browser would + // otherwise interpret. this may cause some flicker, + // and will only apply the class so children can inherit + // after the animation is done (potentially more flicker) + return function(){ + dojo.addClass(n, args.cssClass); + n.style.cssText = _beforeStyle; + } + })(node); + + // _getCalculatedStleChanges is the core of our style/class animations + var mixedProperties = dojox.fx._getCalculatedStyleChanges(args,true); + var _beforeStyle = node.style.cssText; + var _anim = dojo.animateProperty(dojo.mixin({ + properties: mixedProperties + },args)); + dojo.connect(_anim,"onEnd",_anim,pushClass); + return _anim; // dojo._Animation +}; + +dojox.fx.removeClass = function(/*dojox.fx._arg.StyleArgs*/ args){ + // summary: Animate the effects of removing a class from a node + // description: + // Creates an animation that will animate the properties of a + // node (args.node) to the properties calculated after removing + // a standard CSS className from a that node. + // + // calls dojo.removeClass(args.cssClass) onEnd of animation + // + // standard dojo._Animation object rules apply. + // + // example: + // | // animate the removal of "foo" from a node with id="bar" + // | dojox.fx.removeClass({ + // | node: "bar", + // | cssClass: "foo" + // | }).play(); + + var node = (args.node = dojo.byId(args.node)); + + var pullClass = (function(n){ + // summary: onEnd we want to remove the class from the node + // (as dojo.removeClass naturally would) in case our class + // parsing misses anything the browser would otherwise + // interpret. this may cause some flicker, and will only + // apply the class so children can inherit after the + // animation is done (potentially more flicker) + // + return function(){ + dojo.removeClass(n, args.cssClass); + n.style.cssText = _beforeStyle; + } + })(node); + + var mixedProperties = dojox.fx._getCalculatedStyleChanges(args,false); + var _beforeStyle = node.style.cssText; + var _anim = dojo.animateProperty(dojo.mixin({ + properties: mixedProperties + },args)); + dojo.connect(_anim,"onEnd",_anim,pullClass); + return _anim; // dojo._Animation +}; + +dojox.fx.toggleClass = function(/*DomNode|String*/node, /*String*/cssClass, /*Boolean?*/condition){ + // summary: + // Animate the effects of Toggling a class on a Node + // + // description: + // creates an animation that will animate the effect of + // toggling a class on or off of a node. + // Adds a class to node if not present, or removes if present. + // Pass a boolean condition if you want to explicitly add or remove. + // node: + // The domNode (or string of the id) to toggle + // cssClass: + // String of the classname to add to the node + // condition: + // If passed, true means to add the class, false means to remove. + // + // example: + // | // add the class "sampleClass" to a node id="theNode" + // | dojox.fx.toggleClass("theNode","sampleClass",true).play(); + // example: + // | // toggle the class "sampleClass" on the node id="theNode" + // | dojox.fx.toggleClass("theNode","sampleClass").play(); + + if(typeof condition == "undefined"){ + condition = !dojo.hasClass(node, cssClass); + } + return dojox.fx[(condition ? "addClass" : "removeClass")]({ node: node, cssClass:cssClass }); // dojo._Animation + // TODO: support 4th param animMixin to allow passing of easing and duration and other _Animtion options +}; + +dojox.fx._allowedProperties = [ + // summary: Our pseudo map of properties we will check for. + // description: + // it should be much more intuitive. a way to normalize and + // "predict" intent, or even something more clever ... + // open to suggestions. + + // no-brainers: + "width", + "height", + // only if position = absolute || relative? + "left", "top", // "right", "bottom", + // these need to be filtered through dojo.colors? + // "background", // normalize to: + /* "backgroundImage", */ + // "backgroundPosition", // FIXME: to be effective, this needs "#px #px"? + "backgroundColor", + + "color", + + // "border", + "borderBottomColor", "borderBottomWidth", + "borderTopColor","borderTopWidth", + "borderLeftColor","borderLeftWidth", + "borderRightColor","borderRightWidth", + + // "padding", // normalize to: + "paddingLeft", "paddingRight", "paddingTop", "paddingBottom", + // "margin", // normalize to: + "marginLeft", "marginTop", "marginRight", "marginBottom", + + // unit import/delicate?: + "lineHeight", + "letterSpacing", + "fontSize" +]; + +dojox.fx._getStyleSnapshot = function(/* Object */cache){ + // summary: + // uses a dojo.getComputedStyle(node) cache reference and + // iterates through the 'documented/supported animate-able' + // properties. + // + // returns: Array + // an array of raw, calculcated values (no keys), to be normalized/compared + // elsewhere + return dojo.map(dojox.fx._allowedProperties,function(style){ + return cache[style]; // String + }); // Array +}; + +dojox.fx._getCalculatedStyleChanges = function(/*dojox.fx._arg.StyleArgs*/ args, /*Boolean*/addClass){ + // summary: calclate the difference in style properties between two states + // description: + // calculate and normalize(?) the differences between two states + // of a node (args.node) by quickly adding or removing a class, and + // iterateing over the results of dojox.fx._getStyleSnapshot() + // + // addClass: + // true to calculate what adding a class would do, + // false to calculate what removing the class would do + + var node = (args.node = dojo.byId(args.node)); + var cs = dojo.getComputedStyle(node); + + // take our snapShots + var _before = dojox.fx._getStyleSnapshot(cs); + dojo[(addClass ? "addClass" : "removeClass")](node,args.cssClass); + var _after = dojox.fx._getStyleSnapshot(cs); + dojo[(addClass ? "removeClass" : "addClass")](node,args.cssClass); + + var calculated = {}; + var i = 0; + dojo.forEach(dojox.fx._allowedProperties,function(prop){ + if(_before[i] != _after[i]){ + // FIXME: the static unit: px is not good, either. need to parse unit from computed style? + calculated[prop] = { end: parseInt(_after[i]) /* start: parseInt(_before[i]), unit: 'px' */ }; + } + i++; + }); + return calculated; +}; + +} diff --git a/includes/js/dojox/fx/tests/_animation.css b/includes/js/dojox/fx/tests/_animation.css new file mode 100644 index 0000000..efab455 --- /dev/null +++ b/includes/js/dojox/fx/tests/_animation.css @@ -0,0 +1,97 @@ +.testBox { + border:1px solid #333; + width:75px; + height:75px; +} +.absolutely { position:absolute; + top:0; left:0; +} +.floating { + float:left; +} +.wide { + width:200px; +} +.tall { + height:200px; +} +.tiny { + width:3px; + height:3px; +} +.black { + color:#fff; + background-color:#000; +} +.white { + color:#666; + background-color:#fff; +} +.green { + color:#000; + background-color:#eef; +} +.red { + color:#fff; + background-color:#ffe; +} +.blue { + color:#000; + background-color:#fef !important; +} +.baseFont { + line-height:14px; + font:12px Arial,sans-serif; + letter-spacing:0.1em; +} +.spacedVertical { + line-height:42px; +} +.spacedHorizontal { + letter-spacing:0.42em; +} +.fontSizeTest { + font:20px Arial,sans-serif; +} +.bigMargin { + margin:30px; +} +.noMargin { + margin:0; +} +.mediumMargin { + margin:15px; +} +.bigMarginLeft { + margin-left:150px; +} +.padded { + padding:3px; +} +.noPadding { + padding:0; +} +.topPadding { + padding-top:50px; +} +.bigPadding { + padding:30px; +} +.offsetSome { + top:50px; + left:75px; +} +.topLeft { + top:0; + left:0; +} +.bottomRight { + bottom:0; + right:0; +} +.bothAxis { + top:10px; + left:10px; + right:10px; + bottom:10px; +} diff --git a/includes/js/dojox/fx/tests/_animation.css.commented.css b/includes/js/dojox/fx/tests/_animation.css.commented.css new file mode 100644 index 0000000..ba01d03 --- /dev/null +++ b/includes/js/dojox/fx/tests/_animation.css.commented.css @@ -0,0 +1,113 @@ +.testBox { + border:1px solid #333; + width:75px; + height:75px; +} +.absolutely { position:absolute; + top:0; left:0; +} +.floating { + float:left; +} +.wide { + width:200px; +} +.tall { + height:200px; +} +.tiny { + width:3px; + height:3px; +} + + +.black { + color:#fff; + background-color:#000; +} + +.white { + color:#666; + background-color:#fff; +} + +.green { + color:#000; + background-color:#eef; +} +.red { + color:#fff; + background-color:#ffe; +} +.blue { + color:#000; + background-color:#fef !important; +} + +/* font sizes */ +.baseFont { + line-height:14px; + font:12px Arial,sans-serif; + letter-spacing:0.1em; +} + +.spacedVertical { + line-height:42px; +} +.spacedHorizontal { + letter-spacing:0.42em; +} +.fontSizeTest { + font:20px Arial,sans-serif; +} + +/* margins */ +.bigMargin { + margin:30px; +} +.noMargin { + margin:0; +} +.mediumMargin { + margin:15px; +} +.bigMarginLeft { + margin-left:150px; +} + +/* padding */ +.padded { + padding:3px; +} +.noPadding { + padding:0; +} +.topPadding { + padding-top:50px; +} +.bigPadding { + padding:30px; +} + +/* positioning */ + +.offsetSome { + top:50px; + left:75px; +} + +.topLeft { + top:0; + left:0; +} +.bottomRight { + bottom:0; + right:0; +} + +.bothAxis { + top:10px; + left:10px; + right:10px; + bottom:10px; +} diff --git a/includes/js/dojox/fx/tests/example_Line.html b/includes/js/dojox/fx/tests/example_Line.html new file mode 100644 index 0000000..4177e96 --- /dev/null +++ b/includes/js/dojox/fx/tests/example_Line.html @@ -0,0 +1,80 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>using a dojo._Line and dojo._Animation</title> + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../../../dijit/themes/tundra/tundra.css"; + @import "../../../dijit/tests/css/dijitTests.css"; + #node { + position:absolute; + top:100px; left:100px; + width:400px; + height:400px; + padding:12px; + -moz-border-radius:5pt; + overflow:hidden; + border:1px solid #333; + } + </style> + <script type="text/javascript" + djConfig="parseOnLoad: true, isDebug:false" + src="../../../dojo/dojo.js"></script> + <script type="text/javascript"> + dojo.require("dojo.parser"); + dojo.require("dojox.fx.easing"); + dojo.require("dojox.gfx"); + + var surface, shape, line, node; + dojo.addOnLoad(function(){ + // dojo._Line is just a simple class to hold some numbers, and return a given point + // on the line as a percentage, essentially + var _line = new dojo._Line(20,75); // a holder for the numbers 20 .. 75 + node = dojo.byId('node'); + + surface = dojox.gfx.createSurface(node,400,400); + shape = surface.createCircle({ cx: 200, cy: 200, r: 20 }) + .setFill([0,0,255]) + .setStroke({ color:[128,128,128], width: 1}); + + // so we just make a raw _Animation + var _anim = new dojo._Animation({ + // the id of the shape + node: node, + // some easing options + easing: dojox.fx.easing.easeInOut, + // our radius start and end values + curve:_line, + // call transform on the shape with the values + onAnimate: function(){ + shape.setShape({ r: arguments[0] }); + }, + duration:1200 // ms + // rate:100 // ms, so duration/rate iterations + }); + + + dojo.connect(_anim,"onEnd",function(){ + dojo.animateProperty({ + node: node, + duration:1000, + properties: { + left: { end: 300, unit:"px" } + }, + onEnd: function(){ + dojo.fadeOut({ node: node, duration:3000 }).play(); + } + }).play(500); + }); + _anim.play(2000); + }); + </script> +</head> +<body class="tundra"> + + <h1>an "animateProperty" for dojox.gfx</h1> + <div id="node"></div> + +</body> +</html> diff --git a/includes/js/dojox/fx/tests/example_backgroundPosition.html b/includes/js/dojox/fx/tests/example_backgroundPosition.html new file mode 100644 index 0000000..5011213 --- /dev/null +++ b/includes/js/dojox/fx/tests/example_backgroundPosition.html @@ -0,0 +1,59 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>Animated background position example | The Dojo Toolkit</title> + + <script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug:true, parseOnLoad: true" ></script> + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../../../dijit/themes/dijit.css"; + @import "../../../dijit/themes/tundra/tundra.css"; + @import "../../../dijit/tests/css/dijitTests.css"; + + #theNode { + background:#dedede url('images/longBg.png') 0px 0px; + padding:3px 10px 3px 10px; + border:1px solid #b7b7b7; + color:#666; + cursor:pointer; + } + + </style> + <script type="text/javascript"> + dojo.require("dojo.fx"); + var anim = null; + var init = function(){ + var node = dojo.byId('theNode'); + anim = new dojo._Animation({ + curve: new dojo._Line(0,-500), + duration: 3000, + onEnd: (function(){ anim.play(); }), // loop indefinately + onAnimate: function(){ + var str = Math.floor(parseInt(arguments[0]))+"px 0px"; + dojo.style(node,"backgroundPosition",str); + } + }); + + // dojo.query "magic" + dojo.query("#theNode") + .connect("onmouseenter",anim,"play") + .connect("onmouseout",anim,"pause") + .connect("onclick",function(){ + alert('clicked the button'); + }); + }; + dojo.addOnLoad(init); + + </script> +</head> +<body class="tundra"> + + <h1 class="testTitle">dojo._Animation test:</h1> + + <p> + <div class="dijitInline" id="theNode">Test</div> + </p> + +</body> +</html> diff --git a/includes/js/dojox/fx/tests/example_dojoAnimations.html b/includes/js/dojox/fx/tests/example_dojoAnimations.html new file mode 100644 index 0000000..2365ea1 --- /dev/null +++ b/includes/js/dojox/fx/tests/example_dojoAnimations.html @@ -0,0 +1,442 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> + <head> + + <title>skeleton page | The Dojo Toolkit</title> + + <style type="text/css"> + @import "../../../dijit/themes/tundra/tundra.css"; + body, html { + width:100%; + margin:0; + padding:0; + font:11pt Arial,sans-serif; + color:#666; + } + + #container { + width:760px; + margin:0 auto; + } + + div.testBox { + border:2px solid #ededed; + background:#fefefe; + height:200px; + margin:0 auto; + position:relative; + } + + div.testItem { + position:absolute; + background:#fff url('images/averycutedog.jpg') no-repeat center center; + border:2px solid #f0f0f0; + margin:0; + padding:0; + height:175px; + width:175px; + top:10px; + left:10px; + } + + .altItem { + position:absolute; + top:10px; + left:295px; + } + + .pad { + padding:4px; + } + + .trick { + height:175px; + width:175px; + visibility:hidden; + } + .odd, + .even { margin-left:1px; } + + #lorem { + position:absolute; + top:10px; + left:15px; + font:8pt Arial,sans-serif; + width:175px; + padding:4px; + background:#ededed; + } + + #fisheyeList { + width:95px; + background:#666; + padding:7px; + } + #fisheyeList li { + color:#fff; + } + </style> + + <script type="text/javascript" src="../../../dojo/dojo.js" + djConfig="parseOnLoad:true, isDebug:true"></script> + + <script type="text/javascript"> + dojo.require("dijit.form.Button"); // for the tests + + // core animations: + dojo.require("dojo.fx"); + + // provides dojo.query() animations: + dojo.require("dojo.NodeList-fx"); + dojo.require("dojox.fx.ext-dojo.NodeList"); + + // core dojox package: + dojo.require("dojox.fx"); + dojo.require("dojox.fx._core"); // _Line + + // addons: + dojo.require("dojox.fx.style"); + dojo.require("dojox.fx.easing"); + + // examples inline: + dojo.require("dojox.widget.FisheyeLite"); + </script> + +</head> +<body class="tundra"> + <div id="container"> + + <h2>Dojo FX: base animations</h2> + + <button dojoType="dijit.form.Button"> + Fade In/Out + <script type="dojo/method" event="onClick"> + dojo.fadeOut({ node:"testSlide", + onEnd:function(){ + dojo.fadeIn({ node:"testSlide", delay:300 }).play(); + } + }).play(); + </script> + </button> + + <button dojoType="dijit.form.Button"> + animateProperty: height + <script type="dojo/method" event="onClick"> + dojo.animateProperty({ + node:"testSlide", + properties:{ height:{ end:1, unit:"px" } }, + onEnd:function(){ + dojo.animateProperty({ + node:"testSlide", + delay:300, + properties:{ height:{ end:175, unit:"px" } } + }).play(); + } + }).play(); + </script> + </button> + + <button dojoType="dijit.form.Button"> + animateProperty: width + <script type="dojo/method" event="onClick"> + dojo.animateProperty({ + node:"testSlide", + properties:{ width:{ end:1, unit:"px" } }, + onEnd:function(){ + dojo.animateProperty({ + node:"testSlide", + delay:300, + properties:{ width:{ end:175, unit:"px" } } + }).play(); + } + }).play(); + </script> + </button> + + <div class="testBox" id="testSlideWrapper"> + <div class="testItem" id="testSlide"> + <div class="trick"> </div> + </div> + </div> + + + <h2>Animate CSS Properties:</h2> + + <button dojoType="dijit.form.Button"> + marginLeft + <script type="dojo/method" event="onClick"> + dojo.animateProperty({ + node:"lorem", + properties:{ + marginLeft:{ end:322, unit:"px", start:1 } + }, + onEnd: function(){ + dojo.animateProperty({ + node:"lorem", + properties:{ + marginLeft:{ end:1, start:322, unit:"px" } + }, + delay:300 + }).play(); + } + }).play(); + </script> + </button> + + <button dojoType="dijit.form.Button"> + left / paddingTop + <script type="dojo/method" event="onClick"> + dojo.animateProperty({ + node:"lorem", + properties:{ + left: { + end: dojo.marginBox("cssNodeWrap").w - 195, + unit:"px" + }, + paddingTop:{ end:17, unit:"px", start:4 } + }, + onEnd: function(){ + dojo.animateProperty({ + node:"lorem", + properties:{ + paddingTop:{ end:4, start:17, unit:"px" }, + left: { end: 10, unit:"px" } + }, + delay:300 + }).play(); + } + }).play(); + </script> + </button> + + <button dojoType="dijit.form.Button"> + fontSize / width + <script type="dojo/method" event="onClick"> + dojo.animateProperty({ + node:"lorem", + properties:{ + width: { end:700, unit:"px", start:175 }, + fontSize:{ end:21, unit:"pt", start:11 } + }, + onEnd: function(){ + dojo.animateProperty({ + node:"lorem", + properties:{ + width: { end:175, unit:"px" }, + fontSize:{ end:11, start:21, unit:"pt" } + }, + delay:700 + }).play(); + } + }).play(); + </script> + </button> + + <div class="testBox" id="cssNodeWrap"> + <div id="cssNode"> + <p id="lorem">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. + Nam facilisis enim. Pellentesque in elit et lacus euismod dignissim. + Aliquam dolor pede, convallis eget, dictum a, blandit ac, urna. + Pellentesque sed nunc ut justo volutpat egestas. Class aptent taciti + sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. + In erat. + </p> + </div> + </div> + + <h2>dojo.fx - Core animations</h2> + + <button dojoType="dijit.form.Button"> + Slide + <script type="dojo/method" event="onClick"> + // we're 175px, slide to containerWidth - 195 + var left = dojo.marginBox("testSlideWrapper").w - 195; + // make and play the animation + dojo.fx.slideTo({ + top:10, + left:left, + node:"testSlideToo", + onEnd: function(){ + // slide'er back: + dojo.fx.slideTo({ top:10, left:10, node:"testSlideToo" }).play(); + } + }).play() + </script> + </button> + + <button dojoType="dijit.form.Button"> + Combine Slide / Fade + <script type="dojo/method" event="onClick"> + var anim1 = dojo.fx.slideTo({ + top: 10, + left: dojo.marginBox("testSlideWrapper").w - 195, + node: "testSlideToo", + onEnd: function(){ + // slide'er back: + dojo.fx.slideTo({ top:10, left:10, node:"testSlideToo" }).play(); + } + }); + var anim2 = dojo.fadeOut({ + node: "testSlideToo", + onEnd: function(){ + // we could switch out the backgroundImage property here. + dojo.fadeIn({ node:"testSlideToo" }).play(); + } + }); + var combined = dojo.fx.combine([anim1,anim2]); + combined.play(); + </script> + </button> + + <button dojoType="dijit.form.Button"> + Chain (4) + <script type="dojo/method" event="onClick"> + var anim1 = dojo.fadeOut({ node:"testSlideToo", + // so anim1 is over, making this onEnd and anim2 basically + // a combine() (depending on the duration: ) + onEnd:function(){ + var delay = 125; + dojo.fadeIn({ node:'testSlideToo' }).play(delay); + } + }); + + var anim2 = dojo.animateProperty({ + node:"testSlideToo", + properties:{ + left:{ + end: dojo.marginBox("testSlideTooWrap").w - 195, + unit: "px" + } + }, + onEnd: function(){ + dojo.fx.slideTo({ node:"testSlideToo", top:10, left:10 }).play(123); + } + }); + dojo.fx.chain([anim1,anim2]).play(); + </script> + </button> + + <div class="testBox" id="testSlideTooWrap"> + <div class="testItem" id="testSlideToo"> + <div class="trick"></div> + </div> + </div> + + <h2>dojo.query FX</h2> + + <button dojoType="dijit.form.Button"> + fade .even + <script type="dojo/method" event="onClick"> + dojo.query(".even","queryUl").fadeOut({ + onEnd:function(){ + dojo.query(".even","queryUl").fadeIn({ delay: 300 }).play(); + } + }).play(); + </script> + </button> + + <button dojoType="dijit.form.Button"> + fade .odd + <script type="dojo/method" event="onClick"> + dojo.query(".odd","queryUl").fadeOut({ + onEnd:function(){ + dojo.query(".odd","queryUl").fadeIn({ delay: 300 }).play(); + } + }).play(); + </script> + </button> + + <button dojoType="dijit.form.Button"> + shift .odd + <script type="dojo/method" event="onClick"> + dojo.query(".odd","queryUl").animateProperty({ + properties:{ + marginLeft:{ end:34, unit:"px" } + }, + duration:300, + onEnd:function(){ + dojo.query(".odd","queryUl").animateProperty({ + delay: 300, + properties:{ + marginLeft:{ end:1, unit:"px" } + } + }).play(); + } + }).play(); + </script> + </button> + + <button dojoType="dijit.form.Button"> + mmm, easing + <script type="dojo/method" event="onClick"> + dojo.query(".odd","queryUl").animateProperty({ + easing:dojox.fx.easing.backOut, + properties:{ + marginLeft:{ end:34, unit:"px" } + }, + duration:600, + onEnd:function(){ + dojo.query(".odd","queryUl").animateProperty({ + delay: 300, + duration:1300, + easing:dojox.fx.easing.bounceOut, + properties:{ + marginLeft:{ end:1, unit:"px" } + } + }).play(); + } + }).play(); + </script> + </button> + + <button dojoType="dijit.form.Button"> + Setup FisheyeList + <script type="dojo/method" event="onClick"> + this.setAttribute("disabled",true); + dojo.query("li","fisheyeList").forEach(function(n){ + new dojox.widget.FisheyeLite({ + properties:{ + marginLeft:17, + width:1.175 + }, + onClick:function(){ + dojo.byId("clickAlert").innerHTML = "clicked: " + this.id; + }, + easeIn:dojox.fx.easing.elasticOut, + durationIn:1700 + },n).startup(); + }).style("cursor","pointer"); + </script> + </button> + + <div class="testBox" id="queryParent"> + <ul id="queryUl"> + <li class="odd">odd row</li> + <li class="even">even row</li> + <li class="odd">odd row</li> + <li class="even">even row</li> + <li class="odd">odd row</li> + <li class="even">even row</li> + <li class="odd">odd row</li> + <li class="even">even row</li> + <li class="odd">odd row</li> + </ul> + <div class="altItem"> + <p>(FisheyeLite makes this easy. be creative:)</p> + <ul id="fisheyeList"> + <li class="odd">odd row</li> + <li class="even">even row</li> + <li class="odd">odd row</li> + <li class="even">even row</li> + <li class="odd">odd row</li> + <li class="even" id="testIdFish">with id</li> + <li class="odd">odd row</li> + </ul> + <p id="clickAlert"></p> + </div> + </div> + + </div> +</body> +</html> diff --git a/includes/js/dojox/fx/tests/example_easingChart2D.html b/includes/js/dojox/fx/tests/example_easingChart2D.html new file mode 100644 index 0000000..fd0d171 --- /dev/null +++ b/includes/js/dojox/fx/tests/example_easingChart2D.html @@ -0,0 +1,147 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" + "http://www.w3.org/TR/html4/loose.dtd"> +<html> +<head> + <title>visualising dojo._Animation.easing via dojox.charting</title> + + <link rel="stylesheet" type="text/css" media="screen" + href="../../../dojo/resources/dojo.css"> + + <link rel="stylesheet" type="text/css" media="screen" + href="../../../dijit/themes/tundra/tundra.css"> + + <style type="text/css"> + .box { padding:14px; + border:1px solid #b7b7b7; + -moz-border-radius:8pt; + } + </style> + + <script type="text/javascript" djConfig="isDebug:false, parseOnLoad: true" + src="../../../dojo/dojo.js"></script> + + <script type="text/javascript"> + // one simple theme, and the charting engine: + dojo.require("dojox.charting.Chart2D"); + // and easing functions: + dojo.require("dojox.fx.easing"); + + var d=0; + var masterData = {}; + var makeSeries = function(/* string */str, /* Function */ func){ + // make some data by running a 2sec animation with an easing function + // and adding it to the chart + var seriesData = []; + if(str in masterData){ + seriesData=masterData[str]; + } + + if(!seriesData.length){ + var func = func || dojox.fx.easing[str]; + func = (dojo.isFunction(func) ? func : dojo._defaultEasing); + + for(var i=0; i<=120; i++){ + var pct = i/120; + seriesData.push({ y: 30 * func(pct), x: (pct) * 30}); + } + if(!str.match(/^dynSeries/)){ + masterData[str] = seriesData; + } + chart.addSeries(str, + seriesData, + { stroke: { color: "black", width: 0 }, fill: "rgba(30,0,255,0.10)" } + ).render(); + }else{ + chart.updateSeries(str, seriesData).render(); + } + }; + + var removeSeries = function(str){ + chart.updateSeries(str, []); + if(!clearAll){ chart.render(); } + }; + + var toggleChart = function(widget, str){ + if(!chart) return; + if(widget.checked){ + makeSeries(str); + }else{ + removeSeries(str); + } + } + + var chart; + var clearAll=false; + + dojo.addOnLoad(function(){ + + // setup our chart + chart = new dojox.charting.Chart2D("easingChart"); + chart.addAxis("x", { + fixLower: "major", + fixUpper: "major", + majorTickStep: 10, + minorTickStep: 1, + minorLabels: false, + htmlLabels: false + }); + chart.addAxis("y", { + vertical: true, + fixLower: "major", + fixUpper: "major", + majorTickStep: 10, + minorTickStep: 1, + htmlLabels: false + }); + chart.addPlot("default", {type: "Areas"}); + }); + + var opt; + dojo.addOnLoad(function(){ + + var c = dojo.query(".clone")[0]; + opt = dojo.byId("select"); + + for(var i in dojox.fx.easing){ + var n = opt.appendChild(dojo.clone(c)); + n.value = n.innerHTML = i + // n.innerHTML = i; + } + + dojo.connect(opt,"onchange",function(e){ + dojo.query("option",opt) + // we only want "selected" nodes + .filter(function(n){ return n.selected; }) + // yay, here they are: + .forEach(function(n){ + console.log(n); + }); + makeSeries(opt.value,dojox.fx.easing[opt.value]); + }); + + dojo.query(".box").connect("onclick",function(e){ + console.log(opt.value,dojox.fx.easing[opt.value]); + }); + + makeSeries("visible",dojo._defaultEasing); + + }); + + </script> +</head> +<body class="tundra" style="padding:20px"> + + <h1>dojox.fx.easing</h1> + + <p>this chart shows time (x axis) vs. position (y axis) for a movement from 0px to 30px modified by easing functions</p> + + <select id="select" multiple="true" size="7" name="easing"> + <option class="clone" value="dojo._defaultEasing">dojo._defaultEasing</option> + </select> + + <div class="box"> + <div id="easingChart" style="height:300px"></div> + </div> + +</body> +</html> diff --git a/includes/js/dojox/fx/tests/images/averycutedog.jpg b/includes/js/dojox/fx/tests/images/averycutedog.jpg Binary files differnew file mode 100644 index 0000000..335855e --- /dev/null +++ b/includes/js/dojox/fx/tests/images/averycutedog.jpg diff --git a/includes/js/dojox/fx/tests/images/dot.png b/includes/js/dojox/fx/tests/images/dot.png Binary files differnew file mode 100644 index 0000000..1287a73 --- /dev/null +++ b/includes/js/dojox/fx/tests/images/dot.png diff --git a/includes/js/dojox/fx/tests/images/longBg.png b/includes/js/dojox/fx/tests/images/longBg.png Binary files differnew file mode 100644 index 0000000..f89d23a --- /dev/null +++ b/includes/js/dojox/fx/tests/images/longBg.png diff --git a/includes/js/dojox/fx/tests/test_Nodelist-fx.html b/includes/js/dojox/fx/tests/test_Nodelist-fx.html new file mode 100644 index 0000000..75c7a94 --- /dev/null +++ b/includes/js/dojox/fx/tests/test_Nodelist-fx.html @@ -0,0 +1,282 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>dojo.NodeList-fx and dojox.fx.ext-dojo.Nodelist | fx add-ons to dojo.query()</title> + + <script type="text/javascript" src="../../../dojo/dojo.js" djConfig="parseOnLoad:true, isDebug:true"></script> + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../../../dijit/themes/dijit.css"; + @import "../../../dijit/themes/tundra/tundra.css"; + @import "../../../dijit/tests/css/dijitTests.css"; + + .testBoxContainer { + position:relative; + width:418px; + height:240px; + margin-left:50px; + border-top:1px dashed #b7b7b7; + border-bottom:1px dashed #b7b7b7; + } + + .testBox { + position:absolute; + top:0; left:0; + width:50px; + height:50px; + background:#ededed; + border:1px solid #b7b7b7; + -moz-border-radius:6pt; + -webkit-border-radius:5pt; + overflow:hidden; + } + .rowOne { top:0; } + .rowTwo { top:60px; } + .rowThree { top:120px; } + .rowFour { top:180px; } + + .iOne { left:0; } + .iTwo { left:60px; } + .iThree { left:120px; } + .iFour { left:180px; } + .iFive { left:240px; } + .iSix { left:300px; } + .iSeven { left:360px; } + + </style> + <script type="text/javascript"> + + dojo.require("dojox.fx.ext-dojo.NodeList"); + dojo.require("dijit.form.Button"); + dojo.require("dijit.form.CheckBox"); + + // its funny... + var dQuery = dojo.query; + var d$ = dQuery; + + var anim2 = null; + + var init = function(){ + var anim = d$(".rowOne").highlight({ + duration:700, + onEnd: function(){ + d$(".rowTwo").fadeTo({ end: 0.5, + duration:700, + onEnd: function(){ + + anim2 = d$(".rowThree").fadeOut({ + top:20, left:20, + duration:500 + }).play(700); + } + }).play(300); + } + }); + + dojo.connect(anim,"onEnd",function(){ + + var q1v = true; + var q1 = ".iSix"; // colum six + // this will setup a connection on each of the nodes to toggle their fade state + d$(q1).connect("onclick",function(){ + d$(q1)[(q1v ? "fadeOut" : "fadeIn")]().play(); + q1v = !q1v; + }); + + // this highlights all the nodes via a mouseenter event, which automatically + // + d$(".testBox").connect("onmouseenter",function(e){ + dojox.fx.highlight({ node: e.target, duration:250 }).play(); + }); + + + var q3 = ".rowOne.iSeven"; // top right node + d$(q3).connect("onclick",function(){ + d$(q3).sizeTo({ + width:300, height:300, duration:300, + onEnd: function(){ + // FIXME: sizeTo isn't calculating it's start value properly + d$(q3).sizeTo({ width: 50, height:50, duration:115, delay:1000, method:"combine" }).play(); + } + }).play(); + }); + + + + }); + // main animation + anim.play(700); + }; + // start the code + dojo.addOnLoad(init); + + // for our dojo.query() form, some animations take different params which would be kind of difficult + // to make both dynamic and robust and easy to explain. see each function individually in the API + // for the breakdown. just going to hard-code some values in for somet things: + var animArgs = { + // dojo.NodeList-fx ones: + animateProperty: { + properties: { + borderWidth: { end: 5, unit:"px" }, + marginTop: { end: 8, unit:"px" } + } + + }, + + slideTo: { top:0, left: 0 }, + + // dojox extension ones: + sizeTo: { + width: 75, height:75 + }, + fadeTo: { + end: 0.35 + }, + slideBy: { + top:55, left: 55 + }, + + // mix these into every 'custom query animation' + defaultArgs: { + // duration: 500 //, + // onEnd: function(){ console.log('ended animation') } + } + }; + + + + </script> +</head> +<body class="tundra"> + + <h1 class="testTitle">NodeList and dojo.query "magic"</h1> + + <div style="width:200px; float:right; padding:10px"> + <h4>stuff going on:</h4> + <ul> + <li>watch the startup cycle</li> + <li>click col 6</li> + <li>click top right box</li> + <li>hover to highlight() node</li> + </ul> + </div> + + <div style="width:200px; float:right; padding:10px"> + <h4>custom query:</h4> + <form id="whichAnim"> + <p> + dojo.query("<input type="text" name="str" id="customStr" value=".noIdHere" size="10" />"); + <br>(dojo:)<br> + <input type="radio" name="g2" id="g2rb1" value="fadeIn" dojoType="dijit.form.RadioButton" checked="checked"/> + <label for="g2rb1">.fadeIn</label><br> + + <input type="radio" name="g2" id="g2rb2" value="fadeOut" dojoType="dijit.form.RadioButton"/> + <label for="g2rb2">.fadeOut</label><br> + + <input type="radio" name="g2" id="g2rb3" value="wipeOut" dojoType="dijit.form.RadioButton"/> + <label for="g2rb3">.wipeOut</label><br> + + <input type="radio" name="g2" id="g2rb4" value="wipeIn" dojoType="dijit.form.RadioButton"/> + <label for="g2rb4">.wipeIn</label><br> + + <input type="radio" name="g2" id="g2rb0" value="slideTo" dojoType="dijit.form.RadioButton"/> + <label for="g2rb0">.slideTo</label> (x: 0, y:0)<br> + + <br>(dojox:)<br> + + <input type="radio" name="g2" id="g2rb5" value="highlight" dojoType="dijit.form.RadioButton"/> + <label for="g2rb5">.highlight</label><br> + + <input type="radio" name="g2" id="g2rb6" value="sizeTo" dojoType="dijit.form.RadioButton"/> + <label for="g2rb6">.sizeTo (a fixed size)</label><br> + + <input type="radio" name="g2" id="g2rb7" value="slideBy" dojoType="dijit.form.RadioButton"/> + <label for="g2rb7">.slideBy (top: left: offset fixed)</label><br> + + <input type="radio" name="g2" id="g2rb8" value="fadeTo" dojoType="dijit.form.RadioButton"/> + <label for="g2rb8">.fadeTo (35% opacity)</label><br> + + </p> + <script type="dojo/method" event="onSubmit"> + // it's like cheating, but we don't event want this form to submit. you can type + // a query(), use the arrows to select a method, and hit enter. (or should be able to) + return false; + </script> + + <button dojoType="dijit.form.Button" type="submit" id="runnerButton" /> + Run + <script type="dojo/method" event="onClick"> + // our runner / submit button + var str = dojo.byId("customStr").value; + var animType; + dojo.query('.dijitRadioChecked').forEach(function(n){ + animType = dijit.byNode(n).getValue(); + }); + if(str && animType){ + var theseArgs = animArgs[animType] || {}; + // combine our base args with 'theseArgs' if they exist + var args = dojo.mixin(theseArgs,animArgs.defaultArgs) + //var nodelist = dojo.query(str); + dojo.query(str)[(animType)](args).play(); + } + return false; + </script> + </button> + + </form> + </div> + + <div class="testBoxContainer"> + <div id="node1" class="testBox rowOne iOne">1</div> + <div id="node2" class="testBox rowOne iTwo">2</div> + <div class="testBox noIdHere rowOne iThree">3</div> + <div class="testBox noIdHere rowOne iFour">4</div> + <div class="testBox noIdHere rowOne iFive">5</div> + <div class="testBox noIdHere rowOne iSix">6</div> + <div class="testBox noIdHere rowOne iSeven">7</div> + + <div id="node4" class="testBox rowTwo iOne">2</div> + <div class="testBox noIdHere rowTwo iTwo"></div> + <div id="node6" class="testBox rowTwo iThree"></div> + <div class="testBox noIdHere rowTwo iFour"></div> + <div class="testBox noIdHere rowTwo iFive"></div> + <div class="testBox noIdHere rowTwo iSix"></div> + <div class="testBox noIdHere rowTwo iSeven"></div> + + <div id="node7" class="testBox rowThree iOne">3</div> + <div class="testBox noIdHere rowThree iTwo"></div> + <div id="node9" class="testBox rowThree iThree"></div> + <div class="testBox noIdHere rowThree iFour"></div> + <div class="testBox noIdHere rowThree iFive"></div> + <div class="testBox noIdHere rowThree iSix"></div> + <div id="aNode" class="testBox rowThree iSeven"></div> + + <div id="node7" class="testBox rowFour iOne">4</div> + <div class="testBox noIdHere rowFour iTwo"></div> + <div id="node9" class="testBox rowFour iThree"></div> + <div class="testBox noIdHere rowFour iFour"></div> + <div class="testBox noIdHere rowFour iFive"></div> + <div id="randomNode" class="testBox rowFour iSix"></div> + <div class="testBox noIdHere rowFour iSeven"></div> + + </div> + + <br style="clear:both;"> + HTML AFTER + <br> + + <h3>classes available to play with:</h3> + + <code><pre> + .testBox + .noIdHere + each row: .rowOne .rowTwo .rowThree .rowFour + each col: .iOne .iTwo .. iSeven + #randomNode, #node9, #node7, #aNode, #node1, #node2, #node4, #node6 + </pre></code> + + <p>the dojo.query() isn't limited to the testDiv, it parses the body. try: dojo.query("fieldset") and slideBy animation</p> + +</body> +</html> diff --git a/includes/js/dojox/fx/tests/test_Shadow.html b/includes/js/dojox/fx/tests/test_Shadow.html new file mode 100644 index 0000000..fd21fd2 --- /dev/null +++ b/includes/js/dojox/fx/tests/test_Shadow.html @@ -0,0 +1,93 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>dojox.fx.Shadow - Drop Shadows for DomNodes | The Dojo Toolkit</title> + + <script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug:true, parseOnLoad: true" ></script> + <script type="text/javascript" src="../Shadow.js"></script> + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../../../dijit/themes/dijit.css"; + @import "../../../dijit/themes/tundra/tundra.css"; + @import "../../../dijit/tests/css/dijitTests.css"; + </style> + <script type="text/javascript"> + dojo.require("dojo.dnd.Moveable"); + dojo.require("dojox.layout.FloatingPane"); + dojo.require("dijit._Calendar"); + var enabled = true, randInt=0; + dojo.addOnLoad(function(){ + + dojo.query(".hasShadow").forEach(function(n){ + var foo = new dojox.fx.Shadow({ node:n }); + foo.startup(); + + if(++randInt%2===0){ + var tmp = new dojo.dnd.Moveable(n); + } + + setTimeout(dojo.hitch(foo,"resize"),4000); + //setTimeout(dojo.hitch(foo,"setOpacity","0.6",{ duration: 500 }),2000); + dojo.connect(n,"onmouseover",dojo.hitch(foo,function(){ + this.setOpacity(1); + })); + dojo.connect(n,"onmouseout",dojo.hitch(foo,function(){ + if(!dojo.isIE){ + this.setOpacity(0.5); + } + })); + dojo.connect(n,"onclick",dojo.hitch(foo,function(){ + this.setDisabled(!this.disabled); + })); + + }); + + /* + var div = document.createElement('div'); + var testNode = document.createElement('div'); + + testNode.appendChild(div); + div.innerHTML = "Lorem Ipsum"; + dojo.body().appendChild(testNode); + + //dojo.addClass(testNode,"dijitInline"); + + var aDijit = new dijit._Calendar({},div); + aDijit.startup(); + + var testShadow = new dojox.fx.Shadow({ node: aDijit.domNode }); + testShadow.startup(); + testShadow.resize(); + */ + }); + + + </script> +</head> +<body class="tundra"> + + <h1 class="testTitle">dojox.fx.Shadow tests</h1> + + <div> + <h2>with margin:</h2> + <div class="hasShadow" style="background:#fff; border:1px solid #a0a0a0; width:100px; height:100px; margin:20px;"> <p>Lorem</p> </div> + + <h2>with padding:</h2> + <div class="hasShadow" style="background:#fff; border:1px solid #a0a0a0; width:100px; height:100px; padding:10px; "> <p>Lorem</p> </div> + + <h2>no padding:</h2> + <div class="hasShadow" style="background:#fff; border:1px solid #a0a0a0; width:100px; height:100px;"> <p>Lorem</p> </div> + + <h2>position:absolute</h2> + <div class="hasShadow" style="background:#fff; border:1px solid #a0a0a0; width:100px; height:100px; position:absolute; top:0px; left:200px; "> <p>Lorem</p> </div> + + <br style="clear:both;"> + </div> + + + <br><br> + + +</body> +</html> diff --git a/includes/js/dojox/fx/tests/test_animateClass.html b/includes/js/dojox/fx/tests/test_animateClass.html new file mode 100644 index 0000000..c963ca1 --- /dev/null +++ b/includes/js/dojox/fx/tests/test_animateClass.html @@ -0,0 +1,222 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>dojox.fx.style - animatated CSS functions | The Dojo Toolkit</title> + + <script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug:true, parseOnLoad: true" ></script> + <script type="text/javascript" src="../style.js"></script><!-- debugging --> + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../../../dijit/themes/dijit.css"; + @import "../../../dijit/themes/tundra/tundra.css"; + @import "../../../dijit/tests/css/dijitTests.css"; + @import "_animation.css"; /* external stylesheets to enhance readability in this test */ + </style> + <script type="text/javascript"> + dojo.require("dojox.fx.style"); + dojo.require("dijit.form.Button"); + + </script> +</head> +<body class="tundra"> + + <h1 class="testTitle">dojox.fx.style tests</h1> + + <p id="fontTest"> + dojox.fx.style provides a few methods to animate the changes that would occur + when adding or removing a class from a domNode. + </p> + <ul class="testUl" id="test1"> + <li class="baseFont">dojox.fx.addClass(/* Object */)args); // Returns dojo._Animation</li> + <li class="baseFont">dojox.fx.removeClass(/* Object */args); // Returns dojo._Animation</li> + <li class="baseFont">dojox.fx.toggleClass(/* DomNode */node, /* String */cssClass,/* Boolean */force)</li> + </ul> + + <button dojoType="dijit.form.Button"> + spacing test + <script type="dojo/method" event="onClick"> + var _anims = []; + // until dojox.fx.NodeList-fx is ready: + dojo.query("li.baseFont").forEach(function(node){ + _anims.push(dojox.fx.toggleClass(node,"spacedHorizontal")); + }) + dojo.fx.combine(_anims).play(5); + </script> + </button> + + <button dojoType="dijit.form.Button"> + line-height test + <script type="dojo/method" event="onClick"> + var _anims = []; + // until dojox.fx.NodeList-fx is ready: + dojo.query("li.baseFont").forEach(function(node){ + _anims.push(dojox.fx.toggleClass(node,"spacedVertical")); + }) + dojo.fx.combine(_anims).play(5); + </script> + </button> + + <button dojoType="dijit.form.Button"> + font-size test + <script type="dojo/method" event="onClick"> + var _anims = []; + // until dojox.fx.NodeList-fx is ready: + dojo.query("li.baseFont").forEach(function(node){ + _anims.push(dojox.fx.toggleClass(node,"fontSizeTest")); + }) + dojo.fx.combine(_anims).play(5); + </script> + </button> + + <h2>testing sizes</h2> + + <button dojoType="dijit.form.Button" id="addTall"> + add .tall + <script type="dojo/method" event="onClick"> + var delay = 500; + var _anims = []; + dojo.query("#colorTest > .testBox").forEach(function(n){ + _anims.push(dojox.fx.addClass({ + node:n, + cssClass:"tall", + delay: delay + })); + delay+=200; + }); + this.setAttribute('disabled',true); + dijit.byId('removeTall').setAttribute('disabled',false); + dojo.fx.combine(_anims).play(); + </script> + </button> + <button dojoType="dijit.form.Button" id="removeTall" disabled="true"> + remove .tall + <script type="dojo/method" event="onClick"> + var delay = 500; + var _anims = []; + dojo.query("#colorTest > .testBox").forEach(function(n){ + _anims.push(dojox.fx.removeClass({ + node:n, + cssClass:"tall", + delay: delay + })); + delay+=200; + }); + this.setAttribute('disabled',true); + dijit.byId('addTall').setAttribute('disabled',false); + dojo.fx.combine(_anims).play(); + </script> + </button> + <button dojoType="dijit.form.Button" id="addWide"> + add .wide + <script type="dojo/method" event="onClick"> + var delay = 500; + var _anims = []; + dojo.query("#colorTest > .testBox").forEach(function(n){ + _anims.push(dojox.fx.addClass({ + node:n, + cssClass:"wide", + delay: delay + })); + delay+=200; + }); + this.setAttribute('disabled',true); + dijit.byId('removeWide').setAttribute('disabled',false); + dojo.fx.combine(_anims).play(); + </script> + </button> + <button dojoType="dijit.form.Button" id="removeWide" disabled="true"> + remove .wide + <script type="dojo/method" event="onClick"> + var delay = 500; + var _anims = []; + dojo.query("#colorTest > .testBox").forEach(function(n){ + _anims.push(dojox.fx.removeClass({ + node:n, + cssClass:"wide", + delay: delay + })); + delay+=200; + }); + this.setAttribute('disabled',true); + dijit.byId('addWide').setAttribute('disabled',false); + dojo.fx.combine(_anims).play(); + </script> + </button> + <button dojoType="dijit.form.Button"> + toggle .tiny + <script type="dojo/method" event="onClick"> + var _anims = []; + // until dojox.fx.NodeList-fx is ready: + dojo.query("#colorTest > .testBox").forEach(function(node){ + _anims.push(dojox.fx.toggleClass(node,"tiny")); + }) + dojo.fx.combine(_anims).play(5); + </script> + </button> + + <div id="colorTest"> + <div id="colorTest1" class="floating testBox white"></div> + <div id="colorTest2" class="floating testBox black"></div> + <div id="colorTest3" class="floating testBox green"></div> + </div> + + <br style="clear:both"> + + <h2>testing position</h2> + <p>This is a div position:relative with a position:absolute div inside. testing various t/l/b/r combos. + normal css inheritance rules apply, so setting .foo .bar if .foo was defined last in the css text, .bar + will take precedent. the below position test shows the results of this: + </p> + + <button dojoType="dijit.form.Button"> + .offsetSome + <script type="dojo/method" event="onClick"> + dojox.fx.toggleClass("positionTest","offsetSome").play(); + </script> + </button> + <button dojoType="dijit.form.Button"> + .topLeft + <script type="dojo/method" event="onClick"> + dojox.fx.toggleClass("positionTest","topLeft").play(); + </script> + </button> + <button dojoType="dijit.form.Button"> + .bottomRight + <script type="dojo/method" event="onClick"> + dojox.fx.toggleClass("positionTest","bottomRight").play(); + </script> + </button> + + <div style="position:relative; height:175px; width:500px; border:1px solid #666;" id="positionBlock"> + <div class="testBox absolutely" id="positionTest"></div> + </div> + + <button dojoType="dijit.form.Button"> + toggle .green + <script type="dojo/method" event="onClick"> + dojox.fx.toggleClass("positionTest","green").play(); + </script> + </button> + <button dojoType="dijit.form.Button"> + toggle .black + <script type="dojo/method" event="onClick"> + dojox.fx.toggleClass("positionTest","black").play(); + </script> + </button> + <button dojoType="dijit.form.Button"> + toggle .blue + <script type="dojo/method" event="onClick"> + dojox.fx.toggleClass("positionTest","blue").play(); + </script> + </button> + + <p>Some properties + cannot be modified (fontFace, and so on), so to ensure the results at the end + of the animation are applied correctly and fully, the class name is set on the node + via dojo.add/removeClass(). + </p> + +</body> +</html> + diff --git a/includes/js/dojox/fx/tests/test_crossFade.html b/includes/js/dojox/fx/tests/test_crossFade.html new file mode 100644 index 0000000..330a34a --- /dev/null +++ b/includes/js/dojox/fx/tests/test_crossFade.html @@ -0,0 +1,145 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>dojox.fx - animation sets to use!</title> + + <script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug:true, parseOnLoad: true" ></script> + <script type="text/javascript" src="../_base.js"></script> + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../../../dijit/themes/dijit.css"; + @import "../../../dijit/themes/tundra/tundra.css"; + @import "../../../dijit/tests/css/dijitTests.css"; + + #crossfade { + position:absolute; + top:0; + left:300px; + border:2px solid #ededed; + width:50px; height:50px; + background:#fff; + text-align:center; + } + + table tr { padding:5px; margin:5px; border:1px solid #ccc; } + + .box { + width:75px; height:75px; float:left; + border:1px solid #ededed; + padding:20px; + background-color:#fee; + } + .two { background-color:#c7bedd; } + .nopad { padding:0 !important; + width:100px; height:100px; border:0; + } + .hidden { + opacity:0; + } + </style> + <script type="text/javascript"> + dojo.require("dijit.form.Button"); + dojo.require("dijit.TitlePane"); + + function basicXfade(){ + dojox.fx.crossFade({ + nodes: [dojo.byId('node1'),dojo.byId('node2')], + duration: 1000 + }).play(); + }; + + function absoluteXfade(){ + dojox.fx.crossFade({ + nodes: ["node3","node4"], + duration:1000 + }).play(); + }; + + var _anim; + function simpleLoop(){ + dojo.byId('button').disabled = "disabled"; + _anim = dojox.fx.crossFade({ + nodes: ["node5","node6"], + duration:1000 + }); + dojo.connect(_anim,"onEnd","simpleLoop"); + _anim.play(500); + }; + function stopLoop(){ _anim.stop(); } + + function buttonExample(){ + dojox.fx.crossFade({ + nodes: [ + // FIXME: fails in ie6?!? + dijit.byId('node7').domNode, + dijit.byId('node8').domNode + ], + duration: 350 + }).play(); + } + + dojo.addOnLoad(function(){ + // this is a hack to make nodes with class="hidden" hidden + // because ie6 is a horrible wretched beast + dojo.query(".hidden").forEach(function(node){ + dojo.style(node,"opacity","0"); + }); + + + }); + + </script> +</head> +<body class="tundra"> + <h1 class="testTitle">dojox.fx.crossFade test</h1> + + + <h3>a simple demonstration of two nodes fading simultaneously</h3> + <div> + <input type="button" onclick="basicXfade()" value="run" /> + <div style="padding:20px"> + <div id="node1" style="display:inline;" class="box hidden">box1</div> + <div id="node2" class="box">box2</div> + </div> + <br style="clear:both"> + </div> + + <h3>two nodes with position:relative in a container with position:absolute, crossfading together.</h3> + <input type="button" onclick="absoluteXfade()" value="run" /> + <div> + <div style="width:100px; height:100px; position:relative; border:1px solid #666; "> + <div id="node3" style="position:absolute; top:0; left:0;" class="box nopad hidden">box one</div> + <div id="node4" style="position:absolute; top:0; left:0;" class="box two nopad">box two</div> + </div> + <br style="clear:both"> + </div> + + <h3>simple looping crossfade</h3> + <input type="button" onclick="simpleLoop()" value="run" id="button" /> + <div> + <div style="padding:20px;"> + <div id="node5" class="box nopad">box one</div> + <div id="node6" class="box two nopad hidden">box two</div> + </div> + <br style="clear:both"> + </div> + + <!-- FIXME: acting oddly, only in IE though + <h3>An example of cross-fading a dijit.form.Button</h3> + <input type="button" onclick="buttonExample()" value="run" id="button" /> + <div> + <div style="position:relative;"> + <div dojoType="dijit.TitlePane" id="node7" + style="position:absolute; top:0; left:0;">Lorem content two</div> + <div dojoTYpe="dijit.TitlePane" id="node8" class="hidden" + style="position:absolute; top:0; left:0;">Lorem content one</div> + </div> + <br style="clear:both;"> + </div> + --> + + <h3>that's all, folks...</h3> + +</body> +</html> diff --git a/includes/js/dojox/fx/tests/test_easing.html b/includes/js/dojox/fx/tests/test_easing.html new file mode 100644 index 0000000..fa7bf41 --- /dev/null +++ b/includes/js/dojox/fx/tests/test_easing.html @@ -0,0 +1,142 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>dojox.fx.easing functions:</title> + + <script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug:true, parseOnLoad: true" ></script> + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../../../dijit/themes/dijit.css"; + @import "../../../dijit/themes/tundra/tundra.css"; + @import "../../../dijit/tests/css/dijitTests.css"; + + .bounce { + position:absolute; + top:300px; + left:400px; + width:25px; + height:25px; + border:1px solid #b7b7b7; + background:#ededed; + } + + .block { + width:200px; + height:100px; + background:#666; + border:1px solid #ccc; + display:block; + color:#fff; + text-align:center; + } + + </style> + <script type="text/javascript"> + dojo.require("dojo.fx"); // chain and combine should be in core :) (when they work) + dojo.require("dojox.fx.easing"); + + + var allAnim = null; + dojo.addOnLoad(function(){ + + var easeInAnim = dojo.fx.chain([ + dojo.fadeOut({ + node: 'easeIn', + duration:2000, + easing: dojox.fx.easing.easeIn + }), + dojo.fadeIn({ + node: 'easeIn', + duration:2000, + easing: dojox.fx.easing.easeIn + }) + ]); + + + var easeOutAnim = dojo.fx.chain([ + dojo.fadeOut({ + node: 'easeOut', + duration:2000, + easing: dojox.fx.easing.easeOut + }), + dojo.fadeIn({ + node: 'easeOut', + duration:2000, + easing: dojox.fx.easing.easeOut + }) + ]); + + var easeInOutAnim = dojo.fx.chain([ + dojo.fadeOut({ + node: 'easeInOut', + duration:2000 + }), + dojo.fadeIn({ + node: 'easeInOut', + duration:2000 + }) + ]); + + var linearEaseAnim = dojo.fx.chain([ + dojo.fadeOut({ + node: 'linearEase', + duration:2000, + easing: dojox.fx.easing.linear + }), + dojo.fadeIn({ + node: 'linearEase', + duration:2000, + easing: dojox.fx.easing.linear + }) + ]); + + dojo.connect(dojo.byId('easeIn'),"onclick",easeInAnim,"play"); + dojo.connect(dojo.byId('easeOut'),"onclick",easeOutAnim,"play"); + dojo.connect(dojo.byId('easeInOut'),"onclick",easeInOutAnim,"play"); + dojo.connect(dojo.byId('linearEase'),"onclick",linearEaseAnim,"play"); + dojo.connect(window,"onclick",function(e){ + dojo.fx.slideTo({ + node:"bounce", + top:e.pageY, left:e.pageX, + easing: dojox.fx.easing.easeOutBack + }).play(); + }); + + // argh! FIXME: combine and chain are destructive to the animations. :( + // allAnim = dojo.fx.combine([easeInAnim,easeOutAnim,easeInOutAnim]); + allAnim = { play: function(){ + console.log("can't do this via fx.combine - destructive"); + easeInAnim.play(); + easeOutAnim.play(); + easeInOutAnim.play(); + linearEaseAnim.play(); + } + }; + + }); // dojo.addOnLoad + </script> +</head> +<body class="tundra"> + + <h1 class="testTitle">dojox.fx.easing function tests:</h1> + + (click block to play animation, or <a href="#" onclick="allAnim.play()">here to do all three</a>) + + <div id="easeIn" class="block">dojox.fx.easing.easeIn</div> + <br><br> + <div id="easeOut" class="block">dojox.fx.easing.easeOut</div> + <br><br> + <div id="linearEase" class="block">dojox.fx.easing.linear</div> + <br><br> + <div id="easeInOut" class="block">dojo default easing</div> + + <p> + dojox.fx.easing is stand-alone, and does not require the dojox.fx base files. to see a chart + of these functions see <a href="example_easingChart2D.html">example_easingChart2D.html</a> + </p> + + <div id="bounce" class="bounce">bounce</div> + +</body> +</html> diff --git a/includes/js/dojox/fx/tests/test_highlight.html b/includes/js/dojox/fx/tests/test_highlight.html new file mode 100644 index 0000000..1d5947e --- /dev/null +++ b/includes/js/dojox/fx/tests/test_highlight.html @@ -0,0 +1,45 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>dojox.fx.highlight</title> + <script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug:true"></script> + <script type="text/javascript"> + dojo.require("dojox.fx"); + dojo.require("dojox.fx.ext-dojo.NodeList"); + </script> + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../../../dijit/themes/dijit.css"; + @import "../../../dijit/themes/tundra/tundra.css"; + @import "../../../dijit/tests/css/dijitTests.css"; + </style> +</head> +<body class="tundra"> + + <h1 class="testTitle">dojox.fx.highlight tests</h1> + + <div id="attention" style="position:absolute; left:300px; top:200px; padding:10px;" > + <h3>This is the default highlight</h3> + </div> + + <div id="attention2" style="position:absolute; left:300px; top:80px; padding:10px;" > + <h3>BRING ATTENTION HERE!</h3> + </div> + + <div id="attention3" style="position:absolute; left:350px; top:150px; padding:10px; background-color:#CCCCCC" > + <h3>Highlight me</h3> + </div> + + <a href="javascript:void(0)" onClick="dojox.fx.highlight({node:'attention'}).play()">test #1 (default)</a> + <br> + <a href="javascript:void(0)" onClick="dojox.fx.highlight({node:'attention', repeat:1}).play()">test #2 (default - play twice)</a> + <br> + <a href="javascript:void(0)" onClick="dojox.fx.highlight({node:'attention2', color:'#0066FF', duration:800}).play()">test #3</a> + <br> + <a href="javascript:void(0)" onClick="dojox.fx.highlight({node:'attention3', color:'#0066FF', duration:800}).play()">test #4</a> + <br> + <a href="javascript:void(0)" onClick="dojo.query('a').highlight().play(100)">highlight via dojo.query</a> + + +</body></html> diff --git a/includes/js/dojox/fx/tests/test_scroll.html b/includes/js/dojox/fx/tests/test_scroll.html new file mode 100644 index 0000000..a3ec9ed --- /dev/null +++ b/includes/js/dojox/fx/tests/test_scroll.html @@ -0,0 +1,98 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>dojox.fx.scroll</title> + <script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug:true"></script> + <style type="text/css"> + @import "../../../dijit/themes/tundra.css"; + @import "../../../dijit/tests/css/dijitTests.css"; + </style> + <!-- <script type="text/javascript" src="../scroll.js"></script> --> + <script type="text/javascript"> + dojo.require("dojox.fx.easing"); + dojo.require("dojox.fx.scroll"); + + function gotoName(name){ + // summary; searches for a <a name=""></a> attrib, and scrolls to it + dojo.query('a[name="'+name+'"]').forEach(function(node){ + // first one wins + var anim = dojox.fx.smoothScroll({ + node: node, + win:window, + duration:300, + easing:dojox.fx.easing.easeOut + }).play(); + return; + }); + } + + dojo.addOnLoad(function(){ + /*dojo.connect(dojo.byId("goToHeader0"), "onclick", function (e) { + var h2s = dojo.html.iframeContentDocument(dojo.byId("embed0")).getElementsByTagName('h2'); + var h2 = h2s[h2s.length-1]; + var anm = new dojo.lfx.smoothScroll(h2,dojo.html.iframeContentWindow(dojo.byId("embed0")),null,500); + anm.play(); + }); + */ + + dojo.connect(dojo.byId("goToHeader"), "onclick", function (e) { + var node = dojo.byId('targetHeader3'); + var anim0 = dojox.fx.smoothScroll({ node: node, win: window, duration:500, easing:dojox.fx.easing.easeOut }); + anim0.play(); + }); + + dojo.connect(dojo.byId("goToHeader1"), "onclick", function(/* Event */e){ + var node = dojo.byId('targetHeader1'); + var anim0 = dojox.fx.smoothScroll({ node: node, win: window, duration:1000, easing:dojox.fx.easing.easeOut }); + anim0.play(); + }); + }); + </script> +</head> +<body class="tundra"> + + <a name="top"></a> + <h1 class="testTitle">dojox.fx.scroll tests</h1> + + <div id="targetHeader3" style="position:absolute; left:0px; top:3000px; padding:100px;" ><h3>YOU FOUND ME!</h3> + <p>neat.</p> + </div> + + <p>dojox.fx.scroll provides:</p> + <ul> + <li>dojox.fx.smoothScroll()</li> + </ul> + <p> + which will create and return a dojo._Animation to scroll + a window to a desired offset. (or a node that has overflow:auto/hidden, if you pass the domNode as the win: argument) + </p> + + + <h2><code>getScroll</code></h2> + <p> + Scroll top: <span id="scrollTop">0</span><br> + Scroll left: <span id="scrollLeft">0</span> + </p> + + <table style="position:fixed;top:20px;right:20px;"> + <tr><td> + <!-- <input type="button" id="goToHeader0" value="scroll only the iframe (to a node in iframe)"><br> --> + <input type="button" id="goToHeader" value="scroll to to far node"><br> + <input type="button" id="goToHeader1" value="scroll to a node in top window"> + </td></tr> + </table> + + <p style="font:10pt Arial,sans-serif; color:#666;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitaerisus.</p><p style="font:10pt Arial,sans-serif; color:#666;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitaerisus.</p><p style="font:10pt Arial,sans-serif; color:#666;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitaerisus.</p><p style="font:10pt Arial,sans-serif; color:#666;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitaerisus.</p><p style="font:10pt Arial,sans-serif; color:#666;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitaerisus.</p> + + + <h2 id='targetHeader1'><code>getElementsByClass</code></h2> + + <p style="font:10pt Arial,sans-serif; color:#666;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitaerisus.</p><p style="font:10pt Arial,sans-serif; color:#666;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitaerisus.</p><p style="font:10pt Arial,sans-serif; color:#666;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitaerisus.</p><p style="font:10pt Arial,sans-serif; color:#666;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitaerisus.</p><p style="font:10pt Arial,sans-serif; color:#666;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitaerisus.</p> + + <h3 id='targetHeader2'>ContainsAny</h3> + <input type="button" onclick="gotoName('top');" value="back to top"> + <p style="font:10pt Arial,sans-serif; color:#666;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitaerisus.</p><p style="font:10pt Arial,sans-serif; color:#666;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitaerisus.</p><p style="font:10pt Arial,sans-serif; color:#666;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitaerisus.</p><p style="font:10pt Arial,sans-serif; color:#666;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitaerisus.</p><p style="font:10pt Arial,sans-serif; color:#666;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi.Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitaerisus.</p> + + +</body></html> diff --git a/includes/js/dojox/fx/tests/test_sizeTo.html b/includes/js/dojox/fx/tests/test_sizeTo.html new file mode 100644 index 0000000..0c21e9b --- /dev/null +++ b/includes/js/dojox/fx/tests/test_sizeTo.html @@ -0,0 +1,142 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>dojox.fx.sizeTo | experimental fx add-ons for the Dojo Toolkit</title> + + <script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug:true, parseOnLoad: true" ></script> + <script type="text/javascript" src="../_base.js"></script> + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../../../dijit/themes/dijit.css"; + @import "../../../dijit/themes/tundra/tundra.css"; + @import "../../../dijit/tests/css/dijitTests.css"; + .testBox { + position:absolute; + top:0; left:0; + width:50px; + height:50px; + background:#ededed; + border:1px solid #b7b7b7; + -moz-border-radius:6pt; + -webkit-border-radius:5pt; + overflow:hidden; + } + </style> + <script type="text/javascript"> + + dojo.require("dojox.fx.ext-dojo.NodeList"); + + var test1 = function(e){ + // this is our click test, + dojox.fx.sizeTo({ + node: e.target, + width: 120, + height:120, + duration:250 + }).play(5); + }; + + var testundo = function(e){ + dojox.fx.sizeTo({ + node: e.target, + width:50, + height:50, + duration:320 + }).play(5); + + + }; + + var test2 = function(e){ + dojox.fx.sizeTo({ + node: e.target, + width: 120, + height:120, + duration:120, + method:"combine" + }).play(5); + }; + + var noIdTest = function(){ + var myNode = dojo.query(".noIdHere")[0]; // first one wins + if(myNode){ + // mmm, fake events (all we're using is the target anyway ... ) + (!dojo.hasClass(myNode,"testRun") ? test2 : testundo)({ target: myNode }); + dojo.toggleClass(myNode,"testRun"); + } + }; + + var init = function(){ + + // lets setup out connections, etc ... + dojo.connect(dojo.byId("sizer1"),"onmousedown","test1"); + dojo.connect(dojo.byId("sizer1"),"onmouseup","testundo"); // generic resest + + // did you know dojo normalizes onmouseenter onmouseleave!?!? neat. ie got _one_ thing right. + dojo.connect(dojo.byId("sizer2"),"onmouseenter","test2"); + dojo.connect(dojo.byId("sizer2"),"onmouseout","testundo"); + + // example using dojo.query to get a couple of nodes and roll into one anim + var hasRun = false; + dojo.connect(dojo.byId("sizer3"),"onclick",function(e){ + var _anims = []; + dojo.query(".testBox").forEach(function(n){ + _anims.push( + dojox.fx.sizeTo({ node: n, + width: ( hasRun ? "50" : "150"), + height: ( hasRun ? "50" : "150"), + method:"chain", + duration:720 + }) + ); + }); + hasRun=!hasRun; + var anim = dojo.fx.combine(_anims); + anim.play(); + }); + }; + dojo.addOnLoad(init); + </script> +</head> +<body class="tundra"> + <h1 class="testTitle">dojox.fx.sizeTo test</h1> + + <p>quick sizeTo API overview:</p> + + <pre> + dojox.fx.sizeTo({ + // basic requirements: + node: "aDomNodeId", // or a domNode reference + width: 200, // measured in px + height: 200, // measured in px + method: "chain" // is default, or "combine" + }); + </pre> + <p> + little test blocks (works in FF/win/mac + ie6) <a href="javascript:void(0)" onClick="dojo.query('.testBox').sizeTo({ width: 200, height: 200, duration:400 }).play()">dojo.query() test</a> + </p> + + <div style="position:relative; height:60px; width:600px; margin:0 auto;"> + <div id="sizer1" class="testBox"> + mouse down / mouse up + </div> + <div id="sizer2" class="testBox" style="left:60px;" > + hover / exit + </div> + <div class="testBox noIdHere" style="left:120px; "> + <a href="javascript:noIdTest()">noIdTest()</a> + </div> + <div class="testBox" id="sizer3" style="left:180px;"> + all of em' + </div> + </div> + <br style="clear:both;"> + + (click the box labeled "all of em'" again to reset all nodes) + + HTML AFTER + <br> + +</body> +</html> diff --git a/includes/js/dojox/fx/tests/test_slideBy.html b/includes/js/dojox/fx/tests/test_slideBy.html new file mode 100644 index 0000000..a1a1960 --- /dev/null +++ b/includes/js/dojox/fx/tests/test_slideBy.html @@ -0,0 +1,75 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>dojox.fx - animation sets to use!</title> + + <script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug:true, parseOnLoad: true" ></script> + <script type="text/javascript" src="../_base.js"></script> + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../../../dijit/themes/dijit.css"; + @import "../../../dijit/themes/tundra/tundra.css"; + @import "../../../dijit/tests/css/dijitTests.css"; + + + #sizeToTest { + position:absolute; + top:0; + left:300px; + border:2px solid #ededed; + width:50px; height:50px; + background:#fff; + text-align:center; + } + .test { width:100px; height:50px; border:3px solid #333; + position:absolute; + } + .box1 { top:20px; left:10px; } + .box2 { top:85px; left:10px; } + .box3 { top:170px; left:10px; } + .holder { position:relative; height:300px; } + + </style> + <script type="text/javascript"> + dojo.require("dojox.fx.ext-dojo.NodeList"); + + function chainTest(){ + // FIXME: not recalculating mixin in init? or not re-mixing, rather. + // happens to a lot of propertyAnimations, actually when chaining, with a + // fixed 'start' property in the mixin. see _base/fx.js:slideBy() + dojo.fx.chain([ + dojox.fx.slideBy({ node: 'sizeToTest', top:50, left:50, duration:400 }), + dojox.fx.slideBy({ node: 'sizeToTest', top:25, left:-25, duration:400 }) + ]).play(); + } + </script> +</head> +<body class="tundra"> + <h1 class="testTitle">dojox.fx.slideBy test</h1> + + <a href="#" onclick="javascript:dojox.fx.slideBy({node:'sizeToTest', top:50, left:50, duration:200 }).play()">top: 50, left:50</a> + <a href="#" onclick="javascript:dojox.fx.slideBy({node:'sizeToTest', top:-50, left:50, duration:400 }).play()">top:-50, left:50</a> + <a href="#" onclick="javascript:dojox.fx.slideBy({node:'sizeToTest', top:-50, left:-50, duration:400 }).play()">top:-50, left:-50</a> + <a href="#" onclick="javascript:dojox.fx.slideBy({node:'sizeToTest', top:50, left:-50, duration:400 }).play()">top:50, left:-50</a> + <a href="#" onclick="javascript:dojo.query('.test').slideBy({ top:0, left:300 }).play()">dojo.query()</a> + <a href="#" onclick="javascript:chainTest()">chainTest</a> + + <div id="sizeToTest"> + lorem. ipsum. + </div> + + <br style="clear:both;"> + + <div class="holder"> + <div class="test box1">a</div><div class="test box2">b</div><div class="test box3">c</div> + </div> + + + HTML AFTER + <br> + + + +</body> +</html> diff --git a/includes/js/dojox/fx/tests/test_wipeTo.html b/includes/js/dojox/fx/tests/test_wipeTo.html new file mode 100644 index 0000000..539453b --- /dev/null +++ b/includes/js/dojox/fx/tests/test_wipeTo.html @@ -0,0 +1,109 @@ +<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" + "http://www.w3.org/TR/html4/strict.dtd"> +<html> +<head> + <title>dojox.fx.wipeTo | experimental fx add-ons for the Dojo Toolkit</title> + + <script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug:true, parseOnLoad: true" ></script> + <script type="text/javascript" src="../_base.js"></script> + <style type="text/css"> + @import "../../../dojo/resources/dojo.css"; + @import "../../../dijit/themes/dijit.css"; + @import "../../../dijit/themes/tundra/tundra.css"; + @import "../../../dijit/tests/css/dijitTests.css"; + .testBox { + margin:8px; + width:80px; + height:80px; + background:#ededed; + border:1px solid #b7b7b7; + -moz-border-radius:6pt; + -webkit-border-radius:5pt; + } + </style> + <script type="text/javascript"> + dojo.require("dojox.fx.ext-dojo.NodeList"); + dojo.require("dojox.fx"); + dojo.require("dojo.fx"); + dojo.require("dijit.form.Button"); + var delayAnims = function(obj){ + console.log('yo'); + var delay = 0; + var _anims = []; + dojo.query(".testBox").forEach(function(n){ + _anims.push( + dojox.fx.wipeTo(dojo.mixin({ node:n, delay:(delay+=200) },obj)) + ); + }); + console.log(_anims); + dojo.fx.combine(_anims).play(); + + } + </script> +</head> +<body class="tundra"> + <h1 class="testTitle">dojox.fx.wipeTo test</h1> + + <p>quick sizeTo API overview:</p> + + <pre> + dojox.fx.wipeTo({ + // basic requirements: + node: "aDomNodeId", // or a domNode reference + width: 200 // measured in px + // height: 200 // measured in px (only one at a time, see sizeTo) + }); + </pre> + + <p>Some test boxes: (id="box1,box2,box3" etc ...)</p> + + <button dojoType="dijit.form.Button"> + wipeTo width: 400 + <script type="dojo/method" event="onClick"> + delayAnims({ width: 400 }); + </script> + </button> + <button dojoType="dijit.form.Button"> + wipeTo width: 100 + <script type="dojo/method" event="onClick"> + delayAnims({ width: 100 }); + </script> + </button> + <button dojoType="dijit.form.Button"> + wipeTo height: 400 + <script type="dojo/method" event="onClick"> + delayAnims({ height: 400 }); + </script> + </button> + <button dojoType="dijit.form.Button"> + wipeTo height: 25 + <script type="dojo/method" event="onClick"> + delayAnims({ height: 25 }); + </script> + </button> + <button dojoType="dijit.form.Button"> + wipeTo height: 100 + <script type="dojo/method" event="onClick"> + delayAnims({ height: 100 }); + </script> + </button> + + <div class="testBox" id="box1"> + I am some small text + </div> + + <div class="testBox" id="box2"> + I am some small text + </div> + + <div class="testBox" id="box3"> + I am some small text + </div> + + + <br style="clear:both;"> + + <br> + +</body> +</html> |
