Skip to content

Commit

Permalink
perf(angular): call swiperRef outside of angular
Browse files Browse the repository at this point in the history
  • Loading branch information
@vltansky
vltansky committed Feb 4, 2021
1 parent c990909 commit 4e544ef
Showing 1 changed file with 116 additions and 105 deletions.
221 changes: 116 additions & 105 deletions src/angular/src/swiper.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -532,7 +532,9 @@ export class SwiperComponent implements OnInit {
this._changeDetectorRef.detectChanges();
},
});
new Swiper(this.elementRef.nativeElement, swiperParams);
this.zone.runOutsideAngular(() => {
new Swiper(this.elementRef.nativeElement, swiperParams);
});
}

style: any = null;
Expand All @@ -558,13 +560,15 @@ export class SwiperComponent implements OnInit {
this.currentVirtualData = virtualData;
this._activeSlides.next(virtualData.slides);
this._changeDetectorRef.detectChanges();
this.swiperRef.updateSlides();
this.swiperRef.updateProgress();
this.swiperRef.updateSlidesClasses();
if (this.swiperRef.lazy && this.swiperRef.params.lazy['enabled']) {
this.swiperRef.lazy.load();
}
this.swiperRef.virtual.update(true);
this.zone.runOutsideAngular(() => {
this.swiperRef.updateSlides();
this.swiperRef.updateProgress();
this.swiperRef.updateSlidesClasses();
if (this.swiperRef.lazy && this.swiperRef.params.lazy['enabled']) {
this.swiperRef.lazy.load();
}
this.swiperRef.virtual.update(true);
});
return;
}

Expand All @@ -577,115 +581,120 @@ export class SwiperComponent implements OnInit {
if (!(changedParams && this.swiperRef && !this.swiperRef.destroyed)) {
return;
}
const {
params: currentParams,
pagination,
navigation,
scrollbar,
virtual,
thumbs,
} = this.swiperRef;

if (changedParams.pagination) {
if (
this.pagination &&
typeof this.pagination !== 'boolean' &&
this.pagination.el &&
pagination &&
!pagination.el
) {
this.updateParameter('pagination', this.pagination);
pagination.init();
pagination.render();
pagination.update();
} else {
pagination.destroy();
pagination.el = null;

this.zone.runOutsideAngular(() => {
const {
params: currentParams,
pagination,
navigation,
scrollbar,
virtual,
thumbs,
} = this.swiperRef;

if (changedParams.pagination) {
if (
this.pagination &&
typeof this.pagination !== 'boolean' &&
this.pagination.el &&
pagination &&
!pagination.el
) {
this.updateParameter('pagination', this.pagination);
pagination.init();
pagination.render();
pagination.update();
} else {
pagination.destroy();
pagination.el = null;
}
}
}

if (changedParams.scrollbar) {
if (
this.scrollbar &&
typeof this.scrollbar !== 'boolean' &&
this.scrollbar.el &&
scrollbar &&
!scrollbar.el
) {
this.updateParameter('scrollbar', this.scrollbar);
scrollbar.init();
scrollbar.updateSize();
scrollbar.setTranslate();
} else {
scrollbar.destroy();
scrollbar.el = null;
if (changedParams.scrollbar) {
if (
this.scrollbar &&
typeof this.scrollbar !== 'boolean' &&
this.scrollbar.el &&
scrollbar &&
!scrollbar.el
) {
this.updateParameter('scrollbar', this.scrollbar);
scrollbar.init();
scrollbar.updateSize();
scrollbar.setTranslate();
} else {
scrollbar.destroy();
scrollbar.el = null;
}
}
}

if (changedParams.navigation) {
if (
this.navigation &&
typeof this.navigation !== 'boolean' &&
this.navigation.prevEl &&
this.navigation.nextEl &&
navigation &&
!navigation.prevEl &&
!navigation.nextEl
) {
this.updateParameter('navigation', this.navigation);
navigation.init();
navigation.update();
} else if (navigation.prevEl && navigation.nextEl) {
navigation.destroy();
navigation.nextEl = null;
navigation.prevEl = null;
if (changedParams.navigation) {
if (
this.navigation &&
typeof this.navigation !== 'boolean' &&
this.navigation.prevEl &&
this.navigation.nextEl &&
navigation &&
!navigation.prevEl &&
!navigation.nextEl
) {
this.updateParameter('navigation', this.navigation);
navigation.init();
navigation.update();
} else if (navigation.prevEl && navigation.nextEl) {
navigation.destroy();
navigation.nextEl = null;
navigation.prevEl = null;
}
}
if (changedParams.thumbs && this.thumbs && this.thumbs.swiper) {
this.updateParameter('thumbs', this.thumbs);
const initialized = thumbs.init();
if (initialized) thumbs.update(true);
}
}
if (changedParams.thumbs && this.thumbs && this.thumbs.swiper) {
this.updateParameter('thumbs', this.thumbs);
const initialized = thumbs.init();
if (initialized) thumbs.update(true);
}

if (changedParams.controller && this.controller && this.controller.control) {
this.swiperRef.controller.control = this.controller.control;
}
if (changedParams.controller && this.controller && this.controller.control) {
this.swiperRef.controller.control = this.controller.control;
}

this.swiperRef.update();
this.swiperRef.update();
});
}

updateSwiper(changedParams: SimpleChanges | any) {
if (changedParams.config) {
return;
}
if (!(changedParams && this.swiperRef && !this.swiperRef.destroyed)) {
return;
}
for (const key in changedParams) {
if (ignoreNgOnChanges.indexOf(key) >= 0) {
continue;
this.zone.runOutsideAngular(() => {
if (changedParams.config) {
return;
}
if (!(changedParams && this.swiperRef && !this.swiperRef.destroyed)) {
return;
}
for (const key in changedParams) {
if (ignoreNgOnChanges.indexOf(key) >= 0) {
continue;
}
const newValue = changedParams[key]?.currentValue ?? changedParams[key];
this.updateParameter(key, newValue);
}
const newValue = changedParams[key]?.currentValue ?? changedParams[key];
this.updateParameter(key, newValue);
}

if (changedParams.allowSlideNext) {
this.swiperRef.allowSlideNext = this.allowSlideNext;
}
if (changedParams.allowSlidePrev) {
this.swiperRef.allowSlidePrev = this.allowSlidePrev;
}
if (changedParams.direction) {
this.swiperRef.changeDirection(this.direction, false);
}
if (changedParams.breakpoints) {
if (this.loop && !this.loopedSlides) {
this.calcLoopedSlides();
if (changedParams.allowSlideNext) {
this.swiperRef.allowSlideNext = this.allowSlideNext;
}
this.swiperRef.currentBreakpoint = null;
this.swiperRef.setBreakpoint();
}
this.swiperRef.update();
if (changedParams.allowSlidePrev) {
this.swiperRef.allowSlidePrev = this.allowSlidePrev;
}
if (changedParams.direction) {
this.swiperRef.changeDirection(this.direction, false);
}
if (changedParams.breakpoints) {
if (this.loop && !this.loopedSlides) {
this.calcLoopedSlides();
}
this.swiperRef.currentBreakpoint = null;
this.swiperRef.setBreakpoint();
}
this.swiperRef.update();
});
}

calcLoopedSlides() {
Expand Down Expand Up @@ -749,6 +758,8 @@ export class SwiperComponent implements OnInit {
}

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

0 comments on commit 4e544ef

Please sign in to comment.