Merge pull request #249 from yetti/fix/bl8

add MutationObserver for Blacklight 8 Modal
projectblacklight · Dec 4, 2023 · 3de6a19 · 3de6a19
2 parents f9f196b + 37a1817
commit 3de6a19
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 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
@@ -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
@@ -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"
-}
+}
+
+// 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
@@ -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");