feat(pub): add search box to enable filtering by any attribute

Close #922 See #390
HugoBlox · Feb 13, 2019 · 188505b · 188505b
1 parent fe52f6b
commit 188505b
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 18 deletions.
diff --git a/assets/js/academic.js b/assets/js/academic.js
@@ -103,18 +103,54 @@
    * Filter publications.
    * --------------------------------------------------------------------------- */
 
+  // Active publication filters.
+  let pubFilters = {};
+
+  // Search term.
+  let searchRegex;
+
+  // Filter values (concatenated).
+  let filterValues;
+
+  // Publication container.
   let $grid_pubs = $('#container-publications');
+
+  // Initialise Isotope.
   $grid_pubs.isotope({
     itemSelector: '.isotope-item',
     percentPosition: true,
     masonry: {
       // Use Bootstrap compatible grid layout.
       columnWidth: '.grid-sizer'
+    },
+    filter: function() {
+      let $this = $(this);
+      let searchResults = searchRegex ? $this.text().match( searchRegex ) : true;
+      let filterResults = filterValues ? $this.is( filterValues ) : true;
+      return searchResults && filterResults;
     }
   });
 
-  // Active publication filters.
-  let pubFilters = {};
+  // Filter by search term.
+  let $quickSearch = $('.filter-search').keyup( debounce( function() {
+    searchRegex = new RegExp( $quickSearch.val(), 'gi' );
+    $grid_pubs.isotope();
+  }) );
+
+  // Debounce input to prevent spamming filter requests.
+  function debounce( fn, threshold ) {
+    let timeout;
+    threshold = threshold || 100;
+    return function debounced() {
+      clearTimeout( timeout );
+      let args = arguments;
+      let _this = this;
+      function delayed() {
+        fn.apply( _this, args );
+      }
+      timeout = setTimeout( delayed, threshold );
+    };
+  }
 
   // Flatten object by concatenating values.
   function concatValues( obj ) {
@@ -135,10 +171,10 @@
     pubFilters[ filterGroup ] = this.value;
 
     // Combine filters.
-    let filterValues = concatValues( pubFilters );
+    filterValues = concatValues( pubFilters );
 
     // Activate filters.
-    $grid_pubs.isotope({ filter: filterValues });
+    $grid_pubs.isotope();
 
     // If filtering by publication type, update the URL hash to enable direct linking to results.
     if (filterGroup == "pubtype") {
@@ -165,10 +201,10 @@
     // Set filter.
     let filterGroup = 'pubtype';
     pubFilters[ filterGroup ] = filterValue;
-    let filterValues = concatValues( pubFilters );
+    filterValues = concatValues( pubFilters );
 
     // Activate filters.
-    $grid_pubs.isotope({ filter: filterValues });
+    $grid_pubs.isotope();
 
     // Set selected option.
     $('.pubtype-select').val(filterValue);

diff --git a/exampleSite/content/home/publications.md b/exampleSite/content/home/publications.md
@@ -35,3 +35,6 @@ publication_type = "-1"
 exclude_featured = false
 +++
 
+{{% alert note %}}
+Quickly discover relevant content by [filtering publications]({{< ref "/publication/_index.md" >}}).
+{{% /alert %}}
diff --git a/i18n/en.yaml b/i18n/en.yaml
@@ -167,14 +167,6 @@
 - id: pub_book_section
   translation: Book section
 
-# Filtering
-
-- id: filter_by_type
-  translation: Filter by type
-
-- id: filter_all
-  translation: All
-
 # Project details
 
 - id: open_project_site

diff --git a/layouts/section/publication.html b/layouts/section/publication.html
@@ -17,13 +17,14 @@
         {{ $.Scratch.SetInMap "years" $year $year }}
       {{ end }}
 
-      <div class="form-row mb-3">
+      <div class="form-row mb-4">
         <div class="col-auto">
-          {{ i18n "filter_by_type" }}:
+          <input type="search" class="filter-search" placeholder="{{ i18n "search_placeholder" }}" autocapitalize="off"
+          autocomplete="off" autocorrect="off" role="textbox" spellcheck="false">
         </div>
         <div class="col-auto">
           <select class="pub-filters pubtype-select form-control form-control-sm" data-filter-group="pubtype">
-            <option value="*">{{ i18n "filter_all" }}</option>
+            <option value="*">{{ i18n "publication_type" }}</option>
             {{ partial "pub_types.html" $ }}
             {{ range $index, $taxonomy := .Site.Taxonomies.publication_types }}
             <option value=".pubtype-{{ (int $index) }}">
@@ -35,7 +36,7 @@
         </div>
         <div class="col-auto">
           <select class="pub-filters form-control form-control-sm" data-filter-group="year">
-            <option value="*">{{ i18n "filter_all" }}</option>
+            <option value="*">{{ i18n "date" }}</option>
             {{ $years_sorted := $.Scratch.GetSortedMapValues "years" }}
             {{ if $years_sorted }}
             {{ range $year := sort $years_sorted "" "desc" }}