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");