From: Anton Khorev <tony29@yandex.ru>
Date: Fri, 11 Apr 2025 23:44:26 +0000 (+0300)
Subject: Change colors of bboxes when they enter/exit the viewport
X-Git-Tag: live~31^2~2
X-Git-Url: https://git.openstreetmap.org./rails.git/commitdiff_plain/faec2fd43cb166c760a12f87b9664a9144720556?ds=inline;hp=--cc

Change colors of bboxes when they enter/exit the viewport
---

faec2fd43cb166c760a12f87b9664a9144720556
diff --git a/app/assets/javascripts/index/history-changesets-layer.js b/app/assets/javascripts/index/history-changesets-layer.js
index 097c94642..3f3514c53 100644
--- a/app/assets/javascripts/index/history-changesets-layer.js
+++ b/app/assets/javascripts/index/history-changesets-layer.js
@@ -1,9 +1,16 @@
 OSM.HistoryChangesetsLayer = L.FeatureGroup.extend({
   _changesets: new Map,
 
-  _getChangesetStyle: function ({ isHighlighted }) {
-    let className = "changeset-in-sidebar-viewport";
-
+  _getChangesetStyle: function ({ isHighlighted, sidebarRelativePosition }) {
+    let className;
+
+    if (sidebarRelativePosition > 0) {
+      className = "changeset-above-sidebar-viewport";
+    } else if (sidebarRelativePosition < 0) {
+      className = "changeset-below-sidebar-viewport";
+    } else {
+      className = "changeset-in-sidebar-viewport";
+    }
     if (isHighlighted) {
       className += " changeset-highlighted";
     }
@@ -99,6 +106,14 @@ OSM.HistoryChangesetsLayer = L.FeatureGroup.extend({
     this._updateChangesetStyle(changeset);
   },
 
+  setChangesetSidebarRelativePosition: function (id, state) {
+    const changeset = this._changesets.get(id);
+    if (!changeset) return;
+
+    changeset.sidebarRelativePosition = state;
+    this._updateChangesetStyle(changeset);
+  },
+
   getLayerId: function (layer) {
     return layer.id;
   }
diff --git a/app/assets/javascripts/index/history.js b/app/assets/javascripts/index/history.js
index 8c8cd66e0..afa46c460 100644
--- a/app/assets/javascripts/index/history.js
+++ b/app/assets/javascripts/index/history.js
@@ -37,24 +37,27 @@ OSM.History = function (map) {
     disableChangesetIntersectionObserver();
     if (!window.IntersectionObserver) return;
 
-    let ignoreIntersectionEvents = true;
+    let keepInitialLocation = 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 id = $(entry.target).data("changeset")?.id;
+
+        if (entry.isIntersecting) {
+          if (id) changesetsLayer.setChangesetSidebarRelativePosition(id, 0);
+          continue;
+        }
 
         const distanceToTop = entry.rootBounds.top - entry.boundingClientRect.bottom;
         const distanceToBottom = entry.boundingClientRect.top - entry.rootBounds.bottom;
+
+        if (id) changesetsLayer.setChangesetSidebarRelativePosition(id, distanceToTop >= 0 ? 1 : -1);
+
         if (distanceToTop >= 0 && distanceToTop < closestDistanceToTop) {
           closestDistanceToTop = distanceToTop;
           closestTargetToTop = entry.target;
@@ -65,6 +68,11 @@ OSM.History = function (map) {
         }
       }
 
+      if (keepInitialLocation) {
+        keepInitialLocation = false;
+        return;
+      }
+
       if (closestTargetToTop && closestDistanceToTop < closestDistanceToBottom) {
         const id = $(closestTargetToTop).data("changeset")?.id;
         if (id) {
diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index f43415e80..681e89812 100644
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -601,6 +601,10 @@ tr.turn {
 
 /* Rules for the history sidebar */
 
+.changeset-above-sidebar-viewport {
+  --changeset-border-color: #CC7755;
+  --changeset-fill-color: #888888;
+}
 .changeset-in-sidebar-viewport {
   --changeset-border-color: #FF9500;
   &.changeset-highlighted {
@@ -608,6 +612,10 @@ tr.turn {
   }
   --changeset-fill-color: #FFFFAF;
 }
+.changeset-below-sidebar-viewport {
+  --changeset-border-color: #8888AA;
+  --changeset-fill-color: #888888;
+}
 
 #sidebar .changesets {
   li {