drag.js 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188
  1. ( function() {
  2. 'use strict';
  3. var utils = window.fizzyUIUtils;
  4. function noop() {}
  5. var fakeDrag = window.fakeDrag = function( flkty, positions ) {
  6. function fakeEvent( type, pageX ) {
  7. return {
  8. type: type,
  9. pageX: pageX,
  10. pageY: 0,
  11. preventDefault: noop,
  12. target: flkty.viewport
  13. };
  14. }
  15. var hasBeenDown = false;
  16. function triggerEvent() {
  17. var position = positions.shift();
  18. // down or move event
  19. if ( !hasBeenDown ) {
  20. var downEvent = fakeEvent( 'mousedown', position );
  21. flkty._pointerDown( downEvent, downEvent );
  22. hasBeenDown = true;
  23. } else {
  24. var moveEvent = fakeEvent( 'mousemove', position );
  25. flkty._pointerMove( moveEvent, moveEvent );
  26. }
  27. if ( positions.length ) {
  28. // loop next
  29. setTimeout( triggerEvent, 40 );
  30. } else {
  31. // up event
  32. var upEvent = fakeEvent( 'mouseup', position );
  33. flkty._pointerUp( upEvent, upEvent );
  34. }
  35. }
  36. triggerEvent();
  37. };
  38. var dragTests;
  39. // do each drag test one after another
  40. function getDoNextDragTest( done ) {
  41. return function doNextDragTest() {
  42. if ( dragTests.length ) {
  43. var dragTest = dragTests.shift();
  44. dragTest();
  45. } else {
  46. done();
  47. }
  48. };
  49. }
  50. // flickity, dragPositions, index, callback, message
  51. function getFakeDragTest( args ) {
  52. var assert = args.assert;
  53. var flkty = args.flickity;
  54. var msgCell = 'slide[' + args.index + ']';
  55. return function fakeDragTest() {
  56. var selectMsg = ( args.message ? args.message + '. ' : '' ) + 'selected ' + msgCell;
  57. flkty.once( 'select', function() {
  58. assert.equal( flkty.selectedIndex, args.index, selectMsg );
  59. });
  60. var settleMsg = ( args.message ? args.message + '. ' : '' ) + 'settled ' + msgCell;
  61. var target = flkty.slides[ args.index ].target;
  62. flkty.once( 'settle', function() {
  63. assert.equal( Math.round( -flkty.x ), Math.round( target ), settleMsg );
  64. setTimeout( args.callback );
  65. });
  66. fakeDrag( args.flickity, args.dragPositions );
  67. };
  68. }
  69. QUnit.test( 'drag', function( assert ) {
  70. // async test
  71. var done = assert.async();
  72. var flkty = new Flickity('#drag');
  73. var doNextDragTest = getDoNextDragTest( done );
  74. function getDragTest( args ) {
  75. args = utils.extend( args, {
  76. assert: assert,
  77. flickity: flkty,
  78. callback: doNextDragTest
  79. });
  80. return getFakeDragTest( args );
  81. }
  82. dragTests = [
  83. getDragTest({
  84. message: 'drag to 2nd cell',
  85. index: 1,
  86. dragPositions: [ 0, -10, -20 ]
  87. }),
  88. getDragTest({
  89. message: 'drag back to 1st cell',
  90. index: 0,
  91. dragPositions: [ 0, 10, 20 ]
  92. }),
  93. getDragTest({
  94. message: 'big flick to 3rd cell',
  95. index: 2,
  96. dragPositions: [ 0, -10, -80 ]
  97. }),
  98. // minimal movement to trigger static click
  99. function() {
  100. flkty.once( 'staticClick', function() {
  101. assert.ok( true, 'staticClick fired on non-drag');
  102. assert.equal( flkty.selectedIndex, 2, 'selected index still at 2 after click' );
  103. setTimeout( doNextDragTest );
  104. });
  105. fakeDrag( flkty, [ 0, 1, 0, -2, -1 ] );
  106. },
  107. // move out then back to where it started
  108. function() {
  109. flkty.once( 'settle', function() {
  110. assert.equal( flkty.selectedIndex, 2, 'move out then back. same cell' );
  111. setTimeout( doNextDragTest );
  112. });
  113. fakeDrag( flkty, [ 0, 10, 20, 30, 20 ] );
  114. },
  115. getDragTest({
  116. message: 'drag and try to flick past 6th cell',
  117. index: 5,
  118. dragPositions: [ 0, -10, -50, -77, -100, -125, -150, -175, -250, -350 ]
  119. })
  120. ];
  121. doNextDragTest();
  122. });
  123. QUnit.test( 'drag with wrapAround', function( assert ) {
  124. // async test
  125. var done = assert.async();
  126. var flkty = new Flickity('#drag-wrap-around', {
  127. wrapAround: true
  128. });
  129. var doNextDragTest = getDoNextDragTest( done );
  130. function getDragTest( args ) {
  131. args = utils.extend( args, {
  132. assert: assert,
  133. flickity: flkty,
  134. callback: doNextDragTest
  135. });
  136. return getFakeDragTest( args );
  137. }
  138. dragTests = [
  139. getDragTest({
  140. message: 'drag to last cell via wrap-around',
  141. index: 5,
  142. dragPositions: [ 0, 10, 20 ]
  143. }),
  144. getDragTest({
  145. message: 'drag to first cell via wrap-around',
  146. index: 0,
  147. dragPositions: [ 0, -10, -20 ]
  148. }),
  149. getDragTest({
  150. message: 'big flick to 5th cell via wrap-around',
  151. index: 4,
  152. dragPositions: [ 0, 10, 80 ]
  153. })
  154. ];
  155. doNextDragTest();
  156. });
  157. })();