diff options
author | 2008-11-13 09:49:11 +0000 | |
---|---|---|
committer | 2008-11-13 09:49:11 +0000 | |
commit | e44a7e37b6c7b5961adaffc62b9042b8d442938e (patch) | |
tree | 95b67c356e93163467db2451f2b8cce84ed5d582 /includes/js/dojo/NodeList-fx.js | |
parent | a62b9742ee5e28bcec6872d88f50f25b820914f6 (diff) | |
download | scuttle-e44a7e37b6c7b5961adaffc62b9042b8d442938e.tar.gz scuttle-e44a7e37b6c7b5961adaffc62b9042b8d442938e.zip |
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
Diffstat (limited to 'includes/js/dojo/NodeList-fx.js')
-rw-r--r-- | includes/js/dojo/NodeList-fx.js | 137 |
1 files changed, 137 insertions, 0 deletions
diff --git a/includes/js/dojo/NodeList-fx.js b/includes/js/dojo/NodeList-fx.js new file mode 100644 index 0000000..ede0a89 --- /dev/null +++ b/includes/js/dojo/NodeList-fx.js @@ -0,0 +1,137 @@ +if(!dojo._hasResource["dojo.NodeList-fx"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code. +dojo._hasResource["dojo.NodeList-fx"] = true; +dojo.provide("dojo.NodeList-fx"); +dojo.require("dojo.fx"); + +/*===== +dojo["NodeList-fx"] = { + // summary: Adds dojo.fx animation support to dojo.query() +}; +=====*/ + +dojo.extend(dojo.NodeList, { + _anim: function(obj, method, args){ + args = args||{}; + return dojo.fx.combine( + this.map(function(item){ + var tmpArgs = { node: item }; + dojo.mixin(tmpArgs, args); + return obj[method](tmpArgs); + }) + ); // dojo._Animation + }, + + wipeIn: function(args){ + // summary: + // wipe in all elements of this NodeList. Returns an instance of dojo._Animation + // example: + // Fade in all tables with class "blah": + // | dojo.query("table.blah").wipeIn().play(); + return this._anim(dojo.fx, "wipeIn", args); // dojo._Animation + }, + + wipeOut: function(args){ + // summary: + // wipe out all elements of this NodeList. Returns an instance of dojo._Animation + // example: + // Wipe out all tables with class "blah": + // | dojo.query("table.blah").wipeOut().play(); + return this._anim(dojo.fx, "wipeOut", args); // dojo._Animation + }, + + slideTo: function(args){ + // summary: + // slide all elements of the node list to the specified place. + // Returns an instance of dojo._Animation + // example: + // | Move all tables with class "blah" to 300/300: + // | dojo.query("table.blah").slideTo({ + // | left: 40, + // | top: 50 + // | }).play(); + return this._anim(dojo.fx, "slideTo", args); // dojo._Animation + }, + + + fadeIn: function(args){ + // summary: + // fade in all elements of this NodeList. Returns an instance of dojo._Animation + // example: + // Fade in all tables with class "blah": + // | dojo.query("table.blah").fadeIn().play(); + return this._anim(dojo, "fadeIn", args); // dojo._Animation + }, + + fadeOut: function(args){ + // summary: + // fade out all elements of this NodeList. Returns an instance of dojo._Animation + // example: + // Fade out all elements with class "zork": + // | dojo.query(".zork").fadeOut().play(); + // example: + // Fade them on a delay and do something at the end: + // | var fo = dojo.query(".zork").fadeOut(); + // | dojo.connect(fo, "onEnd", function(){ /*...*/ }); + // | fo.play(); + return this._anim(dojo, "fadeOut", args); // dojo._Animation + }, + + animateProperty: function(args){ + // summary: + // see dojo.animateProperty(). Animate all elements of this + // NodeList across the properties specified. + // example: + // | dojo.query(".zork").animateProperty({ + // | duration: 500, + // | properties: { + // | color: { start: "black", end: "white" }, + // | left: { end: 300 } + // | } + // | }).play(); + return this._anim(dojo, "animateProperty", args); // dojo._Animation + }, + + anim: function( /*Object*/ properties, + /*Integer?*/ duration, + /*Function?*/ easing, + /*Function?*/ onEnd, + /*Integer?*/ delay){ + // summary: + // Animate one or more CSS properties for all nodes in this list. + // The returned animation object will already be playing when it + // is returned. See the docs for `dojo.anim` for full details. + // properties: Object + // the properties to animate + // duration: Integer? + // Optional. The time to run the animations for + // easing: Function? + // Optional. The easing function to use. + // onEnd: Function? + // A function to be called when the animation ends + // delay: + // how long to delay playing the returned animation + // example: + // Another way to fade out: + // | dojo.query(".thinger").anim({ opacity: 0 }); + // example: + // animate all elements with the "thigner" class to a width of 500 + // pixels over half a second + // | dojo.query(".thinger").anim({ width: 500 }, 700); + var canim = dojo.fx.combine( + this.map(function(item){ + return dojo.animateProperty({ + node: item, + properties: properties, + duration: duration||350, + easing: easing + }); + }) + ); + if(onEnd){ + dojo.connect(canim, "onEnd", onEnd); + } + return canim.play(delay||0); // dojo._Animation + } +}); + +} |