diff --git a/src/sdg/js/components/catalog/expand.js b/src/sdg/js/components/catalog/expand.js deleted file mode 100644 index 99a1aad96..000000000 --- a/src/sdg/js/components/catalog/expand.js +++ /dev/null @@ -1,39 +0,0 @@ -const expandButtons = document.querySelectorAll(".expand"); - -class Expand { - - disable() { - this.node.classList.remove("accent"); - this.open = false; - } - - enable() { - this.node.classList.add("accent"); - this.open = true; - } - - toggle() { - // Toggle open on if it is true otherwise false. - this.open ? this.disable() : this.enable(); - } - - constructor(node) { - this.node = node; - this.productsContainer = node.closest(".products__catalog").nextElementSibling; - this.open = false; - this.node.expander = this; - - this.node.addEventListener("click", (event) => { - this.productsContainer.querySelectorAll(".products__accordeon-item").forEach(item => { - if (this.open) { - item.classList.remove("products__accordeon-item--open"); - } else { - item.classList.add("products__accordeon-item--open"); - } - }); - this.toggle(); - }); - } -} - -[...expandButtons].forEach(expandButton => new Expand(expandButton)); diff --git a/src/sdg/js/components/catalog/filter.js b/src/sdg/js/components/catalog/filter.js deleted file mode 100644 index 0aca1083e..000000000 --- a/src/sdg/js/components/catalog/filter.js +++ /dev/null @@ -1,136 +0,0 @@ -const filterContainers = document.querySelectorAll(".filter"); - -class Filter { - showAllProducts() { - this.accordeon.querySelectorAll(".products__item").forEach(element => { - element.classList.remove("hidden"); - }); - } - - clearTextFilter() { - // Clear text filter - this.node.querySelector(".filter__input").value = ""; - } - - clearAllFilterButtons() { - // Clear all filter buttons - const filterButtons = this.node.querySelectorAll(".filter__button"); - filterButtons.forEach(item => { - item.classList.add("filter__button--off"); - }); - } - - clearAllFilterGroups() { - // Clear all filter buttons - const filterCheckboxes = this.node.querySelectorAll(".filter__group--checkbox"); - filterCheckboxes.forEach(item => { - item.checked = false; - }); - } - - clearAllFilters() { - this.clearAllFilterGroups(); - this.clearAllFilterButtons(); - this.clearTextFilter(); - this.showAllProducts(); - } - - openItemAccordeon(element) { - // Open accordeon item if it is closed. - const accordeonItem = element.closest(".products__accordeon-item"); - accordeonItem.classList.add("products__accordeon-item--open"); - } - - setUpStatusFilter() { - const filterButtons = this.node.querySelectorAll(".filter__button"); - filterButtons.forEach(item => { - item.addEventListener("click", (event) => { - this.expand.expander.enable(); - const isOff = item.classList.contains("filter__button--off"); - this.clearAllFilters(); - // Remove off class if exists, otherwise add it - if (isOff) { - item.classList.remove("filter__button--off"); - const statusIconClass = item.querySelector('svg').classList[1]; - this.accordeon.querySelectorAll(".products__item").forEach(element => { - // If element does not include status icon, make it invisible. - if (!element.querySelector(".products__status")) { - element.classList.add("hidden"); - } else { - // If element includes status icon, check if it matches the clicked button. - if (element.querySelector(".products__status svg").classList.contains(statusIconClass)) { - this.openItemAccordeon(element); - element.classList.remove("hidden"); - } else { - element.classList.add("hidden"); - } - } - }); - } else { - item.classList.add("filter__button--off"); - } - }); - }); - } - - setUpTextFilter() { - const filterInputs = this.node.querySelectorAll(".filter__input"); - filterInputs.forEach(item => { - item.addEventListener("keyup", (event) => { - this.expand.expander.enable(); - const text = event.target.value; - this.clearAllFilters(); - event.target.value = text; - this.accordeon.querySelectorAll(".products__item").forEach(element => { - // If element does not include text, make it invisible. - const title = element.innerText.toLowerCase(); - if (title.includes(text.toLowerCase())) { - element.classList.remove("hidden"); - this.openItemAccordeon(element); - } else { - element.classList.add("hidden"); - } - }); - }); - }); - } - - setUpGroupFilter() { - const filterCheckboxes = this.node.querySelectorAll(".filter__group--checkbox"); - - filterCheckboxes.forEach(checkbox => { - checkbox.addEventListener("change", (event) => { - this.expand.expander.enable(); - const checkedBoxes = this.node.querySelectorAll(".filter__group--checkbox:checked"); - this.clearAllFilters(); - - const checkboxValues = []; - [...checkedBoxes].forEach(checkbox => { - checkbox.checked = true; - checkboxValues.push(checkbox.value.toLowerCase()); - }); - - this.accordeon.querySelectorAll(".products__item").forEach(element => { - const itemGroup = element.querySelector(".products__item-help--group").dataset.value; - if (!checkboxValues.length || checkboxValues.every(value => value === itemGroup)) { - element.classList.remove("hidden"); - this.openItemAccordeon(element); - } else { - element.classList.add("hidden"); - } - }); - }); - }); - } - - constructor(node) { - this.node = node; - this.accordeon = node.parentElement.nextElementSibling; - this.expand = node.querySelector(".expand"); - this.setUpStatusFilter(); - this.setUpTextFilter(); - this.setUpGroupFilter(); - } -} - -[...filterContainers].forEach(filterContainer => new Filter(filterContainer)); diff --git a/src/sdg/js/components/catalog/index.js b/src/sdg/js/components/catalog/index.js deleted file mode 100644 index bf85123f8..000000000 --- a/src/sdg/js/components/catalog/index.js +++ /dev/null @@ -1,3 +0,0 @@ -import "./products"; -import "./filter"; -import "./expand"; diff --git a/src/sdg/js/components/catalog/products.js b/src/sdg/js/components/catalog/products.js deleted file mode 100644 index 744ef4f53..000000000 --- a/src/sdg/js/components/catalog/products.js +++ /dev/null @@ -1,21 +0,0 @@ -const productAccordeons = document.querySelectorAll(".products__accordeon"); - -class Accordeon { - constructor(node) { - this.node = node; - this.items = node.querySelectorAll(".products__accordeon-item"); - - [...this.items].forEach(item => { - item.addEventListener("click", (event) => { - const wasOpen = event.currentTarget.classList.contains("products__accordeon-item--open"); - if (wasOpen) { - event.currentTarget.classList.remove("products__accordeon-item--open"); - } else { - event.currentTarget.classList.add("products__accordeon-item--open"); - } - }); - }); - } -} - -[...productAccordeons].forEach(productAccordeon => new Accordeon(productAccordeon)); diff --git a/src/sdg/js/components/index.js b/src/sdg/js/components/index.js index cf5fc1d58..718602761 100644 --- a/src/sdg/js/components/index.js +++ b/src/sdg/js/components/index.js @@ -6,7 +6,6 @@ import "./formset"; import "./calendar"; import "./markdown"; import "./dynamic_array"; -import "./catalog"; import "./generic"; import "./tooltip"; import "./choices";