Replace custom modal implementation with turbo/stimulus

Author: cbeer

app/components/blacklight/document/action_component.rb

@@ -31,7 +31,7 @@ def link_to_modal_control
                 url,
                 id: @id,
                 class: @link_classes,
-                data: {}.merge(({ blacklight_modal: "trigger", turbo: false } if @action.modal != false) || {})
+                data: {}.merge(({ action: 'blacklight--modal#open', 'turbo-frame': 'modal' } if @action.modal != false) || {})
       end
 
       def render_partial

app/components/blacklight/facet_field_component.html.erb

@@ -20,7 +20,7 @@
         <div class="more_facets">
           <%= link_to t("more_#{@facet_field.key}_html", scope: 'blacklight.search.facets', default: :more_html, field_name: @facet_field.label),
             @facet_field.modal_path,
-            data: { blacklight_modal: 'trigger', turbo: false } %>
+            data: { action: 'blacklight--modal#open', 'turbo-frame': 'modal' } %>
         </div>
       <% end %>
     </div>

app/components/blacklight/facet_field_list_component.html.erb

@@ -12,7 +12,7 @@
       <div class="more_facets">
         <%= link_to t("more_#{@facet_field.key}_html", scope: 'blacklight.search.facets', default: :more_html, field_name: @facet_field.label),
           @facet_field.modal_path,
-          data: { blacklight_modal: 'trigger' } %>
+          data: { action: 'blacklight--modal#open', 'turbo-frame': 'modal' } %>
       </div>
     <% end %>
   <% end %>

app/components/blacklight/system/modal_component.html.erb

@@ -1,25 +1,27 @@
-<div data-blacklight-modal="container">
-  <%= prefix %>
+<turbo-frame id="modal">
+  <div data-blacklight-modal="container">
+    <%= prefix %>
 
-  <div class="modal-header">
-    <%= header || (capture do %>
-      <h1 class="modal-title"><%= title %></h1>
-    <% end) %>
-
-    <button type="button" class="blacklight-modal-close btn-close close" data-bl-dismiss="modal" aria-label="<%= t('blacklight.modal.close') %>">
-      <span aria-hidden="true" class="visually-hidden">&times;</span>
-    </button>
-  </div>
+    <div class="modal-header">
+      <%= header || (capture do %>
+        <h1 class="modal-title"><%= title %></h1>
+      <% end) %>
 
-  <%= body || (capture do %>
-    <div class="modal-body">
-      <%= content %>
+      <button type="button" class="blacklight-modal-close btn-close close" data-action="blacklight--modal#close" aria-label="<%= t('blacklight.modal.close') %>">
+        <span aria-hidden="true" class="visually-hidden">&times;</span>
+      </button>
     </div>
-  <% end) %>
 
-  <% if footer.present? %>
-    <div class="modal-footer">
-      <%= footer %>
-    </div>
-  <% end %>
+    <%= body || (capture do %>
+      <div class="modal-body">
+        <%= content %>
+      </div>
+    <% end) %>
+
+    <% if footer.present? %>
+      <div class="modal-footer">
+        <%= footer %>
+      </div>
+    <% end %>
+  </div>
 </div>

app/javascript/blacklight/index.js

@@ -1,11 +1,9 @@
 import ButtonFocus from 'blacklight/button_focus'
-import Modal from 'blacklight/modal'
 import SearchContext from 'blacklight/search_context'
 import Core from 'blacklight/core'
 
 export default {
   ButtonFocus,
-  Modal,
   SearchContext,
   Core,
   onLoad: Core.onLoad

app/javascript/blacklight/modal.js

@@ -0,0 +1,17 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ['content', 'modal']
+
+  connect() {
+    this.contentTarget.innerHTML = '<turbo-frame id="modal"></turbo-frame>';
+  }
+
+  open() {
+    this.modalTarget.showModal();
+  }
+
+  close() {
+    this.modalTarget.close();
+  }
+}

app/javascript/blacklight/modalForm.js

@@ -9,7 +9,7 @@
 
   <%= render partial: 'facet_index_navigation' if @facet.index_range && @display_facet.index? %>
 
-  <div class="facet-extended-list">
+  <div class="facet-extended-list" target="_top">
     <%= render Blacklight::FacetComponent.new(display_facet: @display_facet,
                                               blacklight_config: blacklight_config,
                                               layout: false) %>

app/javascript/controllers/blacklight/modal_controller.js

@@ -19,7 +19,7 @@
       <%= javascript_importmap_tags %>
     <% elsif defined? Propshaft %>
       <%= javascript_include_tag "application", "data-turbo-track": "reload", defer: true %>
-    <% else %>    
+    <% else %>
       <%= javascript_include_tag "application", "data-turbo-track": "reload", defer: true %>
       <%= javascript_include_tag "blacklight/blacklight", type: 'module' %>
     <% end %>
@@ -30,7 +30,7 @@
       import githubAutoCompleteElement from 'https://cdn.skypack.dev/@github/auto-complete-element';
     </script>
   </head>
-  <body class="<%= render_body_class %>">
+  <body class="<%= render_body_class %>" data-controller="blacklight--modal">
     <nav id="skip-link" role="navigation" aria-label="<%= t('blacklight.skip_links.label') %>">
       <%= link_to t('blacklight.skip_links.search_field'), '#search_field', class: 'element-invisible element-focusable rounded-bottom py-2 px-3', data: { turbolinks: 'false' } %>
       <%= link_to t('blacklight.skip_links.main_content'), '#main-container', class: 'element-invisible element-focusable rounded-bottom py-2 px-3', data: { turbolinks: 'false' } %>

app/views/catalog/facet.html.erb

@@ -1,6 +1,6 @@
-<dialog id="blacklight-modal" class="modal" data-turbo="false">
+<dialog id="blacklight-modal" class="modal" data-blacklight--modal-target="modal">
   <div class="modal-dialog modal-lg">
-    <div class="modal-content">
+    <div class="modal-content" data-blacklight--modal-target="content">
     </div>
   </div>
 </dialog>