Fix AJAX facet handling issues. (#4120)

- Fixes handling of checkbox facets to not rely on colon in the facet value. - Fixes an issue that could have caused multiple facet load requests to be fired on page load.
vufind-org · Nov 28, 2024 · 0772db7 · 0772db7
1 parent 4055ab3
commit 0772db7
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 13 deletions.
diff --git a/module/VuFind/src/VuFind/AjaxHandler/GetSideFacets.php b/module/VuFind/src/VuFind/AjaxHandler/GetSideFacets.php
@@ -39,6 +39,7 @@
 use VuFind\Search\SearchRunner;
 use VuFind\Session\Settings as SessionSettings;
 
+use function in_array;
 use function is_callable;
 
 /**
@@ -227,10 +228,10 @@ protected function formatFacets(
     ) {
         $response = [];
         $facetSet = $recommend->getFacetSet();
+        $checkboxFacets = array_column($recommend->getCheckboxFacetSet(), 'filter');
         foreach ($facets as $facet) {
-            if (strpos($facet, ':')) {
-                $response[$facet]['checkboxCount']
-                    = $this->getCheckboxFacetCount($facet, $results);
+            if (in_array($facet, $checkboxFacets)) {
+                $response[$facet]['checkboxCount'] = $this->getCheckboxFacetCount($facet, $results);
             } else {
                 $context['facet'] = $facet;
                 $context['cluster'] = $facetSet[$facet] ?? [

diff --git a/themes/bootstrap3/js/facets.js b/themes/bootstrap3/js/facets.js
@@ -430,8 +430,9 @@ VuFind.register('sideFacets', function SideFacets() {
     var facetList = [];
     var $facets = $container.find('div.collapse.in[data-facet], div.collapse.show[data-facet], .checkbox-filters [data-facet]');
     $facets.each(function addFacet() {
-      if (!$(this).data('loaded')) {
+      if (!$(this).data('initialized')) {
         facetList.push($(this).data('facet'));
+        $(this).data('initialized', 'true');
       }
     });
     if (facetList.length === 0) {
@@ -485,7 +486,7 @@ VuFind.register('sideFacets', function SideFacets() {
               activateFacetBlocking($facetContainer);
             }
           }
-          if (isMultiFacetsSelectionEnabled()) {
+          if (isMultiFacetsSelectionEnabled() && $facetContainer.length > 0) {
             VuFind.multiFacetsSelection.initFacetClickHandler($facetContainer.get()[0]);
           }
           $facetContainer.find('.facet-load-indicator').remove();
@@ -509,6 +510,13 @@ VuFind.register('sideFacets', function SideFacets() {
     $('.side-facets-container-ajax').each(activateSingleAjaxFacetContainer);
   }
 
+  /**
+   * Load AJAX side facets with a tiny delay so that all non-collapsed items are available after initialization
+   */
+  function delayLoadAjaxSideFacets() {
+    setTimeout(loadAjaxSideFacets, 50);
+  }
+
   function facetSessionStorage(e, data) {
     var source = $('#result0 .hiddenSource').val();
     var id = e.target.id;
@@ -551,13 +559,13 @@ VuFind.register('sideFacets', function SideFacets() {
     if (VuFind.getBootstrapMajorVersion() === 3) {
       $('.side-facets-container-ajax')
         .find('div.collapse[data-facet]:not(.in)')
-        .on('shown.bs.collapse', loadAjaxSideFacets);
+        .on('shown.bs.collapse', delayLoadAjaxSideFacets);
     } else {
       document.querySelectorAll('.side-facets-container-ajax div[data-facet]').forEach((collapseEl) => {
-        collapseEl.addEventListener('shown.bs.collapse', loadAjaxSideFacets);
+        collapseEl.addEventListener('shown.bs.collapse', delayLoadAjaxSideFacets);
       });
     }
-    loadAjaxSideFacets();
+    delayLoadAjaxSideFacets();
 
     // Keep filter dropdowns on screen
     $(".search-filter-dropdown").on("shown.bs.dropdown", function checkFilterDropdownWidth(e) {

diff --git a/themes/bootstrap5/js/facets.js b/themes/bootstrap5/js/facets.js
@@ -430,8 +430,9 @@ VuFind.register('sideFacets', function SideFacets() {
     var facetList = [];
     var $facets = $container.find('div.collapse.in[data-facet], div.collapse.show[data-facet], .checkbox-filters [data-facet]');
     $facets.each(function addFacet() {
-      if (!$(this).data('loaded')) {
+      if (!$(this).data('initialized')) {
         facetList.push($(this).data('facet'));
+        $(this).data('initialized', 'true');
       }
     });
     if (facetList.length === 0) {
@@ -485,7 +486,7 @@ VuFind.register('sideFacets', function SideFacets() {
               activateFacetBlocking($facetContainer);
             }
           }
-          if (isMultiFacetsSelectionEnabled()) {
+          if (isMultiFacetsSelectionEnabled() && $facetContainer.length > 0) {
             VuFind.multiFacetsSelection.initFacetClickHandler($facetContainer.get()[0]);
           }
           $facetContainer.find('.facet-load-indicator').remove();
@@ -509,6 +510,13 @@ VuFind.register('sideFacets', function SideFacets() {
     $('.side-facets-container-ajax').each(activateSingleAjaxFacetContainer);
   }
 
+  /**
+   * Load AJAX side facets with a tiny delay so that all non-collapsed items are available after initialization
+   */
+  function delayLoadAjaxSideFacets() {
+    setTimeout(loadAjaxSideFacets, 50);
+  }
+
   function facetSessionStorage(e, data) {
     var source = $('#result0 .hiddenSource').val();
     var id = e.target.id;
@@ -551,13 +559,13 @@ VuFind.register('sideFacets', function SideFacets() {
     if (VuFind.getBootstrapMajorVersion() === 3) {
       $('.side-facets-container-ajax')
         .find('div.collapse[data-facet]:not(.in)')
-        .on('shown.bs.collapse', loadAjaxSideFacets);
+        .on('shown.bs.collapse', delayLoadAjaxSideFacets);
     } else {
       document.querySelectorAll('.side-facets-container-ajax div[data-facet]').forEach((collapseEl) => {
-        collapseEl.addEventListener('shown.bs.collapse', loadAjaxSideFacets);
+        collapseEl.addEventListener('shown.bs.collapse', delayLoadAjaxSideFacets);
       });
     }
-    loadAjaxSideFacets();
+    delayLoadAjaxSideFacets();
 
     // Keep filter dropdowns on screen
     $(".search-filter-dropdown").on("shown.bs.dropdown", function checkFilterDropdownWidth(e) {