From e44a7e37b6c7b5961adaffc62b9042b8d442938e Mon Sep 17 00:00:00 2001 From: mensonge Date: Thu, 13 Nov 2008 09:49:11 +0000 Subject: New feature: basic Ajax suggestion for tags and implementation of Dojo toolkit git-svn-id: https://semanticscuttle.svn.sourceforge.net/svnroot/semanticscuttle/trunk@151 b3834d28-1941-0410-a4f8-b48e95affb8f --- includes/js/dojox/fx/README | 77 ++++ includes/js/dojox/fx/Shadow.js | 151 +++++++ includes/js/dojox/fx/_arg.js | 27 ++ includes/js/dojox/fx/_base.js | 240 +++++++++++ includes/js/dojox/fx/_core.js | 60 +++ includes/js/dojox/fx/easing.js | 223 +++++++++++ includes/js/dojox/fx/ext-dojo/NodeList.js | 66 +++ includes/js/dojox/fx/resources/shadowB.png | Bin 0 -> 470 bytes includes/js/dojox/fx/resources/shadowBL.png | Bin 0 -> 272 bytes includes/js/dojox/fx/resources/shadowBR.png | Bin 0 -> 271 bytes includes/js/dojox/fx/resources/shadowL.png | Bin 0 -> 148 bytes includes/js/dojox/fx/resources/shadowR.png | Bin 0 -> 149 bytes includes/js/dojox/fx/resources/shadowT.png | Bin 0 -> 152 bytes includes/js/dojox/fx/resources/shadowTL.png | Bin 0 -> 271 bytes includes/js/dojox/fx/resources/shadowTR.png | Bin 0 -> 287 bytes includes/js/dojox/fx/scroll.js | 40 ++ includes/js/dojox/fx/style.js | 219 ++++++++++ includes/js/dojox/fx/tests/_animation.css | 97 +++++ .../js/dojox/fx/tests/_animation.css.commented.css | 113 ++++++ includes/js/dojox/fx/tests/example_Line.html | 80 ++++ .../dojox/fx/tests/example_backgroundPosition.html | 59 +++ .../js/dojox/fx/tests/example_dojoAnimations.html | 442 +++++++++++++++++++++ .../js/dojox/fx/tests/example_easingChart2D.html | 147 +++++++ includes/js/dojox/fx/tests/images/averycutedog.jpg | Bin 0 -> 40879 bytes includes/js/dojox/fx/tests/images/dot.png | Bin 0 -> 4064 bytes includes/js/dojox/fx/tests/images/longBg.png | Bin 0 -> 12217 bytes includes/js/dojox/fx/tests/test_Nodelist-fx.html | 282 +++++++++++++ includes/js/dojox/fx/tests/test_Shadow.html | 93 +++++ includes/js/dojox/fx/tests/test_animateClass.html | 222 +++++++++++ includes/js/dojox/fx/tests/test_crossFade.html | 145 +++++++ includes/js/dojox/fx/tests/test_easing.html | 142 +++++++ includes/js/dojox/fx/tests/test_highlight.html | 45 +++ includes/js/dojox/fx/tests/test_scroll.html | 98 +++++ includes/js/dojox/fx/tests/test_sizeTo.html | 142 +++++++ includes/js/dojox/fx/tests/test_slideBy.html | 75 ++++ includes/js/dojox/fx/tests/test_wipeTo.html | 109 +++++ 36 files changed, 3394 insertions(+) create mode 100644 includes/js/dojox/fx/README create mode 100644 includes/js/dojox/fx/Shadow.js create mode 100644 includes/js/dojox/fx/_arg.js create mode 100644 includes/js/dojox/fx/_base.js create mode 100644 includes/js/dojox/fx/_core.js create mode 100644 includes/js/dojox/fx/easing.js create mode 100644 includes/js/dojox/fx/ext-dojo/NodeList.js create mode 100644 includes/js/dojox/fx/resources/shadowB.png create mode 100644 includes/js/dojox/fx/resources/shadowBL.png create mode 100644 includes/js/dojox/fx/resources/shadowBR.png create mode 100644 includes/js/dojox/fx/resources/shadowL.png create mode 100644 includes/js/dojox/fx/resources/shadowR.png create mode 100644 includes/js/dojox/fx/resources/shadowT.png create mode 100644 includes/js/dojox/fx/resources/shadowTL.png create mode 100644 includes/js/dojox/fx/resources/shadowTR.png create mode 100644 includes/js/dojox/fx/scroll.js create mode 100644 includes/js/dojox/fx/style.js create mode 100644 includes/js/dojox/fx/tests/_animation.css create mode 100644 includes/js/dojox/fx/tests/_animation.css.commented.css create mode 100644 includes/js/dojox/fx/tests/example_Line.html create mode 100644 includes/js/dojox/fx/tests/example_backgroundPosition.html create mode 100644 includes/js/dojox/fx/tests/example_dojoAnimations.html create mode 100644 includes/js/dojox/fx/tests/example_easingChart2D.html create mode 100644 includes/js/dojox/fx/tests/images/averycutedog.jpg create mode 100644 includes/js/dojox/fx/tests/images/dot.png create mode 100644 includes/js/dojox/fx/tests/images/longBg.png create mode 100644 includes/js/dojox/fx/tests/test_Nodelist-fx.html create mode 100644 includes/js/dojox/fx/tests/test_Shadow.html create mode 100644 includes/js/dojox/fx/tests/test_animateClass.html create mode 100644 includes/js/dojox/fx/tests/test_crossFade.html create mode 100644 includes/js/dojox/fx/tests/test_easing.html create mode 100644 includes/js/dojox/fx/tests/test_highlight.html create mode 100644 includes/js/dojox/fx/tests/test_scroll.html create mode 100644 includes/js/dojox/fx/tests/test_sizeTo.html create mode 100644 includes/js/dojox/fx/tests/test_slideBy.html create mode 100644 includes/js/dojox/fx/tests/test_wipeTo.html (limited to 'includes/js/dojox/fx') 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 new file mode 100644 index 0000000..0da8a2a Binary files /dev/null and b/includes/js/dojox/fx/resources/shadowB.png differ diff --git a/includes/js/dojox/fx/resources/shadowBL.png b/includes/js/dojox/fx/resources/shadowBL.png new file mode 100644 index 0000000..4926283 Binary files /dev/null and b/includes/js/dojox/fx/resources/shadowBL.png differ diff --git a/includes/js/dojox/fx/resources/shadowBR.png b/includes/js/dojox/fx/resources/shadowBR.png new file mode 100644 index 0000000..ee704df Binary files /dev/null and b/includes/js/dojox/fx/resources/shadowBR.png differ diff --git a/includes/js/dojox/fx/resources/shadowL.png b/includes/js/dojox/fx/resources/shadowL.png new file mode 100644 index 0000000..67ebc2e Binary files /dev/null and b/includes/js/dojox/fx/resources/shadowL.png differ diff --git a/includes/js/dojox/fx/resources/shadowR.png b/includes/js/dojox/fx/resources/shadowR.png new file mode 100644 index 0000000..8d0c99d Binary files /dev/null and b/includes/js/dojox/fx/resources/shadowR.png differ diff --git a/includes/js/dojox/fx/resources/shadowT.png b/includes/js/dojox/fx/resources/shadowT.png new file mode 100644 index 0000000..ea99436 Binary files /dev/null and b/includes/js/dojox/fx/resources/shadowT.png differ diff --git a/includes/js/dojox/fx/resources/shadowTL.png b/includes/js/dojox/fx/resources/shadowTL.png new file mode 100644 index 0000000..388742a Binary files /dev/null and b/includes/js/dojox/fx/resources/shadowTL.png differ diff --git a/includes/js/dojox/fx/resources/shadowTR.png b/includes/js/dojox/fx/resources/shadowTR.png new file mode 100644 index 0000000..c9d4f04 Binary files /dev/null and b/includes/js/dojox/fx/resources/shadowTR.png differ 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; } + // |
+ // | Multi
line
text + // |
+ // | + // | // 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 @@ + + + + using a dojo._Line and dojo._Animation + + + + + + +

