From b1a4622151f7cf90f809e36cffc5e1ac93abe21b Mon Sep 17 00:00:00 2001
From: hippoz <10706925-hippoz@users.noreply.gitlab.com>
Date: Sat, 12 Aug 2023 20:32:18 +0300
Subject: [PATCH] add gestures on mobile

---
 frontend/src/components/Main.svelte | 32 ++++++++++++++++---
 frontend/src/gestures.js            | 49 +++++++++++++++++++++++++++++
 frontend/src/main.js                |  5 ++-
 frontend/src/stores.js              |  3 ++
 4 files changed, 84 insertions(+), 5 deletions(-)
 create mode 100644 frontend/src/gestures.js

diff --git a/frontend/src/components/Main.svelte b/frontend/src/components/Main.svelte
index 7b6d81b..c989f2f 100644
--- a/frontend/src/components/Main.svelte
+++ b/frontend/src/components/Main.svelte
@@ -1,6 +1,6 @@
 <script>
     import { afterUpdate, beforeUpdate } from "svelte";
-    import { showSidebar, selectedChannel, smallViewport, showChannelView, theme, showPresenceSidebar } from "../stores";
+    import { showSidebar, selectedChannel, smallViewport, showChannelView, theme, showPresenceSidebar, swipeRightEvent, swipeLeftEvent } from "../stores";
     import { timeline } from "../timeline";
     import ChannelView from "./ChannelView.svelte";
     import OverlayProvider from "./overlays/OverlayProvider.svelte";
@@ -14,17 +14,41 @@
     afterUpdate(() => {
         timeline.addCheckpoint("Main component update end");
     });
+
+    $: sidebarEnabled = !($smallViewport && $showPresenceSidebar) && $showSidebar || $selectedChannel.id === -1;
+    $: channelViewEnabled = !($smallViewport && $showSidebar) && !($smallViewport && $showPresenceSidebar) && $showChannelView && $selectedChannel.id !== -1;
+    $: presenceSidebarEnabled = $showPresenceSidebar;
+
+    swipeRightEvent.on(() => {
+        if (smallViewport.value) {
+            if (presenceSidebarEnabled) {
+                showPresenceSidebar.set(false);
+            } else if (channelViewEnabled) {
+                showSidebar.set(true);
+            }
+        }
+    });
+
+    swipeLeftEvent.on(() => {
+        if (smallViewport.value) {
+            if (sidebarEnabled) {
+                showSidebar.set(false);
+            } else if (channelViewEnabled) {
+                showPresenceSidebar.set(true);
+            }
+        }
+    });
 </script>
 
 
 <OverlayProvider />
 
-{#if !($smallViewport && $showPresenceSidebar) && $showSidebar || $selectedChannel.id === -1}
+{#if sidebarEnabled}
     <Sidebar />
 {/if}
-{#if !($smallViewport && $showSidebar) && !($smallViewport && $showPresenceSidebar) && $showChannelView && $selectedChannel.id !== -1}
+{#if channelViewEnabled}
     <ChannelView channel={$selectedChannel} />
 {/if}
-{#if $showPresenceSidebar}
+{#if presenceSidebarEnabled}
     <PresenceSidebar />
 {/if}
diff --git a/frontend/src/gestures.js b/frontend/src/gestures.js
new file mode 100644
index 0000000..7a1fc03
--- /dev/null
+++ b/frontend/src/gestures.js
@@ -0,0 +1,49 @@
+import { swipeLeftEvent, swipeRightEvent } from "./stores";
+
+const events = [];
+
+const SWIPE_RIGHT_THRESHOLD = 35;
+const SWIPE_LEFT_THRESHOLD = -35;
+
+function pointerdownHandler(ev) {
+    events.push({
+        pointerId: ev.pointerId,
+        clientX: ev.clientX,
+        clientY: ev.clientY,
+        processed: false
+    });
+}
+
+function pointerupHandler(ev) {
+    const index = events.findIndex((e) => e.pointerId === ev.pointerId);
+    if (index === -1) return;
+    events.splice(index, 1);
+}
+
+function pointermoveHandler(ev) {
+    const index = events.findIndex((e) => e.pointerId === ev.pointerId);
+    if (index === -1) return;
+
+    const existingEvent = events[index];
+
+    if (existingEvent.processed) return;
+
+    const delta = ev.clientX - existingEvent.clientX;
+    if (delta >= SWIPE_RIGHT_THRESHOLD) {
+        existingEvent.processed = true;
+        swipeRightEvent.emit(true);
+    } else if (delta <= SWIPE_LEFT_THRESHOLD) {
+        existingEvent.processed = true;
+        swipeLeftEvent.emit(true);
+    }
+}
+
+export function initGestures() {
+    document.body.addEventListener("pointerdown", pointerdownHandler);
+    document.body.addEventListener("pointerup", pointerupHandler);
+    document.body.addEventListener("pointercancel", pointerupHandler);
+    document.body.addEventListener("pointerleave", pointerupHandler);
+    document.body.addEventListener("pointerout", pointerupHandler);
+
+    document.body.addEventListener("pointermove", pointermoveHandler);
+}
diff --git a/frontend/src/main.js b/frontend/src/main.js
index 0097ab4..9fccef5 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -10,6 +10,7 @@ import "@fontsource-variable/material-symbols-outlined/opsz.css";
 import "@fontsource-variable/open-sans";
 import "./styles/global.css";
 import { timeline } from './timeline';
+import { initGestures } from './gestures';
 
 timeline.start();
 
@@ -33,7 +34,9 @@ function handleGatewaySettlement() {
         if (loadingElement) {
             loadingElement.parentElement.removeChild(loadingElement);
         }
-    
+
+        initGestures();
+
         const app = new Main({
             target: document.body
         });
diff --git a/frontend/src/stores.js b/frontend/src/stores.js
index 331d4f7..d992415 100644
--- a/frontend/src/stores.js
+++ b/frontend/src/stores.js
@@ -869,6 +869,9 @@ export const totalUnreadsStore = new Store(0, "TotalUnreadsStore");
 export const statusBarStore = new Store(null, "statusBarStore");
 
 export const setMessageInputEvent = new Store(null, "event:setMessageInput");
+export const swipeRightEvent = new Store(null, "event:swipeRight");
+export const swipeLeftEvent = new Store(null, "event:swipeLeft");
+
 
 export const allStores = {
     selectedChannel,