From 39ddc8e8fc84cf024d319e87a88559f7a7e70c61 Mon Sep 17 00:00:00 2001 From: Anton Khorev 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