From 1b9228865e5372c8afc2aeef088e31848d6d09de Mon Sep 17 00:00:00 2001
From: julientaq <julien@coko.foundation>
Date: Thu, 16 Dec 2021 18:12:47 +0100
Subject: [PATCH] a better filter for categories
---
src/layouts/products.njk | 52 +++++++++++++++++++++++-----------------
1 file changed, 30 insertions(+), 22 deletions(-)
diff --git a/src/layouts/products.njk b/src/layouts/products.njk
index 28ebecf..ee06a3c 100644
--- a/src/layouts/products.njk
+++ b/src/layouts/products.njk
@@ -4,24 +4,26 @@
{{content | safe}}
- <div class="filter">
-
- {# create the category array #}
- {% set categories = [] %}
-
- {# fill the array with the categories #}
- {% for item in products.entities %}
- {% if not item.tag in categories %}
- {% set categories = (categories.push(item.tag), categories) %}
- {% endif %}
- {% endfor %}
+ {# create the category array #}
+ {% set categories = [] %}
+ {# fill the array with the categories #}
+ {% for item in products.entities %}
+ {% if not item.tag in categories %}
+ {% set categories = (categories.push(item.tag), categories) %}
+ {% endif %}
+ {% endfor %}
+ {# create the UI #}
+ <ul class="filter">
{% for category in categories %}
<li>
<button data-tag="{{category | slugify}}" class="trigger-category">{{category}}</button>
</li>
{% endfor %}
- </div>
+ <li>
+ <button data-tag="all" class="trigger-category">All</button>
+ </li>
+ </ul>
<div class="grid">
@@ -42,12 +44,12 @@
{% endblock %}
{% block customScripts %}
-{# super will keep all the other custom scripts needed to make one single script #}
-{{ super() }}
+ {# super will keep all the other custom scripts needed to make one single script #}
+ {{ super() }}
<script>
let list = document.querySelectorAll('.grid-item');
console.log(list);
-
+
document
.querySelectorAll('.trigger-category')
.forEach(button => {
@@ -58,14 +60,20 @@
})
function filterClass(list, filter) {
- for (item of list) {
- console.log(item);
+ if (filter == "all") {
+ for (item of list) {
+ item.style.display = "block";
+ }
+ } else {
+
+ for (item of list) {
- if (item.classList.contains(filter)) {
- item
- .classList
- .toggle('hideTag');
- }
+ if (!item.classList.contains(filter)) {
+ item.style.display = "none";
+ } else {
+ item.style.display = "block"
+ }
+ }
}
}
--
GitLab