Highlight the collection context link when it is active

Fixes #1280

Author: jcoyne

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)

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))
+  }
+}

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;
 }
 

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 %>

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|

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