From 09666c85857a788a2c5d9cac4d5a34d8ec4fd883 Mon Sep 17 00:00:00 2001
From: Vladimir Kharlampidi <nolimits4web@gmail.com>
Date: Wed, 11 Aug 2021 14:44:00 +0300
Subject: [PATCH] feat(cards-effect): add slide shadow

---
 src/core/core.less                               |  5 +++++
 src/modules/effect-cards/effect-cards.js         | 15 ++++++++++++++-
 src/modules/effect-cards/effect-cards.less       |  1 +
 src/modules/effect-coverflow/effect-coverflow.js | 11 +----------
 src/modules/effect-flip/effect-flip.js           | 12 +-----------
 src/shared/create-shadow.js                      | 11 +++++++++++
 src/types/modules/effect-cards.d.ts              |  6 ++++++
 7 files changed, 39 insertions(+), 22 deletions(-)
 create mode 100644 src/shared/create-shadow.js

diff --git a/src/core/core.less b/src/core/core.less
index 424bff33a..6b6bfaa4b 100644
--- a/src/core/core.less
+++ b/src/core/core.less
@@ -62,6 +62,7 @@
   }
   .swiper-wrapper,
   .swiper-slide,
+  .swiper-slide-shadow,
   .swiper-slide-shadow-left,
   .swiper-slide-shadow-right,
   .swiper-slide-shadow-top,
@@ -69,6 +70,7 @@
   .swiper-cube-shadow {
     transform-style: preserve-3d;
   }
+  .swiper-slide-shadow,
   .swiper-slide-shadow-left,
   .swiper-slide-shadow-right,
   .swiper-slide-shadow-top,
@@ -81,6 +83,9 @@
     pointer-events: none;
     z-index: 10;
   }
+  .swiper-slide-shadow {
+    background: rgba(0, 0, 0, 0.1);
+  }
   .swiper-slide-shadow-left {
     background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
   }
