diff --git a/angular/src/directives/proxies.ts b/angular/src/directives/proxies.ts index 9917138871..42c897bfca 100644 --- a/angular/src/directives/proxies.ts +++ b/angular/src/directives/proxies.ts @@ -623,8 +623,11 @@ export class Slide { } export declare interface Slides extends StencilComponents.IonSlides {} -@Directive({selector: 'ion-slides', inputs: ['options', 'pager', 'scrollbar'], outputs: ['ionSlideWillChange', 'ionSlideDidChange', 'ionSlideNextStart', 'ionSlidePrevStart', 'ionSlideNextEnd', 'ionSlidePrevEnd', 'ionSlideTransitionStart', 'ionSlideTransitionEnd', 'ionSlideDrag', 'ionSlideReachStart', 'ionSlideReachEnd', 'ionSlideTouchStart', 'ionSlideTouchEnd']}) +@Directive({selector: 'ion-slides', inputs: ['options', 'pager', 'scrollbar'], outputs: ['ionSlidesDidLoad', 'ionSlideTap', 'ionSlideDoubleTap', 'ionSlideWillChange', 'ionSlideDidChange', 'ionSlideNextStart', 'ionSlidePrevStart', 'ionSlideNextEnd', 'ionSlidePrevEnd', 'ionSlideTransitionStart', 'ionSlideTransitionEnd', 'ionSlideDrag', 'ionSlideReachStart', 'ionSlideReachEnd', 'ionSlideTouchStart', 'ionSlideTouchEnd']}) export class Slides { + ionSlidesDidLoad: EventEmitter; + ionSlideTap: EventEmitter; + ionSlideDoubleTap: EventEmitter; ionSlideWillChange: EventEmitter; ionSlideDidChange: EventEmitter; ionSlideNextStart: EventEmitter; @@ -641,7 +644,7 @@ export class Slides { constructor(r: ElementRef) { proxyMethods(this, r, ['update', 'slideTo', 'slideNext', 'slidePrev', 'getActiveIndex', 'getPreviousIndex', 'length', 'isEnd', 'isBeginning', 'startAutoplay', 'stopAutoplay', 'lockSwipeToNext', 'lockSwipeToPrev', 'lockSwipes']); proxyInputs(this, r, ['options', 'pager', 'scrollbar']); - proxyOutputs(this, ['ionSlideWillChange', 'ionSlideDidChange', 'ionSlideNextStart', 'ionSlidePrevStart', 'ionSlideNextEnd', 'ionSlidePrevEnd', 'ionSlideTransitionStart', 'ionSlideTransitionEnd', 'ionSlideDrag', 'ionSlideReachStart', 'ionSlideReachEnd', 'ionSlideTouchStart', 'ionSlideTouchEnd']); + proxyOutputs(this, ['ionSlidesDidLoad', 'ionSlideTap', 'ionSlideDoubleTap', 'ionSlideWillChange', 'ionSlideDidChange', 'ionSlideNextStart', 'ionSlidePrevStart', 'ionSlideNextEnd', 'ionSlidePrevEnd', 'ionSlideTransitionStart', 'ionSlideTransitionEnd', 'ionSlideDrag', 'ionSlideReachStart', 'ionSlideReachEnd', 'ionSlideTouchStart', 'ionSlideTouchEnd']); } } diff --git a/core/src/components.d.ts b/core/src/components.d.ts index 886f7b069c..34dcf6398b 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -6803,6 +6803,10 @@ declare global { * Emitted after the active slide has changed. */ 'onIonSlideDidChange'?: (event: CustomEvent) => void; + /** + * Emitted when the user double taps on the slide's container. + */ + 'onIonSlideDoubleTap'?: (event: CustomEvent) => void; /** * Emitted when the slider is actively being moved. */ @@ -6831,6 +6835,10 @@ declare global { * Emitted when the slider is at its initial position. */ 'onIonSlideReachStart'?: (event: CustomEvent) => void; + /** + * Emitted when the user taps/clicks on the slide's container. + */ + 'onIonSlideTap'?: (event: CustomEvent) => void; /** * Emitted when the user releases the touch. */ @@ -6851,6 +6859,10 @@ declare global { * Emitted before the active slide has changed. */ 'onIonSlideWillChange'?: (event: CustomEvent) => void; + /** + * Emitted after Swiper initialization + */ + 'onIonSlidesDidLoad'?: (event: CustomEvent) => void; /** * Options to pass to the swiper instance. See http://idangero.us/swiper/api/ for valid options */ diff --git a/core/src/components/slides/readme.md b/core/src/components/slides/readme.md index f9360ad584..5f2092ddab 100644 --- a/core/src/components/slides/readme.md +++ b/core/src/components/slides/readme.md @@ -74,6 +74,11 @@ If true, show the scrollbar. Defaults to `false`. Emitted after the active slide has changed. +#### ionSlideDoubleTap + +Emitted when the user double taps on the slide's container. + + #### ionSlideDrag Emitted when the slider is actively being moved. @@ -109,6 +114,11 @@ Emitted when the slider is at the last slide. Emitted when the slider is at its initial position. +#### ionSlideTap + +Emitted when the user taps/clicks on the slide's container. + + #### ionSlideTouchEnd Emitted when the user releases the touch. @@ -134,6 +144,11 @@ Emitted when the slide transition has started. Emitted before the active slide has changed. +#### ionSlidesDidLoad + +Emitted after Swiper initialization + + ## Methods #### getActiveIndex() diff --git a/core/src/components/slides/slides.tsx b/core/src/components/slides/slides.tsx index f672fae1e4..48fd53f29d 100644 --- a/core/src/components/slides/slides.tsx +++ b/core/src/components/slides/slides.tsx @@ -22,6 +22,21 @@ export class Slides { @Element() el!: HTMLStencilElement; + /** + * Emitted after Swiper initialization + */ + @Event() ionSlidesDidLoad!: EventEmitter; + + /** + * Emitted when the user taps/clicks on the slide's container. + */ + @Event() ionSlideTap!: EventEmitter; + + /** + * Emitted when the user double taps on the slide's container. + */ + @Event() ionSlideDoubleTap!: EventEmitter; + /** * Emitted before the active slide has changed. */ @@ -262,7 +277,7 @@ export class Slides { }, parallax: false, scrollbar: { - el: '.swiper-scrollbar', + el: this.scrollbar ? '.swiper-scrollbar' : null, hide: true, }, slidesPerView: 1, @@ -348,19 +363,28 @@ export class Slides { // Keep the event options separate, we dont want users // overwriting these const eventOptions = { - onSlideChangeStart: this.ionSlideWillChange.emit, - onSlideChangeEnd: this.ionSlideDidChange.emit, - onSlideNextStart: this.ionSlideNextStart.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 + on: { + init: () => { + setTimeout(() => { + this.ionSlidesDidLoad.emit(); + }, 20); + }, + slideChangeTransitionStart: this.ionSlideWillChange.emit, + slideChangeTransitionEnd: this.ionSlideDidChange.emit, + slideNextTransitionStart: this.ionSlideNextStart.emit, + slidePrevTransitionStart: this.ionSlidePrevStart.emit, + slideNextTransitionEnd: this.ionSlideNextEnd.emit, + slidePrevTransitionEnd: this.ionSlidePrevEnd.emit, + transitionStart: this.ionSlideTransitionStart.emit, + transitionEnd: this.ionSlideTransitionEnd.emit, + sliderMove: this.ionSlideDrag.emit, + reachBeginning: this.ionSlideReachStart.emit, + reachEnd: this.ionSlideReachEnd.emit, + touchStart: this.ionSlideTouchStart.emit, + touchEnd: this.ionSlideTouchEnd.emit, + tap: this.ionSlideTap.emit, + doubleTap: this.ionSlideDoubleTap.emit + } }; // Merge the base, user options, and events together then pas to swiper diff --git a/core/src/components/slides/test/basic/index.html b/core/src/components/slides/test/basic/index.html index c21bbc6fec..556ef58c5d 100644 --- a/core/src/components/slides/test/basic/index.html +++ b/core/src/components/slides/test/basic/index.html @@ -142,6 +142,15 @@ slides.addEventListener('ionSlideTouchEnd', function (e) { console.log('slide touch end', e) }); + slides.addEventListener('ionSlidesDidLoad', function (e) { + console.log('slides did load', e) + }); + slides.addEventListener('ionSlideTap', function (e) { + console.log('slide tapped', e) + }); + slides.addEventListener('ionSlideDoubleTap', function (e) { + console.log('slide double-tapped', e) + });