diff --git a/js/filters/components/checkbox.js b/js/filters/components/checkbox.js index 8c6fee2..fdb72b6 100644 --- a/js/filters/components/checkbox.js +++ b/js/filters/components/checkbox.js @@ -8,6 +8,8 @@ const createCheckbox = () => { const checkbox = document.createElement("input"); checkbox.type = "checkbox"; checkbox.classList.add("filter-checkbox"); + checkbox.classList.add("filter-input-checkbox"); + return checkbox; }; diff --git a/js/filters/components/common.js b/js/filters/components/common.js index 72c62c6..5b101e2 100644 --- a/js/filters/components/common.js +++ b/js/filters/components/common.js @@ -43,11 +43,17 @@ export function buildCollectionCheckboxes(collection) { container.appendChild(checkboxesContainer); selectAll.addEventListener("click", () => { - checkboxes.forEach((checkbox) => checkbox.checked(true)); + checkboxes.forEach((checkbox) => { + checkbox.checked(true); + checkbox.checkbox.dispatchEvent(new Event("change")); + }); }); clearAll.addEventListener("click", () => { - checkboxes.forEach((checkbox) => checkbox.checked(false)); + checkboxes.forEach((checkbox) => { + checkbox.checked(false); + checkbox.checkbox.dispatchEvent(new Event("change")); + }); }); return [container, checkboxes]; diff --git a/js/filters/components/range.js b/js/filters/components/range.js index 5fdd5e5..fe18aa0 100644 --- a/js/filters/components/range.js +++ b/js/filters/components/range.js @@ -3,6 +3,7 @@ const createInput = (placeholder) => { input.type = "number"; input.placeholder = placeholder; input.classList.add("range-input"); + input.classList.add("filter-input-range"); return input; }; diff --git a/js/filters/filter.js b/js/filters/filter.js index be96356..fa86fe7 100644 --- a/js/filters/filter.js +++ b/js/filters/filter.js @@ -47,6 +47,8 @@ export function initFilters( ) { const criteriaFunctions = {}; + let someInputChanged = false; + const resetFiltersContent = () => { const content = document.getElementById("filters-content"); content.replaceChildren(); @@ -69,11 +71,32 @@ export function initFilters( const filterOutCheckbox = document.getElementById("invert-filter"); filterOutCheckbox.checked = false; + + const allCheckboxes = document.getElementsByClassName( + "filter-input-checkbox" + ); + + for (const input of allCheckboxes) { + input.addEventListener("change", () => { + someInputChanged = true; + }); + } + + const allInputs = document.getElementsByClassName("filter-input-range"); + + for (const input of allInputs) { + input.addEventListener("input", () => { + someInputChanged = true; + }); + } }; resetFiltersContent(); filters.apply = async () => { + if (!someInputChanged) { + return; + } const filterOutValue = document.getElementById("invert-filter").checked; const ids = filterOut( viewObjects,