Hierarchical facet improvements (#1146)

- Update facets.js to create HTML for hierarchical facets using jQuery and with the correct structure.
- Fix exclude links in hierarchical facets.
- Display "Loading..." message in hierarchical facets.
- Resolves VUFIND-1279

module/VuFind/src/VuFind/AjaxHandler/GetFacetData.php

@@ -114,7 +114,7 @@ class GetFacetData extends AbstractBase
 
         return $this->formatResponse(
             $this->facetHelper->buildFacetArray(
-                $facet, $facetList, $this->results->getUrlQuery()
+                $facet, $facetList, $this->results->getUrlQuery(), false
             )
         );
     }

themes/bootprint3/less/bootprint.less

@@ -165,5 +165,5 @@ ul.random.image li img { margin: 0 auto; }
   color: #fff;
   &:hover { color: @brand-danger; }
 }
-.jstree-facet .jstree-ocl::before { margin-left: -5px; }
+.jstree-facet .facet { padding: 0; }
 .jstree-node.active { background-color: @active-orange; }

themes/bootstrap3/js/facets.js

-/*global htmlEncode, VuFind */
+/*global VuFind */
 /*exported collapseTopFacets, initFacetTree */
 function buildFacetNodes(data, currentPath, allowExclude, excludeTitle, counts)
 {
   var json = [];
 
   $(data).each(function facetNodesEach() {
-    var html = '';
+    var $html = $('<div/>').addClass('facet');
     if (!this.isApplied && counts) {
-      html = '<span class="badge" style="float: right">' + this.count.toString().replace(/\B(?=(\d{3})+\b)/g, VuFind.translate('number_thousands_separator'));
       if (allowExclude) {
-        var excludeURL = currentPath + this.exclude;
-        excludeURL.replace("'", "\\'");
-        // Just to be safe
-        html += ' <a href="' + excludeURL + '" onclick="document.location.href=\'' + excludeURL + '\'; return false;" title="' + htmlEncode(excludeTitle) + '"><i class="fa fa-times"></i></a>';
+        $html.addClass('excludable');
+        var excludeUrl = currentPath + this.exclude;
+        var $a = $('<a/>')
+          .addClass('exclude')
+          .attr('href', excludeUrl)
+          .attr('title', excludeTitle);
+        $('<i/>').addClass('fa fa-times').appendTo($a);
+        $a.appendTo($html);
       }
-      html += '</span>';
+      $('<span/>')
+        .addClass('badge')
+        .text(
+          this.count.toString().replace(/\B(?=(\d{3})+\b)/g, VuFind.translate('number_thousands_separator'))
+        )
+        .appendTo($html);
     }
 
     var url = currentPath + this.href;
-    // Just to be safe
-    url.replace("'", "\\'");
-    html += '<span class="main' + (this.isApplied ? ' applied' : '') + '" role="menuitem" title="' + htmlEncode(this.displayText) + '"'
-      + ' onclick="document.location.href=\'' + url + '\'; return false;">';
+    var $item = $('<span/>')
+      .addClass('main text' + (this.isApplied ? ' applied' : ''))
+      .attr('role', 'menuitem')
+      .attr('title', this.displayText);
+
+    var $i = $('<i/>').addClass('fa');
     if (this.operator === 'OR') {
       if (this.isApplied) {
-        html += '<i class="fa fa-check-square-o" title="' + VuFind.translate('Selected') + '"></i>';
+        $i.addClass('fa-check-square-o').attr('title', VuFind.translate('Selected'));
       } else {
-        html += '<i class="fa fa-square-o" aria-hidden="true"></i>';
+        $i.addClass('fa-square-o').attr('aria-hidden', 'true');
       }
+      $i.appendTo($item);
+      $item.append(' ');
     } else if (this.isApplied) {
-      html += '<i class="fa fa-check pull-right" title="' + VuFind.translate('Selected') + '"></i>';
+      $i.addClass('fa-check pull-right').attr('title', VuFind.translate('Selected'));
+      $i.appendTo($item);
+      $item.append(' ');
     }
-    html += ' ' + this.displayText;
-    html += '</span>';
+
+    $item.append(this.displayText);
+    $item.appendTo($html);
+
+    $html = $('<div/>').append($html);
 
     var children = null;
     if (typeof this.children !== 'undefined' && this.children.length > 0) {
       children = buildFacetNodes(this.children, currentPath, allowExclude, excludeTitle, counts);
     }
     json.push({
-      'text': html,
+      'text': $html.html(),
       'children': children,
       'applied': this.isApplied,
       'state': {
@@ -65,6 +82,7 @@ function initFacetTree(treeNode, inSidebar)
 
   // Enable keyboard navigation also when a screen reader is active
   treeNode.bind('select_node.jstree', function selectNode(event, data) {
+    $(this).closest('.collapse').html('<div class="facet">' + VuFind.translate('loading') + '...</div>');
     window.location = data.node.data.url;
     event.preventDefault();
     return false;
@@ -97,6 +115,12 @@ function initFacetTree(treeNode, inSidebar)
         if (inSidebar) {
           treeNode.on('loaded.jstree open_node.jstree', function treeNodeOpen(/*e, data*/) {
             treeNode.find('ul.jstree-container-ul > li.jstree-node').addClass('list-group-item');
+            treeNode.find('a.exclude').click(function excludeLinkClick(e) {
+              $(this).closest('.collapse').html('<div class="facet">' + VuFind.translate('loading') + '...</div>');
+              window.location = this.href;
+              e.preventDefault();
+              return false;
+            });
           });
         }
         treeNode.jstree({

themes/bootstrap3/less/components/js-tree.less

@@ -48,8 +48,6 @@
   }
   .jstree-initial-node {display: none;}
   .jstree-clicked {
-    color: @list-group-active-color;
-    background-color: @list-group-active-bg;
     .jstree-icon {
       color: #fff;
     }

themes/bootstrap3/less/components/sidebar.less

@@ -127,3 +127,20 @@
   margin-left: 0.5rem;
 }
 body.rtl .full-facet-list .active .fa { float: left; }
+
+.jstree-node {
+  .facet {
+    padding: 0;
+    border: none;
+  }
+}
+.jstree-facet {
+  .jstree-anchor {
+    padding: 0;
+  }
+  .list-group-item {
+    padding-right: 0;
+    border: 0;
+    border-bottom: 1px solid @list-group-border;
+  }
+}

themes/sandal/less/sandal.less

@@ -218,7 +218,11 @@ header {
 .sidebar .checkbox-filter,
 .sidebar > h4 { margin-left: 1rem; }
 
-.jstree-facet .main .fa-check { margin-top: 3px; }
+.jstree-facet {
+  .main .fa-check { margin-top: 3px; }
+  .jstree-icon::before { margin-top: 2px; }
+}
+
 @media (min-width: 768px) and (max-width: 991px) {
   .sidebar .facet {
     flex-flow: wrap;