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 @@ -{#if !($smallViewport && $showPresenceSidebar) && $showSidebar || $selectedChannel.id === -1} +{#if sidebarEnabled} {/if} -{#if !($smallViewport && $showSidebar) && !($smallViewport && $showPresenceSidebar) && $showChannelView && $selectedChannel.id !== -1} +{#if channelViewEnabled} {/if} -{#if $showPresenceSidebar} +{#if presenceSidebarEnabled} {/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,