Implement custom digital contents icon, tooltip, and alert

sul-dlss · May 10, 2024 · 3b375e7 · 3b375e7
1 parent 451a714
commit 3b375e7
Show file tree

Hide file tree

Showing 8 changed files with 98 additions and 6 deletions.
diff --git a/app/assets/stylesheets/palette.scss b/app/assets/stylesheets/palette.scss
@@ -27,3 +27,4 @@ $stanford-stone-light: #D4D1D1;
 $cyan-blue-light: #f8f9fa;
 $gray-light: #fafafa;
 $grey-lighter: #ededed;
+$green-white: #EBF5F1;
diff --git a/app/assets/stylesheets/sulCollection.scss b/app/assets/stylesheets/sulCollection.scss
@@ -17,7 +17,7 @@
   }
 
   .al-show-actions-box {
-    background-color: #EBF5F1;
+    background-color: $green-white;
   }
 
   .al-collection-context-actions .btn-sm {
@@ -104,7 +104,7 @@
 }
 
 .al-hierarchy-highlight > .documentHeader {
-  background-color: #EBF5F1;
+  background-color: $green-white;
 }
 
 #sidebar {
@@ -190,3 +190,39 @@ a.btn-outline-secondary:focus {
 .page-item.disabled .page-link {
   color: black;
 }
+
+.al-online-content-icon {
+  align-content: center;
+}
+
+// Digital contents icons, alerts
+// AL Core override
+.al-online-content-icon .blacklight-icons svg {
+  fill: $stanford-palo-alto-light;
+}
+
+.tooltip-inner {
+  background-color: $stanford-palo-alto-light;
+  color: white;
+}
+
+.tooltip.bs-tooltip-top .tooltip-arrow::before {
+  border-top-color: $stanford-palo-alto-light;
+}
+
+.title-container .online-contents h2 {
+  text-transform: none;
+  margin-bottom: 0;
+  align-content: center;
+  margin-left: 1rem;
+}
+
+.online-contents.card {
+  border: 0;
+  background-color: $green-white;
+  padding: 0;
+  .card-body {
+    padding: 0.25rem 0.25rem 0.25rem 1rem;
+    border-left: 8px solid $stanford-palo-alto-dark;
+  }
+}
diff --git a/app/components/arclight/online_content_filter_component.html.erb b/app/components/arclight/online_content_filter_component.html.erb
@@ -0,0 +1,16 @@
+<%# Overrides AL Core to use custom icon/tooltip and layout %>
+<div class="card online-contents">
+  <div class="card-body d-flex align-items-center">
+    <div class="d-flex">
+      <%= render Arclight::OnlineStatusIndicatorComponent.new(document: @document)  %>  
+      <h2 class="d-none d-lg-inline">
+        <span class="visually-hidden">Filter</span>
+        Digital content -
+      </h2>
+    </div>
+    <div class="ms-1">
+      <%= t('arclight.views.show.online_content.description') %>
+      <%= link_to t('arclight.views.show.online_content.link_text'), helpers.search_action_path(f: { collection: [collection_name], access: ['online'] }) %>
+    </div>
+  </div>
+</div>
diff --git a/app/components/arclight/online_status_indicator_component.html.erb b/app/components/arclight/online_status_indicator_component.html.erb
@@ -0,0 +1 @@
+<%=  icon_with_tooltip %>
diff --git a/app/components/arclight/online_status_indicator_component.rb b/app/components/arclight/online_status_indicator_component.rb
@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+# Overrides Arclight's OnlineStatusIndicatorComponent to replace with a custom template that includes our tooltip
+module Arclight
+  # Render an online status indicator for a document
+  class OnlineStatusIndicatorComponent < Blacklight::Component
+    def initialize(document:, **)
+      @document = document
+      super
+    end
+
+    def render?
+      @document.online_content?
+    end
+
+    def icon_with_tooltip
+      icon = <<~HTML
+        <span class="al-online-content-icon" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-html="true" data-bs-title="Includes digital content">
+            #{helpers.blacklight_icon(:online)}
+        </span>
+      HTML
+      icon.html_safe # rubocop:disable Rails/OutputSafety
+    end
+  end
+end
diff --git a/app/components/arclight/search_result_title_component.html.erb b/app/components/arclight/search_result_title_component.html.erb
@@ -1,4 +1,5 @@
-<%# This file overrides AL Core for more control over the extents display %>
+<%# This file overrides AL Core for more control over the extents display 
+    and to add the digital content icon %>
 <header class="documentHeader row" data-document-id="<%= @document.id %>">
   <h3 class="index_title document-title-heading col">
     <%= helpers.link_to_document @document, counter: @counter %>
@@ -10,10 +11,14 @@
     <div class="d-flex">
       <% @document.extent.each do |extent| %>
         <%= tag.span extent, class: 'al-document-extent badge mx-1' unless compact? %>
-      <% end %> 
+      <% end %>
+      <%= render Arclight::OnlineStatusIndicatorComponent.new(document: @document) %>
+
     </div>
+
   </h3>
 
+  <%# these are set in the catalog_controller by add_results_document_tool %>
   <% actions.each do |action| %>
     <%= action %>
   <% end %>

diff --git a/app/controllers/catalog_controller.rb b/app/controllers/catalog_controller.rb
@@ -50,7 +50,9 @@ class CatalogController < ApplicationController
 
     config.header_component = Arclight::HeaderComponent
     config.logo_link = 'https://library.stanford.edu'
-    config.add_results_document_tool(:online, component: Arclight::OnlineStatusIndicatorComponent)
+    # add_results_document_tool effectively creates an Blacklight action
+    # Then actions are interated over in search_results_document_component.html.erb
+    # See https://github.com/projectblacklight/blacklight/blob/6c6a72066a6330a815603e839b316958f6321dd7/lib/blacklight/configuration.rb#L560
     config.add_results_document_tool(:arclight_bookmark_control, component: Arclight::BookmarkComponent)
 
     config.add_results_collection_tool(:group_toggle)

diff --git a/app/javascript/application.js b/app/javascript/application.js
@@ -5,4 +5,10 @@ import bootstrap from "bootstrap"
 import githubAutoCompleteElement from "@github/auto-complete-element"
 import Blacklight from "blacklight"
 
-import "arclight"
+import "arclight"
+
+Blacklight.onLoad(() => {
+    // Initialize Bootstrap tooltips
+    const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
+    const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
+})