Add support for Bootstrap 5

app/assets/javascripts/blacklight_gallery/slideshow.js

@@ -84,10 +84,12 @@
         _this.play();
       });
 
-      $(document).on('click', '[data-slide], [data-slide-to]', function(e) {
+      $(document).on('click', '[data-slide], [data-bs-slide], [data-slide-to], [data-bs-slide-to]', function(e) {
         e.preventDefault();
 
-        pos = parseInt($(this).attr('data-slide-to'), 10) || $(this).attr('data-slide');
+        pos = parseInt($(this).attr('data-slide-to') || $(this).attr('data-bs-slide-to'), 10) ||
+                $(this).attr('data-slide') ||
+                $(this).attr('data-bs-slide');
 
         if (pos === 'next' || pos === 'prev') _this.pause();
         _this.to(pos);

app/components/blacklight/gallery/slideshow_preview_component.html.erb

@@ -4,6 +4,8 @@
 %> 
 <%= render(component) do |component| %>
   <% component.with_body do %>
-    <%= @view_context.link_to_document(@document, thumbnail, class: 'thumbnail', data: { 'context-href': nil, 'slide-to': @document_counter, toggle: "modal", target: "#slideshow-modal" }) %>
+    <%= @view_context.link_to_document(@document, thumbnail, class: 'thumbnail',
+                                       data: { 'context-href': nil, 'slide-to': @document_counter, 'bs-slide-to': @document_counter,
+                                       toggle: "modal", 'bs-toggle': "modal", target: "#slideshow-modal", 'bs-target': "#slideshow-modal" }) %>
   <% end %>
 <% end %>

app/views/catalog/_document_slideshow.html.erb

@@ -14,10 +14,10 @@
       </div>
 
       <!-- Controls -->
-      <a class="left carousel-control prev" href="#slideshow" data-slide="prev">
+      <a class="left carousel-control prev" href="#slideshow" data-slide="prev" data-bs-slide="prev">
         <%= render Blacklight::Gallery::Icons::ChevronLeftComponent.new additional_options: { label_context: 'previous_image' } %>
       </a>
-      <a class="right carousel-control next" href="#slideshow" data-slide="next">
+      <a class="right carousel-control next" href="#slideshow" data-slide="next" data-bs-slide="next">
         <%= render Blacklight::Gallery::Icons::ChevronRightComponent.new additional_options: { label_context: 'next_image' } %>
       </a>
 

app/views/catalog/_slideshow_modal.html.erb

@@ -3,8 +3,8 @@
     <div class="modal-dialog modal-xl">
       <div class="modal-content">
         <div class="modal-header">
-          <button type="button" class="blacklight-modal-close close" data-dismiss="modal" aria-label="<%= t('blacklight.modal.close') %>">
-            <span aria-hidden="true">&times;</span>
+          <button type="button" class="blacklight-modal-close btn-close close btn-close-white" data-dismiss="modal" data-bs-dismiss="modal" aria-label="<%= t('blacklight.modal.close') %>">
+            <span aria-hidden="true" class="visually-hidden">&times;</span>
           </button>
         </div>
         <div class="modal-body">

spec/features/slideshow_spec.rb

@@ -1,15 +1,15 @@
 require 'spec_helper'
 
-describe "Slideshow", :js, :type => :feature do
+RSpec.describe 'Slideshow', default_max_wait_time: 10, js: true do
 
-  it "should open when one of the grid panes are clicked" do
-    visit search_catalog_path( :q => 'medicine', :view => 'slideshow' )
-    expect(page).to have_content "You searched for:"
-    within ".view-type" do
-      click_link "Slideshow"
+  it 'opens when one of the grid panes is clicked' do
+    visit search_catalog_path( q: 'medicine', view: 'slideshow' )
+    expect(page).to have_content 'You searched for:'
+    within '.view-type' do
+      click_link 'Slideshow'
     end
 
-    find('.grid [data-slide-to="0"]').click
+    find('.grid [data-slide-to="0"], .grid [data-bs-slide-to="0"]').click
+    expect(page).to have_css('.slideshow-inner .item')
   end
-
 end

spec/views/catalog/_document_slideshow.html.erb_spec.rb

@@ -30,8 +30,9 @@
   it 'has a modal' do
     render 'catalog/document_slideshow', view_config: view_config
     expect(rendered).to have_selector '#slideshow-modal'
-    expect(rendered).to have_selector '[data-slide="prev"]'
-    expect(rendered).to have_selector '[data-slide="next"]'
-    expect(rendered).to have_selector '[data-slide-to="0"][data-toggle="modal"][data-target="#slideshow-modal"]'
+    expect(rendered).to have_selector '[data-slide="prev"][data-bs-slide="prev"]'
+    expect(rendered).to have_selector '[data-slide="next"][data-bs-slide="next"]'
+    expect(rendered).to have_selector '[data-slide-to="0"][data-bs-slide-to="0"][data-toggle="modal"]' \
+                                      '[data-bs-toggle="modal"][data-target="#slideshow-modal"]'
   end
 end