$title$
@@ -77,11 +226,17 @@ document.addEventListener("DOMContentLoaded", function () {
const checkboxes = document.querySelectorAll(".filters input[type=checkbox]");
const kits = document.querySelectorAll(".kit");
- // Count by status.
+ // Count meta data.
const counts = {};
kits.forEach(kit => {
const status = kit.dataset.status;
counts[status] = (counts[status] || 0) + 1;
+
+ const manufacturer = kit.dataset.manufacturer;
+ counts[manufacturer] = (counts[manufacturer] || 0) + 1;
+
+ const series = kit.dataset.series;
+ counts[series] = (counts[series] || 0) + 1;
});
// Update each filter label with the count.
@@ -90,7 +245,7 @@ document.addEventListener("DOMContentLoaded", function () {
const value = checkbox.value;
const count = counts[value] || 0;
- // Update label text
+ // Update label text.
const label = checkbox.parentElement;
const textNode = label.childNodes[label.childNodes.length - 1];
@@ -98,20 +253,55 @@ document.addEventListener("DOMContentLoaded", function () {
});
function updateFilter() {
- const selected = Array.from(checkboxes)
- .filter(cb => cb.checked)
- .map(cb => cb.value);
+ const groups = document.querySelectorAll(".filter-group");
+
+ // Get all checked checkboxes across all groups.
+ const allChecked = document.querySelectorAll(
+ ".filter-group input:checked"
+ );
+
+ // If nothing is selected anywhere, then hide everything.
+ if (allChecked.length === 0) {
+ kits.forEach(kit => {
+ kit.style.display = "none";
+ });
+ return;
+ }
kits.forEach(kit => {
- const status = kit.dataset.status;
- if (selected.includes(status)) {
- kit.style.display = "";
- } else {
- kit.style.display = "none";
- }
+ let visible = true;
+
+ groups.forEach(group => {
+ const filterName = group.dataset.filter;
+
+ const selected = Array.from(
+ group.querySelectorAll("input:checked")
+ ).map(cb => cb.value);
+
+ const kitValue = kit.dataset[filterName];
+
+ // OR inside group
+ if (selected.length > 0 && !selected.includes(kitValue)) {
+ visible = false;
+ }
+ });
+
+ kit.style.display = visible ? "" : "none";
});
}
checkboxes.forEach(cb => cb.addEventListener("change", updateFilter));
+
+ // Clear button.
+ const clearButton = document.getElementById("clear-filters");
+
+ clearButton.addEventListener("click", function () {
+ // Uncheck all checkboxes.
+ checkboxes.forEach(cb => {
+ cb.checked = false;
+ });
+ // Update the visible kits.
+ updateFilter();
+ });
});
\ No newline at end of file