scroll horizontally with the mouse.

fiatjaf · Sep 17, 2023 · 8fd5b19 · 8fd5b19
1 parent 06ce593
commit 8fd5b19
Showing 1 changed file with 52 additions and 2 deletions.
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -1,16 +1,66 @@
-<script>
+<script lang="ts">
   import { tabs } from '$lib/state';
   import TabElement from '$components/TabElement.svelte';
   import Searchbar from '$components/Searchbar.svelte';
   import { scrollTabIntoView } from '$lib/utils';
   import '../app.postcss';
+  import { onMount } from 'svelte';
+
+  let dragging = false;
+  let startX: number;
+  let scrollLeft: number;
+
+  onMount(() => {
+    const slider = document.getElementById('panel');
+
+    document.addEventListener('mousedown', onMouseDown);
+    document.addEventListener('mouseup', onMouseUp);
+    document.addEventListener('mousemove', onMouseMove);
+
+    return () => {
+      document.removeEventListener('mousedown', onMouseDown);
+      document.removeEventListener('mouseup', onMouseUp);
+      document.removeEventListener('mousemove', onMouseMove);
+    };
+
+    function onMouseDown(ev: MouseEvent) {
+      if (!slider) return;
+      if (
+        ev.target instanceof HTMLInputElement ||
+        ev.target instanceof HTMLTextAreaElement ||
+        ev.target instanceof HTMLButtonElement
+      )
+        return;
+
+      ev.preventDefault();
+      dragging = true;
+      startX = ev.clientX - slider.offsetLeft;
+      scrollLeft = slider.scrollLeft;
+    }
+
+    function onMouseUp(ev: MouseEvent) {
+      if (dragging) {
+        ev.preventDefault();
+        ev.stopPropagation();
+      }
+      dragging = false;
+    }
+
+    function onMouseMove(ev: MouseEvent) {
+      if (!slider) return;
+      if (!dragging) return;
+      ev.preventDefault();
+      slider.scrollLeft = scrollLeft + startX - ev.clientX;
+    }
+  });
 </script>
 
 <svelte:head>
   <title>wikistr</title>
 </svelte:head>
 
-<div class="flex overflow-x-scroll pb-2 scroll-smooth">
+<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-static-element-interactions -->
+<div class="flex overflow-x-scroll pb-2" id="panel" draggable="false">
   {#each $tabs as tab (tab.id)}
     <TabElement {tab} />
   {/each}