From c47e0f22207302e4dcad9b8480e033fbe85dccd5 Mon Sep 17 00:00:00 2001 From: "Danilo M." Date: Mon, 9 Nov 2026 20:04:06 +0100 Subject: feat: center the tabs and swipe to switch them --- static/app.js | 32 +++++++++++++++++++++++++------- 1 file changed, 25 insertions(+), 7 deletions(-) (limited to 'static/app.js') diff --git a/static/app.js b/static/app.js index d125d69..296166a 100644 --- a/static/app.js +++ b/static/app.js @@ -186,15 +186,33 @@ async function boot() { showTab(tabs[saved] ? saved : "Dashboard"); } -const fullscreenButton = document.getElementById("fullscreen"); -fullscreenButton?.addEventListener("click", async () => { - try { - if (document.fullscreenElement) await document.exitFullscreen(); - else await document.documentElement.requestFullscreen(); - } catch { - // the browser refused; nothing to do +function stepTab(dir) { + const names = [...tabBar.children].map((button) => button.textContent); + const at = names.findIndex((name) => !tabs[name]?.section.hidden); + const next = at + dir; + if (at !== -1 && next >= 0 && next < names.length) showTab(names[next]); +} + +// Swipe the content sideways to change tab; gestures on sliders and buttons +// (including the card drag handles) are theirs, not the shell's. +let swipe = null; +tabBody.addEventListener("pointerdown", (e) => { + if (e.pointerType === "mouse" && e.buttons !== 1) return; + if (e.target.closest("input, select, textarea, button")) { + swipe = null; + return; } + swipe = { x: e.clientX, y: e.clientY }; +}); +tabBody.addEventListener("pointerup", (e) => { + if (!swipe) return; + const dx = e.clientX - swipe.x; + const dy = e.clientY - swipe.y; + swipe = null; + if (Math.abs(dx) < 70 || Math.abs(dx) < Math.abs(dy) * 1.5) return; + stepTab(dx < 0 ? 1 : -1); }); +tabBody.addEventListener("pointercancel", () => { swipe = null; }); document.addEventListener("visibilitychange", () => { if (document.visibilityState === "visible") refreshers.forEach((fn) => fn()); -- cgit v1.2.3