Skip to content

Commit

Permalink
fix(angular): autoplay SSR
Browse files Browse the repository at this point in the history
  • Loading branch information
@vltansky
vltansky committed Feb 11, 2021
1 parent c1eb42f commit 4f1e9c4
Show file tree
Hide file tree
Showing 3 changed files with 83 additions and 81 deletions.
26 changes: 13 additions & 13 deletions playground/angular/src/app/app.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
<ng-template swiperSlide>Slide</ng-template>
<ng-template swiperSlide>Slide</ng-template>
</swiper>
<swiper [zoom]="true">
<swiper [zoom]="true" [autoplay]="true">
<ng-template swiperSlide class="custom-class" [zoom]="true">
<img src="https://swiperjs.com/demos/images/nature-1.jpg" />
</ng-template>
Expand All @@ -40,7 +40,7 @@
[pagination]="{ el: '.swiper-pagination.pagination-test' }"
>
<ng-container *ngIf="show">
<ng-template swiperSlide>Best slide ever 1</ng-template>
<ng-template swiperSlide>Best slide ever 1 {{ show }}</ng-template>
<ng-template swiperSlide>Best slide ever 2</ng-template>
</ng-container>
<ng-template swiperSlide>
Expand All @@ -52,33 +52,32 @@
<div slot="container-end" class="swiper-pagination pagination-test"></div>
</swiper>
<button (click)="slides.push('test')">Add slide</button>
<swiper [config]="exampleConfig">
<ng-template swiperSlide>Best slide ever 2</ng-template>
<ng-template swiperSlide>Best slide ever 2</ng-template>
<ng-template swiperSlide>Best slide ever 2</ng-template>
<ng-template swiperSlide>Best slide ever 2</ng-template>
<ng-template swiperSlide>Best slide ever 2</ng-template>
</swiper>
<button (click)="togglePagination()">Toggle pagination</button>
<button (click)="toggleNavigation()">Toggle navigation</button>
<button (click)="toggleScrollbar()">Toggle scrollbar</button>
<button (click)="breakpointChange()">Breakpoint change</button>

<button (click)="show = !show">Toggle show</button>
<button (click)="indexNumber = 0">0</button>
<button (click)="indexNumber = 3">3</button>
<button (click)="indexNumber = 5">5</button>
<button (click)="indexNumber = 6">6</button>
{{ indexNumber }}

<swiper [config]="exampleConfig">
<ng-template swiperSlide>Best slide ever 2</ng-template>
<ng-template swiperSlide>Best slide ever 2</ng-template>
<ng-template swiperSlide>Best slide ever 2</ng-template>
<ng-template swiperSlide>Best slide ever 2</ng-template>
<ng-template swiperSlide>Best slide ever 2</ng-template>
</swiper>
<button (click)="exampleConfig = { slidesPerView: 2 }">changeConfig</button>

<button (click)="show = !show">Toggle show</button>
{{ exampleConfig | json }}
<swiper
#swiper
[slidesPerView]="1"
[centeredSlides]="true"
[navigation]="{ prevEl: '.swiper-navigation-prev', nextEl: '.swiper-navigation-next' }"
[pagination]="{ type: 'fraction' }"
[pagination]="pagination"
>
<ng-template swiperSlide *ngFor="let slide of slides2; index as i">
{{ i }} - {{ slide }}
Expand All @@ -88,4 +87,5 @@
<button type="button" class="swiper-navigation-next">&gt;</button>
<hr />
<button (click)="replaceSlides()">replace slides</button>
<button (click)="togglePagination()">Toggle pagination</button>
</main>
5 changes: 3 additions & 2 deletions playground/angular/src/app/app.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,10 @@ import SwiperCore, {
A11y,
Virtual,
Zoom,
Autoplay,
} from '../../../../build/core';

SwiperCore.use([Navigation, Pagination, Scrollbar, A11y, Virtual, Zoom]);
SwiperCore.use([Navigation, Pagination, Scrollbar, A11y, Virtual, Zoom, Autoplay]);

