Highlight the collection context link when it is active

Fixes #1280
projectblacklight · Nov 22, 2022 · d367d74 · d367d74
1 parent 20aa68e
commit d367d74
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 6 deletions.
diff --git a/app/assets/javascripts/arclight/arclight.js b/app/assets/javascripts/arclight/arclight.js
@@ -1,4 +1,15 @@
 import 'arclight/oembed_viewer'
 
 import Truncate from 'arclight/truncate_controller'
+import CollectionLink from 'arclight/collection_link_controller'
+
+// window.addEventListener('hashchange', (event) => {
+//   document.querySelectorAll('[data-controller="arclight-collection-link"]').forEach((elem) => {
+//     const event = new CustomEvent("update-map")
+
+//   })
+// })
+
+
 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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