fix(effects): improve dynamic slide shadows re-creation for Cube and …

…Flip effects
nolimits4web · Apr 20, 2022 · 98b8a3e · 98b8a3e
1 parent e9b4180
commit 98b8a3e
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 53 deletions.
diff --git a/src/modules/effect-cube/effect-cube.js b/src/modules/effect-cube/effect-cube.js
@@ -11,6 +11,36 @@ export default function EffectCube({ swiper, extendParams, on }) {
     },
   });
 
+  const createSlideShadows = ($slideEl, progress, isHorizontal) => {
+    let shadowBefore = isHorizontal
+      ? $slideEl.find('.swiper-slide-shadow-left')
+      : $slideEl.find('.swiper-slide-shadow-top');
+    let shadowAfter = isHorizontal
+      ? $slideEl.find('.swiper-slide-shadow-right')
+      : $slideEl.find('.swiper-slide-shadow-bottom');
+    if (shadowBefore.length === 0) {
+      shadowBefore = $(`<div class="swiper-slide-shadow-${isHorizontal ? 'left' : 'top'}"></div>`);
+      $slideEl.append(shadowBefore);
+    }
+    if (shadowAfter.length === 0) {
+      shadowAfter = $(
+        `<div class="swiper-slide-shadow-${isHorizontal ? 'right' : 'bottom'}"></div>`,
+      );
+      $slideEl.append(shadowAfter);
+    }
+    if (shadowBefore.length) shadowBefore[0].style.opacity = Math.max(-progress, 0);
+    if (shadowAfter.length) shadowAfter[0].style.opacity = Math.max(progress, 0);
+  };
+
+  const recreateShadows = () => {
+    // create new ones
+    const isHorizontal = swiper.isHorizontal();
+    swiper.slides.each((slideEl) => {
+      const progress = Math.max(Math.min(slideEl.progress, 1), -1);
+      createSlideShadows($(slideEl), progress, isHorizontal);
+    });
+  };
+
   const setTranslate = () => {
     const {
       $el,
@@ -90,27 +120,7 @@ export default function EffectCube({ swiper, extendParams, on }) {
       }
       $slideEl.transform(transform);
       if (params.slideShadows) {
-        // Set shadows
-        let shadowBefore = isHorizontal
-          ? $slideEl.find('.swiper-slide-shadow-left')
-          : $slideEl.find('.swiper-slide-shadow-top');
-        let shadowAfter = isHorizontal
-          ? $slideEl.find('.swiper-slide-shadow-right')
-          : $slideEl.find('.swiper-slide-shadow-bottom');
-        if (shadowBefore.length === 0) {
-          shadowBefore = $(
-            `<div class="swiper-slide-shadow-${isHorizontal ? 'left' : 'top'}"></div>`,
-          );
-          $slideEl.append(shadowBefore);
-        }
-        if (shadowAfter.length === 0) {
-          shadowAfter = $(
-            `<div class="swiper-slide-shadow-${isHorizontal ? 'right' : 'bottom'}"></div>`,
-          );
-          $slideEl.append(shadowAfter);
-        }
-        if (shadowBefore.length) shadowBefore[0].style.opacity = Math.max(-progress, 0);
-        if (shadowAfter.length) shadowAfter[0].style.opacity = Math.max(progress, 0);
+        createSlideShadows($slideEl, progress, isHorizontal);
       }
     }
     $wrapperEl.css({
@@ -168,7 +178,8 @@ export default function EffectCube({ swiper, extendParams, on }) {
     on,
     setTranslate,
     setTransition,
-    shouldRecreateShadows: true,
+    recreateShadows,
+    getEffectParams: () => swiper.params.cubeEffect,
     perspective: () => true,
     overwriteParams: () => ({
       slidesPerView: 1,

diff --git a/src/modules/effect-flip/effect-flip.js b/src/modules/effect-flip/effect-flip.js
@@ -1,3 +1,4 @@
+import $ from '../../shared/dom.js';
 import createShadow from '../../shared/create-shadow.js';
 import effectInit from '../../shared/effect-init.js';
 import effectTarget from '../../shared/effect-target.js';
@@ -12,6 +13,36 @@ export default function EffectFlip({ swiper, extendParams, on }) {
     },
   });
 
+  const createSlideShadows = ($slideEl, progress, params) => {
+    let shadowBefore = swiper.isHorizontal()
+      ? $slideEl.find('.swiper-slide-shadow-left')
+      : $slideEl.find('.swiper-slide-shadow-top');
+    let shadowAfter = swiper.isHorizontal()
+      ? $slideEl.find('.swiper-slide-shadow-right')
+      : $slideEl.find('.swiper-slide-shadow-bottom');
+    if (shadowBefore.length === 0) {
+      shadowBefore = createShadow(params, $slideEl, swiper.isHorizontal() ? 'left' : 'top');
+    }
+    if (shadowAfter.length === 0) {
+      shadowAfter = createShadow(params, $slideEl, swiper.isHorizontal() ? 'right' : 'bottom');
+    }
+    if (shadowBefore.length) shadowBefore[0].style.opacity = Math.max(-progress, 0);
+    if (shadowAfter.length) shadowAfter[0].style.opacity = Math.max(progress, 0);
+  };
+
+  const recreateShadows = () => {
+    // Set shadows
+    const params = swiper.params.flipEffect;
+    swiper.slides.each((slideEl) => {
+      const $slideEl = $(slideEl);
+      let progress = $slideEl[0].progress;
+      if (swiper.params.flipEffect.limitRotation) {
+        progress = Math.max(Math.min(slideEl.progress, 1), -1);
+      }
+      createSlideShadows($slideEl, progress, params);
+    });
+  };
+
   const setTranslate = () => {
     const { slides, rtlTranslate: rtl } = swiper;
     const params = swiper.params.flipEffect;
@@ -39,21 +70,7 @@ export default function EffectFlip({ swiper, extendParams, on }) {
       $slideEl[0].style.zIndex = -Math.abs(Math.round(progress)) + slides.length;
 
       if (params.slideShadows) {
-        // Set shadows
-        let shadowBefore = swiper.isHorizontal()
-          ? $slideEl.find('.swiper-slide-shadow-left')
-          : $slideEl.find('.swiper-slide-shadow-top');
-        let shadowAfter = swiper.isHorizontal()
-          ? $slideEl.find('.swiper-slide-shadow-right')
-          : $slideEl.find('.swiper-slide-shadow-bottom');
-        if (shadowBefore.length === 0) {
-          shadowBefore = createShadow(params, $slideEl, swiper.isHorizontal() ? 'left' : 'top');
-        }
-        if (shadowAfter.length === 0) {
-          shadowAfter = createShadow(params, $slideEl, swiper.isHorizontal() ? 'right' : 'bottom');
-        }
-        if (shadowBefore.length) shadowBefore[0].style.opacity = Math.max(-progress, 0);
-        if (shadowAfter.length) shadowAfter[0].style.opacity = Math.max(progress, 0);
+        createSlideShadows($slideEl, progress, params);
       }
       const transform = `translate3d(${tx}px, ${ty}px, 0px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
       const $targetEl = effectTarget(params, $slideEl);
@@ -79,7 +96,8 @@ export default function EffectFlip({ swiper, extendParams, on }) {
     on,
     setTranslate,
     setTransition,
-    shouldRecreateShadows: true,
+    recreateShadows,
+    getEffectParams: () => swiper.params.flipEffect,
     perspective: () => true,
     overwriteParams: () => ({
       slidesPerView: 1,

diff --git a/src/shared/effect-init.js b/src/shared/effect-init.js
@@ -7,7 +7,8 @@ export default function effectInit(params) {
     setTransition,
     overwriteParams,
     perspective,
-    shouldRecreateShadows,
+    recreateShadows,
+    getEffectParams,
   } = params;
 
   on('beforeInit', () => {
@@ -31,20 +32,23 @@ export default function effectInit(params) {
     setTransition(duration);
   });
 
-  const recreateShadows = () => {
-    swiper.slides.each((slideEl) => {
-      const $slideEl = swiper.$(slideEl);
-      $slideEl
-        .find(
-          '.swiper-slide-shadow-top, .swiper-slide-shadow-right, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left',
-        )
-        .remove();
-    });
-  };
-
-  if (shouldRecreateShadows) {
-    on('transitionEnd', recreateShadows);
-  }
+  on('transitionEnd', () => {
+    if (swiper.params.effect !== effect) return;
+    if (recreateShadows) {
+      if (!getEffectParams || !getEffectParams().slideShadows) return;
+      // remove shadows
+      swiper.slides.each((slideEl) => {
+        const $slideEl = swiper.$(slideEl);
+        $slideEl
+          .find(
+            '.swiper-slide-shadow-top, .swiper-slide-shadow-right, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left',
+          )
+          .remove();
+      });
+      // create new one
+      recreateShadows();
+    }
+  });
 
   let requireUpdateOnVirtual;
   on('virtualUpdate', () => {