Merge pull request #4133 from vltansky/ng-slides

refactor(angular): use slideClass property
nolimits4web · Jan 25, 2021 · 240d25e · 240d25e
2 parents 1828f8c + e2d9114
commit 240d25e
Show file tree

Hide file tree

Showing 6 changed files with 8 additions and 35 deletions.
diff --git a/playground-angular/src/app/app.component.html b/playground-angular/src/app/app.component.html
@@ -5,6 +5,7 @@
     [spaceBetween]="50"
     [pagination]="{ type: 'fraction' }"
     virtual
+    slideActiveClass="swiper-active whyWouldIuseCustomClass"
     [centeredSlides]="true"
     navigation
   >

diff --git a/src/angular/src/swiper.component.html b/src/angular/src/swiper.component.html
@@ -41,12 +41,12 @@
 <ng-template #slidesTemplate let-loopSlides="loopSlides" let-slideKey="key">
   <div
     *ngFor="let slide of loopSlides | async"
-    [ngClass]="slide.classNames + ' ' + (slideKey !== '' ? slideDuplicateClass : '')"
+    [ngClass]="slideClass + ' ' + (slideKey !== '' ? slideDuplicateClass : '')"
     [attr.data-swiper-slide-index]="slide.virtualIndex ? slide.virtualIndex : slide.slideIndex"
     [style]="style"
     [ngSwitch]="slide.zoom"
   >
-    <div *ngSwitchCase="true" class="swiper-zoom-container">
+    <div *ngSwitchCase="true" [ngClass]="zoomContainerClass">
       <ng-template
         [ngTemplateOutlet]="slide.template"
         [ngTemplateOutletContext]="{

diff --git a/src/angular/src/swiper.component.ts b/src/angular/src/swiper.component.ts
@@ -409,6 +409,10 @@ export class SwiperComponent implements OnInit {
     return of(this.slides);
   }
 
+  get zoomContainerClass() {
+    return typeof this.zoom !== 'boolean' ? this.zoom.containerClass : 'swiper-zoom-container';
+  }
+
   @HostBinding('class') containerClasses = 'swiper-container';
   constructor(
     private zone: NgZone,
@@ -508,28 +512,6 @@ export class SwiperComponent implements OnInit {
         }
         this._changeDetectorRef.detectChanges();
       },
-      _slideClasses: (_, updated) => {
-        updated.forEach(({ slideEl, classNames }, index) => {
-          const slideIndex = parseInt(slideEl.getAttribute('data-swiper-slide-index')) || index;
-          if (this.virtual) {
-            const virtualSlide = this.slides.find((item) => {
-              return item.virtualIndex && item.virtualIndex === slideIndex;
-            });
-            if (virtualSlide) {
-              virtualSlide.classNames = classNames;
-              return;
-            }
-          }
-
-          if (this.slides[slideIndex]) {
-            // TODO: this.loop
-            this.slides[slideIndex].classNames = classNames;
-          } else {
-            // loop
-          }
-        });
-        this._changeDetectorRef.detectChanges();
-      },
     });
     new Swiper(this.elementRef.nativeElement, swiperParams);
   }

diff --git a/src/components/core/core-class.js b/src/components/core/core-class.js
@@ -294,13 +294,10 @@ class Swiper {
   emitSlidesClasses() {
     const swiper = this;
     if (!swiper.params._emitClasses || !swiper.el) return;
-    const updates = [];
     swiper.slides.each((slideEl) => {
       const classNames = swiper.getSlideClasses(slideEl);
-      updates.push({ slideEl, classNames });
       swiper.emit('_slideClass', slideEl, classNames);
     });
-    swiper.emit('_slideClasses', updates);
   }
 
   slidesPerViewDynamic() {

diff --git a/src/types/swiper-events.d.ts b/src/types/swiper-events.d.ts
@@ -224,13 +224,6 @@ export interface SwiperEvents {
    */
   _slideClass?: (swiper: Swiper, el: HTMLElement, classNames: string) => void;
 
-  /**
-   * INTERNAL: Event will fired after setting CSS classes on all swiper slides
-   */
-  _slideClasses?: (
-    swiper: Swiper,
-    slides: { el: HTMLElement; classNames: string; index: number }[],
-  ) => void;
   /**
    * INTERNAL: Event will fired as soon as swiper instance available (before init)
    */

diff --git a/src/types/swiper-options.d.ts b/src/types/swiper-options.d.ts
@@ -1095,7 +1095,7 @@ export interface SwiperOptions {
   zoom?: ZoomOptions | boolean;
 
   /**
-   * !INTERNAL When enabled will emit "_containerClasses" and "_slideClasses" events
+   * !INTERNAL When enabled will emit "_containerClasses" and "_slideClass" events
    */
   _emitClasses?: boolean;
 }