fix(slides): update events to match swipers

Closes #14865
ionic-team · Jul 30, 2018 · fc0d4c0 · fc0d4c0
1 parent ad006dd
commit fc0d4c0
Show file tree

Hide file tree

Showing 5 changed files with 79 additions and 16 deletions.
diff --git 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<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']);
   }
 }
 

diff --git 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
@@ -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
@@ -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
@@ -142,6 +142,15 @@ <h1>Slide 3</h1>
     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>