From 39ddc8e8fc84cf024d319e87a88559f7a7e70c61 Mon Sep 17 00:00:00 2001
From: Anton Khorev <tony29@yandex.ru>
Date: Tue, 24 Jun 2025 02:14:57 +0300
Subject: [PATCH] Add shadows to floating start/end version lists

---
 app/assets/javascripts/index/element.js | 37 +++++++++++++++++++++++--
 1 file changed, 35 insertions(+), 2 deletions(-)

diff --git a/app/assets/javascripts/index/element.js b/app/assets/javascripts/index/element.js
index d387f64f6..1571c7475 100644
--- a/app/assets/javascripts/index/element.js
+++ b/app/assets/javascripts/index/element.js
@@ -7,26 +7,59 @@
 
   OSM.Element = function (map, type) {
     const page = {};
+    let scrollStartObserver, scrollEndObserver;
 
     page.pushstate = page.popstate = function (path, id, version) {
       OSM.loadSidebarContent(path, function () {
-        scrollToActiveVersion();
+        initVersionsNavigation();
         page._addObject(type, id, version);
       });
     };
 
     page.load = function (path, id, version) {
-      scrollToActiveVersion();
+      initVersionsNavigation();
       page._addObject(type, id, version, true);
     };
 
     page.unload = function () {
       page._removeObject();
+      scrollStartObserver?.disconnect();
+      scrollStartObserver = null;
+      scrollEndObserver?.disconnect();
+      scrollEndObserver = null;
     };
 
     page._addObject = function () {};
     page._removeObject = function () {};
 
+    function initVersionsNavigation() {
+      scrollToActiveVersion();
+
+      const $scrollableList = $("#versions-navigation-list-middle");
+      const [scrollableFirstItem] = $scrollableList.children().first();
+      const [scrollableLastItem] = $scrollableList.children().last();
+
+      if (scrollableFirstItem) {
+        scrollStartObserver = createScrollObserver("#versions-navigation-list-start", "2px 0px");
+        scrollStartObserver.observe(scrollableFirstItem);
+      }
+
+      if (scrollableLastItem) {
+        scrollEndObserver = createScrollObserver("#versions-navigation-list-end", "-2px 0px");
+        scrollEndObserver.observe(scrollableLastItem);
+      }
+    }
+
+    function createScrollObserver(shadowTarget, shadowOffset) {
+      const threshold = 0.95;
+      return new IntersectionObserver(([entry]) => {
+        const floating = entry.intersectionRatio < threshold;
+        $(shadowTarget)
+          .css("box-shadow", floating ? `rgba(0, 0, 0, 0.075) ${shadowOffset} 2px` : "")
+          .css("z-index", floating ? "5" : ""); // floating z-index should be larger than z-index of Bootstrap's .page-link:focus, which is 3
+      }, { threshold });
+    }
+
     return page;
   };
 
-- 
2.39.5