feat: add an option to not trigger slideStart on slideNext and slidePrev

Author: peterpeterparker

doc/features/navigation.md

@@ -32,12 +32,24 @@ 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 `slideNextStart` and `slidePrevStart` to be fired.
+
+```
+await deck.slideNext(false);
+```
+
 ### Go to previous slide
 
 ```
 await deck.slidePrev();
 ```
 
+*Optional parameter:* Optionally your could provide a boolean parameter to this method in case you would not like the event `slideNextStart` and `slidePrevStart` to be fired.
+
+```
+await deck.slidePrev(false);
+```
+
 ### Go to a specific slide
 
 ```

src/components.d.ts

@@ -21,8 +21,8 @@ export namespace Components {
     'keyboard': boolean;
     'pager': boolean;
     'pagerPercentage': boolean;
-    'slideNext': () => Promise<void>;
-    'slidePrev': () => Promise<void>;
+    'slideNext': (emitEvent?: boolean) => Promise<void>;
+    'slidePrev': (emitEvent?: boolean) => Promise<void>;
     'slideTo': (index: number, speed?: number) => Promise<void>;
     'toggleFullScreen': () => Promise<void>;
   }

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

@@ -154,7 +154,7 @@ export class DeckdeckgoDeck {
     this.startX = null;
   }
 
-  private swipeSlide(deltaX: DeltaX): Promise<void> {
+  private swipeSlide(deltaX: DeltaX, emitEvent: boolean = true): Promise<void> {
     return new Promise<void>(async (resolve) => {
       if (!deltaX || !window) {
         resolve();
@@ -173,11 +173,15 @@ export class DeckdeckgoDeck {
           if (deltaX.swipeLeft) {
             this.activeIndex++;
 
-            this.slideNextStart.emit(this.activeIndex);
+            if (emitEvent) {
+              this.slideNextStart.emit(this.activeIndex);
+            }
           } else {
             this.activeIndex--;
 
-            this.slidePrevStart.emit(this.activeIndex);
+            if (emitEvent) {
+              this.slidePrevStart.emit(this.activeIndex);
+            }
           }
         }
       }
@@ -277,16 +281,16 @@ export class DeckdeckgoDeck {
   /* BEGIN: Manual sliding */
 
   @Method()
-  async slideNext() {
-    await this.slideNextPrev(true);
+  async slideNext(emitEvent?: boolean) {
+    await this.slideNextPrev(true, emitEvent);
   }
 
   @Method()
-  async slidePrev() {
-    await this.slideNextPrev(false);
+  async slidePrev(emitEvent?: boolean) {
+    await this.slideNextPrev(false, emitEvent);
   }
 
-  private async slideNextPrev(swipeLeft: boolean) {
+  private async slideNextPrev(swipeLeft: boolean, emitEvent?: boolean) {
     const slider: HTMLElement = this.el.shadowRoot.querySelector('div.deckgo-deck');
 
     if (!slider || !window) {
@@ -303,7 +307,7 @@ export class DeckdeckgoDeck {
         deltaX: window.innerWidth
       };
 
-      await this.swipeSlide(deltaX);
+      await this.swipeSlide(deltaX, emitEvent);
     }
   }
 

src/index.html

@@ -127,14 +127,14 @@ <h1 slot="title">Manual code</h1>
   function slideNext() {
     const elem = document.getElementsByTagName('deckgo-deck');
     if (elem && elem.length > 0) {
-      elem[0].slideNext();
+      elem[0].slideNext(false);
     }
   }
 
   function slidePrev() {
     const elem = document.getElementsByTagName('deckgo-deck');
     if (elem && elem.length > 0) {
-      elem[0].slidePrev();
+      elem[0].slidePrev(false);
     }
   }