feat: add an optional option to not performed the inner slide animation on slideNext and slidePrev

Author: peterpeterparker

doc/features/navigation.md

@@ -6,7 +6,9 @@ Furthermore than the default swiping, the [DeckDeckGo] deck expose the following
 
 - [Navigation](#navigation)
   - [Go to next slide](#go-to-next-slide)
+    - [Optional parameters](#pptional-parameters)
   - [Go to previous slide](#go-to-previous-slide)
+    - [Optional parameters](#pptional-parameters)
   - [Go to a specific slide](#go-to-a-specific-slide)
   - [Is the deck at the begin](#is-the-deck-at-the-begin)
   - [Is the deck at the end](#is-the-deck-at-the-end)
@@ -32,10 +34,17 @@ const deck = document.getElementsByTagName('deckgo-deck');
 await deck.slideNext();
 ```
 
-*Optional parameter:* Optionally your could provide a boolean parameter to this method in case you would not like the event `slideNextDidChange` and `slidePrevDidChange` to be fired.
+For example:
+
+#### Optional parameters
+
+| Parameter                      | Type | Default | Description |
+| -------------------------- |:-----------------:|:-----------------:|:-----------------:|
+| slideAnimation | boolean | true | Set to `false` in case you would not like the inner animation of a slide, like the reveal or code animation for example, to be performed. |
+| emitEvent | boolean | true | Set to `false` in case you would not like the events `slideNextDidChange` and `slidePrevDidChange` to be fired. Note that to use this parameter, the previous should be set too. |
 
 ```
-await deck.slideNext(false);
+await deck.slideNext(false, false);
 ```
 
 ### Go to previous slide
@@ -44,10 +53,17 @@ await deck.slideNext(false);
 await deck.slidePrev();
 ```
 
-*Optional parameter:* Optionally your could provide a boolean parameter to this method in case you would not like the event `slideNextDidChange` and `slidePrevDidChange` to be fired.
+#### Optional parameters
+
+| Parameter                      | Type | Default | Description |
+| -------------------------- |:-----------------:|:-----------------:|:-----------------:|
+| slideAnimation | boolean | true | Set to `false` in case you would not like the inner animation of a slide, like the reveal or code animation for example, to be performed. |
+| emitEvent | boolean | true | Set to `false` in case you would not like the events `slideNextDidChange` and `slidePrevDidChange` to be fired. Note that to use this parameter, the previous should be set too. |
+
+For example:
 
 ```
-await deck.slidePrev(false);
+await deck.slidePrev(false, false);
 ```
 
 ### Go to a specific slide

src/components.d.ts

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

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

@@ -281,23 +281,29 @@ export class DeckdeckgoDeck {
   /* BEGIN: Manual sliding */
 
   @Method()
-  async slideNext(emitEvent?: boolean) {
-    await this.slideNextPrev(true, emitEvent);
+  async slideNext(slideAnimation?: boolean, emitEvent?: boolean) {
+    await this.slideNextPrev(true, slideAnimation, emitEvent);
   }
 
   @Method()
-  async slidePrev(emitEvent?: boolean) {
-    await this.slideNextPrev(false, emitEvent);
+  async slidePrev(slideAnimation?: boolean, emitEvent?: boolean) {
+    await this.slideNextPrev(false, slideAnimation, emitEvent);
   }
 
-  private async slideNextPrev(swipeLeft: boolean, emitEvent?: boolean) {
+  private async slideNextPrev(swipeLeft: boolean, slideAnimation: boolean = true, emitEvent?: boolean) {
     const slider: HTMLElement = this.el.shadowRoot.querySelector('div.deckgo-deck');
 
     if (!slider || !window) {
       return;
     }
 
-    const couldSwipe: boolean = await this.couldSwipe(swipeLeft);
+    let couldSwipe: boolean;
+
+    if (!slideAnimation) {
+      couldSwipe = true;
+    } else {
+      couldSwipe = await this.couldSwipe(swipeLeft);
+    }
 
     // We might want first to show hide stuffs in the slide before swiping
     if (couldSwipe) {