onTouchStart.js 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132
  1. import { getWindow, getDocument } from 'ssr-window';
  2. import $ from '../../shared/dom.js';
  3. import { now } from '../../shared/utils.js'; // Modified from https://stackoverflow.com/questions/54520554/custom-element-getrootnode-closest-function-crossing-multiple-parent-shadowd
  4. function closestElement(selector, base = this) {
  5. function __closestFrom(el) {
  6. if (!el || el === getDocument() || el === getWindow()) return null;
  7. if (el.assignedSlot) el = el.assignedSlot;
  8. const found = el.closest(selector);
  9. if (!found && !el.getRootNode) {
  10. return null;
  11. }
  12. return found || __closestFrom(el.getRootNode().host);
  13. }
  14. return __closestFrom(base);
  15. }
  16. export default function onTouchStart(event) {
  17. const swiper = this;
  18. const document = getDocument();
  19. const window = getWindow();
  20. const data = swiper.touchEventsData;
  21. const {
  22. params,
  23. touches,
  24. enabled
  25. } = swiper;
  26. if (!enabled) return;
  27. if (swiper.animating && params.preventInteractionOnTransition) {
  28. return;
  29. }
  30. if (!swiper.animating && params.cssMode && params.loop) {
  31. swiper.loopFix();
  32. }
  33. let e = event;
  34. if (e.originalEvent) e = e.originalEvent;
  35. let $targetEl = $(e.target);
  36. if (params.touchEventsTarget === 'wrapper') {
  37. if (!$targetEl.closest(swiper.wrapperEl).length) return;
  38. }
  39. data.isTouchEvent = e.type === 'touchstart';
  40. if (!data.isTouchEvent && 'which' in e && e.which === 3) return;
  41. if (!data.isTouchEvent && 'button' in e && e.button > 0) return;
  42. if (data.isTouched && data.isMoved) return; // change target el for shadow root component
  43. const swipingClassHasValue = !!params.noSwipingClass && params.noSwipingClass !== ''; // eslint-disable-next-line
  44. const eventPath = event.composedPath ? event.composedPath() : event.path;
  45. if (swipingClassHasValue && e.target && e.target.shadowRoot && eventPath) {
  46. $targetEl = $(eventPath[0]);
  47. }
  48. const noSwipingSelector = params.noSwipingSelector ? params.noSwipingSelector : `.${params.noSwipingClass}`;
  49. const isTargetShadow = !!(e.target && e.target.shadowRoot); // use closestElement for shadow root element to get the actual closest for nested shadow root element
  50. if (params.noSwiping && (isTargetShadow ? closestElement(noSwipingSelector, $targetEl[0]) : $targetEl.closest(noSwipingSelector)[0])) {
  51. swiper.allowClick = true;
  52. return;
  53. }
  54. if (params.swipeHandler) {
  55. if (!$targetEl.closest(params.swipeHandler)[0]) return;
  56. }
  57. touches.currentX = e.type === 'touchstart' ? e.targetTouches[0].pageX : e.pageX;
  58. touches.currentY = e.type === 'touchstart' ? e.targetTouches[0].pageY : e.pageY;
  59. const startX = touches.currentX;
  60. const startY = touches.currentY; // Do NOT start if iOS edge swipe is detected. Otherwise iOS app cannot swipe-to-go-back anymore
  61. const edgeSwipeDetection = params.edgeSwipeDetection || params.iOSEdgeSwipeDetection;
  62. const edgeSwipeThreshold = params.edgeSwipeThreshold || params.iOSEdgeSwipeThreshold;
  63. if (edgeSwipeDetection && (startX <= edgeSwipeThreshold || startX >= window.innerWidth - edgeSwipeThreshold)) {
  64. if (edgeSwipeDetection === 'prevent') {
  65. event.preventDefault();
  66. } else {
  67. return;
  68. }
  69. }
  70. Object.assign(data, {
  71. isTouched: true,
  72. isMoved: false,
  73. allowTouchCallbacks: true,
  74. isScrolling: undefined,
  75. startMoving: undefined
  76. });
  77. touches.startX = startX;
  78. touches.startY = startY;
  79. data.touchStartTime = now();
  80. swiper.allowClick = true;
  81. swiper.updateSize();
  82. swiper.swipeDirection = undefined;
  83. if (params.threshold > 0) data.allowThresholdMove = false;
  84. if (e.type !== 'touchstart') {
  85. let preventDefault = true;
  86. if ($targetEl.is(data.focusableElements)) {
  87. preventDefault = false;
  88. if ($targetEl[0].nodeName === 'SELECT') {
  89. data.isTouched = false;
  90. }
  91. }
  92. if (document.activeElement && $(document.activeElement).is(data.focusableElements) && document.activeElement !== $targetEl[0]) {
  93. document.activeElement.blur();
  94. }
  95. const shouldPreventDefault = preventDefault && swiper.allowTouchMove && params.touchStartPreventDefault;
  96. if ((params.touchStartForcePreventDefault || shouldPreventDefault) && !$targetEl[0].isContentEditable) {
  97. e.preventDefault();
  98. }
  99. }
  100. if (swiper.params.freeMode && swiper.params.freeMode.enabled && swiper.freeMode && swiper.animating && !params.cssMode) {
  101. swiper.freeMode.onTouchStart();
  102. }
  103. swiper.emit('touchStart', e);
  104. }