29 lines
976 B
JavaScript
29 lines
976 B
JavaScript
|
const filterButtons = document.querySelectorAll(".filter-menu button");
|
||
|
|
const projectItems = document.querySelectorAll(".projects-index li");
|
||
|
|
|
||
|
|
function applyFilter(filter) {
|
||
|
|
filterButtons.forEach((b) => b.classList.remove("active"));
|
||
|
|
if (!filter) {
|
||
|
|
projectItems.forEach((item) => item.classList.remove("filtered-out"));
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
const btn = [...filterButtons].find((b) => b.dataset.filter === filter);
|
||
|
|
if (btn) btn.classList.add("active");
|
||
|
|
projectItems.forEach((item) => {
|
||
|
|
item.classList.toggle("filtered-out", item.dataset.category !== filter);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
filterButtons.forEach((btn) => {
|
||
|
|
btn.addEventListener("click", () => {
|
||
|
|
const isActive = btn.classList.contains("active");
|
||
|
|
const newFilter = isActive ? null : btn.dataset.filter;
|
||
|
|
applyFilter(newFilter);
|
||
|
|
Router.setParam("filter", newFilter);
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
window.addEventListener("routechange", () => applyFilter(Router.getParam("filter")));
|
||
|
|
|
||
|
|
applyFilter(Router.getParam("filter"));
|