free-mode.js 8.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258
  1. import { now } from '../../shared/utils.js';
  2. export default function freeMode(_ref) {
  3. let {
  4. swiper,
  5. extendParams,
  6. emit,
  7. once
  8. } = _ref;
  9. extendParams({
  10. freeMode: {
  11. enabled: false,
  12. momentum: true,
  13. momentumRatio: 1,
  14. momentumBounce: true,
  15. momentumBounceRatio: 1,
  16. momentumVelocityRatio: 1,
  17. sticky: false,
  18. minimumVelocity: 0.02
  19. }
  20. });
  21. function onTouchStart() {
  22. const translate = swiper.getTranslate();
  23. swiper.setTranslate(translate);
  24. swiper.setTransition(0);
  25. swiper.touchEventsData.velocities.length = 0;
  26. swiper.freeMode.onTouchEnd({
  27. currentPos: swiper.rtl ? swiper.translate : -swiper.translate
  28. });
  29. }
  30. function onTouchMove() {
  31. const {
  32. touchEventsData: data,
  33. touches
  34. } = swiper; // Velocity
  35. if (data.velocities.length === 0) {
  36. data.velocities.push({
  37. position: touches[swiper.isHorizontal() ? 'startX' : 'startY'],
  38. time: data.touchStartTime
  39. });
  40. }
  41. data.velocities.push({
  42. position: touches[swiper.isHorizontal() ? 'currentX' : 'currentY'],
  43. time: now()
  44. });
  45. }
  46. function onTouchEnd(_ref2) {
  47. let {
  48. currentPos
  49. } = _ref2;
  50. const {
  51. params,
  52. $wrapperEl,
  53. rtlTranslate: rtl,
  54. snapGrid,
  55. touchEventsData: data
  56. } = swiper; // Time diff
  57. const touchEndTime = now();
  58. const timeDiff = touchEndTime - data.touchStartTime;
  59. if (currentPos < -swiper.minTranslate()) {
  60. swiper.slideTo(swiper.activeIndex);
  61. return;
  62. }
  63. if (currentPos > -swiper.maxTranslate()) {
  64. if (swiper.slides.length < snapGrid.length) {
  65. swiper.slideTo(snapGrid.length - 1);
  66. } else {
  67. swiper.slideTo(swiper.slides.length - 1);
  68. }
  69. return;
  70. }
  71. if (params.freeMode.momentum) {
  72. if (data.velocities.length > 1) {
  73. const lastMoveEvent = data.velocities.pop();
  74. const velocityEvent = data.velocities.pop();
  75. const distance = lastMoveEvent.position - velocityEvent.position;
  76. const time = lastMoveEvent.time - velocityEvent.time;
  77. swiper.velocity = distance / time;
  78. swiper.velocity /= 2;
  79. if (Math.abs(swiper.velocity) < params.freeMode.minimumVelocity) {
  80. swiper.velocity = 0;
  81. } // this implies that the user stopped moving a finger then released.
  82. // There would be no events with distance zero, so the last event is stale.
  83. if (time > 150 || now() - lastMoveEvent.time > 300) {
  84. swiper.velocity = 0;
  85. }
  86. } else {
  87. swiper.velocity = 0;
  88. }
  89. swiper.velocity *= params.freeMode.momentumVelocityRatio;
  90. data.velocities.length = 0;
  91. let momentumDuration = 1000 * params.freeMode.momentumRatio;
  92. const momentumDistance = swiper.velocity * momentumDuration;
  93. let newPosition = swiper.translate + momentumDistance;
  94. if (rtl) newPosition = -newPosition;
  95. let doBounce = false;
  96. let afterBouncePosition;
  97. const bounceAmount = Math.abs(swiper.velocity) * 20 * params.freeMode.momentumBounceRatio;
  98. let needsLoopFix;
  99. if (newPosition < swiper.maxTranslate()) {
  100. if (params.freeMode.momentumBounce) {
  101. if (newPosition + swiper.maxTranslate() < -bounceAmount) {
  102. newPosition = swiper.maxTranslate() - bounceAmount;
  103. }
  104. afterBouncePosition = swiper.maxTranslate();
  105. doBounce = true;
  106. data.allowMomentumBounce = true;
  107. } else {
  108. newPosition = swiper.maxTranslate();
  109. }
  110. if (params.loop && params.centeredSlides) needsLoopFix = true;
  111. } else if (newPosition > swiper.minTranslate()) {
  112. if (params.freeMode.momentumBounce) {
  113. if (newPosition - swiper.minTranslate() > bounceAmount) {
  114. newPosition = swiper.minTranslate() + bounceAmount;
  115. }
  116. afterBouncePosition = swiper.minTranslate();
  117. doBounce = true;
  118. data.allowMomentumBounce = true;
  119. } else {
  120. newPosition = swiper.minTranslate();
  121. }
  122. if (params.loop && params.centeredSlides) needsLoopFix = true;
  123. } else if (params.freeMode.sticky) {
  124. let nextSlide;
  125. for (let j = 0; j < snapGrid.length; j += 1) {
  126. if (snapGrid[j] > -newPosition) {
  127. nextSlide = j;
  128. break;
  129. }
  130. }
  131. if (Math.abs(snapGrid[nextSlide] - newPosition) < Math.abs(snapGrid[nextSlide - 1] - newPosition) || swiper.swipeDirection === 'next') {
  132. newPosition = snapGrid[nextSlide];
  133. } else {
  134. newPosition = snapGrid[nextSlide - 1];
  135. }
  136. newPosition = -newPosition;
  137. }
  138. if (needsLoopFix) {
  139. once('transitionEnd', () => {
  140. swiper.loopFix();
  141. });
  142. } // Fix duration
  143. if (swiper.velocity !== 0) {
  144. if (rtl) {
  145. momentumDuration = Math.abs((-newPosition - swiper.translate) / swiper.velocity);
  146. } else {
  147. momentumDuration = Math.abs((newPosition - swiper.translate) / swiper.velocity);
  148. }
  149. if (params.freeMode.sticky) {
  150. // If freeMode.sticky is active and the user ends a swipe with a slow-velocity
  151. // event, then durations can be 20+ seconds to slide one (or zero!) slides.
  152. // It's easy to see this when simulating touch with mouse events. To fix this,
  153. // limit single-slide swipes to the default slide duration. This also has the
  154. // nice side effect of matching slide speed if the user stopped moving before
  155. // lifting finger or mouse vs. moving slowly before lifting the finger/mouse.
  156. // For faster swipes, also apply limits (albeit higher ones).
  157. const moveDistance = Math.abs((rtl ? -newPosition : newPosition) - swiper.translate);
  158. const currentSlideSize = swiper.slidesSizesGrid[swiper.activeIndex];
  159. if (moveDistance < currentSlideSize) {
  160. momentumDuration = params.speed;
  161. } else if (moveDistance < 2 * currentSlideSize) {
  162. momentumDuration = params.speed * 1.5;
  163. } else {
  164. momentumDuration = params.speed * 2.5;
  165. }
  166. }
  167. } else if (params.freeMode.sticky) {
  168. swiper.slideToClosest();
  169. return;
  170. }
  171. if (params.freeMode.momentumBounce && doBounce) {
  172. swiper.updateProgress(afterBouncePosition);
  173. swiper.setTransition(momentumDuration);
  174. swiper.setTranslate(newPosition);
  175. swiper.transitionStart(true, swiper.swipeDirection);
  176. swiper.animating = true;
  177. $wrapperEl.transitionEnd(() => {
  178. if (!swiper || swiper.destroyed || !data.allowMomentumBounce) return;
  179. emit('momentumBounce');
  180. swiper.setTransition(params.speed);
  181. setTimeout(() => {
  182. swiper.setTranslate(afterBouncePosition);
  183. $wrapperEl.transitionEnd(() => {
  184. if (!swiper || swiper.destroyed) return;
  185. swiper.transitionEnd();
  186. });
  187. }, 0);
  188. });
  189. } else if (swiper.velocity) {
  190. emit('_freeModeNoMomentumRelease');
  191. swiper.updateProgress(newPosition);
  192. swiper.setTransition(momentumDuration);
  193. swiper.setTranslate(newPosition);
  194. swiper.transitionStart(true, swiper.swipeDirection);
  195. if (!swiper.animating) {
  196. swiper.animating = true;
  197. $wrapperEl.transitionEnd(() => {
  198. if (!swiper || swiper.destroyed) return;
  199. swiper.transitionEnd();
  200. });
  201. }
  202. } else {
  203. swiper.updateProgress(newPosition);
  204. }
  205. swiper.updateActiveIndex();
  206. swiper.updateSlidesClasses();
  207. } else if (params.freeMode.sticky) {
  208. swiper.slideToClosest();
  209. return;
  210. } else if (params.freeMode) {
  211. emit('_freeModeNoMomentumRelease');
  212. }
  213. if (!params.freeMode.momentum || timeDiff >= params.longSwipesMs) {
  214. swiper.updateProgress();
  215. swiper.updateActiveIndex();
  216. swiper.updateSlidesClasses();
  217. }
  218. }
  219. Object.assign(swiper, {
  220. freeMode: {
  221. onTouchStart,
  222. onTouchMove,
  223. onTouchEnd
  224. }
  225. });
  226. }