git.pond.sub.org Git - eow/blob - static/dojo-release-1.1.1/dojo/NodeList-fx.js

   1 if(!dojo._hasResource["dojo.NodeList-fx"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
   2 dojo._hasResource["dojo.NodeList-fx"] = true;
   3 dojo.provide("dojo.NodeList-fx");
   4 dojo.require("dojo.fx");
   5
   6 /*=====
   7 dojo["NodeList-fx"] = {
   8         // summary: Adds dojo.fx animation support to dojo.query()
   9 };
  10 =====*/
  11
  12 dojo.extend(dojo.NodeList, {
  13         _anim: function(obj, method, args){
  14                 args = args||{};
  15                 return dojo.fx.combine(
  16                         this.map(function(item){
  17                                 var tmpArgs = { node: item };
  18                                 dojo.mixin(tmpArgs, args);
  19                                 return obj[method](tmpArgs);
  20                         })
  21                 ); // dojo._Animation
  22         },
  23
  24         wipeIn: function(args){
  25                 //      summary:
  26                 //              wipe in all elements of this NodeList. Returns an instance of dojo._Animation
  27                 //      example:
  28                 //              Fade in all tables with class "blah":
  29                 //              |       dojo.query("table.blah").wipeIn().play();
  30                 return this._anim(dojo.fx, "wipeIn", args); // dojo._Animation
  31         },
  32
  33         wipeOut: function(args){
  34                 //      summary:
  35                 //              wipe out all elements of this NodeList. Returns an instance of dojo._Animation
  36                 //      example:
  37                 //              Wipe out all tables with class "blah":
  38                 //              |       dojo.query("table.blah").wipeOut().play();
  39                 return this._anim(dojo.fx, "wipeOut", args); // dojo._Animation
  40         },
  41
  42         slideTo: function(args){
  43                 //      summary:
  44                 //              slide all elements of the node list to the specified place.
  45                 //              Returns an instance of dojo._Animation
  46                 //      example:
  47                 //              |       Move all tables with class "blah" to 300/300:
  48                 //              |       dojo.query("table.blah").slideTo({
  49                 //              |               left: 40,
  50                 //              |               top: 50
  51                 //              |       }).play();
  52                 return this._anim(dojo.fx, "slideTo", args); // dojo._Animation
  53         },
  54
  55
  56         fadeIn: function(args){
  57                 //      summary:
  58                 //              fade in all elements of this NodeList. Returns an instance of dojo._Animation
  59                 //      example:
  60                 //              Fade in all tables with class "blah":
  61                 //              |       dojo.query("table.blah").fadeIn().play();
  62                 return this._anim(dojo, "fadeIn", args); // dojo._Animation
  63         },
  64
  65         fadeOut: function(args){
  66                 //      summary:
  67                 //              fade out all elements of this NodeList. Returns an instance of dojo._Animation
  68                 //      example:
  69                 //              Fade out all elements with class "zork":
  70                 //              |       dojo.query(".zork").fadeOut().play();
  71                 //      example:
  72                 //              Fade them on a delay and do something at the end:
  73                 //              |       var fo = dojo.query(".zork").fadeOut();
  74                 //              |       dojo.connect(fo, "onEnd", function(){ /*...*/ });
  75                 //              |       fo.play();
  76                 return this._anim(dojo, "fadeOut", args); // dojo._Animation
  77         },
  78
  79         animateProperty: function(args){
  80                 //      summary:
  81                 //              see dojo.animateProperty(). Animate all elements of this
  82                 //              NodeList across the properties specified.
  83                 //      example:
  84                 //      |       dojo.query(".zork").animateProperty({
  85                 //      |               duration: 500,
  86                 //      |               properties: {
  87                 //      |                       color:          { start: "black", end: "white" },
  88                 //      |                       left:           { end: 300 }
  89                 //      |               }
  90                 //      |       }).play();
  91                 return this._anim(dojo, "animateProperty", args); // dojo._Animation
  92         },
  93
  94         anim: function( /*Object*/                      properties,
  95                                         /*Integer?*/            duration,
  96                                         /*Function?*/           easing,
  97                                         /*Function?*/           onEnd,
  98                                         /*Integer?*/            delay){
  99                 //      summary:
 100                 //              Animate one or more CSS properties for all nodes in this list.
 101                 //              The returned animation object will already be playing when it
 102                 //              is returned. See the docs for `dojo.anim` for full details.
 103                 //      properties: Object
 104                 //              the properties to animate
 105                 //      duration: Integer?
 106                 //              Optional. The time to run the animations for
 107                 //      easing: Function?
 108                 //              Optional. The easing function to use.
 109                 //      onEnd: Function?
 110                 //              A function to be called when the animation ends
 111                 //      delay:
 112                 //              how long to delay playing the returned animation
 113                 //      example:
 114                 //              Another way to fade out:
 115                 //      |       dojo.query(".thinger").anim({ opacity: 0 });
 116                 //      example:
 117                 //              animate all elements with the "thigner" class to a width of 500
 118                 //              pixels over half a second
 119                 //      |       dojo.query(".thinger").anim({ width: 500 }, 700);
 120                 var canim = dojo.fx.combine(
 121                         this.map(function(item){
 122                                 return dojo.animateProperty({
 123                                         node: item,
 124                                         properties: properties,
 125                                         duration: duration||350,
 126                                         easing: easing
 127                                 });
 128                         })
 129                 );
 130                 if(onEnd){
 131                         dojo.connect(canim, "onEnd", onEnd);
 132                 }
 133                 return canim.play(delay||0); // dojo._Animation
 134         }
 135 });
 136
 137 }