PanFade.js 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222
  1. /*
  2. Copyright (c) 2004-2012, 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. if(!dojo._hasResource["dojox.widget.rotator.PanFade"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code.
  7. dojo._hasResource["dojox.widget.rotator.PanFade"] = true;
  8. dojo.provide("dojox.widget.rotator.PanFade");
  9. dojo.require("dojo.fx");
  10. (function(d){
  11. // Constants used to identify which edge the pane pans in from.
  12. var DOWN = 0,
  13. RIGHT = 1,
  14. UP = 2,
  15. LEFT = 3;
  16. function _pan(/*int*/type, /*Object*/args){
  17. // summary:
  18. // Handles the preparation of the dom node and creates the dojo.Animation object.
  19. var j = {
  20. node: args.current.node,
  21. duration: args.duration,
  22. easing: args.easing
  23. },
  24. k = {
  25. node: args.next.node,
  26. duration: args.duration,
  27. easing: args.easing
  28. },
  29. r = args.rotatorBox,
  30. m = type % 2,
  31. a = m ? "left" : "top",
  32. s = (m ? r.w : r.h) * (type < 2 ? -1 : 1),
  33. p = {},
  34. q = {};
  35. d.style(k.node, {
  36. display: "",
  37. opacity: 0
  38. });
  39. p[a] = {
  40. start: 0,
  41. end: -s
  42. };
  43. q[a] = {
  44. start: s,
  45. end: 0
  46. };
  47. return d.fx.combine([ /*dojo.Animation*/
  48. d.animateProperty(d.mixin({ properties: p }, j)),
  49. d.fadeOut(j),
  50. d.animateProperty(d.mixin({ properties: q }, k)),
  51. d.fadeIn(k)
  52. ]);
  53. }
  54. function _setZindex(/*DomNode*/n, /*int*/z){
  55. // summary:
  56. // Helper function for continuously panning.
  57. d.style(n, "zIndex", z);
  58. }
  59. d.mixin(dojox.widget.rotator, {
  60. panFade: function(/*Object*/args){
  61. // summary:
  62. // Returns a dojo.Animation that either pans left or right to the next pane.
  63. // The actual direction depends on the order of the panes.
  64. //
  65. // If panning forward from index 1 to 3, it will perform a pan left. If panning
  66. // backwards from 5 to 1, then it will perform a pan right.
  67. //
  68. // If the parameter "continuous" is set to true, it will return an animation
  69. // chain of several pan animations of each intermediate pane panning. For
  70. // example, if you pan forward from 1 to 3, it will return an animation panning
  71. // left from 1 to 2 and then 2 to 3.
  72. //
  73. // If an easing is specified, it will be applied to each pan transition. For
  74. // example, if you are panning from pane 1 to pane 5 and you set the easing to
  75. // "dojo.fx.easing.elasticInOut", then it will "wobble" 5 times, once for each
  76. // pan transition.
  77. //
  78. // If the parameter "wrap" is set to true, it will pan to the next pane using
  79. // the shortest distance in the array of panes. For example, if there are 6
  80. // panes, then panning from 5 to 1 will pan forward (left) from pane 5 to 6 and
  81. // 6 to 1. If the distance is the same either going forward or backwards, then
  82. // it will always pan forward (left).
  83. //
  84. // A continuous pan will use the target pane's duration to pan all intermediate
  85. // panes. To use the target's pane duration for each intermediate pane, then
  86. // set the "quick" parameter to "false".
  87. var w = args.wrap,
  88. p = args.rotator.panes,
  89. len = p.length,
  90. z = len,
  91. j = args.current.idx,
  92. k = args.next.idx,
  93. nw = Math.abs(k - j),
  94. ww = Math.abs((len - Math.max(j, k)) + Math.min(j, k)) % len,
  95. _forward = j < k,
  96. _dir = LEFT,
  97. _pans = [],
  98. _nodes = [],
  99. _duration = args.duration;
  100. // default to pan left, but check if we should pan right.
  101. // need to take into account wrapping.
  102. if((!w && !_forward) || (w && (_forward && nw > ww || !_forward && nw < ww))){
  103. _dir = RIGHT;
  104. }
  105. if(args.continuous){
  106. // if continuous pans are quick, then divide the duration by the number of panes
  107. if(args.quick){
  108. _duration = Math.round(_duration / (w ? Math.min(ww, nw) : nw));
  109. }
  110. // set the current pane's z-index
  111. _setZindex(p[j].node, z--);
  112. var f = (_dir == LEFT);
  113. // loop and set z-indexes and get all pan animations
  114. while(1){
  115. // set the current pane
  116. var i = j;
  117. // increment/decrement the next pane's index
  118. if(f){
  119. if(++j >= len){
  120. j = 0;
  121. }
  122. }else{
  123. if(--j < 0){
  124. j = len - 1;
  125. }
  126. }
  127. var x = p[i],
  128. y = p[j];
  129. // set next pane's z-index
  130. _setZindex(y.node, z--);
  131. // build the pan animation
  132. _pans.push(_pan(_dir, d.mixin({
  133. easing: function(m){ return m; } // continuous gets a linear easing by default
  134. }, args, {
  135. current: x,
  136. next: y,
  137. duration: _duration
  138. })));
  139. // if we're done, then break out of the loop
  140. if((f && j == k) || (!f && j == k)){
  141. break;
  142. }
  143. // this must come after the break... we don't want the last pane to get it's
  144. // styles reset.
  145. _nodes.push(y.node);
  146. }
  147. // build the chained animation of all pan animations
  148. var _anim = d.fx.chain(_pans),
  149. // clean up styles when the chained animation finishes
  150. h = d.connect(_anim, "onEnd", function(){
  151. d.disconnect(h);
  152. d.forEach(_nodes, function(q){
  153. d.style(q, {
  154. display: "none",
  155. left: 0,
  156. opacity: 1,
  157. top: 0,
  158. zIndex: 0
  159. });
  160. });
  161. });
  162. return _anim;
  163. }
  164. // we're not continuous, so just return a normal pan animation
  165. return _pan(_dir, args); /*dojo.Animation*/
  166. },
  167. panFadeDown: function(/*Object*/args){
  168. // summary:
  169. // Returns a dojo.Animation that pans in the next rotator pane from the top.
  170. return _pan(DOWN, args); /*dojo.Animation*/
  171. },
  172. panFadeRight: function(/*Object*/args){
  173. // summary:
  174. // Returns a dojo.Animation that pans in the next rotator pane from the right.
  175. return _pan(RIGHT, args); /*dojo.Animation*/
  176. },
  177. panFadeUp: function(/*Object*/args){
  178. // summary:
  179. // Returns a dojo.Animation that pans in the next rotator pane from the bottom.
  180. return _pan(UP, args); /*dojo.Animation*/
  181. },
  182. panFadeLeft: function(/*Object*/args){
  183. // summary:
  184. // Returns a dojo.Animation that pans in the next rotator pane from the left.
  185. return _pan(LEFT, args); /*dojo.Animation*/
  186. }
  187. });
  188. })(dojo);
  189. }