feat(core): watchSlidesProgress and watchSlidesVisibility merged …

…into single `watchSlidesProgress`
nolimits4web · Aug 6, 2021 · 33dbf62 · 33dbf62
1 parent 1bad048
commit 33dbf62
Show file tree

Hide file tree

Showing 16 changed files with 18 additions and 53 deletions.
diff --git a/src/angular/src/swiper.component.ts b/src/angular/src/swiper.component.ts
@@ -105,7 +105,6 @@ export class SwiperComponent implements OnInit {
   @Input() resistance: SwiperOptions['resistance'];
   @Input() resistanceRatio: SwiperOptions['resistanceRatio'];
   @Input() watchSlidesProgress: SwiperOptions['watchSlidesProgress'];
-  @Input() watchSlidesVisibility: SwiperOptions['watchSlidesVisibility'];
   @Input() grabCursor: SwiperOptions['grabCursor'];
   @Input() preventClicks: SwiperOptions['preventClicks'];
   @Input() preventClicksPropagation: SwiperOptions['preventClicksPropagation'];

diff --git a/src/angular/src/utils/params-list.ts b/src/angular/src/utils/params-list.ts
@@ -54,7 +54,6 @@ export const paramsList = [
   '_resistance',
   '_resistanceRatio',
   '_watchSlidesProgress',
-  '_watchSlidesVisibility',
   '_grabCursor',
   'preventClicks',
   'preventClicksPropagation',

diff --git a/src/core/defaults.js b/src/core/defaults.js
@@ -86,7 +86,6 @@ export default {
 
   // Progress
   watchSlidesProgress: false,
-  watchSlidesVisibility: false,
 
   // Cursor
   grabCursor: false,

diff --git a/src/core/events/onTouchMove.js b/src/core/events/onTouchMove.js
@@ -214,8 +214,7 @@ export default function onTouchMove(event) {
   // Update active index in free mode
   if (
     (params.freeMode && params.freeMode.enabled && swiper.freeMode) ||
-    params.watchSlidesProgress ||
-    params.watchSlidesVisibility
+    params.watchSlidesProgress
   ) {
     swiper.updateActiveIndex();
     swiper.updateSlidesClasses();

diff --git a/src/core/update/updateProgress.js b/src/core/update/updateProgress.js
@@ -25,11 +25,7 @@ export default function updateProgress(translate) {
     isEnd,
   });
 
-  if (
-    params.watchSlidesProgress ||
-    params.watchSlidesVisibility ||
-    (params.centeredSlides && params.autoHeight)
-  )
+  if (params.watchSlidesProgress || (params.centeredSlides && params.autoHeight))
     swiper.updateSlidesProgress(translate);
 
   if (isBeginning && !wasBeginning) {

diff --git a/src/core/update/updateSlides.js b/src/core/update/updateSlides.js
@@ -255,7 +255,7 @@ export default function updateSlides() {
     swiper.emit('slidesGridLengthChange');
   }
 
-  if (params.watchSlidesProgress || params.watchSlidesVisibility) {
+  if (params.watchSlidesProgress) {
     swiper.updateSlidesOffset();
   }
 }
diff --git a/src/core/update/updateSlidesProgress.js b/src/core/update/updateSlidesProgress.js
@@ -25,18 +25,16 @@ export default function updateSlidesProgress(translate = (this && this.translate
         (params.centeredSlides ? swiper.minTranslate() : 0) -
         slide.swiperSlideOffset) /
       (slide.swiperSlideSize + params.spaceBetween);
-    if (params.watchSlidesVisibility || (params.centeredSlides && params.autoHeight)) {
-      const slideBefore = -(offsetCenter - slide.swiperSlideOffset);
-      const slideAfter = slideBefore + swiper.slidesSizesGrid[i];
-      const isVisible =
-        (slideBefore >= 0 && slideBefore < swiper.size - 1) ||
-        (slideAfter > 1 && slideAfter <= swiper.size) ||
-        (slideBefore <= 0 && slideAfter >= swiper.size);
-      if (isVisible) {
-        swiper.visibleSlides.push(slide);
-        swiper.visibleSlidesIndexes.push(i);
-        slides.eq(i).addClass(params.slideVisibleClass);
-      }
+    const slideBefore = -(offsetCenter - slide.swiperSlideOffset);
+    const slideAfter = slideBefore + swiper.slidesSizesGrid[i];
+    const isVisible =
+      (slideBefore >= 0 && slideBefore < swiper.size - 1) ||
+      (slideAfter > 1 && slideAfter <= swiper.size) ||
+      (slideBefore <= 0 && slideAfter >= swiper.size);
+    if (isVisible) {
+      swiper.visibleSlides.push(slide);
+      swiper.visibleSlidesIndexes.push(i);
+      slides.eq(i).addClass(params.slideVisibleClass);
     }
     slide.progress = rtl ? -slideProgress : slideProgress;
   }

diff --git a/src/modules/effect-coverflow/effect-coverflow.js b/src/modules/effect-coverflow/effect-coverflow.js
@@ -96,7 +96,6 @@ export default function Coverflow({ swiper, extendParams, on }) {
     swiper.classNames.push(`${swiper.params.containerModifierClass}coverflow`);
     swiper.classNames.push(`${swiper.params.containerModifierClass}3d`);
 
-    swiper.params.watchSlidesProgress = true;
     swiper.originalParams.watchSlidesProgress = true;
   });
   on('setTranslate', () => {

diff --git a/src/modules/lazy/lazy.js b/src/modules/lazy/lazy.js
@@ -150,7 +150,7 @@ export default function Lazy({ swiper, extendParams, on, emit }) {
     }
 
     if (!initialImageLoaded) initialImageLoaded = true;
-    if (swiper.params.watchSlidesVisibility) {
+    if (swiper.params.watchSlidesProgress) {
       $wrapperEl.children(`.${swiperParams.slideVisibleClass}`).each((slideEl) => {
         const index = isVirtual ? $(slideEl).attr('data-swiper-slide-index') : $(slideEl).index();
         loadInSlide(index);
@@ -279,19 +279,11 @@ export default function Lazy({ swiper, extendParams, on, emit }) {
     }
   });
   on('slideChange', () => {
-    const {
-      lazy,
-      cssMode,
-      watchSlidesVisibility,
-      watchSlidesProgress,
-      touchReleaseOnEdges,
-      resistanceRatio,
-    } = swiper.params;
+    const { lazy, cssMode, watchSlidesProgress, touchReleaseOnEdges, resistanceRatio } =
+      swiper.params;
     if (
       lazy.enabled &&
-      (cssMode ||
-        ((watchSlidesVisibility || watchSlidesProgress) &&
-          (touchReleaseOnEdges || resistanceRatio === 0)))
+      (cssMode || (watchSlidesProgress && (touchReleaseOnEdges || resistanceRatio === 0)))
     ) {
       load();
     }

diff --git a/src/modules/thumbs/thumbs.js b/src/modules/thumbs/thumbs.js
@@ -77,7 +77,6 @@ export default function Thumb({ swiper, extendParams, on }) {
     } else if (isObject(thumbsParams.swiper)) {
       const thumbsSwiperParams = Object.assign({}, thumbsParams.swiper);
       Object.assign(thumbsSwiperParams, {
-        watchSlidesVisibility: true,
         watchSlidesProgress: true,
         slideToClickedSlide: false,
       });

diff --git a/src/react/params-list.js b/src/react/params-list.js
@@ -56,7 +56,6 @@ const paramsList = [
   '_resistance',
   '_resistanceRatio',
   '_watchSlidesProgress',
-  '_watchSlidesVisibility',
   '_grabCursor',
   'preventClicks',
   'preventClicksPropagation',

diff --git a/src/svelte/params-list.js b/src/svelte/params-list.js
@@ -56,7 +56,6 @@ const paramsList = [
   '_resistance',
   '_resistanceRatio',
   '_watchSlidesProgress',
-  '_watchSlidesVisibility',
   '_grabCursor',
   'preventClicks',
   'preventClicksPropagation',

diff --git a/src/types/swiper-options.d.ts b/src/types/swiper-options.d.ts
@@ -559,19 +559,12 @@ export interface SwiperOptions {
 
   // Progress
   /**
-   * Enable this feature to calculate each slides progress
+   * Enable this feature to calculate each slides progress and visibility (slides in viewport will have additional visible class)
    *
    * @default false
    */
   watchSlidesProgress?: boolean;
 
-  /**
-   * `watchSlidesProgress` should be enabled. Enable this option and slides that are in viewport will have additional visible class
-   *
-   * @default false
-   */
-  watchSlidesVisibility?: boolean;
-
   // Images
   /**
    * When enabled Swiper will force to load all images

diff --git a/src/vue/params-list.js b/src/vue/params-list.js
@@ -56,7 +56,6 @@ const paramsList = [
   '_resistance',
   '_resistanceRatio',
   '_watchSlidesProgress',
-  '_watchSlidesVisibility',
   '_grabCursor',
   'preventClicks',
   'preventClicksPropagation',

diff --git a/src/vue/swiper-vue.d.ts b/src/vue/swiper-vue.d.ts
@@ -222,10 +222,6 @@ declare const Swiper: DefineComponent<
       type: BooleanConstructor;
       default: undefined;
     };
-    watchSlidesVisibility: {
-      type: BooleanConstructor;
-      default: undefined;
-    };
     grabCursor: {
       type: BooleanConstructor;
       default: undefined;

diff --git a/src/vue/swiper.js b/src/vue/swiper.js
@@ -78,7 +78,6 @@ const Swiper = {
     resistance: { type: Boolean, default: undefined },
     resistanceRatio: { type: Number, default: undefined },
     watchSlidesProgress: { type: Boolean, default: undefined },
-    watchSlidesVisibility: { type: Boolean, default: undefined },
     grabCursor: { type: Boolean, default: undefined },
     preventClicks: { type: Boolean, default: undefined },
     preventClicksPropagation: { type: Boolean, default: undefined },