From dd0e749694728562e2561699154824efc4d08eb8 Mon Sep 17 00:00:00 2001
From: Adam Soltys <asoltys@gmail.com>
Date: Thu, 26 Sep 2024 13:28:22 -0700
Subject: list scrolling

---
 src/components/LocationsMap.svelte | 45 +++++++++++++++++++++++++++++++++-----
 1 file changed, 40 insertions(+), 5 deletions(-)

(limited to 'src/components')

diff --git a/src/components/LocationsMap.svelte b/src/components/LocationsMap.svelte
index c7337f9f..30e66ab9 100644
--- a/src/components/LocationsMap.svelte
+++ b/src/components/LocationsMap.svelte
@@ -55,7 +55,14 @@
       )
     : inview;
 
+  let scroll = () => {
+    const el = document.querySelector(".selected");
+      if (el) el.scrollIntoView({ behavior: "smooth", block: "center" });
+  };
+
+  let selected;
   function select(m) {
+    selected = m;
     stopFlying();
     currentIndex = inview.indexOf(m);
     flyToMarker(m, 500);
@@ -73,7 +80,9 @@
       duration,
     });
 
+    await new Promise((r) => setTimeout(r, duration));
     marker.getElement().click();
+    updateLabelVisibility();
     await new Promise((r) => setTimeout(r, 2500));
 
     if (!timeout) return;
@@ -108,6 +117,26 @@
     timeout = setTimeout(startFlying, 4000);
   }
 
+  function debounce(func, delay) {
+    let timeout;
+    let immediate = true;
+
+    return function (...args) {
+      const context = this;
+
+      if (immediate) {
+        func.apply(context, args);
+        immediate = false;
+      }
+
+      clearTimeout(timeout);
+
+      timeout = setTimeout(() => {
+        immediate = true;
+      }, delay);
+    };
+  }
+
   function stopFlying() {
     updateLabelVisibility();
     if (!timeout) return;
@@ -118,12 +147,12 @@
     }
 
     map.jumpTo({ center: map.getCenter(), zoom: map.getZoom() });
-    map.off("moveend"); // Remove moveend listener if set
+    map.off("moveend");
   }
 
   let inview = [];
 
-  function updateLabelVisibility() {
+  let updateLabelVisibility = debounce(() => {
     inview = [];
     if (!map) return;
     let zoom = map.getZoom();
@@ -139,7 +168,7 @@
     }
 
     inview = inview.sort((a, b) => a.tags.name.localeCompare(b.tags.name));
-  }
+  }, 500);
 
   let locationMarkers = {};
   let popups = {};
@@ -167,7 +196,7 @@
 
             let popupContainer = document.createElement("div");
 
-            let popup = new Popup({
+            new Popup({
               target: popupContainer,
               props: { tags },
             });
@@ -183,7 +212,12 @@
               let p = marker.getPopup();
               popups[marker.id] = p;
               p.setDOMContent(popupContainer);
+              setTimeout(() => {
+                selected = marker;
+                setTimeout(scroll, 10);
+              }, 50);
               p.on("close", () => {
+                selected = undefined;
                 delete popups[marker.id];
               });
             });
@@ -250,7 +284,8 @@
         {#each list as marker, i}
           <button
             on:click={() => select(marker)}
-            class:font-bold={currentIndex === i}
+            class:font-bold={selected === marker}
+            class:selected={selected === marker}
             class="block whitespace-nowrap text-ellipsis"
           >
             {marker.tags.name}
-- 
cgit v1.2.3