From: Anton Khorev <tony29@yandex.ru>
Date: Sun, 16 Mar 2025 14:59:49 +0000 (+0300)
Subject: Rewrite history page url when scrolling
X-Git-Tag: live~97^2~3
X-Git-Url: https://git.openstreetmap.org./rails.git/commitdiff_plain/66f5948f1f800907896344c3acde290f7bac7fc2?ds=inline;hp=--cc

Rewrite history page url when scrolling
---

66f5948f1f800907896344c3acde290f7bac7fc2
diff --git a/app/assets/javascripts/index/history.js b/app/assets/javascripts/index/history.js
index 229fdc2b6..372bf04f5 100644
--- a/app/assets/javascripts/index/history.js
+++ b/app/assets/javascripts/index/history.js
@@ -27,6 +27,65 @@ OSM.History = function (map) {
     return layer.id;
   };
 
+  let changesetIntersectionObserver;
+
+  function disableChangesetIntersectionObserver() {
+    if (changesetIntersectionObserver) {
+      changesetIntersectionObserver.disconnect();
+      changesetIntersectionObserver = null;
+    }
+  }
+
+  function enableChangesetIntersectionObserver() {
+    disableChangesetIntersectionObserver();
+    if (!window.IntersectionObserver) return;
+
+    let ignoreIntersectionEvents = true;
+
+    changesetIntersectionObserver = new IntersectionObserver((entries) => {
+      if (ignoreIntersectionEvents) {
+        ignoreIntersectionEvents = false;
+        return;
+      }
+
+      let closestTargetToTop,
+          closestDistanceToTop = Infinity,
+          closestTargetToBottom,
+          closestDistanceToBottom = Infinity;
+
+      for (const entry of entries) {
+        if (entry.isIntersecting) continue;
+
+        const distanceToTop = entry.rootBounds.top - entry.boundingClientRect.bottom;
+        const distanceToBottom = entry.boundingClientRect.top - entry.rootBounds.bottom;
+        if (distanceToTop >= 0 && distanceToTop < closestDistanceToTop) {
+          closestDistanceToTop = distanceToTop;
+          closestTargetToTop = entry.target;
+        }
+        if (distanceToBottom >= 0 && distanceToBottom <= closestDistanceToBottom) {
+          closestDistanceToBottom = distanceToBottom;
+          closestTargetToBottom = entry.target;
+        }
+      }
+
+      if (closestTargetToTop && closestDistanceToTop < closestDistanceToBottom) {
+        const id = $(closestTargetToTop).data("changeset")?.id;
+        if (id) {
+          OSM.router.replace(location.pathname + "?" + new URLSearchParams({ before: id }) + location.hash);
+        }
+      } else if (closestTargetToBottom) {
+        const id = $(closestTargetToBottom).data("changeset")?.id;
+        if (id) {
+          OSM.router.replace(location.pathname + "?" + new URLSearchParams({ after: id }) + location.hash);
+        }
+      }
+    }, { root: $("#sidebar")[0] });
+
+    $("#sidebar_content .changesets ol").children().each(function () {
+      changesetIntersectionObserver.observe(this);
+    });
+  }
+
   function highlightChangeset(id) {
     const layer = group.getLayer(id);
     if (layer) layer.setStyle({ fillOpacity: 0.3, color: "#FF6600", weight: 3 });
@@ -77,6 +136,8 @@ OSM.History = function (map) {
     const data = new URLSearchParams();
     const params = new URLSearchParams(location.search);
 
+    disableChangesetIntersectionObserver();
+
     if (location.pathname === "/history") {
       data.set("bbox", map.getBounds().wrap().toBBoxString());
       const feedLink = $("link[type=\"application/atom+xml\"]"),
@@ -97,6 +158,7 @@ OSM.History = function (map) {
       .then(response => response.text())
       .then(function (html) {
         displayFirstChangesets(html);
+        enableChangesetIntersectionObserver();
         updateMap();
       });
   }
@@ -112,6 +174,7 @@ OSM.History = function (map) {
 
     $.get($(this).attr("href"), function (html) {
       displayMoreChangesets(div, html);
+      enableChangesetIntersectionObserver();
       updateMap();
     });
   }
@@ -189,6 +252,7 @@ OSM.History = function (map) {
     map.removeLayer(group);
     map.off("moveend", update);
     map.off("zoomend", updateBounds);
+    disableChangesetIntersectionObserver();
   };
 
   return page;