Overlay style for facet blocking.

themes/bootstrap3/js/facets.js

@@ -149,6 +149,25 @@ function collapseTopFacets() {
 
 /* --- Side Facets --- */
 VuFind.register('sideFacets', function SideFacets() {
+  function showLoadingOverlay(e, data) {
+    e.preventDefault();
+    var overlay = '<div class="facet-loading-overlay">'
+      + '<span class="facet-loading-overlay-label">' + VuFind.translate('loading')
+      + "...</span></div>";
+    $(this).closest(".collapse").append(overlay);
+    // This callback operates both as a click handler and a JSTree callback;
+    // if the data element is undefined, we assume we are handling a click.
+    var href = typeof data === "undefined" || typeof data.node.data.url === "undefined"
+      ? $(this).attr('href') : data.node.data.url;
+    window.location.assign(href);
+    return false;
+  }
+
+  function activateFacetBlocking(context) {
+    var finalContext = (typeof context === "undefined") ? $(document.body) : context;
+    finalContext.find('a.facet:not(.narrow-toggle),.facet a').click(showLoadingOverlay);
+  }
+
   function facetSessionStorage(e) {
     var source = $('#result0 .hiddenSource').val();
     var id = e.target.id;
@@ -161,11 +180,8 @@ VuFind.register('sideFacets', function SideFacets() {
   }
 
   function init() {
-    // Advanced facets
-    $('a.facet:not(.narrow-toggle),.facet a').click(function facetBlocking() {
-      $(this).closest('.collapse').html('<div class="facet">' + VuFind.translate('loading') + '...</div>');
-      window.location.assign($(this).attr('href'));
-    });
+    // Display "loading" message after user clicks facet:
+    activateFacetBlocking();
 
     // Side facet status saving
     $('.facet-group .collapse').each(function openStoredFacets(index, item) {
@@ -189,7 +205,7 @@ VuFind.register('sideFacets', function SideFacets() {
     $('.facet-group').on('hidden.bs.collapse', facetSessionStorage);
   }
 
-  return { init: init };
+  return { init: init, showLoadingOverlay: showLoadingOverlay };
 });
 
 /* --- Lightbox Facets --- */

themes/bootstrap3/less/components/sidebar.less

@@ -18,6 +18,7 @@
   .collapse,
   .collapsing,
   & > .facet {
+    position: relative;
     border-left: 1px solid @list-group-border;
     border-right: 1px solid @list-group-border;
   }
@@ -60,6 +61,22 @@
   font-weight: bold;
   text-align: inherit;
 }
+.facet-loading-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(0,0,0,0.4);
+}
+.facet-loading-overlay-label {
+  padding: 1px .5rem;
+  color: #fff;
+  background-color: #000;
+}
 
 .top-facets .facet,
 .top-facets .narrow-toggle,

themes/bootstrap3/scss/components/sidebar.scss

@@ -18,6 +18,7 @@
   .collapse,
   .collapsing,
   & > .facet {
+    position: relative;
     border-left: 1px solid $list-group-border;
     border-right: 1px solid $list-group-border;
   }
@@ -60,6 +61,22 @@
   font-weight: bold;
   text-align: inherit;
 }
+.facet-loading-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(0,0,0,0.4);
+}
+.facet-loading-overlay-label {
+  padding: 1px .5rem;
+  color: #fff;
+  background-color: #000;
+}
 
 .top-facets .facet,
 .top-facets .narrow-toggle,