diff --git a/packages/core/src/components/slides/slides.tsx b/packages/core/src/components/slides/slides.tsx index 866a4f860f..962aad47c5 100644 --- a/packages/core/src/components/slides/slides.tsx +++ b/packages/core/src/components/slides/slides.tsx @@ -1,4 +1,4 @@ -import { Component, Element, Prop } from '@stencil/core'; +import { Component, Element, Event, Prop, EventEmitter } from '@stencil/core'; import { Swiper } from './vendor/swiper'; @@ -32,6 +32,20 @@ export class Slides { swiper: any; @Element() el: HTMLElement; + @Event() ionSlideWillChange: EventEmitter; + @Event() ionSlideDidChange: EventEmitter; + @Event() ionSlideNextStarto: EventEmitter; + @Event() ionSlidePrevStart: EventEmitter; + @Event() ionSlideNextEnd: EventEmitter; + @Event() ionSlidePrevEnd: EventEmitter; + @Event() ionSlideTransitionStart: EventEmitter; + @Event() ionSlideTransitionEnd: EventEmitter; + @Event() ionSlideDrag: EventEmitter; + @Event() ionSlideReachStart: EventEmitter; + @Event() ionSlideReachEnd: EventEmitter; + @Event() ionSlideTouchStart: EventEmitter; + @Event() ionSlideTouchEnd: EventEmitter; + /** * @input {string} The animation effect of the slides. * Possible values are: `slide`, `fade`, `cube`, `coverflow` or `flip`. @@ -167,13 +181,6 @@ export class Slides { */ originalEvent: any; - emitEvent(eventName: string) { - return (data: any) => { - Core.emit(this.el, eventName, data); - }; - } - - /** * Private properties only useful to this class. * ------------------------------------ @@ -212,8 +219,6 @@ export class Slides { /** @hidden */ prevButton: HTMLElement; - - constructor( ) { this.id = ++slidesId; @@ -318,25 +323,19 @@ export class Slides { nextSlideMessage: 'Next slide', firstSlideMessage: 'This is the first slide', lastSlideMessage: 'This is the last slide', - onSlideChangeStart: this.emitEvent('ionSlideWillChange'), - onSlideChangeEnd: this.emitEvent('ionSlideDidChange'), - onAutoplay: this.emitEvent('ionSlideAutoplay'), - onAutoplayStart: this.emitEvent('ionSlideAutoplayStart'), - onAutoplayStop: this.emitEvent('ionSlideAutoplayStop'), - onSlideNextStart: this.emitEvent('ionSlideNextStarto'), - onSlidePrevStart: this.emitEvent('ionSlidePrevStart'), - onSlideNextEnd: this.emitEvent('ionSlideNextEnd'), - onSlidePrevEnd: this.emitEvent('ionSlidePrevEnd'), - onTransitionStart: this.emitEvent('ionSlideTransitionStart'), - onTransitionEnd: this.emitEvent('ionSlideTransitionEnd'), - onTap: this.emitEvent('ionSlideTap'), - onDoubleTap: this.emitEvent('ionSlideDoubleTap'), - onProgress: this.emitEvent('ionSlideProgress'), - onSliderMove: this.emitEvent('ionSlideDrag'), - onReachBeginning: this.emitEvent('ionSlideReachStart'), - onReachEnd: this.emitEvent('ionSlideReachEnd'), - onTouchStart: this.emitEvent('ionSlideTouchStart'), - onTouchEnd: this.emitEvent('ionSlideTouchEnd') + onSlideChangeStart: this.ionSlideWillChange.emit, + onSlideChangeEnd: this.ionSlideDidChange.emit, + onSlideNextStart: this.ionSlideNextStarto.emit, + onSlidePrevStart: this.ionSlidePrevStart.emit, + onSlideNextEnd: this.ionSlideNextEnd.emit, + onSlidePrevEnd: this.ionSlidePrevEnd.emit, + onTransitionStart: this.ionSlideTransitionStart.emit, + onTransitionEnd: this.ionSlideTransitionEnd.emit, + onSliderMove: this.ionSlideDrag.emit, + onReachBeginning: this.ionSlideReachStart.emit, + onReachEnd: this.ionSlideReachEnd.emit, + onTouchStart: this.ionSlideTouchStart.emit, + onTouchEnd: this.ionSlideTouchEnd.emit, }; // init swiper core