From 91d43bf4bd4f35d13bf7ac48a44dbaab45b821c0 Mon Sep 17 00:00:00 2001
From: Justin Coyne <jcoyne@justincoyne.com>
Date: Tue, 22 Nov 2022 15:31:57 -0600
Subject: [PATCH] Highlight the collection context link when it is active

Fixes #1280
---
 app/assets/javascripts/arclight/arclight.js         |  3 +++
 .../arclight/collection_link_controller.js          | 13 +++++++++++++
 .../modules/hierarchy_and_online_contents.scss      |  3 ++-
 .../arclight/collection_sidebar_component.html.erb  |  4 ++--
 lib/arclight/engine.rb                              |  8 +++++---
 lib/generators/arclight/install_generator.rb        |  1 +
 6 files changed, 26 insertions(+), 6 deletions(-)
 create mode 100644 app/assets/javascripts/arclight/collection_link_controller.js

diff --git a/app/assets/javascripts/arclight/arclight.js b/app/assets/javascripts/arclight/arclight.js
index cff882a0e..95c7a7290 100644
--- a/app/assets/javascripts/arclight/arclight.js
+++ b/app/assets/javascripts/arclight/arclight.js
@@ -1,4 +1,7 @@
 import 'arclight/oembed_viewer'
 
 import Truncate from 'arclight/truncate_controller'
+import CollectionLink from 'arclight/collection_link_controller'
+
 Stimulus.register('arclight-truncate', Truncate)
+Stimulus.register('arclight-collection-link', CollectionLink)
diff --git a/app/assets/javascripts/arclight/collection_link_controller.js b/app/assets/javascripts/arclight/collection_link_controller.js
new file mode 100644
index 000000000..e9bec50d9
--- /dev/null
+++ b/app/assets/javascripts/arclight/collection_link_controller.js
@@ -0,0 +1,13 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static targets = ['link']
+
+  connect() {
+    this.highlight({ newURL: document.documentURI })
+  }
+
+  highlight(event) {
+    this.linkTarget.classList.toggle('active', event.newURL.endsWith(this.linkTarget.href))
+  }
+}
diff --git a/app/assets/stylesheets/arclight/modules/hierarchy_and_online_contents.scss b/app/assets/stylesheets/arclight/modules/hierarchy_and_online_contents.scss
index f73c747e3..d6084d12f 100644
--- a/app/assets/stylesheets/arclight/modules/hierarchy_and_online_contents.scss
+++ b/app/assets/stylesheets/arclight/modules/hierarchy_and_online_contents.scss
@@ -22,7 +22,8 @@ $hierarchy-view-collapse-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3
   }
 }
 
-.al-hierarchy-highlight > .documentHeader {
+.al-hierarchy-highlight > .documentHeader,
+.al-sidebar-navigation-context .active {
   background: $mark-bg;
 }
 
diff --git a/app/components/arclight/collection_sidebar_component.html.erb b/app/components/arclight/collection_sidebar_component.html.erb
index 4b46a8d4d..df314471c 100644
--- a/app/components/arclight/collection_sidebar_component.html.erb
+++ b/app/components/arclight/collection_sidebar_component.html.erb
@@ -3,11 +3,11 @@
   <ul class='nav flex-column'>
     <% partials.each do |section| %>
       <% next unless has_section?(section) %>
-      <li class='nav-item'>
+      <li class='nav-item' data-controller="arclight-collection-link" data-action="hashchange@window->arclight-collection-link#highlight">
         <%= link_to section_label(section),
           document_section_path(section),
           class: 'nav-link pl-0 ps-0 py-1',
-          data: { turbolinks: 'false' }
+          data: { arclight_collection_link_target: 'link' }
         %>
       </li>
     <% end %>
diff --git a/lib/arclight/engine.rb b/lib/arclight/engine.rb
index 5ebbfe965..29c628afb 100644
--- a/lib/arclight/engine.rb
+++ b/lib/arclight/engine.rb
@@ -35,9 +35,11 @@ class Engine < ::Rails::Engine
     end
 
     initializer 'arclight.assets', before: 'assets' do |app|
-      app.config.assets.precompile << 'arclight/arclight.js'
-      app.config.assets.precompile << 'arclight/oembed_viewer.js'
-      app.config.assets.precompile << 'arclight/truncate_controller.js'
+      # rubocop:disable Lint/ConstantDefinitionInBlock
+      PRECOMPILE_ASSETS = %w[arclight/arclight.js arclight/oembed_viewer.js arclight/truncate_controller.js arclight/collection_link_controller.js].freeze
+      # rubocop:enable Lint/ConstantDefinitionInBlock
+
+      app.config.assets.precompile += PRECOMPILE_ASSETS
     end
 
     initializer 'arclight.importmap', before: 'importmap' do |app|
diff --git a/lib/generators/arclight/install_generator.rb b/lib/generators/arclight/install_generator.rb
index b46289c5e..0c32b1f12 100644
--- a/lib/generators/arclight/install_generator.rb
+++ b/lib/generators/arclight/install_generator.rb
@@ -116,6 +116,7 @@ def pin_javascript_dependencies
         # TODO: We may be able to move these to a single importmap for arclight.
         pin "arclight/oembed_viewer", to: "arclight/oembed_viewer.js"
         pin "arclight/truncate_controller", to: "arclight/truncate_controller.js"
+        pin "arclight/collection_link_controller", to: "arclight/collection_link_controller.js"
       RUBY
     end