@Component({
selector: 'app-root',
Expand All @@ -35,7 +36,7 @@ export class AppComponent {

togglePagination() {
if (!this.pagination) {
this.pagination = { clickable: true };
this.pagination = { type: 'fraction' };
} else {
this.pagination = false;
}
Expand Down
133 changes: 67 additions & 66 deletions src/angular/src/swiper.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,12 @@ import {
ElementRef,
EventEmitter,
HostBinding,
Inject,
Input,
NgZone,
OnInit,
Output,
PLATFORM_ID,
QueryList,
SimpleChanges,
ViewChild,
Expand All @@ -28,6 +30,7 @@ import {
ScrollbarOptions,
VirtualOptions,
} from 'swiper/types';
import { isPlatformBrowser } from '@angular/common';
@Component({
selector: 'swiper, [swiper]',
templateUrl: './swiper.component.html',
Expand Down Expand Up @@ -415,9 +418,10 @@ export class SwiperComponent implements OnInit {

@HostBinding('class') containerClasses = 'swiper-container';
constructor(
private zone: NgZone,
private _ngZone: NgZone,
private elementRef: ElementRef,
private _changeDetectorRef: ChangeDetectorRef,
@Inject(PLATFORM_ID) private _platformId,
) {}

private _setElement(el: ElementRef, ref: any, update: string, key = 'el') {
Expand All @@ -441,11 +445,8 @@ export class SwiperComponent implements OnInit {

ngAfterViewInit() {
this.childrenSlidesInit();

if (this.init) {
this.initSwiper();
this._changeDetectorRef.detectChanges();
}
this.initSwiper();
this._changeDetectorRef.detectChanges();
}

private childrenSlidesInit() {
Expand Down Expand Up @@ -476,65 +477,65 @@ export class SwiperComponent implements OnInit {
initSwiper() {
const { params: swiperParams, passedParams } = getParams(this);
Object.assign(this, swiperParams);
swiperParams.onAny = (event, ...args) => {
const emitter = this[`s_${event}`] as EventEmitter<any>;
if (emitter) {
emitter.emit(...args);
}
};

Object.assign(swiperParams.on, {
slideChange: () => {
this.indexChange.emit(this.swiperRef.realIndex);
},
_containerClasses(swiper, classes) {
this.containerClasses = classes;
},
_swiper: (swiper) => {
this.swiperRef = swiper;
this.s_swiper.emit(this.swiperRef);
swiper.loopCreate = () => {};
swiper.loopDestroy = () => {};
if (swiperParams.loop) {
swiper.loopedSlides = this.loopedSlides;
this._ngZone.runOutsideAngular(() => {
swiperParams.init = false;
swiperParams.observer = true;
swiperParams.onAny = (event, ...args) => {
const emitter = this[`s_${event}`] as EventEmitter<any>;
if (emitter) {
emitter.emit(...args);
}
if (swiper.virtual && swiper.params.virtual.enabled) {
swiper.virtual.slides = this.slides;
const extendWith = {
cache: false,
renderExternal: (data) => {
this.updateVirtualSlides(data);
},
renderExternalUpdate: false,
};
extend(swiper.params.virtual, extendWith);
extend(swiper.originalParams.virtual, extendWith);
}
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;
};
Object.assign(swiperParams.on, {
_containerClasses(swiper, classes) {
this.containerClasses = classes;
},
_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]) {
this.slides[slideIndex].classNames = classNames;
}
});
if (this.slides[slideIndex]) {
this.slides[slideIndex].classNames = classNames;
}
});
this._changeDetectorRef.detectChanges();
},
});
const swiperRef = new Swiper(swiperParams);
swiperRef.loopCreate = () => {};
swiperRef.loopDestroy = () => {};
if (swiperParams.loop) {
swiperRef.loopedSlides = this.loopedSlides;
}
if (swiperRef.virtual && swiperRef.params.virtual.enabled) {
swiperRef.virtual.slides = this.slides;
const extendWith = {
cache: false,
renderExternal: (data) => {
this.updateVirtualSlides(data);
},
renderExternalUpdate: false,
};
extend(swiperRef.params.virtual, extendWith);
extend(swiperRef.originalParams.virtual, extendWith);
}

if (isPlatformBrowser(this._platformId)) {
this.swiperRef = swiperRef.init(this.elementRef.nativeElement);
this._changeDetectorRef.detectChanges();
},
});
swiperParams.observer = true;
this.zone.runOutsideAngular(() => {
new Swiper(this.elementRef.nativeElement, swiperParams);
swiperRef.on('slideChange', () => {
this.indexChange.emit(this.swiperRef.realIndex);
});
}
});
}

Expand All @@ -561,7 +562,7 @@ export class SwiperComponent implements OnInit {
this.currentVirtualData = virtualData;
this._activeSlides.next(virtualData.slides);
this._changeDetectorRef.detectChanges();
this.zone.runOutsideAngular(() => {
this._ngZone.runOutsideAngular(() => {
this.swiperRef.updateSlides();
this.swiperRef.updateProgress();
this.swiperRef.updateSlidesClasses();
Expand All @@ -583,7 +584,7 @@ export class SwiperComponent implements OnInit {
return;
}

this.zone.runOutsideAngular(() => {
this._ngZone.runOutsideAngular(() => {
const {
params: currentParams,
pagination,
Expand Down Expand Up @@ -663,7 +664,7 @@ export class SwiperComponent implements OnInit {
}

updateSwiper(changedParams: SimpleChanges | any) {
this.zone.runOutsideAngular(() => {
this._ngZone.runOutsideAngular(() => {
if (changedParams.config) {
return;
}
Expand Down Expand Up @@ -749,7 +750,7 @@ export class SwiperComponent implements OnInit {
if (index === this.swiperRef.activeIndex) {
return;
}
this.zone.runOutsideAngular(() => {
this._ngZone.runOutsideAngular(() => {
if (this.loop) {
this.swiperRef.slideToLoop(index, speed, !silent);
} else {
Expand All @@ -759,7 +760,7 @@ export class SwiperComponent implements OnInit {
}

ngOnDestroy() {
this.zone.runOutsideAngular(() => {
this._ngZone.runOutsideAngular(() => {
this.swiperRef?.destroy();
});
}
Expand Down

0 comments on commit 4f1e9c4

Please sign in to comment.