free-mode.mjs 8.2 KB

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