chore: move animateCSSModeScroll to utils

nolimits4web · Aug 6, 2021 · 69bed74 · 69bed74
1 parent ccf9c77
commit 69bed74
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 44 deletions.
diff --git a/src/core/slide/animateCSSModeScroll.js b/src/core/slide/animateCSSModeScroll.js
diff --git a/src/core/slide/slideTo.js b/src/core/slide/slideTo.js
@@ -1,4 +1,4 @@
-import animateCSSModeScroll from './animateCSSModeScroll.js';
+import { animateCSSModeScroll } from '../../shared/utils.js';
 
 export default function slideTo(
   index = 0,
@@ -145,7 +145,7 @@ export default function slideTo(
     if (speed === 0) {
       wrapperEl[isH ? 'scrollLeft' : 'scrollTop'] = t;
     } else {
-      if (swiper.support.smoothScroll) {
+      if (!swiper.support.smoothScroll) {
         animateCSSModeScroll({ swiper, targetPosition: t, side: isH ? 'left' : 'top' });
         return true;
       }

diff --git a/src/core/translate/translateTo.js b/src/core/translate/translateTo.js
@@ -1,3 +1,5 @@
+import { animateCSSModeScroll } from '../../shared/utils.js';
+
 export default function translateTo(
   translate = 0,
   speed = this.params.speed,
@@ -28,15 +30,14 @@ export default function translateTo(
     if (speed === 0) {
       wrapperEl[isH ? 'scrollLeft' : 'scrollTop'] = -newTranslate;
     } else {
-      // eslint-disable-next-line
-      if (wrapperEl.scrollTo) {
-        wrapperEl.scrollTo({
-          [isH ? 'left' : 'top']: -newTranslate,
-          behavior: 'smooth',
-        });
-      } else {
-        wrapperEl[isH ? 'scrollLeft' : 'scrollTop'] = -newTranslate;
+      if (!swiper.support.smoothScroll) {
+        animateCSSModeScroll({ swiper, targetPosition: -newTranslate, side: isH ? 'left' : 'top' });
+        return true;
       }
+      wrapperEl.scrollTo({
+        [isH ? 'left' : 'top']: -newTranslate,
+        behavior: 'smooth',
+      });
     }
     return true;
   }

diff --git a/src/shared/utils.js b/src/shared/utils.js
@@ -156,7 +156,41 @@ function createElementIfNotDefined(swiper, originalParams, params, checkProps) {
   return params;
 }
 
+function animateCSSModeScroll({ swiper, targetPosition, side }) {
+  const window = getWindow();
+  const currentPosition = -swiper.translate;
+  const frameTime = 1000 / 60;
+  const frames = swiper.params.speed / frameTime;
+  const perFrame = (targetPosition - currentPosition) / frames;
+
+  let progressPosition = currentPosition;
+  swiper.wrapperEl.style.scrollSnapType = 'none';
+  window.cancelAnimationFrame(swiper.cssModeFrameID);
+
+  const dir = targetPosition > currentPosition ? 'next' : 'prev';
+
+  const isOutOfBound = (progress, target) => {
+    return (dir === 'next' && progress >= target) || (dir === 'prev' && progress <= target);
+  };
+
+  const animate = () => {
+    progressPosition += perFrame;
+    if (isOutOfBound(progressPosition, targetPosition)) progressPosition = targetPosition;
+    swiper.wrapperEl.scrollTo({
+      [side]: progressPosition,
+    });
+    if (isOutOfBound(progressPosition, targetPosition)) {
+      swiper.wrapperEl.style.scrollSnapType = '';
+      window.cancelAnimationFrame(swiper.cssModeFrameID);
+      return;
+    }
+    swiper.cssModeFrameID = window.requestAnimationFrame(animate);
+  };
+  animate();
+}
+
 export {
+  animateCSSModeScroll,
   deleteProps,
   nextTick,
   now,