feat(core): convert effects to functional modules

nolimits4web · Aug 3, 2021 · b6f64a5 · b6f64a5
1 parent 6ed6786
commit b6f64a5
Show file tree

Hide file tree

Showing 4 changed files with 144 additions and 200 deletions.
diff --git a/src/modules/effect-coverflow/effect-coverflow.js b/src/modules/effect-coverflow/effect-coverflow.js
@@ -1,8 +1,17 @@
 import $ from '../../shared/dom.js';
-import { bindModuleMethods } from '../../shared/utils.js';
 
-const Coverflow = {
-  setTranslate() {
+export default function Coverflow({ swiper, extendParams, on }) {
+  extendParams({
+    coverflowEffect: {
+      rotate: 50,
+      stretch: 0,
+      depth: 100,
+      scale: 1,
+      modifier: 1,
+      slideShadows: true,
+    },
+  });
+  const setTranslate = () => {
     const swiper = this;
     const { width: swiperWidth, height: swiperHeight, slides, slidesSizesGrid } = swiper;
     const params = swiper.params.coverflowEffect;
@@ -72,55 +81,32 @@ const Coverflow = {
           $shadowAfterEl[0].style.opacity = -offsetMultiplier > 0 ? -offsetMultiplier : 0;
       }
     }
-  },
-  setTransition(duration) {
+  };
+  const setTransition = (duration) => {
     const swiper = this;
     swiper.slides
       .transition(duration)
       .find(
         '.swiper-slide-shadow-top, .swiper-slide-shadow-right, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left',
       )
       .transition(duration);
-  },
-};
+  };
 
-export default {
-  name: 'effect-coverflow',
-  params: {
-    coverflowEffect: {
-      rotate: 50,
-      stretch: 0,
-      depth: 100,
-      scale: 1,
-      modifier: 1,
-      slideShadows: true,
-    },
-  },
-  create() {
-    const swiper = this;
-    bindModuleMethods(swiper, {
-      coverflowEffect: {
-        ...Coverflow,
-      },
-    });
-  },
-  on: {
-    beforeInit(swiper) {
-      if (swiper.params.effect !== 'coverflow') return;
+  on('beforeInit', () => {
+    if (swiper.params.effect !== 'coverflow') return;
 
-      swiper.classNames.push(`${swiper.params.containerModifierClass}coverflow`);
-      swiper.classNames.push(`${swiper.params.containerModifierClass}3d`);
+    swiper.classNames.push(`${swiper.params.containerModifierClass}coverflow`);
+    swiper.classNames.push(`${swiper.params.containerModifierClass}3d`);
 
-      swiper.params.watchSlidesProgress = true;
-      swiper.originalParams.watchSlidesProgress = true;
-    },
-    setTranslate(swiper) {
-      if (swiper.params.effect !== 'coverflow') return;
-      swiper.coverflowEffect.setTranslate();
-    },
-    setTransition(swiper, duration) {
-      if (swiper.params.effect !== 'coverflow') return;
-      swiper.coverflowEffect.setTransition(duration);
-    },
-  },
-};
+    swiper.params.watchSlidesProgress = true;
+    swiper.originalParams.watchSlidesProgress = true;
+  });
+  on('setTranslate', () => {
+    if (swiper.params.effect !== 'coverflow') return;
+    setTranslate();
+  });
+  on('setTransition', (_s, duration) => {
+    if (swiper.params.effect !== 'coverflow') return;
+    setTransition(duration);
+  });
+}
diff --git a/src/modules/effect-cube/effect-cube.js b/src/modules/effect-cube/effect-cube.js
@@ -1,9 +1,17 @@
 import $ from '../../shared/dom.js';
-import { extend, bindModuleMethods } from '../../shared/utils.js';
+import { extend } from '../../shared/utils.js';
 
