fix: improve swipe and scroll code handling on mobile devices

Author: peterpeterparker

src/components.d.ts

@@ -55,6 +55,7 @@ export namespace Components {
     'anchor'?: string;
     'anchorZoom'?: string;
     'hideAnchor'?: boolean;
+    'onScrolling'?: (event: CustomEvent<void>) => void;
     'onSlideDidLoad'?: (event: CustomEvent<void>) => void;
     'srcFile'?: string;
   }

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

@@ -22,7 +22,9 @@ export class DeckdeckgoDeck {
 
   private startX: number = null;
   private deckTranslateX: number = 0;
-  private autoSwipeRatio: number = 4;
+  private autoSwipeRatio: number = 10;
+
+  private blockSlide: boolean = false;
 
   @State()
   private activeIndex: number = 0;
@@ -103,6 +105,11 @@ export class DeckdeckgoDeck {
     this.startX = null;
   }
 
+  @Listen('scrolling')
+  scrolling() {
+    this.blockSlide = true;
+  }
+
   private unify(e) {
     return e.changedTouches ? e.changedTouches[0] : e;
   }
@@ -113,6 +120,10 @@ export class DeckdeckgoDeck {
 
   private async move(e: Event) {
 
+    if (this.blockSlide) {
+      return;
+    }
+
     const deltaX: DeltaX = await this.getDeltaX(e);
 
     if (!deltaX) {
@@ -126,6 +137,11 @@ export class DeckdeckgoDeck {
   }
 
   private async stop(e: Event) {
+    if (this.blockSlide) {
+      this.blockSlide = false;
+      return;
+    }
+
     const deltaX: DeltaX = await this.getDeltaX(e);
 
     await this.swipeSlide(deltaX);

src/components/slides/deckdeckgo-slide-code/deckdeckgo-slide-code.tsx

@@ -2,6 +2,11 @@ import {Component, Element, Event, EventEmitter, Method, Prop, State} from '@ste
 
 import {DeckdeckgoSlide, DeckDeckGoSlideUtils} from '../deckdeckgo-slide';
 
+enum DeckdeckgoSlideCodeAction {
+  SWIPE,
+  SCROLL
+}
+
 @Component({
   tag: 'deckgo-slide-code',
   styleUrl: 'deckdeckgo-slide-code.scss',
@@ -13,6 +18,8 @@ export class DeckdeckgoSlideCode implements DeckdeckgoSlide {
 
   @Event() slideDidLoad: EventEmitter<void>;
 
+  @Event() scrolling: EventEmitter<void>;
+
   @Prop() srcFile: string;
 
   @Prop() anchor: string = '// DeckDeckGo';
@@ -24,6 +31,10 @@ export class DeckdeckgoSlideCode implements DeckdeckgoSlide {
   @State()
   private code: string[] = [];
 
+  private startX: number = null;
+  private detectThreshold: number = 10;
+  private action: DeckdeckgoSlideCodeAction = null;
+
   async componentDidLoad() {
     this.slideDidLoad.emit();
 
@@ -134,12 +145,61 @@ export class DeckdeckgoSlideCode implements DeckdeckgoSlide {
 
   // DeckDeckGo
   render() {
-    return <div class="deckgo-slide">
+    return <div class="deckgo-slide"
+                onTouchStart={(event: TouchEvent) => this.touchScrollStart(event)}
+                onTouchMove={(event: TouchEvent) => this.touchScrollMove(event)}
+                onTouchEnd={() => this.touchScrollEnd()}>
       <slot name="title"></slot>
-      <div class="deckgo-code-container"><code>{this.renderCode()}</code></div>
+      <div class="deckgo-code-container" onScroll={() => this.emitScrolling()}><code>{this.renderCode()}</code></div>
     </div>;
   }
 
+  private touchScrollStart(event: TouchEvent) {
+    this.startX = event.changedTouches ? event.changedTouches[0].clientX : null;
+  }
+
+  private touchScrollMove(event: TouchEvent) {
+    if (this.action) {
+      return;
+    }
+
+    const currentX: number = event.changedTouches ? event.changedTouches[0].clientX : null;
+
+    const swipeLeft: boolean = this.startX > currentX + this.detectThreshold;
+    const swipeRight: boolean = this.startX < currentX - this.detectThreshold;
+
+    this.action = swipeLeft || swipeRight ? DeckdeckgoSlideCodeAction.SWIPE : DeckdeckgoSlideCodeAction.SCROLL;
+
+    if (!swipeLeft && !swipeRight) {
+      this.scrolling.emit();
+      this.unlockScroll();
+    } else {
+      this.lockScroll();
+    }
+  }
+
+  private touchScrollEnd() {
+    this.action = null;
+
+    this.unlockScroll();
+  }
+
+  private lockScroll() {
+    const container: HTMLElement = this.el.shadowRoot.querySelector('div.deckgo-code-container');
+    container.style.setProperty('overflow-y', 'hidden');
+  }
+
+  private unlockScroll() {
+    const container: HTMLElement = this.el.shadowRoot.querySelector('div.deckgo-code-container');
+    container.style.removeProperty('overflow-y');
+  }
+
+  private emitScrolling() {
+    if (this.action === DeckdeckgoSlideCodeAction.SCROLL) {
+      this.scrolling.emit();
+    }
+  }
+
   private renderCode() {
     return (
       this.code.map((line: string) => {