app/javascript/blacklight/modal.js in blacklight-8.5.1 vs app/javascript/blacklight/modal.js in blacklight-8.6.0

@@ -89,11 +89,11 @@
         <div class="modal-body">
           <p>Expected a successful response from the server, but got an error</p>
           <pre>${this.url}\n${error}</pre>
         </div>`
 
-      document.querySelector(`${modal.modalSelector} .modal-content`).innerHTML = contents
+      modal.target().querySelector('.modal-content').innerHTML = contents
 
       modal.show();
   }
 
   // Add the passed in contents to the modal and display it.
@@ -110,12 +110,19 @@
       elements = dom.body.childNodes
     }
     elements.forEach((el) => frag.appendChild(el))
     modal.activateScripts(frag)
     
-    document.querySelector(`${modal.modalSelector} .modal-content`).replaceChildren(frag)
+    modal.target().querySelector('.modal-content').replaceChildren(frag)
 
+    // send custom event with the modal dialog div as the target
+    var e = new CustomEvent('loaded.blacklight.blacklight-modal', { bubbles: true, cancelable: true });
+    modal.target().dispatchEvent(e)
+
+    // if they did preventDefault, don't show the dialog
+    if (e.defaultPrevented) return;
+
     modal.show();
   };
 
   // DOMParser doesn't allow scripts to be executed.  This fixes that.
   modal.activateScripts = function (frag) {
@@ -152,20 +159,32 @@
         modal.hide()
     })
   };
 
   modal.hide = function (el) {
-    const dom = document.querySelector(modal.modalSelector)
+    const dom = modal.target();
 
     if (!dom.open) return
+
+    var e = new CustomEvent('hide.blacklight.blacklight-modal', { bubbles: true, cancelable: true });
+    dom.dispatchEvent(e)
+
     dom.close()
   }
 
   modal.show = function(el) {
-    const dom = document.querySelector(modal.modalSelector)
+    const dom = modal.target();
 
     if (dom.open) return
+
+    var e = new CustomEvent('show.blacklight.blacklight-modal', { bubbles: true, cancelable: true });
+    dom.dispatchEvent(e)
+
     dom.showModal()
+  }
+
+  modal.target = function() {
+    return document.querySelector(modal.modalSelector);
   }
 
   modal.setupModal()
 
   return modal;