feat: add event slideToChange

Author: peterpeterparker

doc/features/extra.md

@@ -39,6 +39,7 @@ await deck.print();
 | -------------------------- |:-----------------:|:-----------------:|
 | slideNextDidChange | number | Emitted when the next slide has started. Emit the index of the new active slide. |
 | slidePrevDidChange | number | Emitted when the previous slide has ended. Emit the index of the new active slide. |
+| slideToChange | number | Emitted when a specific slide as selected. Emit the index of the new selected 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. |
 

doc/features/navigation.md

@@ -8,8 +8,9 @@ Furthermore than the default swiping, the [DeckDeckGo] deck expose the following
   - [Go to next slide](#go-to-next-slide)
     - [Optional parameters](#pptional-parameters)
   - [Go to previous slide](#go-to-previous-slide)
-    - [Optional parameters](#pptional-parameters)
+    - [Optional parameters](#optional-parameters)
   - [Go to a specific slide](#go-to-a-specific-slide)
+      - [Parameters](#parameters)
   - [Is the deck at the begin](#is-the-deck-at-the-begin)
   - [Is the deck at the end](#is-the-deck-at-the-end)
   - [Get the index of the current slide](#get-the-index-of-the-current-slide)
@@ -72,6 +73,14 @@ await deck.slidePrev(false, false);
 await deck.slideTo(0); // parameters: index: number, speed?: number | undefined
 ```
 
+#### Parameters
+
+| Parameter                      | Type | Default | Description |
+| -------------------------- |:-----------------:|:-----------------:|:-----------------:|
+| index | number | | Slide index of the specific slide. |
+| speed | number | 0 | The slide transition speed. |
+| emitEvent | boolean | true | In case you would not like to emit the event `slideToChange`. Note that if you would use this parameter, the above `speed` parameter must be provided too. |
+
 ### Is the deck at the begin
 
 ```

src/components.d.ts

@@ -23,14 +23,15 @@ export namespace Components {
     'pagerPercentage': boolean;
     'slideNext': (slideAnimation?: boolean, emitEvent?: boolean) => Promise<void>;
     'slidePrev': (slideAnimation?: boolean, emitEvent?: boolean) => Promise<void>;
-    'slideTo': (index: number, speed?: number) => Promise<void>;
+    'slideTo': (index: number, speed?: number, emitEvent?: boolean) => Promise<void>;
     'toggleFullScreen': () => Promise<void>;
   }
   interface DeckgoDeckAttributes extends StencilHTMLAttributes {
     'keyboard'?: boolean;
     'onSlideDrag'?: (event: CustomEvent<number>) => void;
     'onSlideNextDidChange'?: (event: CustomEvent<number>) => void;
     'onSlidePrevDidChange'?: (event: CustomEvent<number>) => void;
+    'onSlideToChange'?: (event: CustomEvent<number>) => void;
     'onSlideWillChange'?: (event: CustomEvent<number>) => void;
     'pager'?: boolean;
     'pagerPercentage'?: boolean;

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

@@ -36,6 +36,7 @@ export class DeckdeckgoDeck {
 
   @Event() slideNextDidChange: EventEmitter<number>;
   @Event() slidePrevDidChange: EventEmitter<number>;
+  @Event() slideToChange: EventEmitter<number>;
   @Event() slideDrag: EventEmitter<number>;
   @Event() slideWillChange: EventEmitter<number>;
 
@@ -344,7 +345,7 @@ export class DeckdeckgoDeck {
   }
 
   @Method()
-  async slideTo(index: number, speed?: number | undefined) {
+  async slideTo(index: number, speed?: number | undefined, emitEvent: boolean = true) {
     if (index > this.length || index < 0) {
       return;
     }
@@ -360,6 +361,10 @@ export class DeckdeckgoDeck {
 
     await this.lazyLoadImages(this.activeIndex);
     await this.doSwipeSlide(slider, speed);
+
+    if (emitEvent) {
+      this.slideToChange.emit(index);
+    }
   }
 
   /* END: Manual sliding */