fix(slides): update events to match swipers

Closes #14865
This commit is contained in:
Adam LaCombe
2018-07-25 12:04:38 -04:00
committed by mhartington
parent ad006dd1ee
commit fc0d4c0776
5 changed files with 79 additions and 16 deletions

View File

@ -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<any>;
ionSlideTap: EventEmitter<any>;
ionSlideDoubleTap: EventEmitter<any>;
ionSlideWillChange: EventEmitter<any>;
ionSlideDidChange: EventEmitter<any>;
ionSlideNextStart: EventEmitter<any>;
@ -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']);
}
}

View File

@ -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
*/

View File

@ -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()

View File

@ -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

View File

@ -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)
});
</script>
</body>