From 019d2524463df8dee72aadd0d64b3601a5d0cf86 Mon Sep 17 00:00:00 2001
From: Yassine Guedidi <yassine@guedidi.com>
Date: Sun, 2 Mar 2025 12:59:15 +0100
Subject: [PATCH] Extract Scroll Indicator controller

---
 assets/controllers/scroll_indicator_controller.js | 10 ++++++++++
 assets/index.js                                   | 14 --------------
 templates/Entry/entry.html.twig                   |  2 +-
 3 files changed, 11 insertions(+), 15 deletions(-)
 create mode 100644 assets/controllers/scroll_indicator_controller.js

diff --git a/assets/controllers/scroll_indicator_controller.js b/assets/controllers/scroll_indicator_controller.js
new file mode 100644
index 000000000..1fab9b4ed
--- /dev/null
+++ b/assets/controllers/scroll_indicator_controller.js
@@ -0,0 +1,10 @@
+import { Controller } from '@hotwired/stimulus';
+
+export default class extends Controller {
+  updateWidth() {
+    const referenceHeight = document.body.offsetHeight - window.innerHeight;
+    const scrollPercent = (window.scrollY / referenceHeight) * 100;
+
+    this.element.style.width = `${scrollPercent}%`;
+  }
+}
diff --git a/assets/index.js b/assets/index.js
index 99234c625..2bc2e517f 100755
--- a/assets/index.js
+++ b/assets/index.js
@@ -242,22 +242,8 @@ const stickyNav = () => {
   });
 };
 
-const articleScroll = () => {
-  const articleEl = $('#article');
-  if (articleEl.length > 0) {
-    $(window).scroll(() => {
-      const s = $(window).scrollTop();
-      const d = $(document).height();
-      const c = $(window).height();
-      const scrollPercent = (s / (d - c)) * 100;
-      $('.progress .determinate').css('width', `${scrollPercent}%`);
-    });
-  }
-};
-
 $(document).ready(() => {
   stickyNav();
-  articleScroll();
   initPreviewText();
 
   const toggleNav = (toShow, toFocus) => {
diff --git a/templates/Entry/entry.html.twig b/templates/Entry/entry.html.twig
index 70705d429..a2d184c57 100644
--- a/templates/Entry/entry.html.twig
+++ b/templates/Entry/entry.html.twig
@@ -8,7 +8,7 @@
 
 {% block menu %}
     <div class="progress">
-        <div class="determinate"></div>
+        <div class="determinate" data-controller="scroll-indicator" data-action="scroll@window->scroll-indicator#updateWidth"></div>
     </div>
     <nav class="hide-on-large-only js-entry-nav-top">
         <div class="nav-panel-item cyan darken-1">