-const Cube = {
-  setTranslate() {
-    const swiper = this;
+export default function Cube({ swiper, extendParams, on }) {
+  extendParams({
+    cubeEffect: {
+      slideShadows: true,
+      shadow: true,
+      shadowOffset: 20,
+      shadowScale: 0.94,
+    },
+  });
+
+  const setTranslate = () => {
     const {
       $el,
       $wrapperEl,
@@ -141,9 +149,8 @@ const Cube = {
         swiper.isHorizontal() ? 0 : wrapperRotate
       }deg) rotateY(${swiper.isHorizontal() ? -wrapperRotate : 0}deg)`,
     );
-  },
-  setTransition(duration) {
-    const swiper = this;
+  };
+  const setTransition = (duration) => {
     const { $el, slides } = swiper;
     slides
       .transition(duration)
@@ -154,52 +161,31 @@ const Cube = {
     if (swiper.params.cubeEffect.shadow && !swiper.isHorizontal()) {
       $el.find('.swiper-cube-shadow').transition(duration);
     }
-  },
-};
+  };
 
-export default {
-  name: 'effect-cube',
-  params: {
-    cubeEffect: {
-      slideShadows: true,
-      shadow: true,
-      shadowOffset: 20,
-      shadowScale: 0.94,
-    },
-  },
-  create() {
-    const swiper = this;
-    bindModuleMethods(swiper, {
-      cubeEffect: {
-        ...Cube,
-      },
-    });
-  },
-  on: {
-    beforeInit(swiper) {
-      if (swiper.params.effect !== 'cube') return;
-      swiper.classNames.push(`${swiper.params.containerModifierClass}cube`);
-      swiper.classNames.push(`${swiper.params.containerModifierClass}3d`);
-      const overwriteParams = {
-        slidesPerView: 1,
-        slidesPerColumn: 1,
-        slidesPerGroup: 1,
-        watchSlidesProgress: true,
-        resistanceRatio: 0,
-        spaceBetween: 0,
-        centeredSlides: false,
-        virtualTranslate: true,
-      };
-      extend(swiper.params, overwriteParams);
-      extend(swiper.originalParams, overwriteParams);
-    },
-    setTranslate(swiper) {
-      if (swiper.params.effect !== 'cube') return;
-      swiper.cubeEffect.setTranslate();
-    },
-    setTransition(swiper, duration) {
-      if (swiper.params.effect !== 'cube') return;
-      swiper.cubeEffect.setTransition(duration);
-    },
-  },
-};
+  on('beforeInit', () => {
+    if (swiper.params.effect !== 'cube') return;
+    swiper.classNames.push(`${swiper.params.containerModifierClass}cube`);
+    swiper.classNames.push(`${swiper.params.containerModifierClass}3d`);
+    const overwriteParams = {
+      slidesPerView: 1,
+      slidesPerColumn: 1,
+      slidesPerGroup: 1,
+      watchSlidesProgress: true,
+      resistanceRatio: 0,
+      spaceBetween: 0,
+      centeredSlides: false,
+      virtualTranslate: true,
+    };
+    extend(swiper.params, overwriteParams);
+    extend(swiper.originalParams, overwriteParams);
+  });
+  on('setTranslate', () => {
+    if (swiper.params.effect !== 'cube') return;
+    setTranslate();
+  });
+  on('setTransition', (_s, duration) => {
+    if (swiper.params.effect !== 'cube') return;
+    setTransition(duration);
+  });
+}
diff --git a/src/modules/effect-fade/effect-fade.js b/src/modules/effect-fade/effect-fade.js
@@ -1,8 +1,13 @@
-import { extend, bindModuleMethods } from '../../shared/utils.js';
+import { extend } from '../../shared/utils.js';
 
-const Fade = {
-  setTranslate() {
-    const swiper = this;
+export default function Fade({ swiper, extendParams, on }) {
+  extendParams({
+    fadeEffect: {
+      crossFade: false,
+    },
+  });
+
+  const setTranslate = () => {
     const { slides } = swiper;
     for (let i = 0; i < slides.length; i += 1) {
       const $slideEl = swiper.slides.eq(i);
@@ -23,9 +28,8 @@ const Fade = {
         })
         .transform(`translate3d(${tx}px, ${ty}px, 0px)`);
     }
-  },
-  setTransition(duration) {
-    const swiper = this;
+  };
+  const setTransition = (duration) => {
     const { slides, $wrapperEl } = swiper;
     slides.transition(duration);
     if (swiper.params.virtualTranslate && duration !== 0) {
@@ -41,46 +45,28 @@ const Fade = {
         }
       });
     }
-  },
-};
+  };
 
-export default {
-  name: 'effect-fade',
-  params: {
-    fadeEffect: {
-      crossFade: false,
-    },
-  },
-  create() {
-    const swiper = this;
-    bindModuleMethods(swiper, {
-      fadeEffect: {
-        ...Fade,
-      },
-    });
-  },
-  on: {
-    beforeInit(swiper) {
-      if (swiper.params.effect !== 'fade') return;
-      swiper.classNames.push(`${swiper.params.containerModifierClass}fade`);
-      const overwriteParams = {
-        slidesPerView: 1,
-        slidesPerColumn: 1,
-        slidesPerGroup: 1,
-        watchSlidesProgress: true,
-        spaceBetween: 0,
-        virtualTranslate: true,
-      };
-      extend(swiper.params, overwriteParams);
-      extend(swiper.originalParams, overwriteParams);
-    },
-    setTranslate(swiper) {
-      if (swiper.params.effect !== 'fade') return;
-      swiper.fadeEffect.setTranslate();
-    },
-    setTransition(swiper, duration) {
-      if (swiper.params.effect !== 'fade') return;
-      swiper.fadeEffect.setTransition(duration);
-    },
-  },
-};
+  on('beforeInit', () => {
+    if (swiper.params.effect !== 'fade') return;
+    swiper.classNames.push(`${swiper.params.containerModifierClass}fade`);
+    const overwriteParams = {
+      slidesPerView: 1,
+      slidesPerColumn: 1,
+      slidesPerGroup: 1,
+      watchSlidesProgress: true,
+      spaceBetween: 0,
+      virtualTranslate: true,
+    };
+    extend(swiper.params, overwriteParams);
+    extend(swiper.originalParams, overwriteParams);
+  });
+  on('setTranslate', () => {
+    if (swiper.params.effect !== 'fade') return;
+    setTranslate();
+  });
+  on('setTransition', (_s, duration) => {
+    if (swiper.params.effect !== 'fade') return;
+    setTransition(duration);
+  });
+}