From 9db3d6d0530af36f4155f49f3f4be47ead8f7562 Mon Sep 17 00:00:00 2001
From: Anton Khorev <tony29@yandex.ru>
Date: Fri, 8 Aug 2025 17:53:29 +0300
Subject: [PATCH] Create shadow effect class

---
 app/assets/javascripts/numbered_pagination.js | 58 ++++++++++---------
 1 file changed, 31 insertions(+), 27 deletions(-)

diff --git a/app/assets/javascripts/numbered_pagination.js b/app/assets/javascripts/numbered_pagination.js
index 973446220..8701cb4c4 100644
--- a/app/assets/javascripts/numbered_pagination.js
+++ b/app/assets/javascripts/numbered_pagination.js
@@ -1,32 +1,37 @@
 (function () {
-  let scrollStartObserver, scrollEndObserver;
+  let shadowEffect;
 
-  function initVersionsNavigation() {
-    $(document).trigger("numbered_pagination:center");
+  class ShadowEffect {
+    constructor() {
+      const $scrollableList = $("#versions-navigation-list-middle");
+      const [scrollableFirstItem] = $scrollableList.children().first();
+      const [scrollableLastItem] = $scrollableList.children().last();
 
-    const $scrollableList = $("#versions-navigation-list-middle");
-    const [scrollableFirstItem] = $scrollableList.children().first();
-    const [scrollableLastItem] = $scrollableList.children().last();
+      if (scrollableFirstItem) {
+        this.scrollStartObserver = createScrollObserver("#versions-navigation-list-start", "2px 0px");
+        this.scrollStartObserver.observe(scrollableFirstItem);
+      }
 
-    if (scrollableFirstItem) {
-      scrollStartObserver = createScrollObserver("#versions-navigation-list-start", "2px 0px");
-      scrollStartObserver.observe(scrollableFirstItem);
-    }
+      if (scrollableLastItem) {
+        this.scrollEndObserver = createScrollObserver("#versions-navigation-list-end", "-2px 0px");
+        this.scrollEndObserver.observe(scrollableLastItem);
+      }
 
-    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 });
+      }
     }
-  }
 
-  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 });
+    disable() {
+      this.scrollStartObserver?.disconnect();
+      this.scrollEndObserver?.disconnect();
+    }
   }
 
   $(document).on("click", "a[href='#versions-navigation-active-page-item']", function (e) {
@@ -36,14 +41,13 @@
   });
 
   $(document).on("numbered_pagination:enable", function () {
-    initVersionsNavigation();
+    shadowEffect = new ShadowEffect();
+    $(document).trigger("numbered_pagination:center");
   });
 
   $(document).on("numbered_pagination:disable", function () {
-    scrollStartObserver?.disconnect();
-    scrollStartObserver = null;
-    scrollEndObserver?.disconnect();
-    scrollEndObserver = null;
+    shadowEffect?.disable();
+    shadowEffect = null;
   });
 
   $(document).on("numbered_pagination:center", function () {
-- 
2.39.5