blacklight-spotlight 5.3.2 → 6.0.0.rc2

data/app/assets/stylesheets/spotlight/_blacklight_overrides.scss

@@ -11,3 +11,7 @@
     font-size: $font-size-sm;
   }
 }
+
+.btn .blacklight-icons {
+  fill: var(--bs-btn-color);
+}

data/app/assets/stylesheets/spotlight/_browse.scss

@@ -155,8 +155,4 @@ $image-overlay-max-height: 300px;
       z-index: 30;
     }
   }
-
-  .browse-search-expand {
-    text-align: center;
-  }
 }

data/app/assets/stylesheets/spotlight/{_collapse_toggle.scss → _collapse_toggle.css}

@@ -1,5 +1,5 @@
-// Rotate collapse-chevron element (has a ❯ in it)
-// with the previous siblings collapsed status
+/* Rotate collapse-chevron element (has a ❯ in it)
+with the previous siblings collapsed status */
 .btn.collapse-toggle {
   & + .collapse-chevron {
     display: inline-block;

data/app/assets/stylesheets/spotlight/_exhibit_admin.scss

@@ -90,3 +90,11 @@
 .leaflet-top, .leaflet-bottom {
   z-index: 950;
 }
+
+.export-config-enabled {
+  fill: green;
+}
+
+.export-config-disabled {
+  fill: red;
+}

data/app/assets/stylesheets/spotlight/_exhibits_index.scss

@@ -4,7 +4,8 @@ $exhibit-card-overlay-padding: $card-img-overlay-padding * 0.5 !default;
   overflow-y: hidden;
   padding-bottom: 3rem;
 
-  .unpublished {
+  .unpublished,
+  .previewable {
     @extend .mx-auto;
     display: block;
     font-size: $font-size-sm;

data/app/assets/stylesheets/spotlight/_footer.scss

@@ -1,12 +1,12 @@
 .site-footer {
   background-color: $gray-700;
   color: $gray-600;
-  margin-top: $footer-top-margin;
+  margin-top: var(--footer-top-margin);
   padding: 10px;
 
   // Styles below keep footer at bottom of viewport
   position: absolute;
   bottom: 0;
-  height: $footer-height;
+  height: var(--footer-height);
   width: 100%;
 }

data/app/assets/stylesheets/spotlight/_header.scss

@@ -12,7 +12,7 @@
 }
 
 .masthead {
-  background-color: $masthead-bg;
+  background-color: var(--masthead-bg);
   border-bottom: 1px solid $border-color;
   margin-bottom: $spacer * 1.5;
   padding: 0;
@@ -42,7 +42,7 @@
   }
 
   .navbar {
-    border-bottom: 1px solid $navbar-transparent-border;
+    border-bottom: 1px solid var(--navbar-transparent-border);
     border-top: 0;
     margin-bottom: 0;
   }
@@ -60,7 +60,7 @@
   @extend .px-4;
   @extend .py-2;
 
-  max-height: $masthead-height - $navbar-brand-height;
+  max-height: calc(var(--masthead-height) - (1.25rem * var(--bs-body-line-height)));
 }
 
 .image-masthead {
@@ -68,7 +68,7 @@
 
   .exhibit-navbar {
     @extend .navbar-dark;
-    background-color: $navbar-transparent-page-bg;
+    background-color: var(--navbar-transparent-page-bg);
 
     .navbar-nav {
       text-transform: uppercase;
@@ -100,14 +100,14 @@
 
     // Add small amount of blur to help text stand out
     //filter: url(masthead/blur.svg#blur); // for older versions of FF
-    -webkit-filter: blur($masthead-image-blur);
-    filter: blur($masthead-image-blur);
+    -webkit-filter: blur(var(--masthead-image-blur));
+    filter: blur(var(--masthead-image-blur));
 
     height: 100%;
 
     // Shift image slightly to hide blurred edge of image
-    margin-left: -$masthead-image-blur;
-    margin-top: -$masthead-image-blur;
+    margin-left: calc(-1 * var(--masthead-image-blur));
+    margin-top: calc(-1 * var(--masthead-image-blur));
     overflow: hidden;
   }
 

data/app/assets/stylesheets/spotlight/_pages.scss

@@ -198,7 +198,7 @@
 .empty-page-block {
   @extend .alert;
   @extend .alert-info;
-  margin-top: $spacer;
+
   h2 {
     margin-top: 0;
   }

data/app/assets/stylesheets/spotlight/_slideshow_block.scss

@@ -1,5 +1,20 @@
 .carousel-block {
 
+  .carousel-pause-play {
+    position: absolute;
+    top: $spacer * .5;
+    right: $spacer * .5;
+    z-index: 3; // above .carousel-control-prev/next and .carousel-indicators
+    display: inline-flex;
+    align-items: center;
+    padding: $spacer * .25;
+    opacity: .8;
+
+    &:hover, &:focus {
+      opacity: 1;
+    }
+  }
+
   .carousel-inner > .carousel-item > a > img {
     // center and fill the image
     margin-left: auto;

data/app/assets/stylesheets/spotlight/_spotlight.scss

@@ -43,5 +43,5 @@ html {
   min-height: 100%;
 }
 body {
-  margin-bottom: $footer-height + $footer-top-margin;
+  margin-bottom: calc(var(--footer-height) + var(--footer-top-margin));
 }

data/app/assets/stylesheets/spotlight/_translations.scss

@@ -1,6 +1,6 @@
 .translation-edit-form {
   .translation-complete {
-    svg { fill: $translation-available-color }
+    svg { fill: var(--translation-available-color) }
   }
 
   .browse-category-title {
@@ -51,11 +51,11 @@
 }
 
 .panel-translation {
-  background-color: $translation-panel-bg;
+  background-color: var(--translation-panel-bg);
   padding-bottom: 0;
 
   .form-text {
-    color: $translation-help-color;
+    color: var(--translation-help-color);
     padding-left: 12px;
   }
 }

data/app/assets/stylesheets/spotlight/_uploaded_items_block.css

@@ -0,0 +1,7 @@
+[data-type='uploaded_items'] {
+  /* SirTrevor's Uploadable mixin adds a
+  styled div that we need to remove */
+  .st-block__inputs {
+    display: none;
+  }
+}

data/app/assets/stylesheets/spotlight/_variables.css

@@ -0,0 +1,15 @@
+:root {
+  --footer-top-margin: 3rem;
+  --footer-height: 7.5rem;
+
+  --masthead-bg: var(--bs-body-bg);
+  --masthead-height: 11.25rem;
+  --masthead-image-blur: 1px;
+  --navbar-transparent-border: var(--bs-gray-500);
+  --navbar-transparent-page-bg: rgba(0, 0, 0, 0.5);
+
+  /* Translations */
+  --translation-available-color: #80bf77;
+  --translation-panel-bg: #f5f5f5;
+  --translation-help-color: #555;
+}

data/app/assets/stylesheets/spotlight/browse_group_categories_block.scss

@@ -1,80 +1,4 @@
-@import "../../../../vendor/assets/stylesheets/tiny-slider";
-
 .browse-group-categories-block {
   padding-bottom: $spacer * .75;
   padding-top: $spacer * .75;
-  
-  .browse-categories .browse-category {
-    .category-caption {
-      z-index: 100;
-    }
-  }
-  
-  .spotlight-flexbox.browse-categories .box {
-    display: flex;
-  }
-
-  .browse-group-categories-controls {
-    list-style: none;
-    li {
-      display: inline-block;
-      cursor: pointer;
-    }
-
-    .blacklight-icons-arrow-alt-circle-left, .blacklight-icons-arrow-alt-circle-right {
-      display: inline-block;
-      fill: $gray-600;
-      height: 44px;
-      width: 44px;
-      
-      &:hover,&:focus {
-        fill: $gray-700;
-      }
-    }
-
-    li[aria-disabled="true"] {
-      cursor: auto;
-    }
-
-    [aria-disabled="true"] {
-      .blacklight-icons-arrow-alt-circle-left, .blacklight-icons-arrow-alt-circle-right {
-        fill: $gray-400;
-
-        &:hover,&:focus {
-          fill: $gray-400;
-        }
-      }
-    }
-  }
-
-  // Coming from tiny-slider, make sure these disappear when navigating via turbolinks
-  .tns-controls {
-    display: none;
-  }
-
-  @media screen and (min-width: breakpoint-min("md")) {
-    .browse-group-categories-controls {
-      .blacklight-icons-arrow-alt-circle-left, .blacklight-icons-arrow-alt-circle-right {
-        height: 32px;
-        width: 32px;
-      }
-    }
-
-    &[data-browse-group-categories-count="2"],&[data-browse-group-categories-count="3"] {
-      .browse-group-categories-controls {
-        display: none !important;
-      }
-    }
-  }
-}
-
-[dir="rtl"] {
-  .browse-group-categories-block .blacklight-icons-arrow-alt-circle-left, .blacklight-icons-arrow-alt-circle-right{
-    transform: rotate(180deg);
-  }
-  // Hack to override overflow issue not fixed in RTL upstream in tiny-slider
-  .tns-visually-hidden {
-    left: 0;
-    right: -10000em;
-  }
 }

data/app/components/blacklight/icons/pause_component.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module Blacklight
+  module Icons
+    # Icon for Pause
+    class PauseComponent < Blacklight::Icons::IconComponent
+      self.svg = <<~SVG
+        <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="currentColor">
+          <path d="M0 0h24v24H0z" fill="none"/>
+          <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/>
+        </svg>
+      SVG
+    end
+  end
+end

data/app/components/blacklight/icons/play_arrow_component.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module Blacklight
+  module Icons
+    # Icon for PlayArrow
+    class PlayArrowComponent < Blacklight::Icons::IconComponent
+      self.svg = <<~SVG
+        <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24" fill="currentColor">
+          <path d="M0 0h24v24H0z" fill="none"/>
+          <path d="M8 5v14l11-7z"/>
+        </svg>
+      SVG
+    end
+  end
+end

data/app/components/spotlight/analytics/dashboard_component.html.erb

@@ -24,7 +24,7 @@
   <%= render Spotlight::Analytics::AggregationComponent.new(data: search_analytics.totals, exclude_fields: [:eventCount] ) %>
 
   <% unless page_analytics.rows.empty? %>
-    <h3 class="h5 mt-4"><%= I18n.t("spotlight.dashboards.analytics.pages.header") %></h4>
+    <h3 class="h5 mt-4"><%= I18n.t("spotlight.dashboards.analytics.pages.header") %></h3>
     <table class="table table-striped popular-pages">
       <thead>
         <tr>

data/app/components/spotlight/custom_field_form_group_component.rb

@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+module Spotlight
+  # Renders an exhibit custom field on the catalog edit and upload forms through its configured component
+  class CustomFieldFormGroupComponent < ViewComponent::Base
+    attr_reader :form, :field, :value, :inline
+
+    def initialize(form:, field:, value: nil, inline: false)
+      @form = form
+      @field = field
+      @value = value
+      @inline = inline
+      super()
+    end
+
+    def call
+      return render_deprecated_partial if deprecated_partial?
+
+      render field.component.new(form:, id: field.slug, label: field.label, value:, field_type: field.form_field_type,
+                                 multiple: field.is_multiple?, readonly: field.readonly_field?, inline:)
+    end
+
+    private
+
+    # Applications could previously customize custom field inputs by overriding these partials
+    def deprecated_partial
+      "spotlight/custom_fields/form_group/#{field.field_type}"
+    end
+
+    def deprecated_partial?
+      helpers.lookup_context.exists?(deprecated_partial, [], true)
+    end
+
+    def render_deprecated_partial
+      Spotlight.deprecator.warn "Rendering deprecated partial #{deprecated_partial}. " \
+                                'Configure a component in Spotlight::Engine.config.custom_field_types instead'
+      render(partial: deprecated_partial, locals: { inline:, f: form, field:, value: })
+    end
+  end
+end

data/app/components/spotlight/document_admin_table_component.html.erb

@@ -15,9 +15,9 @@
     <td>
       <%# header bar for doc items in index view -%>
       <div class="documentHeader row" data-label-toggle="<%= @document.id %>">
-        <h5 class="index_title col-md-12">
+        <h3 class="index_title col-md-12 h5">
           <%= helpers.link_to_document(presenter.document, itemprop: 'name') %>
-        </h5>
+        </h3>
       </div>
 
       <div class="page-links">

data/app/components/spotlight/edit_sidecar_component.html.erb

@@ -0,0 +1,18 @@
+<%= form.fields_for :sidecar, sidecar do |c| %>
+  <%= c.fields_for :data do |d| %>
+    <% if document.uploaded_resource? %>
+      <%= d.fields_for :configured_fields do |e| %>
+        <% upload_fields.each do |config| %>
+          <%= render Spotlight::UploadFieldFormGroupComponent.new(form: e, config:, value: upload_field_value(config)) %>
+        <% end %>
+      <% end %>
+    <% end %>
+
+    <% custom_fields.each do |field| %>
+      <%= render Spotlight::CustomFieldFormGroupComponent.new(form: d, field:, value: custom_field_value(field)) %>
+      <% unless field.configured_to_display? %>
+        <p class="bg-warning form-text"><%= blank_field_warning %></p>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/components/spotlight/edit_sidecar_component.rb

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+module Spotlight
+  # Renders the sidecar (exhibit-specific metadata) fields on the catalog edit form
+  class EditSidecarComponent < ViewComponent::Base
+    attr_reader :form, :document, :exhibit
+
+    def initialize(form:, document:, exhibit:)
+      @form = form
+      @document = document
+      @exhibit = exhibit
+      super()
+    end
+
+    def upload_fields
+      Spotlight::Resources::Upload.fields(exhibit)
+    end
+
+    def sidecar
+      @sidecar ||= document.sidecar(exhibit)
+    end
+
+    # Using `includes(:exhibit)` to ensure all fields are using the same exhibit object to take advantage of memoization
+    def custom_fields
+      exhibit.custom_fields.includes(:exhibit)
+    end
+
+    def upload_field_value(config)
+      (sidecar.data['configured_fields'] || {})[config.field_name.to_s]
+    end
+
+    def custom_field_value(field)
+      sidecar.data[field.slug.to_s] || sidecar.data[field.field.to_s]
+    end
+
+    def blank_field_warning
+      t('spotlight.catalog.edit_sidecar.blank_field_warning_html',
+        link: link_to(t('spotlight.configuration.sidebar.metadata'), helpers.spotlight.edit_exhibit_metadata_configuration_path(exhibit)))
+    end
+  end
+end

data/app/components/spotlight/masthead_component.html.erb

@@ -0,0 +1,18 @@
+<% if show_contact_form? %>
+  <div id="report-problem-form"  class="collapse">
+    <%= render 'spotlight/shared/report_a_problem' %>
+  </div>
+<% end %>
+
+<header class="masthead <%= 'image-masthead' if current_masthead %> <%= 'resource-masthead' if resource_masthead? %>">
+  <% if current_masthead %>
+    <span class="background-container" style="background-image: url('<%= current_masthead.iiif_url %>')"></span>
+    <span class="background-container-gradient"></span>
+  <% end %>
+
+  <%= masthead_navbar if resource_masthead? %>
+  <%= title_and_subtitle %>
+  <%= masthead_navbar unless resource_masthead? %>
+</header>
+
+<%= render Spotlight::BreadcrumbsComponent.new(breadcrumbs:) %>

data/app/components/spotlight/masthead_component.rb

@@ -0,0 +1,46 @@
+# frozen_string_literal: true
+
+module Spotlight
+  # Draws the masthead
+  class MastheadComponent < ViewComponent::Base
+    def initialize(current_exhibit:, current_masthead:, resource_masthead:)
+      @current_exhibit = current_exhibit
+      @current_masthead = current_masthead
+      @resource_masthead = resource_masthead
+      super()
+    end
+
+    attr_reader :current_exhibit, :current_masthead
+
+    delegate :breadcrumbs, :masthead_heading_content, :masthead_subheading_content, to: :helpers
+
+    def resource_masthead?
+      @resource_masthead
+    end
+
+    def show_contact_form?
+      helpers.show_contact_form? &&
+        (current_exhibit.nil? || !helpers.current_page?(helpers.spotlight.new_exhibit_contact_form_path(current_exhibit)))
+    end
+
+    def masthead_navbar
+      if current_exhibit
+        render helpers.blacklight_config.exhibit_navbar_component.new
+      else
+        render 'shared/site_navbar'
+      end
+    end
+
+    def title
+      content_for(:masthead) || masthead_heading_content
+    end
+
+    def title_and_subtitle
+      render title_component.new(title:, subtitle: masthead_subheading_content)
+    end
+
+    def title_component
+      Spotlight::Engine.config.spotlight.title_component
+    end
+  end
+end

data/app/components/spotlight/save_search_component.html.erb

@@ -1,7 +1,7 @@
 <%= button %>
 <div class="modal fade" id="save-modal" tabindex="-1" role="dialog" aria-labelledby="save-modal-label" aria-hidden="true">
   <div class="modal-dialog">
-  <%= bootstrap_form_for form_path, html: { novalidate: true } do |f| %>
+  <%= helpers.bootstrap_form_for form_path, html: { novalidate: true } do |f| %>
     <div class="modal-content">
       <div class="modal-header">
         <h4 class="modal-title" id="save-modal-label"><%= t(:'spotlight.saved_search.label') %></h4>

data/app/components/spotlight/sidecar_form_field_component.html.erb

@@ -0,0 +1,18 @@
+<%= tag.div class: wrapper_class do %>
+  <% value_list.each_with_index do |v, index| %>
+    <%= form.label field_id, label, namespace: "f#{index}", class: label_class(hidden: index.positive?) %>
+    <%= tag.div class: value_wrapper_class(first: index.zero?) do %>
+      <%= render_input(value: v, namespace: "f#{index}") %>
+    <% end %>
+  <% end %>
+
+  <% if multiple && !readonly %>
+    <%= content_tag :template, id: template_id do %>
+      <%= form.label field_id, label, class: label_class(hidden: true) %>
+      <%= tag.div class: value_wrapper_class(first: false) do %>
+        <%= render_input %>
+      <% end %>
+    <% end %>
+    <%= content_tag :button, t('helpers.action.add_another'), class: 'btn btn-info btn-sm col-auto h-100', data: { action: 'add-another', template_id: template_id } %>
+  <% end %>
+<% end %>

data/app/components/spotlight/sidecar_form_field_component.rb

@@ -0,0 +1,71 @@
+# frozen_string_literal: true
+
+module Spotlight
+  # Allow for mulivalued field entry on catalog edit and upload forms
+  class SidecarFormFieldComponent < ViewComponent::Base
+    attr_reader :form, :field_id, :label, :value_list, :multiple, :readonly, :inline
+
+    # rubocop:disable Metrics/ParameterLists
+    def initialize(form:, id:, label:, value: nil, field_type: 'text_field', multiple: false, readonly: false, inline: false)
+      super()
+      @form = form
+      @field_id = id
+      @label = label
+      @value_list = Array(value || '')
+      @field_type = field_type.to_s
+      @multiple = multiple
+      @readonly = readonly
+      @inline = inline
+    end
+    # rubocop:enable Metrics/ParameterLists
+
+    def render_input(value: nil, namespace: nil)
+      options = { value: value, class: "form-control field-#{field_id}" }
+
+      # Add multiple to options only if multiple is true
+      options[:multiple] = true if multiple
+      # Add readonly to options only if readonly is true
+      options[:readonly] = true if readonly
+      # Add namespace to options only if namespace is present
+      options[:namespace] = namespace if namespace.present?
+
+      form.send("#{@field_type}_without_bootstrap", field_id, **options)
+    end
+
+    def template_id
+      "spotlight-field-template-#{field_id}"
+    end
+
+    # add_another.js finds the field's existing values through the .form-group wrapper
+    def wrapper_class
+      inline ? 'form-group mb-3 row gy-2' : 'form-group mb-3'
+    end
+
+    def label_class(hidden: false)
+      classes = inline ? ['col-form-label', label_col] : ['form-label']
+      classes << 'visually-hidden' if hidden
+      classes.join(' ')
+    end
+
+    # In a horizontal form only the first input sits beside the label, so later inputs are offset to line up under it
+    def value_wrapper_class(first:)
+      if inline
+        first ? control_col : "#{offset_col} #{control_col}"
+      elsif multiple
+        'mb-2'
+      end
+    end
+
+    def label_col
+      form&.label_col
+    end
+
+    def control_col
+      form&.control_col
+    end
+
+    def offset_col
+      label_col.sub('col', 'offset')
+    end
+  end
+end

data/app/components/spotlight/solr_document_legacy_embed_component.html.erb

@@ -1,9 +1,5 @@
 <% if body.present? %>
   <%= body %>
-<% elsif partials? %>
-  <% partials.each do |partial| %>
-    <%= partial %>
-  <% end %>
 <% elsif embed? %>
   <%= embed %>
 <% elsif thumbnail? %>

data/app/components/spotlight/solr_document_legacy_embed_component.rb

@@ -5,8 +5,8 @@ module Spotlight
   class SolrDocumentLegacyEmbedComponent < Blacklight::DocumentComponent
     attr_reader :block_context
 
-    def initialize(*args, block: nil, **kwargs)
-      super(*args, **kwargs)
+    def initialize(*, block: nil, **)
+      super(*, **)
 
       @block_context = block
     end

data/app/components/spotlight/tag_selector_component.html.erb

@@ -1,6 +1,6 @@
 <div data-controller="tag-selector" class="tag-selector" data-tag-selector-translations-value="<%= translation_data.to_json %>" data-tag-selector-tags-value="<%= selected_tags %>">
   <% if form.nil? %>
-    <%= text_field_tag field_name, selected_tags_value, class: 'tag-selector-input', placeholder: t('.no_js_placeholder'), data: { tag_selector_target: "tagsField" } %>
+    <%= text_field_tag field_name, selected_tags_value, id: id, class: 'tag-selector-input', placeholder: t('.no_js_placeholder'), data: { tag_selector_target: "tagsField" } %>
   <% else %>
     <%= form.text_field field_name, value: selected_tags_value, class: 'tag-selector-input', placeholder: t('.no_js_placeholder'), data: { tag_selector_target: "tagsField" } %>
   <% end %>

data/app/components/spotlight/tag_selector_component.rb

@@ -5,9 +5,10 @@ module Spotlight
   # This uses a plain text input that acts-as-taggable-on expects.
   class TagSelectorComponent < ViewComponent::Base
     # selected_tags_value is a comma delimited string of tags
-    def initialize(field_name:, all_tags:, selected_tags_value: nil, form: nil)
+    def initialize(field_name:, all_tags:, selected_tags_value: nil, form: nil, id: nil)
       @form = form
       @field_name = field_name
+      @id = id || field_name
       @selected_tags_value = selected_tags_value || ''
       @all_tags = all_tags&.sort_by { |tag| (tag.respond_to?(:name) ? tag.name : tag).downcase }
 
@@ -36,6 +37,6 @@ module Spotlight
       selected_tags.include?(tag.respond_to?(:name) ? tag.name : tag)
     end
 
-    attr_reader :form, :field_name, :selected_tags_value, :all_tags
+    attr_reader :form, :field_name, :selected_tags_value, :all_tags, :id
   end
 end