an "animateProperty" for dojox.gfx

+
+ + + 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 @@ + + + + Animated background position example | The Dojo Toolkit + + + + + + + +

dojo._Animation test:

+ +

+

Test
+

+ + + 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 @@ + + + + + skeleton page | The Dojo Toolkit + + + + + + + + + +
+ +

Dojo FX: base animations

+ + + + + + + +
+
+
 
+
+
+ + +

Animate CSS Properties:

+ + + + + + + +
+
+

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. +

+
+
+ +

dojo.fx - Core animations

+ + + + + + + +
+
+
+
+
+ +

dojo.query FX

+ + + + + + + + + + + +
+
    +
  • odd row
    • +
  • even row
    • +
  • odd row
    • +
  • even row
    • +
  • odd row
    • +
  • even row
    • +
  • odd row
    • +
  • even row
    • +
  • odd row
    • +
+
+

(FisheyeLite makes this easy. be creative:)

+
    +
  • odd row
    • +
  • even row
    • +
  • odd row
    • +
  • even row
    • +
  • odd row
    • +
  • with id
    • +
  • odd row
    • +
+

+
+
+ +
+ + 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 @@ + + + + visualising dojo._Animation.easing via dojox.charting + + + + + + + + + + + + + +

dojox.fx.easing

+ +

