Pan.js 5.9 KB

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