tweak list filter module so that list elements get a class when filtered

Author: colmjude

digital_land_frontend/templates/components/list-filter/list-filter.js

@@ -47,6 +47,9 @@ ListFilter.prototype.ListFilter = function (e) {
   const listsToFilter = convertNodeListToArray(document.querySelectorAll('[data-filter="list"]'))
   const searchTerm = e.target.value
 
+  // set a class if a search/filter is in progress
+  this.setActiveClasses(listsToFilter, searchTerm)
+
   const boundMatchSearchTerm = this.matchSearchTerm.bind(this)
   itemsToFilter
     .filter(function ($item) {
@@ -82,6 +85,16 @@ ListFilter.prototype.matchSearchTerm = function (item, term) {
   return true
 }
 
+ListFilter.prototype.setActiveClasses = function(lists, searchTerm) {
+  lists.forEach(list => {
+    if (searchTerm !== '') {
+      list.classList.add(this.list_filtered_class);
+    } else {
+      list.classList.remove(this.list_filtered_class);
+    }
+  })
+}
+
 ListFilter.prototype.updateListCounts = function (lists) {
   var totalMatches = 0
   const list_section_selector = this.list_section_selector
@@ -123,6 +136,7 @@ ListFilter.prototype.setupOptions = function (params) {
   params = params || {}
   this.list_section_selector = params.list_section_selector || '.dl-list-filter__count'
   this.count_wrapper_selector = params.count_wrapper_selector || '.dl-list-filter__count__wrapper'
+  this.list_filtered_class = params.list_filtered_class || 'dl-list-filter__filtered-listed'
 }
 
 export default ListFilter

package.json

@@ -1,6 +1,6 @@
 {
   "name": "digital-land-frontend-repo",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "description": "frontend components and assets for digital land",
   "engines": {
     "node": ">=16.0.0"

package/digital-land-frontend/javascripts/digital-land-frontend.js

@@ -661,6 +661,9 @@
     const listsToFilter = convertNodeListToArray(document.querySelectorAll('[data-filter="list"]'));
     const searchTerm = e.target.value;
 
+    // set a class if a search/filter is in progress
+    this.setActiveClasses(listsToFilter, searchTerm);
+
     const boundMatchSearchTerm = this.matchSearchTerm.bind(this);
     itemsToFilter
       .filter(function ($item) {
@@ -696,6 +699,16 @@
     return true
   };
 
+  ListFilter.prototype.setActiveClasses = function(lists, searchTerm) {
+    lists.forEach(list => {
+      if (searchTerm !== '') {
+        list.classList.add(this.list_filtered_class);
+      } else {
+        list.classList.remove(this.list_filtered_class);
+      }
+    });
+  };
+
   ListFilter.prototype.updateListCounts = function (lists) {
     var totalMatches = 0;
     const list_section_selector = this.list_section_selector;
@@ -737,6 +750,7 @@
     params = params || {};
     this.list_section_selector = params.list_section_selector || '.dl-list-filter__count';
     this.count_wrapper_selector = params.count_wrapper_selector || '.dl-list-filter__count__wrapper';
+    this.list_filtered_class = params.list_filtered_class || '.dl-list-filter__filtered-listed';
   };
 
   (function (global, factory) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "digital-land-frontend",
   "description": "DL Frontend",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "engines": {
     "node": ">= 4.2.0"
   },