this chart shows time (x axis) vs. position (y axis) for a movement from 0px to 30px modified by easing functions

+ + + +
+
+
+ + + diff --git a/includes/js/dojox/fx/tests/images/averycutedog.jpg b/includes/js/dojox/fx/tests/images/averycutedog.jpg new file mode 100644 index 0000000..335855e Binary files /dev/null and b/includes/js/dojox/fx/tests/images/averycutedog.jpg differ diff --git a/includes/js/dojox/fx/tests/images/dot.png b/includes/js/dojox/fx/tests/images/dot.png new file mode 100644 index 0000000..1287a73 Binary files /dev/null and b/includes/js/dojox/fx/tests/images/dot.png differ diff --git a/includes/js/dojox/fx/tests/images/longBg.png b/includes/js/dojox/fx/tests/images/longBg.png new file mode 100644 index 0000000..f89d23a Binary files /dev/null and b/includes/js/dojox/fx/tests/images/longBg.png differ 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 @@ + + + + dojo.NodeList-fx and dojox.fx.ext-dojo.Nodelist | fx add-ons to dojo.query() + + + + + + + +

NodeList and dojo.query "magic"

+ +
+

stuff going on:

+ +
+ +
+

custom query:

+
+

+ dojo.query(""); +
(dojo:)
+ +
+ + +
+ + +
+ + +
+ + + (x: 0, y:0)
+ +
(dojox:)
+ + +
+ + +
+ + +
+ + +
+ +

+ + + + +
+
+ +
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+ +
2
+
+
+
+
+
+
+ +
3
+
+
+
+
+
+
+ +
4
+
+
+
+
+
+
+ +
+ +
+ HTML AFTER +
+ +

classes available to play with:

+ + 
+		.testBox
+		.noIdHere
+		each row: .rowOne .rowTwo .rowThree .rowFour
+		each col: .iOne .iTwo .. iSeven
+		#randomNode, #node9, #node7, #aNode, #node1, #node2, #node4, #node6
+
+ +

the dojo.query() isn't limited to the testDiv, it parses the body. try: dojo.query("fieldset") and slideBy animation

+ + + 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 @@ + + + + dojox.fx.Shadow - Drop Shadows for DomNodes | The Dojo Toolkit + + + + + + + + +

dojox.fx.Shadow tests

+ +
+

with margin:

+

Lorem

+ +

with padding:

+

Lorem

+ +

no padding:

