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

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