Implement current page controller to update active state of nav links

Author: rossta

app/javascript/controllers/current-page.js

@@ -0,0 +1,51 @@
+import { Controller } from '@hotwired/stimulus';
+
+import { debug } from '../utils';
+
+const console = debug('app:javascript:controllers:current-page');
+
+export default class extends Controller {
+  connect() {
+    console.log('Connected');
+
+    this.updateActiveLink();
+    this.updateSelectedOption();
+    this.updateActiveLink = this.updateActiveLink.bind(this);
+
+    window.addEventListener('turbo:before-render', this.updateActiveLink);
+    window.addEventListener('turbo:before-frame-render', this.updateActiveLink);
+  }
+
+  disconnect() {
+    window.removeEventListener('turbo:before-render', this.updateActiveLink);
+    window.removeEventListener(
+      'turbo:before-frame-render',
+      this.updateActiveLink,
+    );
+  }
+
+  updateActiveLink(event) {
+    console.log('updateActiveLink');
+    this.element.querySelectorAll('a').forEach((link) => {
+      if (link.getAttribute('href') === this.currentUrl) {
+        link.classList.add('active');
+        link.closest('li').classList.add('active');
+      } else {
+        link.classList.remove('active');
+        link.closest('li').classList.remove('active');
+      }
+    });
+  }
+
+  updateSelectedOption() {
+    this.element.querySelectorAll('option').forEach((option) => {
+      if (option.getAttribute('value') === this.currentUrl) {
+        option.selected = true;
+      }
+    });
+  }
+
+  get currentUrl() {
+    return window.location.pathname;
+  }
+}

app/javascript/controllers/index.js

@@ -5,6 +5,7 @@
 import { application } from './application';
 
 import ClipboardCopy from './clipboard-copy';
+import CurrentPage from './current-page';
 import Darkmode from './darkmode';
 import Flash from './flash';
 import ModalOpener from './modal-opener';
@@ -31,16 +32,19 @@ import SnippetTweet from './snippets/tweet';
 import SearchCombobox from './searches/combobox';
 import SearchListbox from './searches/listbox';
 
-application.register('modal-opener', ModalOpener);
-application.register('analytics', AnalyticsCustomEvent);
 application.register('clipboard-copy', ClipboardCopy);
+application.register('current-page', CurrentPage);
 application.register('darkmode', Darkmode);
 application.register('flash', Flash);
+application.register('modal-opener', ModalOpener);
+
 application.register('dialog', Dialog);
 
 application.register('pwa-installation', PwaInstallation);
 application.register('pwa-web-push-subscription', PwaWebPushSubscription);
 application.register('pwa-web-push-demo', PwaWebPushDemo);
+
+application.register('analytics', AnalyticsCustomEvent);
 application.register('table-of-contents', TableOfContents);
 
 application.register('frame-form', FrameForm);

app/views/topics/nav.rb

@@ -24,7 +24,7 @@ def topics_select
         select(
           name: "topic",
           data: {
-            :controller => "select-nav",
+            :controller => "select-nav current-page",
             :action => "select-nav#visit",
             "select-nav-turbo-frame-value" => "topics-mainbar"
           }
@@ -43,20 +43,27 @@ def topics_select
     end
 
     def topics_list
-      topics.each do |topic|
-        div id: dom_id(topic), class: "text-small mb-2 hidden lg:block" do
-          a(
-            href: topic_path(topic),
-            data: {
-              turbo_frame: "topics-mainbar"
-            }
+      ul(data: {controller: "current-page"}) do
+        topics.each do |topic|
+          li(
+            id: dom_id(topic),
+            class: [
+              "text-small p-1 hidden lg:block"
+            ]
           ) do
-            topic.name
-          end
+            a(
+              href: topic_path(topic),
+              data: {
+                turbo_frame: "topics-mainbar"
+              }
+            ) do
+              topic.name
+            end
 
-          whitespace
-          span(class: "text-faint") do
-            plain "(#{topic.pages_count})"
+            whitespace
+            span(class: "text-faint") do
+              plain "(#{topic.pages_count})"
+            end
           end
         end
       end