+

Lorem

+ +

position:absolute

+

Lorem

+ +
+
+ + +

+ + + + 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 @@ + + + + dojox.fx.style - animatated CSS functions | The Dojo Toolkit + + + + + + + + +

dojox.fx.style tests

+ +

+ dojox.fx.style provides a few methods to animate the changes that would occur + when adding or removing a class from a domNode. +

+ + + + + + + + +

testing sizes

+ + + + + + + +
+
+
+
+
+ +
+ +

testing position

+

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: +

+ + + + + +
+
+
+ + + + + +

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(). +

+ + + + 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 @@ + + + + dojox.fx - animation sets to use! + + + + + + + +

dojox.fx.crossFade test

+ + +

a simple demonstration of two nodes fading simultaneously

+
+ +
+ +
box2
+
+
+
+ +

two nodes with position:relative in a container with position:absolute, crossfading together.

+ +
+
+ +
box two
+
+
+
+ +

simple looping crossfade

+ +
+
+
box one
+ +
+
+
+ + + +

that's all, folks...

+ + + 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 @@ + + + + dojox.fx.easing functions: + + + + + + + +

dojox.fx.easing function tests:

+ + (click block to play animation, or here to do all three) + +
dojox.fx.easing.easeIn
+

+
dojox.fx.easing.easeOut
+

+
dojox.fx.easing.linear
+

+
dojo default easing
+ +

+ dojox.fx.easing is stand-alone, and does not require the dojox.fx base files. to see a chart + of these functions see example_easingChart2D.html +

+ +
bounce
+ + + 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 @@ + + + + dojox.fx.highlight + + + + + + +

dojox.fx.highlight tests

+ +
+

This is the default highlight

+
+ +
+

BRING ATTENTION HERE!

+
+ +
+

Highlight me

+
+ + test #1 (default) +
+ test #2 (default - play twice) +
+ test #3 +
+ test #4 +
+ highlight via dojo.query + + + 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 @@ + + + + dojox.fx.scroll + + + + + + + + +

dojox.fx.scroll tests

+ +

YOU FOUND ME!

+

neat.

+
+ +

dojox.fx.scroll provides:

+ +

+ 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) +

+ + +

getScroll

+

+ Scroll top: 0
+ Scroll left: 0 +

+ + + +
+ +
+ +
+ +

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.

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.

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.

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.

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.

+ + +

getElementsByClass

+ +

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.

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.

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.

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.

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.

+ +

ContainsAny

+ +

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.

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.

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.

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.

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.

+ + + 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 @@ + + + + dojox.fx.sizeTo | experimental fx add-ons for the Dojo Toolkit + + + + + + + +

dojox.fx.sizeTo test

+ +

quick sizeTo API overview:

+ + 
+        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"               
+        });
+
+

+ little test blocks (works in FF/win/mac + ie6) dojo.query() test +

+ +
+
+ mouse down / mouse up +
+
+ hover / exit +
+
+ noIdTest() +
+
+ all of em' +
+
+
+ + (click the box labeled "all of em'" again to reset all nodes) + + HTML AFTER +
+ + + 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 @@ + + + + dojox.fx - animation sets to use! + + + + + + + +

dojox.fx.slideBy test

+ + top: 50, left:50 + top:-50, left:50 + top:-50, left:-50 + top:50, left:-50 + dojo.query() + chainTest + +
+ lorem. ipsum. +
+ +
+ +
+
a
b
c
+
+ + + HTML AFTER +
+ + + + + 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 @@ + + + + dojox.fx.wipeTo | experimental fx add-ons for the Dojo Toolkit + + + + + + + +

dojox.fx.wipeTo test

+ +

quick sizeTo API overview:

+ + 
+        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)         
+        });
+
+ +

Some test boxes: (id="box1,box2,box3" etc ...)

+ + + + + + + +
+ I am some small text +
+ +
+ I am some small text +
+ +
+ I am some small text +
+ + +
+ +
+ + + -- cgit v1.2.3