lib/dojo/NodeList-fx.js

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