diff options
| -rw-r--r-- | package-lock.json | 9 | ||||
| -rw-r--r-- | package.json | 3 | ||||
| -rwxr-xr-x | tools/run | 2 | ||||
| -rw-r--r-- | ui/routes/(app)/+layout.svelte | 33 |
4 files changed, 44 insertions, 3 deletions
diff --git a/package-lock.json b/package-lock.json index 335880f..a7aff66 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,7 +10,8 @@ "dependencies": { "axios": "^1.7.7", "dompurify": "^3.1.7", - "marked": "^14.1.3" + "marked": "^14.1.3", + "tinygesture": "^3.0.0" }, "devDependencies": { "@skeletonlabs/skeleton": "^2.10.3", @@ -4070,6 +4071,12 @@ "dev": true, "license": "MIT" }, + "node_modules/tinygesture": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/tinygesture/-/tinygesture-3.0.0.tgz", + "integrity": "sha512-UawUggtPCHy+N65ULpR/i6VLH8AzB7jWVvTNoXRFTJNh+ub6lP/SJCxzV/Ua7sJbCt9U9I79wKkKk3wbjcLdbQ==", + "license": "Apache-2.0" + }, "node_modules/tinypool": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/tinypool/-/tinypool-1.0.1.tgz", diff --git a/package.json b/package.json index 18a80f4..64b8453 100644 --- a/package.json +++ b/package.json @@ -42,6 +42,7 @@ "dependencies": { "axios": "^1.7.7", "dompurify": "^3.1.7", - "marked": "^14.1.3" + "marked": "^14.1.3", + "tinygesture": "^3.0.0" } } @@ -5,7 +5,7 @@ if [ -z ${PILCROW_DEV+x} ]; then cargo run -- "$@" else - npm run dev & PIDS[0]=$! + npm run dev -- --host 192.168.68.57 & PIDS[0]=$! cargo run -- "$@" & PIDS[1]=$! trap "kill ${PIDS[*]}" SIGINT diff --git a/ui/routes/(app)/+layout.svelte b/ui/routes/(app)/+layout.svelte index 86bc330..406d85a 100644 --- a/ui/routes/(app)/+layout.svelte +++ b/ui/routes/(app)/+layout.svelte @@ -1,7 +1,9 @@ <script> import { page } from '$app/stores'; import { goto } from '$app/navigation'; + import { browser } from '$app/environment'; import { onMount, onDestroy, getContext } from 'svelte'; + import TinyGesture from 'tinygesture'; import { boot, subscribeToEvents } from '$lib/apiServer'; import { currentUser, logins, channelsList, messages } from '$lib/store'; @@ -10,6 +12,7 @@ import CreateChannelForm from '$lib/components/CreateChannelForm.svelte'; let events = null; + let gesture = null; let pageContext = getContext('page'); let { children } = $props(); @@ -26,6 +29,20 @@ messages.update((value) => value.setMessages(boot.messages)); } + function setUpGestures() { + if (!browser) { + // Meaningless if we're not in a browser, so... + return; + } + gesture = new TinyGesture(window); + gesture.on('swiperight', (event) => { + pageContext.showMenu = true; + }); + gesture.on('swipeleft', (event) => { + pageContext.showMenu = false; + }); + } + onMount(async () => { let response = await boot(); switch (response.status) { @@ -45,6 +62,8 @@ // TODO: display error. break; } + setUpGestures(); + loading = false; }); @@ -52,6 +71,9 @@ if (events !== null) { events.close(); } + if (gesture !== null) { + gesture.destroy(); + } }); </script> @@ -78,12 +100,23 @@ {/if} <style> + /* Just some global CSS variables, don't mind them. + */ :root { --app-bar-height: 68px; --input-row-height: 2rem; --interface-padding: 16px; } + /* This should help minimize swipe-to-go-back behaviour, enabling our + * swipe-to-reveal-channel-menu behaviour. It won't work in all cases; in iOS + * Safari, when swiping from the screen edge, the OS gets th event and + * handles it before the browser does. + */ + html, body { + overscroll-behavior-x: none; + } + #interface { margin: unset; display: grid; |