feat(#15): trigger events when slides is dragged or changed

Author: peterpeterparker

doc/features/extra.md

@@ -7,6 +7,7 @@ The [DeckDeckGo] deck expose a couple of extra features which could be added to
 - [Extra features](#extra-features)
   - [Toggle on/off the full screen mode](#toggle-onoff-the-full-screen-mode)
   - [Print the presentation](#print-the-presentation)
+- [Extra events](#extra-events)
 
 ## Extra features
 
@@ -30,4 +31,15 @@ await deck.toggleFullScreen();
 await deck.print();
 ```
 
+## Extra events
+
+[DeckDeckGo] triggers the following events:
+
+| Event                     | Emitted value | Description |
+| -------------------------- |:-----------------:|:-----------------:|
+| slideNextStart | number | Emitted when the next slide has started. Emit the index of the new active slide. |
+| slidePrevStart | number | Emitted when the previous slide has ended. Emit the index of the new active slide. |
+| slideDrag | number | Emitted when the slider is actively being moved. Emit the transformX value of the deck. |
+| slideWillChange | number | Emitted before the active slide has changed. Emit the transformX value of the deck. |
+
 [DeckDeckGo]: https://deckdeckgo.com

src/components.d.ts

@@ -28,6 +28,10 @@ export namespace Components {
   }
   interface DeckgoDeckAttributes extends StencilHTMLAttributes {
     'keyboard'?: boolean;
+    'onSlideDrag'?: (event: CustomEvent<number>) => void;
+    'onSlideNextStart'?: (event: CustomEvent<number>) => void;
+    'onSlidePrevStart'?: (event: CustomEvent<number>) => void;
+    'onSlideWillChange'?: (event: CustomEvent<number>) => void;
     'pager'?: boolean;
     'pagerPercentage'?: boolean;
   }

src/components/deck/deckdeckgo-deck/deckdeckgo-deck.tsx

@@ -1,4 +1,4 @@
-import {Component, Element, Listen, Method, Prop, State} from '@stencil/core';
+import {Component, Element, Listen, Method, Prop, State, Event, EventEmitter} from '@stencil/core';
 
 import {DeckDeckGoUtils} from '../../utils/deckdeckgo-utils';
 
@@ -34,6 +34,11 @@ export class DeckdeckgoDeck {
   @State()
   private length: number = 0;
 
+  @Event() slideNextStart: EventEmitter<number>;
+  @Event() slidePrevStart: EventEmitter<number>;
+  @Event() slideDrag: EventEmitter<number>;
+  @Event() slideWillChange: EventEmitter<number>;
+
   async componentDidLoad() {
     this.initWindowResize();
     this.initKeyboardAssist();
@@ -132,6 +137,8 @@ export class DeckdeckgoDeck {
 
     deltaX.slider.style.setProperty('--transformX', transformX + 'px');
     deltaX.slider.style.setProperty('--transformXDuration', '0ms');
+
+    this.slideDrag.emit(transformX);
   }
 
   private async stop(e: Event) {
@@ -165,8 +172,12 @@ export class DeckdeckgoDeck {
 
           if (deltaX.swipeLeft) {
             this.activeIndex++;
+
+            this.slideNextStart.emit(this.activeIndex);
           } else {
             this.activeIndex--;
+
+            this.slidePrevStart.emit(this.activeIndex);
           }
         }
       }
@@ -185,6 +196,8 @@ export class DeckdeckgoDeck {
       slider.style.setProperty('--transformX', this.deckTranslateX + 'px');
       slider.style.setProperty('--transformXDuration', '' + (!isNaN(speed) ? speed : 300) + 'ms');
 
+      this.slideWillChange.emit(this.deckTranslateX);
+
       this.startX = null;
 
       resolve();