From 84ae4db9d83d441def9e539f5c523a202c08fc4d 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..75997b023 --- /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..0c81aed3f 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