lib/dojo/NodeList-fx.js.uncompressed.js

   1 define("dojo/NodeList-fx", ["dojo/_base/NodeList", "./_base/lang", "./_base/connect", "./_base/fx", "./fx"],
   2   function(NodeList, lang, connectLib, baseFx, coreFx) {
   3         // module:
   4         //              dojo/NodeList-fx
   5         // summary:
   6         //              TODOC
   7
   8 /*=====
   9 dojo["NodeList-fx"] = {
  10         // summary: Adds dojo.fx animation support to dojo.query() by extending the NodeList class
  11         //              with additional FX functions.  NodeList is the array-like object used to hold query results.
  12 };
  13
  14 // doc alias helpers:
  15 NodeList = dojo.NodeList;
  16 =====*/
  17
  18 lang.extend(NodeList, {
  19         _anim: function(obj, method, args){
  20                 args = args||{};
  21                 var a = coreFx.combine(
  22                         this.map(function(item){
  23                                 var tmpArgs = { node: item };
  24                                 lang.mixin(tmpArgs, args);
  25                                 return obj[method](tmpArgs);
  26                         })
  27                 );
  28                 return args.auto ? a.play() && this : a; // dojo.Animation|dojo.NodeList
  29         },
  30
  31         wipeIn: function(args){
  32                 // summary:
  33                 //              wipe in all elements of this NodeList via `dojo.fx.wipeIn`
  34                 //
  35                 // args: Object?
  36                 //              Additional dojo.Animation arguments to mix into this set with the addition of
  37                 //              an `auto` parameter.
  38                 //
  39                 // returns: dojo.Animation|dojo.NodeList
  40                 //              A special args member `auto` can be passed to automatically play the animation.
  41                 //              If args.auto is present, the original dojo.NodeList will be returned for further
  42                 //              chaining. Otherwise the dojo.Animation instance is returned and must be .play()'ed
  43                 //
  44                 // example:
  45                 //              Fade in all tables with class "blah":
  46                 //              |       dojo.query("table.blah").wipeIn().play();
  47                 //
  48                 // example:
  49                 //              Utilizing `auto` to get the NodeList back:
  50                 //              |       dojo.query(".titles").wipeIn({ auto:true }).onclick(someFunction);
  51                 //
  52                 return this._anim(coreFx, "wipeIn", args); // dojo.Animation|dojo.NodeList
  53         },
  54
  55         wipeOut: function(args){
  56                 // summary:
  57                 //              wipe out all elements of this NodeList via `dojo.fx.wipeOut`
  58                 //
  59                 // args: Object?
  60                 //              Additional dojo.Animation arguments to mix into this set with the addition of
  61                 //              an `auto` parameter.
  62                 //
  63                 // returns: dojo.Animation|dojo.NodeList
  64                 //              A special args member `auto` can be passed to automatically play the animation.
  65                 //              If args.auto is present, the original dojo.NodeList will be returned for further
  66                 //              chaining. Otherwise the dojo.Animation instance is returned and must be .play()'ed
  67                 //
  68                 // example:
  69                 //              Wipe out all tables with class "blah":
  70                 //              |       dojo.query("table.blah").wipeOut().play();
  71                 return this._anim(coreFx, "wipeOut", args); // dojo.Animation|dojo.NodeList
  72         },
  73
  74         slideTo: function(args){
  75                 // summary:
  76                 //              slide all elements of the node list to the specified place via `dojo.fx.slideTo`
  77                 //
  78                 // args: Object?
  79                 //              Additional dojo.Animation arguments to mix into this set with the addition of
  80                 //              an `auto` parameter.
  81                 //
  82                 // returns: dojo.Animation|dojo.NodeList
  83                 //              A special args member `auto` can be passed to automatically play the animation.
  84                 //              If args.auto is present, the original dojo.NodeList will be returned for further
  85                 //              chaining. Otherwise the dojo.Animation instance is returned and must be .play()'ed
  86                 //
  87                 // example:
  88                 //              |       Move all tables with class "blah" to 300/300:
  89                 //              |       dojo.query("table.blah").slideTo({
  90                 //              |               left: 40,
  91                 //              |               top: 50
  92                 //              |       }).play();
  93                 return this._anim(coreFx, "slideTo", args); // dojo.Animation|dojo.NodeList
  94         },
  95
  96
  97         fadeIn: function(args){
  98                 // summary:
  99                 //              fade in all elements of this NodeList via `dojo.fadeIn`
 100                 //
 101                 // args: Object?
 102                 //              Additional dojo.Animation arguments to mix into this set with the addition of
 103                 //              an `auto` parameter.
 104                 //
 105                 // returns: dojo.Animation|dojo.NodeList
 106                 //              A special args member `auto` can be passed to automatically play the animation.
 107                 //              If args.auto is present, the original dojo.NodeList will be returned for further
 108                 //              chaining. Otherwise the dojo.Animation instance is returned and must be .play()'ed
 109                 //
 110                 // example:
 111                 //              Fade in all tables with class "blah":
 112                 //              |       dojo.query("table.blah").fadeIn().play();
 113                 return this._anim(baseFx, "fadeIn", args); // dojo.Animation|dojo.NodeList
 114         },
 115
 116         fadeOut: function(args){
 117                 // summary:
 118                 //              fade out all elements of this NodeList via `dojo.fadeOut`
 119                 //
 120                 // args: Object?
 121                 //              Additional dojo.Animation arguments to mix into this set with the addition of
 122                 //              an `auto` parameter.
 123                 //
 124                 // returns: dojo.Animation|dojo.NodeList
 125                 //              A special args member `auto` can be passed to automatically play the animation.
 126                 //              If args.auto is present, the original dojo.NodeList will be returned for further
 127                 //              chaining. Otherwise the dojo.Animation instance is returned and must be .play()'ed
 128                 //
 129                 // example:
 130                 //              Fade out all elements with class "zork":
 131                 //              |       dojo.query(".zork").fadeOut().play();
 132                 // example:
 133                 //              Fade them on a delay and do something at the end:
 134                 //              |       var fo = dojo.query(".zork").fadeOut();
 135                 //              |       dojo.connect(fo, "onEnd", function(){ /*...*/ });
 136                 //              |       fo.play();
 137                 // example:
 138                 //              Using `auto`:
 139                 //              |       dojo.query("li").fadeOut({ auto:true }).filter(filterFn).forEach(doit);
 140                 //
 141                 return this._anim(baseFx, "fadeOut", args); // dojo.Animation|dojo.NodeList
 142         },
 143
 144         animateProperty: function(args){
 145                 // summary:
 146                 //              Animate all elements of this NodeList across the properties specified.
 147                 //              syntax identical to `dojo.animateProperty`
 148                 //
 149                 // args: Object?
 150                 //              Additional dojo.Animation arguments to mix into this set with the addition of
 151                 //              an `auto` parameter.
 152                 //
 153                 // returns: dojo.Animation|dojo.NodeList
 154                 //              A special args member `auto` can be passed to automatically play the animation.
 155                 //              If args.auto is present, the original dojo.NodeList will be returned for further
 156                 //              chaining. Otherwise the dojo.Animation instance is returned and must be .play()'ed
 157                 //
 158                 // example:
 159                 //      |       dojo.query(".zork").animateProperty({
 160                 //      |               duration: 500,
 161                 //      |               properties: {
 162                 //      |                       color:          { start: "black", end: "white" },
 163                 //      |                       left:           { end: 300 }
 164                 //      |               }
 165                 //      |       }).play();
 166                 //
 167                 //      example:
 168                 //      |       dojo.query(".grue").animateProperty({
 169                 //      |               auto:true,
 170                 //      |               properties: {
 171                 //      |                       height:240
 172                 //      |               }
 173                 //      |       }).onclick(handler);
 174                 return this._anim(baseFx, "animateProperty", args); // dojo.Animation|dojo.NodeList
 175         },
 176
 177         anim: function( /*Object*/                      properties,
 178                                         /*Integer?*/            duration,
 179                                         /*Function?*/           easing,
 180                                         /*Function?*/           onEnd,
 181                                         /*Integer?*/            delay){
 182                 // summary:
 183                 //              Animate one or more CSS properties for all nodes in this list.
 184                 //              The returned animation object will already be playing when it
 185                 //              is returned. See the docs for `dojo.anim` for full details.
 186                 // properties: Object
 187                 //              the properties to animate. does NOT support the `auto` parameter like other
 188                 //              NodeList-fx methods.
 189                 // duration: Integer?
 190                 //              Optional. The time to run the animations for
 191                 // easing: Function?
 192                 //              Optional. The easing function to use.
 193                 // onEnd: Function?
 194                 //              A function to be called when the animation ends
 195                 // delay:
 196                 //              how long to delay playing the returned animation
 197                 // example:
 198                 //              Another way to fade out:
 199                 //      |       dojo.query(".thinger").anim({ opacity: 0 });
 200                 // example:
 201                 //              animate all elements with the "thigner" class to a width of 500
 202                 //              pixels over half a second
 203                 //      |       dojo.query(".thinger").anim({ width: 500 }, 700);
 204                 var canim = coreFx.combine(
 205                         this.map(function(item){
 206                                 return baseFx.animateProperty({
 207                                         node: item,
 208                                         properties: properties,
 209                                         duration: duration||350,
 210                                         easing: easing
 211                                 });
 212                         })
 213                 );
 214                 if(onEnd){
 215                         connectLib.connect(canim, "onEnd", onEnd);
 216                 }
 217                 return canim.play(delay||0); // dojo.Animation
 218         }
 219 });
 220
 221 return NodeList;
 222 });