change filter from OR to AND

monome-community · May 17, 2023 · 0210fd4 · 0210fd4
1 parent 4b8f825
commit 0210fd4
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 2 deletions.
diff --git a/_layouts/explore.html b/_layouts/explore.html
@@ -17,4 +17,7 @@ <h1>{{ project.raw_name }}</h1>
       </a>
     </div>
   {% endfor %}
+  <div id="no-results">
+    <h1>no results.</h1>
+  </div>
 </div>
diff --git a/assets/javascript/script.js b/assets/javascript/script.js
@@ -52,6 +52,17 @@
     }
     // explore page tags
     let activeTags = [];
+    const countVisibleProjects = () => {
+        const projectElements = document.getElementsByClassName('project');
+        let count = 0;
+        for (let i = 0; i < projectElements.length; i++) {
+            const element = projectElements[i];
+            if (element.classList.contains('show')) {
+                count++;
+            }
+        }
+        return count;
+    };
     const refresh = () => {
         console.log(activeTags);
         // if there are no activeTags, show everything
@@ -73,14 +84,24 @@
                     return;
                 }
                 const projectTags = project.dataset.tags.split(' ');
-                if (activeTags.some(tag => projectTags.includes(tag))) {
+                if (activeTags.every(tag => projectTags.includes(tag))) {
                     project.classList.add('show');
                 }
                 else {
                     project.classList.remove('show');
                 }
             }
         });
+        // display a "no results" message
+        const noResults = document.getElementById('no-results');
+        if (noResults != undefined) {
+            if (countVisibleProjects() == 0) {
+                noResults.classList.add('show');
+            }
+            else {
+                noResults.classList.remove('show');
+            }
+        }
     };
     const tagClick = (button) => {
         const activeClass = 'tag-active';

diff --git a/assets/javascript/script.ts b/assets/javascript/script.ts
@@ -55,6 +55,18 @@
   // explore page tags
   let activeTags : string[] = []
 
+  const countVisibleProjects = (): number => {
+    const projectElements = document.getElementsByClassName('project');
+    let count = 0;
+    for (let i = 0; i < projectElements.length; i++) {
+      const element = projectElements[i];
+      if (element.classList.contains('show')) {
+        count++;
+      }
+    }
+    return count;
+  }
+
   const refresh = () => {
     console.log(activeTags)
     // if there are no activeTags, show everything
@@ -76,13 +88,23 @@
           return
         }
         const projectTags = project.dataset.tags.split(' ')
-        if (activeTags.some(tag => projectTags.includes(tag))) {
+        if (activeTags.every(tag => projectTags.includes(tag))) {
           project.classList.add('show')
         } else {
           project.classList.remove('show')
         }
       }
     })
+
+    // display a "no results" message
+    const noResults = document.getElementById('no-results')
+    if (noResults != undefined) {
+      if (countVisibleProjects() == 0) {
+        noResults.classList.add('show')
+      } else {
+        noResults.classList.remove('show')
+      }
+    }
   }
 
   const tagClick = (button: HTMLElement) => {

diff --git a/assets/stylesheets/style.css b/assets/stylesheets/style.css
@@ -253,4 +253,8 @@ body.explore section {
 .projects .project a h1,
 .projects .project a p {
   margin: 0 0 0.8em 0;
+}
+
+#no-results {
+  display: none;
 }