Merge pull request #140 from okfn/parse-update-filters-from-url

Add js to layout to parse and update filters from URL
okfn · Oct 16, 2023 · 5dab1b7 · 5dab1b7
2 parents d905594 + d774579
commit 5dab1b7
Show file tree

Hide file tree

Showing 2 changed files with 88 additions and 5 deletions.
diff --git a/layouts/_default/projects-list.html b/layouts/_default/projects-list.html
@@ -73,8 +73,27 @@ <h2 class="pb-12"> Other projects in the open space </h2>
       language: []
   }
 
-  let lastScroll = 0
+  let searchParams = new URLSearchParams(window.location.search)
+
+  for (let [param, pvalue] of searchParams.entries()) {
+    let filterValues = pvalue.split(',')
+    filters[param] = filterValues
+  }
+
+  for (let filterName of Object.keys(filters)) {
+    let filterButtonSpan = document.querySelector(`#${filterName}-filter > button > span`) 
+    let filterButton = document.querySelector(`#${filterName}-filter > button`) 
+
+    filterButtonSpan.innerText = ' ' +filters[filterName].join(', ')
+
+    if (filters[filterName].length == 0) {
+      filterButton.classList.remove('open')
+    } else {
+      filterButton.classList.add('open')
+    }
+  }
 
+  let lastScroll = 0
   let currentOpenFilter = ''
 
   function shuffleArray(arr) {
@@ -260,7 +279,10 @@ <h2 class="pb-12"> Other projects in the open space </h2>
   }
 
   function addCheckbox(element, name, value, label) {
-    let checkbox = `<label class="checkbox-label text-sm block w-full pb-2"><input type="checkbox" class="checkmark filter-item" name="${name}" value="${value}">  ${label}</input></label>`
+    let isChecked = false
+    if (filters[name].indexOf(value) >= 0)
+      isChecked = true
+    let checkbox = `<label class="checkbox-label text-sm block w-full pb-2"><input type="checkbox" ${isChecked?'checked ':''}class="checkmark filter-item" name="${name}" value="${value}">  ${label}</input></label>`
     let checkboxDom = document.createElement('div')
     checkboxDom.innerHTML = checkbox
     element.appendChild(checkboxDom)
@@ -347,6 +369,17 @@ <h2 class="pb-12"> Other projects in the open space </h2>
     }
 
     return filteredProjects
+  } 
+
+  function updateSearch() {
+    let newSearch = ''
+    for (let f in filters) {
+      if (filters[f].length > 0) {
+        newSearch += (newSearch != '')?'&':''
+        newSearch += `${f}=${filters[f]}`
+      }
+    }
+    return newSearch
   }
 
   function clickCheckbox(element, filterName) {
@@ -367,6 +400,13 @@ <h2 class="pb-12"> Other projects in the open space </h2>
       } else {
         filterButton.classList.add('open')
       }
+
+      let newSearch = updateSearch()
+      if (newSearch !== '')
+        newSearch = '?' + newSearch
+
+      history.replaceState({},'', window.location.pathname + newSearch)
+
       displayProjects(filterProjects())
   }
 
@@ -419,7 +459,9 @@ <h2 class="pb-12"> Other projects in the open space </h2>
   configureFilterButton('category')
   configureFilterButton('language')
 
-  displayProjects({'projects': projects, 'outside': outsideProjects})
+  // displayProjects({'projects': projects, 'outside': outsideProjects})
+
+  displayProjects(filterProjects())
 
   let locationPath = window.location.pathname.split('/')
 

diff --git a/layouts/_default/specialists-list.html b/layouts/_default/specialists-list.html
@@ -72,6 +72,26 @@
       language: []
   }
 
+  let searchParams = new URLSearchParams(window.location.search)
+
+  for (let [param, pvalue] of searchParams.entries()) {
+    let filterValues = pvalue.split(',')
+    filters[param] = filterValues
+  }
+
+  for (let filterName of Object.keys(filters)) {
+    let filterButtonSpan = document.querySelector(`#${filterName}-filter > button > span`) 
+    let filterButton = document.querySelector(`#${filterName}-filter > button`) 
+
+    filterButtonSpan.innerText = ' ' +filters[filterName].join(', ')
+
+    if (filters[filterName].length == 0) {
+      filterButton.classList.remove('open')
+    } else {
+      filterButton.classList.add('open')
+    }
+  }
+
   let currentOpenFilter = ''
   let lastScroll = 0
 
@@ -273,7 +293,10 @@
   }
 
   function addCheckbox(element, name, value, label) {
-    let checkbox = `<label class="checkbox-label specialist-checkbox-label text-sm block w-full"><input class="filter-item specialist-checkmark" type="checkbox" name="${name}" value="${value}">  ${label}</input></label>`
+    let isChecked = false
+    if (filters[name].indexOf(value) >= 0)
+      isChecked = true
+    let checkbox = `<label class="checkbox-label specialist-checkbox-label text-sm block w-full"><input class="filter-item specialist-checkmark" type="checkbox" ${isChecked?'checked ':''} name="${name}" value="${value}">  ${label}</input></label>`
     let checkboxDom = document.createElement('div')
     checkboxDom.innerHTML = checkbox
     element.appendChild(checkboxDom)
@@ -342,6 +365,17 @@
     return filteredSpecialists
   }
 
+  function updateSearch() {
+    let newSearch = ''
+    for (let f in filters) {
+      if (filters[f].length > 0) {
+        newSearch += (newSearch != '')?'&':''
+        newSearch += `${f}=${filters[f]}`
+      }
+    }
+    return newSearch
+  }
+
   function clickCheckbox(element, filterName) {
       let filterButtonSpan = document.querySelector(`#${filterName}-filter > button > span`) 
       let filterButton = document.querySelector(`#${filterName}-filter > button`) 
@@ -360,6 +394,13 @@
       } else {
         filterButton.classList.add('open')
       }
+
+      let newSearch = updateSearch()
+      if (newSearch !== '')
+        newSearch = '?' + newSearch
+
+      history.replaceState({},'', window.location.pathname + newSearch)
+
       displaySpecialists(filterSpecialists(specialists))
   }
 
@@ -411,7 +452,7 @@
   configureFilterButton('category')
   configureFilterButton('language')
 
-  displaySpecialists(specialists)
+  displaySpecialists(filterSpecialists(specialists))
 
   let locationPath = window.location.pathname.split('/')