Use view components for the thumbnails

This will assist in our move to blacklight 8.  This also removes a interactive element that behaves like a link but wasn't accessible.

Fixes #3798

app/assets/stylesheets/modules/results-documents.scss

@@ -11,11 +11,6 @@
       }
     }
 
-    .cover-image-wrapper {
-      margin: 0;
-      padding: 0;
-    }
-
     .cover-image {
       border: 1px solid #ddd;
       max-height: 150px;
@@ -28,10 +23,6 @@
     white-space: nowrap;
   }
 
-  .cursor-pointer {
-    cursor: pointer;
-  }
-
   .results-metadata-section {
     border-bottom: 1px solid $cloud;
     clear: left;

app/components/thumbnail_with_iiif_component.html.erb

@@ -0,0 +1,8 @@
+<% value = presenter.thumbnail.render(@image_options) %>
+
+<% if value %>
+  <div class="document-thumbnail">
+    <%= helpers.link_to_document(presenter.document, value, 'aria-hidden': true, tabindex: -1, counter: @counter) %>
+    <%= helpers.iiif_drag_n_drop(@document.iiif_manifest, position: 'top') if @document.iiif_manifest %>
+  </div>
+<% end %>

app/components/thumbnail_with_iiif_component.rb

@@ -0,0 +1,4 @@
+# frozen_string_literal: true
+
+class ThumbnailWithIiifComponent < Blacklight::Document::ThumbnailComponent
+end

app/javascript/application.js

@@ -42,7 +42,6 @@ import "./jquery.turbolinks-cursor";
 import "./location-hours";
 import "./preview-content";
 import "./recent-selections";
-import "./search-context";
 import "./select-all";
 import "./sfx-panel";
 import "./skip-to-nav";

app/javascript/jquery.plug-google-content.js

@@ -115,7 +115,7 @@
         if(typeof imageEl.attr('src') === 'undefined') {
           imageEl.attr('src', thumbUrl)[0].hidden = false;
 
-          const fakeCover = imageEl.parent().parent().find('span.fake-cover')[0]
+          const fakeCover = imageEl.parent().find('span.fake-cover')[0]
           if (fakeCover) {
             fakeCover.hidden = true
           }

app/views/catalog/_index_gallery.html.erb

@@ -1,18 +1,11 @@
 <%
-  preview_container = 'preview-container-' + document.id
   counter = document_counter_with_offset(document_counter)
-  options = {
-    :counter => counter,
-    :suppress_link => true
-  }
-  context_href = (document_link_params(document, {:counter => counter})).dig(:data, :"context-href")
+  preview_container = 'preview-container-' + document.id
 %>
 
 <div class="gallery-document" <%= preview_data_attrs(true, "preview-gallery", document[:id], ".#{preview_container}") %> data-preview-in-gallery="true" data-doc-id=<%= document.id %> >
   <div class="item-thumb">
-    <div class="cover-image-wrapper" data-target="<%= solr_document_path document %>" data-context-href="<%= context_href %>">
-      <%= document_presenter(document).thumbnail.thumbnail_tag({}, options) %>
-    </div>
+    <%= render Blacklight::Document::ThumbnailComponent.new(counter:, document:) %>
   </div>
   <div class="caption">
     <%= render_document_partials document, blacklight_config.view_config(:gallery).partials, document_counter: document_counter %>

app/views/catalog/_thumbnail_default.html.erb

@@ -1,18 +1,2 @@
-<%
-  counter = document_counter_with_offset(document_counter)
-  options = {
-    :counter => counter,
-    :suppress_link => true
-  }
-  context_href = document_link_params(document, {:counter => counter}).dig(:data, :"context-href")
-  presenter = document_presenter(document)
-%>
-
-<% if presenter.thumbnail.exists? && tn = presenter.thumbnail.thumbnail_tag({}, options) %>
-  <div class="document-thumbnail">
-    <div class="cover-image-wrapper" data-target="<%= solr_document_path document %>" data-context-href="<%= context_href %>">
-      <%= tn %>
-    </div>
-    <%= iiif_drag_n_drop(document.iiif_manifest, position: 'top') if document.iiif_manifest %>
-  </div>
-<% end %>
+<%= render ThumbnailWithIiifComponent.new(counter: document_counter_with_offset(document_counter),
+                                          presenter: document_presenter(document)) %>

app/views/catalog/thumbnails/_collection_thumbnail.html.erb

@@ -1,11 +1,9 @@
 <% if document_index_view_type == :gallery %>
-  <%= link_to document, tabindex: '-1' do %>
-    <% if document.collection_members.present? && document.collection_members.first.image_urls(:large).present? %>
-      <%= image_tag(document.collection_members.first.image_urls(:large).first, class: 'stacks-image', alt: '') %>
-    <% else %>
-      <%= content_tag(:span, class:"fake-cover", aria: { hidden: true }) do %>
-        <%= content_tag(:div, document_presenter(document).heading, class: "fake-cover-text") %>
-      <% end %>
+  <% if document.collection_members.present? && document.collection_members.first.image_urls(:large).present? %>
+    <%= image_tag(document.collection_members.first.image_urls(:large).first, class: 'stacks-image', alt: '') %>
+  <% else %>
+    <%= content_tag(:span, class:"fake-cover", aria: { hidden: true }) do %>
+      <%= content_tag(:div, document_presenter(document).heading, class: "fake-cover-text") %>
     <% end %>
   <% end %>
 <% end %>

app/views/catalog/thumbnails/_item_thumbnail.html.erb

@@ -5,10 +5,8 @@
   <img class="cover-image center-block <%= css_class %>" hidden alt="" data-isbn="<%= isbn %>" data-oclc="<%= oclc %>" data-lccn="<%= lccn %>">
 
   <% if document_index_view_type == :gallery %>
-    <%= link_to document, tabindex: '-1', aria: { hidden: true } do %>
-      <%= content_tag(:span, class:"fake-cover") do %>
-        <%= content_tag(:div, document_presenter(document).heading, class: "fake-cover-text") %>
-      <% end %>
+    <%= content_tag(:span, class:"fake-cover") do %>
+      <%= content_tag(:div, document_presenter(document).heading, class: "fake-cover-text") %>
     <% end %>
   <% end %>
 <% end %>

spec/features/blacklight_customizations/results_document_spec.rb

@@ -40,20 +40,6 @@
     end
   end
 
-  scenario 'should have the correct cover image wrapper attributes' do
-    visit root_path
-    first('#q').set '10'
-    click_button 'search'
-
-    within '#documents' do
-      within 'div.document' do
-        expect(page).to have_css('div.cover-image-wrapper', visible: true)
-        expect(page).to have_css("div.cover-image-wrapper[data-target='/view/10']")
-        expect(page).to have_css("div.cover-image-wrapper[data-context-href^='/catalog/10/track?']")
-      end
-    end
-  end
-
   scenario 'should have the stacks image for objects with image behavior' do
     visit root_path
     first('#q').set '35'