NodeList-fx.js 8.6 KB

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