Pan.js 5.6 KB

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