From b079b60f5bd212152d30984ee82d1082d042f536 Mon Sep 17 00:00:00 2001
From: Anton Khorev <tony29@yandex.ru>
Date: Fri, 8 Aug 2025 17:43:44 +0300
Subject: [PATCH] Move numbered pagination load/unload code to js module

---
 app/assets/javascripts/index/element.js       | 38 ++---------------
 app/assets/javascripts/numbered_pagination.js | 41 +++++++++++++++++++
 2 files changed, 44 insertions(+), 35 deletions(-)

diff --git a/app/assets/javascripts/index/element.js b/app/assets/javascripts/index/element.js
index 91f936695..8bb3ce82e 100644
--- a/app/assets/javascripts/index/element.js
+++ b/app/assets/javascripts/index/element.js
@@ -8,62 +8,30 @@
 
   OSM.Element = type => function () {
     const page = {};
-    let scrollStartObserver, scrollEndObserver;
 
     page.pushstate = page.popstate = function (path, id, version) {
       OSM.loadSidebarContent(path, function () {
-        initVersionsNavigation();
         page._addObject(type, id, version);
+        $(document).trigger("numbered_pagination:enable");
         abortController = new AbortController();
       });
     };
 
     page.load = function (path, id, version) {
-      initVersionsNavigation();
       page._addObject(type, id, version, true);
+      $(document).trigger("numbered_pagination:enable");
       abortController = new AbortController();
     };
 
     page.unload = function () {
       page._removeObject();
-      scrollStartObserver?.disconnect();
-      scrollStartObserver = null;
-      scrollEndObserver?.disconnect();
-      scrollEndObserver = null;
+      $(document).trigger("numbered_pagination:disable");
       abortController?.abort();
     };
 
     page._addObject = function () {};
     page._removeObject = function () {};
 
-    function initVersionsNavigation() {
-      $(document).trigger("numbered_pagination:center");
-
-      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;
   };
 
diff --git a/app/assets/javascripts/numbered_pagination.js b/app/assets/javascripts/numbered_pagination.js
index c78790199..973446220 100644
--- a/app/assets/javascripts/numbered_pagination.js
+++ b/app/assets/javascripts/numbered_pagination.js
@@ -1,10 +1,51 @@
 (function () {
+  let scrollStartObserver, scrollEndObserver;
+
+  function initVersionsNavigation() {
+    $(document).trigger("numbered_pagination:center");
+
+    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 });
+  }
+
   $(document).on("click", "a[href='#versions-navigation-active-page-item']", function (e) {
     $(document).trigger("numbered_pagination:center");
     $("#versions-navigation-active-page-item a.page-link").trigger("focus");
     e.preventDefault();
   });
 
+  $(document).on("numbered_pagination:enable", function () {
+    initVersionsNavigation();
+  });
+
+  $(document).on("numbered_pagination:disable", function () {
+    scrollStartObserver?.disconnect();
+    scrollStartObserver = null;
+    scrollEndObserver?.disconnect();
+    scrollEndObserver = null;
+  });
+
   $(document).on("numbered_pagination:center", function () {
     const [scrollableList] = $("#versions-navigation-list-middle");
 
-- 
2.39.5