chore(core): move module's utils to separate files

nolimits4web · Aug 11, 2021 · 7e04f5a · 7e04f5a
1 parent 1b0165a
commit 7e04f5a
Show file tree

Hide file tree

Showing 12 changed files with 66 additions and 100 deletions.
diff --git a/src/modules/a11y/a11y.js b/src/modules/a11y/a11y.js
@@ -1,5 +1,5 @@
+import classesToSelector from '../../shared/classes-to-selector.js';
 import $ from '../../shared/dom.js';
-import { classesToSelector } from '../../shared/utils.js';
 
 export default function A11y({ swiper, extendParams, on }) {
   extendParams({

diff --git a/src/modules/effect-cards/effect-cards.js b/src/modules/effect-cards/effect-cards.js
@@ -1,3 +1,5 @@
+import virtualEffectTransitionEnd from '../../shared/virtual-effect-transition-end.js';
+
 export default function EffectCards({ swiper, extendParams, on }) {
   extendParams({
     cardsEffect: {
@@ -88,28 +90,11 @@ export default function EffectCards({ swiper, extendParams, on }) {
   };
 
   const setTransition = (duration) => {
-    const { slides, activeIndex, $wrapperEl } = swiper;
     const { transformEl } = swiper.params.cardsEffect;
     const $transitionElements = transformEl ? swiper.slides.find(transformEl) : swiper.slides;
     $transitionElements.transition(duration);
 
-    if (swiper.params.virtualTranslate && duration !== 0) {
-      let eventTriggered = false;
-      const $transitionEndTarget = transformEl
-        ? slides.eq(activeIndex).find(transformEl)
-        : slides.eq(activeIndex);
-      // eslint-disable-next-line
-      $transitionEndTarget.transitionEnd(() => {
-        if (eventTriggered) return;
-        if (!swiper || swiper.destroyed) return;
-        eventTriggered = true;
-        swiper.animating = false;
-        const triggerEvents = ['webkitTransitionEnd', 'transitionend'];
-        for (let i = 0; i < triggerEvents.length; i += 1) {
-          $wrapperEl.trigger(triggerEvents[i]);
-        }
-      });
-    }
+    virtualEffectTransitionEnd({ swiper, duration, transformEl });
   };
 
   on('beforeInit', () => {

diff --git a/src/modules/effect-custom/effect-custom.js b/src/modules/effect-custom/effect-custom.js
@@ -1,3 +1,5 @@
+import virtualEffectTransitionEnd from '../../shared/virtual-effect-transition-end.js';
+
 export default function EffectCustom({ swiper, extendParams, on }) {
   extendParams({
     customEffect: {
@@ -90,28 +92,11 @@ export default function EffectCustom({ swiper, extendParams, on }) {
   };
 
   const setTransition = (duration) => {
-    const { slides, activeIndex, $wrapperEl } = swiper;
     const { transformEl } = swiper.params.customEffect;
     const $transitionElements = transformEl ? swiper.slides.find(transformEl) : swiper.slides;
     $transitionElements.transition(duration);
 
-    if (swiper.params.virtualTranslate && duration !== 0) {
-      let eventTriggered = false;
-      const $transitionEndTarget = transformEl
-        ? slides.eq(activeIndex).find(transformEl)
-        : slides.eq(activeIndex);
-      // eslint-disable-next-line
-      $transitionEndTarget.transitionEnd(() => {
-        if (eventTriggered) return;
-        if (!swiper || swiper.destroyed) return;
-        eventTriggered = true;
-        swiper.animating = false;
-        const triggerEvents = ['webkitTransitionEnd', 'transitionend'];
-        for (let i = 0; i < triggerEvents.length; i += 1) {
-          $wrapperEl.trigger(triggerEvents[i]);
-        }
-      });
-    }
+    virtualEffectTransitionEnd({ swiper, duration, transformEl });
   };
 
   on('beforeInit', () => {

diff --git a/src/modules/effect-fade/effect-fade.js b/src/modules/effect-fade/effect-fade.js
@@ -1,3 +1,5 @@
+import virtualEffectTransitionEnd from '../../shared/virtual-effect-transition-end.js';
+
 export default function EffectFade({ swiper, extendParams, on }) {
   extendParams({
     fadeEffect: {
@@ -32,24 +34,10 @@ export default function EffectFade({ swiper, extendParams, on }) {
     }
   };
   const setTransition = (duration) => {
-    const { slides, $wrapperEl } = swiper;
     const { transformEl } = swiper.params.fadeEffect;
-    const $transitionElements = transformEl ? slides.find(transformEl) : slides;
+    const $transitionElements = transformEl ? swiper.slides.find(transformEl) : swiper.slides;
     $transitionElements.transition(duration);
-    if (swiper.params.virtualTranslate && duration !== 0) {
-      let eventTriggered = false;
-      const $transitionEndTarget = transformEl ? slides.find(transformEl) : slides;
-      $transitionEndTarget.transitionEnd(() => {
-        if (eventTriggered) return;
-        if (!swiper || swiper.destroyed) return;
-        eventTriggered = true;
-        swiper.animating = false;
-        const triggerEvents = ['webkitTransitionEnd', 'transitionend'];
-        for (let i = 0; i < triggerEvents.length; i += 1) {
-          $wrapperEl.trigger(triggerEvents[i]);
-        }
-      });
-    }
+    virtualEffectTransitionEnd({ swiper, duration, transformEl, allSlides: true });
   };
 
   on('beforeInit', () => {

diff --git a/src/modules/effect-flip/effect-flip.js b/src/modules/effect-flip/effect-flip.js
@@ -1,4 +1,5 @@
 import $ from '../../shared/dom.js';
+import virtualEffectTransitionEnd from '../../shared/virtual-effect-transition-end.js';
 
 export default function EffectFlip({ swiper, extendParams, on }) {
   extendParams({
@@ -75,7 +76,6 @@ export default function EffectFlip({ swiper, extendParams, on }) {
   };
 
   const setTransition = (duration) => {
-    const { slides, activeIndex, $wrapperEl } = swiper;
     const { transformEl } = swiper.params.flipEffect;
     const $transitionElements = transformEl ? swiper.slides.find(transformEl) : swiper.slides;
     $transitionElements
@@ -84,23 +84,7 @@ export default function EffectFlip({ swiper, extendParams, on }) {
         '.swiper-slide-shadow-top, .swiper-slide-shadow-right, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left',
       )
       .transition(duration);
-    if (swiper.params.virtualTranslate && duration !== 0) {
-      let eventTriggered = false;
-      const $transitionEndTarget = transformEl
-        ? slides.eq(activeIndex).find(transformEl)
-        : slides.eq(activeIndex);
-      // eslint-disable-next-line
-      $transitionEndTarget.transitionEnd(() => {
-        if (eventTriggered) return;
-        if (!swiper || swiper.destroyed) return;
-        eventTriggered = true;
-        swiper.animating = false;
-        const triggerEvents = ['webkitTransitionEnd', 'transitionend'];
-        for (let i = 0; i < triggerEvents.length; i += 1) {
-          $wrapperEl.trigger(triggerEvents[i]);
-        }
-      });
-    }
+    virtualEffectTransitionEnd({ swiper, duration, transformEl });
   };
 
   on('beforeInit', () => {

diff --git a/src/modules/navigation/navigation.js b/src/modules/navigation/navigation.js
@@ -1,5 +1,5 @@
+import createElementIfNotDefined from '../../shared/create-element-if-not-defined.js';
 import $ from '../../shared/dom.js';
-import { createElementIfNotDefined } from '../../shared/utils.js';
 
 export default function Navigation({ swiper, extendParams, on, emit }) {
   extendParams({

diff --git a/src/modules/pagination/pagination.js b/src/modules/pagination/pagination.js
@@ -1,5 +1,6 @@
 import $ from '../../shared/dom.js';
-import { classesToSelector, createElementIfNotDefined } from '../../shared/utils.js';
+import classesToSelector from '../../shared/classes-to-selector.js';
+import createElementIfNotDefined from '../../shared/create-element-if-not-defined.js';
 
 export default function Pagination({ swiper, extendParams, on, emit }) {
   const pfx = 'swiper-pagination';

diff --git a/src/modules/scrollbar/scrollbar.js b/src/modules/scrollbar/scrollbar.js
@@ -1,6 +1,7 @@
 import { getDocument } from 'ssr-window';
 import $ from '../../shared/dom.js';
-import { nextTick, createElementIfNotDefined } from '../../shared/utils.js';
+import { nextTick } from '../../shared/utils.js';
+import createElementIfNotDefined from '../../shared/create-element-if-not-defined.js';
 
 export default function Scrollbar({ swiper, extendParams, on, emit }) {
   const document = getDocument();

diff --git a/src/shared/classes-to-selector.js b/src/shared/classes-to-selector.js
@@ -0,0 +1,6 @@
+export default function classesToSelector(classes = '') {
+  return `.${classes
+    .trim()
+    .replace(/([\.:!\/])/g, '\\$1') // eslint-disable-line
+    .replace(/ /g, '.')}`;
+}
diff --git a/src/shared/create-element-if-not-defined.js b/src/shared/create-element-if-not-defined.js
@@ -0,0 +1,17 @@
+import { getDocument } from 'ssr-window';
+
+export default function createElementIfNotDefined(swiper, originalParams, params, checkProps) {
+  const document = getDocument();
+  if (swiper.params.createElements) {
+    Object.keys(checkProps).forEach((key) => {
+      if (!params[key] && params.auto === true) {
+        const element = document.createElement('div');
+        element.className = checkProps[key];
+        swiper.$el.append(element);
+        params[key] = element;
+        originalParams[key] = element;
+      }
+    });
+  }
+  return params;
+}
diff --git a/src/shared/utils.js b/src/shared/utils.js
@@ -1,4 +1,4 @@
-import { getDocument, getWindow } from 'ssr-window';
+import { getWindow } from 'ssr-window';
 
 function deleteProps(obj) {
   const object = obj;
@@ -133,29 +133,6 @@ function extend(...args) {
   return to;
 }
 
-function classesToSelector(classes = '') {
-  return `.${classes
-    .trim()
-    .replace(/([\.:!\/])/g, '\\$1') // eslint-disable-line
-    .replace(/ /g, '.')}`;
-}
-
-function createElementIfNotDefined(swiper, originalParams, params, checkProps) {
-  const document = getDocument();
-  if (swiper.params.createElements) {
-    Object.keys(checkProps).forEach((key) => {
-      if (!params[key] && params.auto === true) {
-        const element = document.createElement('div');
-        element.className = checkProps[key];
-        swiper.$el.append(element);
-        params[key] = element;
-        originalParams[key] = element;
-      }
-    });
-  }
-  return params;
-}
-
 function setCSSProperty(el, varName, varValue) {
   el.style.setProperty(varName, varValue);
 }
@@ -209,7 +186,5 @@ export {
   isObject,
   extend,
   getComputedStyle,
-  classesToSelector,
-  createElementIfNotDefined,
   setCSSProperty,
 };
diff --git a/src/shared/virtual-effect-transition-end.js b/src/shared/virtual-effect-transition-end.js
@@ -0,0 +1,24 @@
+export default function virtualEffectTransitionEnd({ swiper, duration, transformEl, allSlides }) {
+  const { slides, activeIndex, $wrapperEl } = swiper;
+  if (swiper.params.virtualTranslate && duration !== 0) {
+    let eventTriggered = false;
+    let $transitionEndTarget;
+    if (allSlides) {
+      $transitionEndTarget = transformEl ? slides.find(transformEl) : slides;
+    } else {
+      $transitionEndTarget = transformEl
+        ? slides.eq(activeIndex).find(transformEl)
+        : slides.eq(activeIndex);
+    }
+    $transitionEndTarget.transitionEnd(() => {
+      if (eventTriggered) return;
+      if (!swiper || swiper.destroyed) return;
+      eventTriggered = true;
+      swiper.animating = false;
+      const triggerEvents = ['webkitTransitionEnd', 'transitionend'];
+      for (let i = 0; i < triggerEvents.length; i += 1) {
+        $wrapperEl.trigger(triggerEvents[i]);
+      }
+    });
+  }
+}