stylescape
Version:
Stylescape is a visual identity framework developed by Scape Agency.
54 lines • 2.25 kB
JavaScript
export class DropdownHandler {
constructor(containerSelector = ".select_dropdown") {
this.dropdowns =
document.querySelectorAll(containerSelector);
if (this.dropdowns.length === 0)
return;
this.initializeDropdowns();
this.setupGlobalClickListener();
}
initializeDropdowns() {
this.dropdowns.forEach((dropdown) => {
const header = dropdown.querySelector(".select_dropdown--header");
const menu = dropdown.querySelector(".select_dropdown--menu.dropdown--collapse");
const checkboxes = dropdown.querySelectorAll('input[type="checkbox"]');
if (!header)
return;
header.addEventListener("click", () => {
if (menu) {
menu.classList.toggle("active");
}
const flipper = header.querySelector(".flipper--down, .flipper--up");
if (flipper) {
flipper.classList.toggle("flipper--down");
flipper.classList.toggle("flipper--up");
}
});
checkboxes.forEach((checkbox) => {
checkbox.addEventListener("change", () => {
this.updateSelectionLabel(dropdown);
});
});
this.updateSelectionLabel(dropdown);
});
}
updateSelectionLabel(dropdown) {
const countSpan = dropdown.querySelector("#selected-count");
const checkboxes = dropdown.querySelectorAll('input[type="checkbox"]');
if (!countSpan || checkboxes.length === 0)
return;
const selected = Array.from(checkboxes).filter((cb) => cb.checked).length;
countSpan.textContent = `Selected: ${selected} option${selected !== 1 ? "s" : ""}`;
}
setupGlobalClickListener() {
document.addEventListener("click", (e) => {
this.dropdowns.forEach((dropdown) => {
const menu = dropdown.querySelector(".dropdown--collapse");
if (menu && !dropdown.contains(e.target)) {
menu.classList.remove("active");
}
});
});
}
}
//# sourceMappingURL=DropdownHandler.js.map