diff --git a/src/modules/effect-cards/effect-cards.js b/src/modules/effect-cards/effect-cards.js
index 21a240140..89fbecd2c 100644
--- a/src/modules/effect-cards/effect-cards.js
+++ b/src/modules/effect-cards/effect-cards.js
@@ -1,8 +1,10 @@
+import createShadow from '../../shared/create-shadow.js';
 import virtualEffectTransitionEnd from '../../shared/virtual-effect-transition-end.js';
 
 export default function EffectCards({ swiper, extendParams, on }) {
   extendParams({
     cardsEffect: {
+      slideShadows: true,
       transformEl: null,
     },
   });
@@ -74,11 +76,22 @@ export default function EffectCards({ swiper, extendParams, on }) {
         scale(${scaleString})
       `;
 
+      if (params.slideShadows) {
+        // Set shadows
+        let $shadowEl = $slideEl.find('.swiper-slide-shadow');
+        if ($shadowEl.length === 0) {
+          $shadowEl = createShadow(params, $slideEl);
+        }
+        if ($shadowEl.length)
+          $shadowEl[0].style.opacity = Math.min(Math.max(Math.abs(progress), 0), 1);
+      }
+
       $slideEl[0].style.zIndex = -Math.abs(Math.round(slideProgress)) + slides.length;
       if (params.transformEl) {
         $slideEl
           .find(params.transformEl)
           .css({
+            'transform-origin': 'center-bottom',
             'backface-visibility': 'hidden',
             '-webkit-backface-visibility': 'hidden',
           })
@@ -92,7 +105,7 @@ export default function EffectCards({ swiper, extendParams, on }) {
   const setTransition = (duration) => {
     const { transformEl } = swiper.params.cardsEffect;
     const $transitionElements = transformEl ? swiper.slides.find(transformEl) : swiper.slides;
-    $transitionElements.transition(duration);
+    $transitionElements.transition(duration).find('.swiper-slide-shadow').transition(duration);
 
     virtualEffectTransitionEnd({ swiper, duration, transformEl });
   };
diff --git a/src/modules/effect-cards/effect-cards.less b/src/modules/effect-cards/effect-cards.less
index 42fde5433..79e2669e2 100644
--- a/src/modules/effect-cards/effect-cards.less
+++ b/src/modules/effect-cards/effect-cards.less
@@ -3,5 +3,6 @@
   .swiper-slide {
     transform-origin: center bottom;
     backface-visibility: hidden;
+    overflow: hidden;
   }
 }
diff --git a/src/modules/effect-coverflow/effect-coverflow.js b/src/modules/effect-coverflow/effect-coverflow.js
index 86865e0a7..3fff61247 100644
--- a/src/modules/effect-coverflow/effect-coverflow.js
+++ b/src/modules/effect-coverflow/effect-coverflow.js
@@ -1,4 +1,4 @@
-import $ from '../../shared/dom.js';
+import createShadow from '../../shared/create-shadow.js';
 
 export default function EffectCoverflow({ swiper, extendParams, on }) {
   extendParams({
@@ -13,15 +13,6 @@ export default function EffectCoverflow({ swiper, extendParams, on }) {
     },
   });
 
-  const createShadow = (params, $slideEl, side) => {
-    const $shadowEl = $(`<div class="swiper-slide-shadow-${side}"></div>`);
-    if (params.transformEl) {
-      $slideEl.find(params.transformEl).append($shadowEl);
-    } else {
-      $slideEl.append($shadowEl);
-    }
-    return $shadowEl;
-  };
   const setTranslate = () => {
     const { width: swiperWidth, height: swiperHeight, slides, slidesSizesGrid } = swiper;
     const params = swiper.params.coverflowEffect;
diff --git a/src/modules/effect-flip/effect-flip.js b/src/modules/effect-flip/effect-flip.js
index 354ff558a..221b63b23 100644
--- a/src/modules/effect-flip/effect-flip.js
+++ b/src/modules/effect-flip/effect-flip.js
@@ -1,4 +1,4 @@
-import $ from '../../shared/dom.js';
+import createShadow from '../../shared/create-shadow.js';
 import virtualEffectTransitionEnd from '../../shared/virtual-effect-transition-end.js';
 
 export default function EffectFlip({ swiper, extendParams, on }) {
@@ -10,16 +10,6 @@ export default function EffectFlip({ swiper, extendParams, on }) {
     },
   });
 
-  const createShadow = (params, $slideEl, side) => {
-    const $shadowEl = $(`<div class="swiper-slide-shadow-${side}"></div>`);
-    if (params.transformEl) {
-      $slideEl.find(params.transformEl).append($shadowEl);
-    } else {
-      $slideEl.append($shadowEl);
-    }
-    return $shadowEl;
-  };
-
   const setTranslate = () => {
     const { slides, rtlTranslate: rtl } = swiper;
     const params = swiper.params.flipEffect;
diff --git a/src/shared/create-shadow.js b/src/shared/create-shadow.js
new file mode 100644
index 000000000..0cfa5269d
--- /dev/null
+++ b/src/shared/create-shadow.js
@@ -0,0 +1,11 @@
+import $ from './dom.js';
+
+export default function createShadow(params, $slideEl, side) {
+  const $shadowEl = $(`<div class="swiper-slide-shadow${side ? `-${side}` : ''}"></div>`);
+  if (params.transformEl) {
+    $slideEl.find(params.transformEl).append($shadowEl);
+  } else {
+    $slideEl.append($shadowEl);
+  }
+  return $shadowEl;
+}
diff --git a/src/types/modules/effect-cards.d.ts b/src/types/modules/effect-cards.d.ts
index bb88fd3a5..9630ae016 100644
--- a/src/types/modules/effect-cards.d.ts
+++ b/src/types/modules/effect-cards.d.ts
@@ -5,6 +5,12 @@ export interface CardsEffectMethods {}
 export interface CardsEffectEvents {}
 
 export interface CardsEffectOptions {
+  /**
+   * Enables slides shadows
+   *
+   * @default true
+   */
+  slideShadows?: boolean;
   /**
    * CSS selector of the element inside of the slide to transform instead of the slide itself. Useful to use with cssMode
    *