From 37a1817abfe30d28c8cf0c8ec204c7bd7b8efed1 Mon Sep 17 00:00:00 2001
From: Yetrina Battad <hello@yetti.io>
Date: Fri, 1 Dec 2023 14:03:52 +1100
Subject: [PATCH] add MutationObserver for Blacklight 8 Modal

Blacklight 8 uses an HTML Dialog element instead of a Bootstrap modal, so it won't
fire the 'shown.bs.modal' events when opened. This adds a MutationObserver to
check if the 'open' attribute is added to the HTML Dialog element, to determine if
it's open.
---
 .../range_limit_distro_facets.js              | 10 ++---
 .../range_limit_shared.js                     | 42 ++++++++++++++++++-
 .../range_limit_slider.js                     |  9 ++--
 3 files changed, 51 insertions(+), 10 deletions(-)

diff --git a/app/assets/javascripts/blacklight_range_limit/range_limit_distro_facets.js b/app/assets/javascripts/blacklight_range_limit/range_limit_distro_facets.js
index 497e66b4..67f80628 100644
--- a/app/assets/javascripts/blacklight_range_limit/range_limit_distro_facets.js
+++ b/app/assets/javascripts/blacklight_range_limit/range_limit_distro_facets.js
@@ -31,11 +31,8 @@ Blacklight.onLoad(function() {
     }
   });
 
-  // Support for Blacklight 7 and 8:
-  const modalSelector = Blacklight.modal?.modalSelector || Blacklight.Modal.modalSelector 
-
-  // When loaded in a modal
-  $(modalSelector).on('shown.bs.modal', function() {
+  // For Blacklight version < 8, when loaded in a modal
+  $(BlacklightRangeLimit.modalSelector).on('shown.bs.modal', function() {
     $(this).find(".range_limit .profile .distribution.chart_js ul").each(function() {
       BlacklightRangeLimit.turnIntoPlot($(this).parent());
     });
@@ -44,6 +41,9 @@ Blacklight.onLoad(function() {
     BlacklightRangeLimit.checkForNeededFacetsToFetch();
   });
 
+  // Use a mutation observer to detect when the HTML dialog is open
+  BlacklightRangeLimit.initPlotModalObserver();
+
   $("body").on("shown.bs.collapse", function(event) {
     var container =  $(event.target).filter(".facet-content").find(".chart_js");
     BlacklightRangeLimit.redrawPlot(container);
diff --git a/app/assets/javascripts/blacklight_range_limit/range_limit_shared.js b/app/assets/javascripts/blacklight_range_limit/range_limit_shared.js
index 898779ee..3808266b 100644
--- a/app/assets/javascripts/blacklight_range_limit/range_limit_shared.js
+++ b/app/assets/javascripts/blacklight_range_limit/range_limit_shared.js
@@ -70,4 +70,44 @@ BlacklightRangeLimit.normalized_selection = function normalized_selection(min, m
 // Check if Flot is loaded
 BlacklightRangeLimit.domDependenciesMet = function domDependenciesMet() {
   return typeof $.plot != "undefined"
-}
\ No newline at end of file
+}
+
+// Support for Blacklight 7 and 8:
+BlacklightRangeLimit.modalSelector = Blacklight.modal?.modalSelector || Blacklight.Modal.modalSelector
+
+BlacklightRangeLimit.modalObserverConfig = {
+  attributes: true,
+}
+
+BlacklightRangeLimit.initSliderModalObserver = function() {
+  // Use a mutation observer to detect when the modal dialog is open
+  const modalObserver = new MutationObserver(function(mutations) {
+    mutations.forEach(function(mutation) {
+      if (mutation.attributeName !== 'open') {return;}
+      if (mutation.target.hasAttribute('open')) {
+        $(BlacklightRangeLimit.modalSelector).find(".range_limit .profile .range.slider_js").each(function() {
+          BlacklightRangeLimit.buildSlider(this);
+        });
+      }
+    });
+  });
+  modalObserver.observe($(BlacklightRangeLimit.modalSelector)[0], BlacklightRangeLimit.modalObserverConfig);
+}
+
+BlacklightRangeLimit.initPlotModalObserver = function() {
+  // Use a mutation observer to detect when the modal dialog is open
+  const modalObserver = new MutationObserver(function(mutations) {
+    mutations.forEach(function(mutation) {
+      if (mutation.attributeName !== 'open') {return;}
+      if (mutation.target.hasAttribute('open')) {
+        $(BlacklightRangeLimit.modalSelector).find(".range_limit .profile .distribution.chart_js ul").each(function() {
+          BlacklightRangeLimit.turnIntoPlot($(this).parent());
+        });
+
+        // Case when there is no currently selected range
+        BlacklightRangeLimit.checkForNeededFacetsToFetch();
+      }
+    });
+  });
+  modalObserver.observe($(BlacklightRangeLimit.modalSelector)[0], BlacklightRangeLimit.modalObserverConfig);
+}
diff --git a/app/assets/javascripts/blacklight_range_limit/range_limit_slider.js b/app/assets/javascripts/blacklight_range_limit/range_limit_slider.js
index 661f04cb..763225a5 100644
--- a/app/assets/javascripts/blacklight_range_limit/range_limit_slider.js
+++ b/app/assets/javascripts/blacklight_range_limit/range_limit_slider.js
@@ -6,15 +6,16 @@ Blacklight.onLoad(function() {
     BlacklightRangeLimit.buildSlider(this);
   });
 
-  // Support for Blacklight 7 and 8:
-  const modalSelector = Blacklight.modal?.modalSelector || Blacklight.Modal.modalSelector 
-
-  $(modalSelector).on('shown.bs.modal', function() {
+  // For Blacklight < 8, when loaded in a modal
+  $(BlacklightRangeLimit.modalSelector).on('shown.bs.modal', function() {
     $(this).find(".range_limit .profile .range.slider_js").each(function() {
       BlacklightRangeLimit.buildSlider(this);
     });
   });
 
+  // For Blacklight 8, use a mutation observer to detect when the HTML dialog is open
+  BlacklightRangeLimit.initSliderModalObserver();
+
   // catch event for redrawing chart, to redraw slider to match width
   $("body").on("plotDrawn.blacklight.rangeLimit", function(event) {
     var area       = $(event.target).closest(".limit_content.range_limit");