53 lines
1.9 KiB
JavaScript
53 lines
1.9 KiB
JavaScript
document.addEventListener("DOMContentLoaded", () => {
|
|
const sortSelect = document.querySelector("#urutkan");
|
|
const resultCount = document.querySelector(".sorting-bar p strong");
|
|
const filterOpenButton = document.querySelector("[data-filter-open]");
|
|
const filterCloseButton = document.querySelector("[data-filter-close]");
|
|
const filterOverlay = document.querySelector("[data-filter-overlay]");
|
|
const filterPanel = document.querySelector(".catalog-filter");
|
|
const mobileQuery = window.matchMedia("(max-width: 1024px)");
|
|
|
|
if (sortSelect && resultCount) {
|
|
sortSelect.addEventListener("change", () => {
|
|
resultCount.textContent = "12 kendaraan";
|
|
});
|
|
}
|
|
|
|
if (!filterOpenButton || !filterCloseButton || !filterOverlay || !filterPanel || !mobileQuery.matches) {
|
|
return;
|
|
}
|
|
|
|
const openFilter = () => {
|
|
document.body.classList.add("catalog-filter-open");
|
|
filterOverlay.removeAttribute("hidden");
|
|
filterPanel.removeAttribute("hidden");
|
|
filterPanel.setAttribute("aria-hidden", "false");
|
|
};
|
|
|
|
const closeFilter = () => {
|
|
document.body.classList.remove("catalog-filter-open");
|
|
filterOverlay.setAttribute("hidden", "hidden");
|
|
filterPanel.setAttribute("hidden", "hidden");
|
|
filterPanel.setAttribute("aria-hidden", "true");
|
|
};
|
|
|
|
filterOpenButton.addEventListener("click", openFilter);
|
|
filterCloseButton.addEventListener("click", closeFilter);
|
|
filterOverlay.addEventListener("click", closeFilter);
|
|
|
|
document.addEventListener("keydown", (event) => {
|
|
if (event.key === "Escape") {
|
|
closeFilter();
|
|
}
|
|
});
|
|
|
|
const filterInputs = Array.from(filterPanel.querySelectorAll("input, select, button"));
|
|
filterInputs.forEach((input) => {
|
|
input.addEventListener("keydown", (event) => {
|
|
if (event.key === "Escape") {
|
|
closeFilter();
|
|
}
|
|
});
|
|
});
|
|
});
|