From c53283eb1fcf83f6e1b47cd84ca86586ee01f26c Mon Sep 17 00:00:00 2001
From: kimsible <kimsible@users.noreply.github.com>
Date: Sat, 15 Aug 2020 20:11:29 +0200
Subject: [PATCH] On touchscreens close menu on swipe left

---
 client/src/app/core/menu/menu.service.ts      |  1 +
 .../src/app/core/wrappers/screen.service.ts   | 58 +++++++++++++++++++
 2 files changed, 59 insertions(+)

diff --git a/client/src/app/core/menu/menu.service.ts b/client/src/app/core/menu/menu.service.ts
index f1b9bea76759..671ee3e4f55b 100644
--- a/client/src/app/core/menu/menu.service.ts
+++ b/client/src/app/core/menu/menu.service.ts
@@ -32,6 +32,7 @@ export class MenuService {
     if (this.screenService.isInTouchScreen()) {
       if (this.isMenuDisplayed) {
         document.body.classList.add('menu-open')
+        this.screenService.onFingerSwipe('left', () => { this.setMenuDisplay(false) })
       } else {
         document.body.classList.remove('menu-open')
       }
diff --git a/client/src/app/core/wrappers/screen.service.ts b/client/src/app/core/wrappers/screen.service.ts
index 96fb7ae57bc3..ab5e1c23a2bd 100644
--- a/client/src/app/core/wrappers/screen.service.ts
+++ b/client/src/app/core/wrappers/screen.service.ts
@@ -54,6 +54,64 @@ export class ScreenService {
     return this.windowInnerWidth
   }
 
+  // https://stackoverflow.com/questions/2264072/detect-a-finger-swipe-through-javascript-on-the-iphone-and-android
+  onFingerSwipe (direction: 'left' | 'right' | 'up' | 'down', action: () => void, removeEventOnEnd = true) {
+    let touchDownClientX: number
+    let touchDownClientY: number
+
+    const onTouchStart = (event: TouchEvent) => {
+      const firstTouch = event.touches[0]
+      touchDownClientX = firstTouch.clientX
+      touchDownClientY = firstTouch.clientY
+    }
+
+    const onTouchMove = (event: TouchEvent) => {
+      if (!touchDownClientX || !touchDownClientY) {
+        return
+      }
+
+      const touchUpClientX = event.touches[0].clientX
+      const touchUpClientY = event.touches[0].clientY
+
+      let touchClientX = Math.abs(touchDownClientX - touchUpClientX)
+      let touchClientY = Math.abs(touchDownClientY - touchUpClientY)
+
+      if (touchClientX > touchClientY) {
+        if (touchClientX > 0) {
+          if (direction === 'left') {
+            if (removeEventOnEnd) this.removeFingerSwipeEventListener(onTouchStart, onTouchMove)
+            action()
+          }
+        } else {
+          if (direction === 'right') {
+            if (removeEventOnEnd) this.removeFingerSwipeEventListener(onTouchStart, onTouchMove)
+            action()
+          }
+        }
+      } else {
+        if (touchClientY > 0) {
+          if (direction === 'up') {
+            if (removeEventOnEnd) this.removeFingerSwipeEventListener(onTouchStart, onTouchMove)
+            action()
+          }
+        } else {
+          if (direction === 'down') {
+            if (removeEventOnEnd) this.removeFingerSwipeEventListener(onTouchStart, onTouchMove)
+            action()
+          }
+        }
+      }
+    }
+
+    document.addEventListener('touchstart', onTouchStart, false)
+    document.addEventListener('touchmove', onTouchMove, false)
+  }
+
+  private removeFingerSwipeEventListener (onTouchStart: (event: TouchEvent) => void, onTouchMove: (event: TouchEvent) => void) {
+    document.removeEventListener('touchstart', onTouchStart)
+    document.removeEventListener('touchmove', onTouchMove)
+  }
+
   private refreshWindowInnerWidth () {
     this.lastFunctionCallTime = new Date().getTime()