Change colors of bboxes when they enter/exit the viewport

diff --git a/app/assets/javascripts/index/history-changesets-layer.js b/app/assets/javascripts/index/history-changesets-layer.js
index 097c946424323c0f9b0250639c7456e4256d640b..3f3514c538d3c15e2dedea18377e344085ea90e3 100644 (file)
--- 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,
 
 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";
     }
     if (isHighlighted) {
       className += " changeset-highlighted";
     }


@@ -99,6 +106,14 @@ OSM.HistoryChangesetsLayer = L.FeatureGroup.extend({
     this._updateChangesetStyle(changeset);
   },
 
     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;
   }
   getLayerId: function (layer) {
     return layer.id;
   }

diff --git a/app/assets/javascripts/index/history.js b/app/assets/javascripts/index/history.js
index 8c8cd66e05a5f82054d6695a3e9a9fb5e74e3de0..afa46c460530badae9c0027c1c18ce6909090865 100644 (file)
--- 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;
 
     disableChangesetIntersectionObserver();
     if (!window.IntersectionObserver) return;
 

-    let ignoreIntersectionEvents = true;
+    let keepInitialLocation = true;

 
     changesetIntersectionObserver = new IntersectionObserver((entries) => {
 
     changesetIntersectionObserver = new IntersectionObserver((entries) => {

-      if (ignoreIntersectionEvents) {
-        ignoreIntersectionEvents = false;
-        return;
-      }
-

       let closestTargetToTop,
           closestDistanceToTop = Infinity,
           closestTargetToBottom,
           closestDistanceToBottom = Infinity;
 
       for (const entry of entries) {
       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;
 
         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;
         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) {
       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 f43415e80852461e1d86eb6e9216cacf4dcba189..681e898127ad5df3586184fe3a0cdacd757e6ca1 100644 (file)
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -601,6 +601,10 @@ tr.turn {
 
 /* Rules for the history sidebar */
 
 
 /* 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 {
 .changeset-in-sidebar-viewport {
   --changeset-border-color: #FF9500;
   &.changeset-highlighted {


@@ -608,6 +612,10 @@ tr.turn {
   }
   --changeset-fill-color: #FFFFAF;
 }
   }
   --changeset-fill-color: #FFFFAF;
 }

+.changeset-below-sidebar-viewport {
+  --changeset-border-color: #8888AA;
+  --changeset-fill-color: #888888;
+}

 
 #sidebar .changesets {
   li {
 
 #sidebar .changesets {
   li {