feat(core): support for "swiper-slide-transform" element for better e…

…ffects compatability with CSS mode
nolimits4web · Dec 13, 2022 · 18b3e3f · 18b3e3f
1 parent be13573
commit 18b3e3f
Show file tree

Hide file tree

Showing 15 changed files with 73 additions and 93 deletions.
diff --git a/src/element/swiper-element.js b/src/element/swiper-element.js
@@ -205,23 +205,27 @@ class SwiperSlide extends ClassToExtend {
     this.shadowEl = this.attachShadow({ mode: 'open' });
   }
 
-  initialize() {
+  render() {
     const lazy =
       this.lazy || this.getAttribute('lazy') === '' || this.getAttribute('lazy') === 'true';
 
-    this.tempDiv.innerHTML = `
-      <slot />
-    `;
+    this.tempDiv.innerHTML = `<slot />`;
+
     [...this.tempDiv.children].forEach((el) => {
       this.shadowEl.appendChild(el);
     });
+
     if (lazy) {
       const lazyDiv = document.createElement('div');
       lazyDiv.classList.add('swiper-lazy-preloader');
       this.appendChild(lazyDiv);
     }
   }
 
+  initialize() {
+    this.render();
+  }
+
   connectedCallback() {
     this.initialize();
   }

diff --git a/src/modules/effect-cards/effect-cards.js b/src/modules/effect-cards/effect-cards.js
@@ -2,13 +2,12 @@ import createShadow from '../../shared/create-shadow.js';
 import effectInit from '../../shared/effect-init.js';
 import effectTarget from '../../shared/effect-target.js';
 import effectVirtualTransitionEnd from '../../shared/effect-virtual-transition-end.js';
-import { findElementsInElements } from '../../shared/utils.js';
+import { getSlideTransformEl } from '../../shared/utils.js';
 
 export default function EffectCards({ swiper, extendParams, on }) {
   extendParams({
     cardsEffect: {
       slideShadows: true,
-      transformEl: null,
       rotate: true,
       perSlideRotate: 2,
       perSlideOffset: 8,
@@ -104,19 +103,15 @@ export default function EffectCards({ swiper, extendParams, on }) {
   };
 
   const setTransition = (duration) => {
-    const { transformEl } = swiper.params.cardsEffect;
-
-    const transitionElements = transformEl
-      ? findElementsInElements(swiper.slides, transformEl)
-      : swiper.slides;
-    transitionElements.forEach((el) => {
+    const transformElements = swiper.slides.map((slideEl) => getSlideTransformEl(slideEl));
+    transformElements.forEach((el) => {
       el.style.transition = `${duration}ms`;
       el.querySelectorAll('.swiper-slide-shadow').forEach((shadowEl) => {
         shadowEl.style.transition = `${duration}ms`;
       });
     });
 
-    effectVirtualTransitionEnd({ swiper, duration, transformEl });
+    effectVirtualTransitionEnd({ swiper, duration, transformElements });
   };
 
   effectInit({

diff --git a/src/modules/effect-coverflow/effect-coverflow.js b/src/modules/effect-coverflow/effect-coverflow.js
@@ -1,7 +1,7 @@
 import createShadow from '../../shared/create-shadow.js';
 import effectInit from '../../shared/effect-init.js';
 import effectTarget from '../../shared/effect-target.js';
-import { findElementsInElements } from '../../shared/utils.js';
+import { getSlideTransformEl } from '../../shared/utils.js';
 
 export default function EffectCoverflow({ swiper, extendParams, on }) {
   extendParams({
@@ -12,7 +12,6 @@ export default function EffectCoverflow({ swiper, extendParams, on }) {
       scale: 1,
       modifier: 1,
       slideShadows: true,
-      transformEl: null,
     },
   });
 
@@ -86,11 +85,9 @@ export default function EffectCoverflow({ swiper, extendParams, on }) {
     }
   };
   const setTransition = (duration) => {
-    const { transformEl } = swiper.params.coverflowEffect;
-    const transitionElements = transformEl
-      ? findElementsInElements(swiper.slides, transformEl)
-      : swiper.slides;
-    transitionElements.forEach((el) => {
+    const transformElements = swiper.slides.map((slideEl) => getSlideTransformEl(slideEl));
+
+    transformElements.forEach((el) => {
       el.style.transition = `${duration}ms`;
       el.querySelectorAll(
         '.swiper-slide-shadow-top, .swiper-slide-shadow-right, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left',

diff --git a/src/modules/effect-creative/effect-creative.js b/src/modules/effect-creative/effect-creative.js
@@ -2,12 +2,11 @@ import createShadow from '../../shared/create-shadow.js';
 import effectInit from '../../shared/effect-init.js';
 import effectTarget from '../../shared/effect-target.js';
 import effectVirtualTransitionEnd from '../../shared/effect-virtual-transition-end.js';
-import { findElementsInElements } from '../../shared/utils.js';
+import { getSlideTransformEl } from '../../shared/utils.js';
 
 export default function EffectCreative({ swiper, extendParams, on }) {
   extendParams({
     creativeEffect: {
-      transformEl: null,
       limitProgress: 1,
       shadowPerProgress: false,
       progressMultiplier: 1,
@@ -130,19 +129,16 @@ export default function EffectCreative({ swiper, extendParams, on }) {
   };
 
   const setTransition = (duration) => {
-    const { transformEl } = swiper.params.creativeEffect;
+    const transformElements = swiper.slides.map((slideEl) => getSlideTransformEl(slideEl));
 
-    const transitionElements = transformEl
-      ? findElementsInElements(swiper.slides, transformEl)
-      : swiper.slides;
-    transitionElements.forEach((el) => {
+    transformElements.forEach((el) => {
       el.style.transition = `${duration}ms`;
       el.querySelectorAll('.swiper-slide-shadow').forEach((shadowEl) => {
         shadowEl.style.transition = `${duration}ms`;
       });
     });
 
-    effectVirtualTransitionEnd({ swiper, duration, transformEl, allSlides: true });
+    effectVirtualTransitionEnd({ swiper, duration, transformElements, allSlides: true });
   };
 
   effectInit({

diff --git a/src/modules/effect-fade/effect-fade.js b/src/modules/effect-fade/effect-fade.js
@@ -1,13 +1,12 @@
 import effectInit from '../../shared/effect-init.js';
 import effectTarget from '../../shared/effect-target.js';
 import effectVirtualTransitionEnd from '../../shared/effect-virtual-transition-end.js';
-import { findElementsInElements } from '../../shared/utils.js';
+import { getSlideTransformEl } from '../../shared/utils.js';
 
 export default function EffectFade({ swiper, extendParams, on }) {
   extendParams({
     fadeEffect: {
       crossFade: false,
-      transformEl: null,
     },
   });
 
@@ -34,16 +33,12 @@ export default function EffectFade({ swiper, extendParams, on }) {
     }
   };
   const setTransition = (duration) => {
-    const { transformEl } = swiper.params.fadeEffect;
-
-    const transitionElements = transformEl
-      ? findElementsInElements(swiper.slides, transformEl)
-      : swiper.slides;
-    transitionElements.forEach((el) => {
+    const transformElements = swiper.slides.map((slideEl) => getSlideTransformEl(slideEl));
+    transformElements.forEach((el) => {
       el.style.transition = `${duration}ms`;
     });
 
-    effectVirtualTransitionEnd({ swiper, duration, transformEl, allSlides: true });
+    effectVirtualTransitionEnd({ swiper, duration, transformElements, allSlides: true });
   };
 
   effectInit({

diff --git a/src/modules/effect-flip/effect-flip.js b/src/modules/effect-flip/effect-flip.js
@@ -2,14 +2,13 @@ import createShadow from '../../shared/create-shadow.js';
 import effectInit from '../../shared/effect-init.js';
 import effectTarget from '../../shared/effect-target.js';
 import effectVirtualTransitionEnd from '../../shared/effect-virtual-transition-end.js';
-import { findElementsInElements } from '../../shared/utils.js';
+import { getSlideTransformEl } from '../../shared/utils.js';
 
 export default function EffectFlip({ swiper, extendParams, on }) {
   extendParams({
     flipEffect: {
       slideShadows: true,
       limitRotation: true,
-      transformEl: null,
     },
   });
 
@@ -78,11 +77,9 @@ export default function EffectFlip({ swiper, extendParams, on }) {
   };
 
   const setTransition = (duration) => {
-    const { transformEl } = swiper.params.flipEffect;
-    const transitionElements = transformEl
-      ? findElementsInElements(swiper.slides, transformEl)
-      : swiper.slides;
-    transitionElements.forEach((el) => {
+    const transformElements = swiper.slides.map((slideEl) => getSlideTransformEl(slideEl));
+
+    transformElements.forEach((el) => {
       el.style.transition = `${duration}ms`;
       el.querySelectorAll(
         '.swiper-slide-shadow-top, .swiper-slide-shadow-right, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left',
@@ -91,7 +88,7 @@ export default function EffectFlip({ swiper, extendParams, on }) {
       });
     });
 
-    effectVirtualTransitionEnd({ swiper, duration, transformEl });
+    effectVirtualTransitionEnd({ swiper, duration, transformElements });
   };
 
   effectInit({

diff --git a/src/shared/create-shadow.js b/src/shared/create-shadow.js
@@ -1,8 +1,8 @@
-import { createElement } from './utils.js';
+import { createElement, getSlideTransformEl } from './utils.js';
 
 export default function createShadow(params, slideEl, side) {
   const shadowClass = `swiper-slide-shadow${side ? `-${side}` : ''}`;
-  const shadowContainer = params.transformEl ? slideEl.querySelector(params.transformEl) : slideEl;
+  const shadowContainer = getSlideTransformEl(slideEl);
   let shadowEl = shadowContainer.querySelector(`.${shadowClass}`);
 
   if (!shadowEl) {

diff --git a/src/shared/effect-target.js b/src/shared/effect-target.js
@@ -1,11 +1,10 @@
+import { getSlideTransformEl } from './utils.js';
+
 export default function effectTarget(effectParams, slideEl) {
-  if (effectParams.transformEl) {
-    const transformEl = slideEl.querySelector(effectParams.transformEl);
-    if (transformEl) {
-      transformEl.style.backfaceVisibility = 'hidden';
-      transformEl.style['-webkit-backface-visibility'] = 'hidden';
-    }
-    return transformEl;
+  const transformEl = getSlideTransformEl(slideEl);
+  if (transformEl !== slideEl) {
+    transformEl.style.backfaceVisibility = 'hidden';
+    transformEl.style['-webkit-backface-visibility'] = 'hidden';
   }
-  return slideEl;
+  return transformEl;
 }
diff --git a/src/shared/effect-virtual-transition-end.js b/src/shared/effect-virtual-transition-end.js
@@ -1,16 +1,34 @@
-import { elementTransitionEnd, findElementsInElements } from './utils.js';
+import { elementIndex, elementTransitionEnd } from './utils.js';
 
-export default function effectVirtualTransitionEnd({ swiper, duration, transformEl, allSlides }) {
-  const { slides, activeIndex } = swiper;
+export default function effectVirtualTransitionEnd({
+  swiper,
+  duration,
+  transformElements,
+  allSlides,
+}) {
+  const { activeIndex } = swiper;
+  const getSlide = (el) => {
+    if (!el.parentElement) {
+      // assume shadow root
+      const slide = swiper.slides.filter(
+        (slideEl) => slideEl.shadowEl && slideEl.shadowEl === el.parentNode,
+      )[0];
+      return slide;
+    }
+    return el.parentElement;
+  };
   if (swiper.params.virtualTranslate && duration !== 0) {
     let eventTriggered = false;
     let transitionEndTarget;
     if (allSlides) {
-      transitionEndTarget = transformEl ? findElementsInElements(slides, transformEl) : slides;
+      transitionEndTarget = transformElements;
     } else {
-      transitionEndTarget = transformEl
-        ? [...slides[activeIndex].querySelectorAll(activeIndex)]
-        : [slides[activeIndex]];
+      transitionEndTarget = transformElements.filter((transformEl) => {
+        const el = transformEl.classList.contains('swiper-slide-transform')
+          ? getSlide(transformEl)
+          : transformEl;
+        return elementIndex(el) === activeIndex;
+      });
     }
     transitionEndTarget.forEach((el) => {
       elementTransitionEnd(el, () => {

diff --git a/src/shared/utils.js b/src/shared/utils.js
@@ -186,6 +186,14 @@ function animateCSSModeScroll({ swiper, targetPosition, side }) {
   animate();
 }
 
+function getSlideTransformEl(slideEl) {
+  return (
+    slideEl.querySelector('.swiper-slide-transform') ||
+    (slideEl.shadowEl && slideEl.shadowEl.querySelector('.swiper-slide-transform')) ||
+    slideEl
+  );
+}
+
 function findElementsInElements(elements = [], selector = '') {
   const found = [];
   elements.forEach((el) => {
@@ -311,6 +319,7 @@ export {
   extend,
   getComputedStyle,
   setCSSProperty,
+  getSlideTransformEl,
   // dom
   findElementsInElements,
   createElement,

diff --git a/src/types/modules/effect-cards.d.ts b/src/types/modules/effect-cards.d.ts
@@ -32,11 +32,4 @@ export interface CardsEffectOptions {
    * @default 8
    */
   perSlideOffset?: number;
-
-  /**
-   * CSS selector of the element inside of the slide to transform instead of the slide itself. Useful to use with cssMode
-   *
-   * @default null
-   */
-  transformEl?: CSSSelector;
 }
diff --git a/src/types/modules/effect-coverflow.d.ts b/src/types/modules/effect-coverflow.d.ts
@@ -41,10 +41,4 @@ export interface CoverflowEffectOptions {
    * @default 1
    */
   modifier?: number;
-  /**
-   * CSS selector of the element inside of the slide to transform instead of the slide itself. Useful to use with cssMode
-   *
-   * @default null
-   */
-  transformEl?: CSSSelector;
 }
diff --git a/src/types/modules/effect-creative.d.ts b/src/types/modules/effect-creative.d.ts
@@ -60,12 +60,7 @@ export interface CreativeEffectOptions {
    *
    */
   next?: CreativeEffectTransform;
-  /**
-   * CSS selector of the element inside of the slide to transform instead of the slide itself. Useful to use with cssMode
-   *
-   * @default null
-   */
-  transformEl?: CSSSelector;
+
   /**
    * Limit progress/offset to amount of side slides. If `1`, then slides all slides after prev/next will have same state. If `2`, then all slides after 2nd before/after active will have same state, etc.
    *

diff --git a/src/types/modules/effect-fade.d.ts b/src/types/modules/effect-fade.d.ts
@@ -11,10 +11,4 @@ export interface FadeEffectOptions {
    * @default false
    */
   crossFade?: boolean;
-  /**
-   * CSS selector of the element inside of the slide to transform instead of the slide itself. Useful to use with cssMode
-   *
-   * @default null
-   */
-  transformEl?: CSSSelector;
 }
diff --git a/src/types/modules/effect-flip.d.ts b/src/types/modules/effect-flip.d.ts
@@ -17,10 +17,4 @@ export interface FlipEffectOptions {
    * @default true
    */
   limitRotation?: boolean;
-  /**
-   * CSS selector of the element inside of the slide to transform instead of the slide itself. Useful to use with cssMode
-   *
-   * @default null
-   */
-  transformEl?: CSSSelector;
 }