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