From 785f554cd019984cb6fb9e635bb3b7efe2412784 Mon Sep 17 00:00:00 2001 From: Aleksandra Bozek Date: Mon, 18 Nov 2024 12:43:41 +0100 Subject: [PATCH 01/12] IBX-3456 Collapse all button support --- .../public/js/scripts/core/collapse.js | 60 +++++++++++++++++++ .../public/scss/_anchor-navigation.scss | 4 ++ 2 files changed, 64 insertions(+) diff --git a/src/bundle/Resources/public/js/scripts/core/collapse.js b/src/bundle/Resources/public/js/scripts/core/collapse.js index 77da449ee4..9b9ed3aa81 100644 --- a/src/bundle/Resources/public/js/scripts/core/collapse.js +++ b/src/bundle/Resources/public/js/scripts/core/collapse.js @@ -1,4 +1,33 @@ (function (global, doc) { + let toggleAllTimeout; + const toggleAllBtn = doc.querySelector('.multi-collapse-btn'); + const expandAll = toggleAllBtn?.querySelector('.ibexa-attribute-group__toggler-expand'); + const collapseAll = toggleAllBtn?.querySelector('.ibexa-attribute-group__toggler-collapse'); + MULTI_COLLAPSE_BODY_CLASS = '.multi-collapse'; + let singleElementClicked = []; + const checkIfChangeText = () => { + const allGroups = doc.querySelectorAll(MULTI_COLLAPSE_BODY_CLASS); + if (singleElementClicked.length === allGroups.length || singleElementClicked.length === 0) { + collapseAll.classList.toggle('d-none'); + expandAll.classList.toggle('d-none'); + } + }; + const toggleCollapseAllButton = () => { + singleElementClicked = []; + collapseAll.classList.toggle('d-none'); + expandAll.classList.toggle('d-none'); + }; + const handleCollapseAction = (expandAction) => { + singleElementClicked = []; + doc.querySelectorAll('.ibexa-collapse').forEach((collapseNode) => { + const isElementCollapsed = collapseNode.classList.contains('ibexa-collapse--collapsed'); + + if (expandAction === isElementCollapsed) { + bootstrap.Collapse.getOrCreateInstance(collapseNode.querySelector('.multi-collapse')).toggle(); + } + }); + }; + doc.querySelectorAll('.ibexa-collapse').forEach((collapseNode) => { const toggleButton = collapseNode.querySelector('.ibexa-collapse__toggle-btn'); const isCollapsed = toggleButton.classList.contains('collapsed'); @@ -6,6 +35,24 @@ collapseNode.classList.toggle('ibexa-collapse--collapsed', isCollapsed); collapseNode.dataset.collapsed = isCollapsed; + if (toggleAllBtn) { + const uniqeName = toggleButton.getAttribute('data-bs-target'); + collapseNode.addEventListener('click', (event) => { + event.stopPropagation(); + const toggleIndex = singleElementClicked.findIndex((el) => el === uniqeName); + window.clearTimeout(toggleAllTimeout); + toggleAllTimeout = window.setTimeout(() => { + if (toggleIndex !== -1) { + singleElementClicked.splice(toggleIndex, 1); + checkIfChangeText(); + return; + } + singleElementClicked.push(uniqeName); + checkIfChangeText(); + }, 200); + }); + } + collapseNode.addEventListener('hide.bs.collapse', (event) => { event.stopPropagation(); collapseNode.classList.add('ibexa-collapse--collapsed'); @@ -18,4 +65,17 @@ collapseNode.dataset.collapsed = false; }); }); + + if (toggleAllBtn) { + const collapseAll = toggleAllBtn.querySelector('.ibexa-attribute-group__toggler-collapse'); + toggleAllBtn.addEventListener('click', (event) => { + event.stopPropagation(); + window.clearTimeout(toggleAllTimeout); + toggleAllTimeout = window.setTimeout(() => { + isExpanding = collapseAll.classList.contains('d-none'); + handleCollapseAction(isExpanding); + toggleCollapseAllButton(); + }, 200); + }); + } })(window, window.document); diff --git a/src/bundle/Resources/public/scss/_anchor-navigation.scss b/src/bundle/Resources/public/scss/_anchor-navigation.scss index 2d06541482..a2325f0e6d 100644 --- a/src/bundle/Resources/public/scss/_anchor-navigation.scss +++ b/src/bundle/Resources/public/scss/_anchor-navigation.scss @@ -18,6 +18,10 @@ &:last-child { border-bottom: none; } + + &--no-border { + border-bottom: none; + } } &__section-group { From 0a5ab82ff128f85a9e2d4779ac8dc9ee1afe3199 Mon Sep 17 00:00:00 2001 From: Aleksandra Bozek Date: Mon, 18 Nov 2024 13:51:33 +0100 Subject: [PATCH 02/12] collapse eslint fixes --- src/bundle/Resources/public/js/scripts/core/collapse.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/bundle/Resources/public/js/scripts/core/collapse.js b/src/bundle/Resources/public/js/scripts/core/collapse.js index 9b9ed3aa81..3f18407da1 100644 --- a/src/bundle/Resources/public/js/scripts/core/collapse.js +++ b/src/bundle/Resources/public/js/scripts/core/collapse.js @@ -1,9 +1,9 @@ -(function (global, doc) { +(function (global, doc, bootstrap) { let toggleAllTimeout; const toggleAllBtn = doc.querySelector('.multi-collapse-btn'); const expandAll = toggleAllBtn?.querySelector('.ibexa-attribute-group__toggler-expand'); const collapseAll = toggleAllBtn?.querySelector('.ibexa-attribute-group__toggler-collapse'); - MULTI_COLLAPSE_BODY_CLASS = '.multi-collapse'; + const MULTI_COLLAPSE_BODY_CLASS = '.multi-collapse'; let singleElementClicked = []; const checkIfChangeText = () => { const allGroups = doc.querySelectorAll(MULTI_COLLAPSE_BODY_CLASS); @@ -67,12 +67,11 @@ }); if (toggleAllBtn) { - const collapseAll = toggleAllBtn.querySelector('.ibexa-attribute-group__toggler-collapse'); toggleAllBtn.addEventListener('click', (event) => { event.stopPropagation(); window.clearTimeout(toggleAllTimeout); toggleAllTimeout = window.setTimeout(() => { - isExpanding = collapseAll.classList.contains('d-none'); + const isExpanding = collapseAll.classList.contains('d-none'); handleCollapseAction(isExpanding); toggleCollapseAllButton(); }, 200); From a26b6422063dcf56c1322feb271833fd478c4056 Mon Sep 17 00:00:00 2001 From: Aleksandra Bozek Date: Mon, 18 Nov 2024 16:30:50 +0100 Subject: [PATCH 03/12] review fixes pt 1 --- .../public/js/scripts/core/collapse.js | 37 ++++++++++--------- 1 file changed, 20 insertions(+), 17 deletions(-) diff --git a/src/bundle/Resources/public/js/scripts/core/collapse.js b/src/bundle/Resources/public/js/scripts/core/collapse.js index 3f18407da1..51dbfa45c6 100644 --- a/src/bundle/Resources/public/js/scripts/core/collapse.js +++ b/src/bundle/Resources/public/js/scripts/core/collapse.js @@ -1,29 +1,29 @@ (function (global, doc, bootstrap) { let toggleAllTimeout; - const toggleAllBtn = doc.querySelector('.multi-collapse-btn'); + let singleElementClicked = []; + const toggleAllBtn = doc.querySelector('.ibexa-multi-collapse-btn'); const expandAll = toggleAllBtn?.querySelector('.ibexa-attribute-group__toggler-expand'); const collapseAll = toggleAllBtn?.querySelector('.ibexa-attribute-group__toggler-collapse'); - const MULTI_COLLAPSE_BODY_CLASS = '.multi-collapse'; - let singleElementClicked = []; - const checkIfChangeText = () => { + const MULTI_COLLAPSE_BODY_CLASS = '.ibexa-multi-collapse'; + + const toggleMultiCollapseButton = () => { + collapseAll.classList.toggle('d-none'); + expandAll.classList.toggle('d-none'); + }; + const toggleMultiCollapseIfNeeded = () => { const allGroups = doc.querySelectorAll(MULTI_COLLAPSE_BODY_CLASS); + if (singleElementClicked.length === allGroups.length || singleElementClicked.length === 0) { - collapseAll.classList.toggle('d-none'); - expandAll.classList.toggle('d-none'); + toggleMultiCollapseButton(); } }; - const toggleCollapseAllButton = () => { - singleElementClicked = []; - collapseAll.classList.toggle('d-none'); - expandAll.classList.toggle('d-none'); - }; const handleCollapseAction = (expandAction) => { singleElementClicked = []; doc.querySelectorAll('.ibexa-collapse').forEach((collapseNode) => { const isElementCollapsed = collapseNode.classList.contains('ibexa-collapse--collapsed'); if (expandAction === isElementCollapsed) { - bootstrap.Collapse.getOrCreateInstance(collapseNode.querySelector('.multi-collapse')).toggle(); + bootstrap.Collapse.getOrCreateInstance(collapseNode.querySelector(MULTI_COLLAPSE_BODY_CLASS)).toggle(); } }); }; @@ -37,18 +37,20 @@ if (toggleAllBtn) { const uniqeName = toggleButton.getAttribute('data-bs-target'); + collapseNode.addEventListener('click', (event) => { event.stopPropagation(); - const toggleIndex = singleElementClicked.findIndex((el) => el === uniqeName); + const toggleIndex = singleElementClicked.findIndex((elementIndex) => elementIndex === uniqeName); + window.clearTimeout(toggleAllTimeout); toggleAllTimeout = window.setTimeout(() => { if (toggleIndex !== -1) { singleElementClicked.splice(toggleIndex, 1); - checkIfChangeText(); + toggleMultiCollapseIfNeeded(); return; } singleElementClicked.push(uniqeName); - checkIfChangeText(); + toggleMultiCollapseIfNeeded(); }, 200); }); } @@ -72,9 +74,10 @@ window.clearTimeout(toggleAllTimeout); toggleAllTimeout = window.setTimeout(() => { const isExpanding = collapseAll.classList.contains('d-none'); + handleCollapseAction(isExpanding); - toggleCollapseAllButton(); + toggleMultiCollapseButton(); }, 200); }); } -})(window, window.document); +})(window, window.document, window.bootstrap); From 03e396710386f8b58e1128dd15e9620e4ba13f28 Mon Sep 17 00:00:00 2001 From: Aleksandra Bozek Date: Sun, 24 Nov 2024 19:44:57 +0100 Subject: [PATCH 04/12] spaces fixes --- .../public/js/scripts/core/collapse.js | 19 ++++++++++++------- 1 file changed, 12 insertions(+), 7 deletions(-) diff --git a/src/bundle/Resources/public/js/scripts/core/collapse.js b/src/bundle/Resources/public/js/scripts/core/collapse.js index 51dbfa45c6..062b97280b 100644 --- a/src/bundle/Resources/public/js/scripts/core/collapse.js +++ b/src/bundle/Resources/public/js/scripts/core/collapse.js @@ -4,14 +4,13 @@ const toggleAllBtn = doc.querySelector('.ibexa-multi-collapse-btn'); const expandAll = toggleAllBtn?.querySelector('.ibexa-attribute-group__toggler-expand'); const collapseAll = toggleAllBtn?.querySelector('.ibexa-attribute-group__toggler-collapse'); - const MULTI_COLLAPSE_BODY_CLASS = '.ibexa-multi-collapse'; - + const MULTI_COLLAPSE_BODY_SELECTOR = '.ibexa-multi-collapse'; const toggleMultiCollapseButton = () => { collapseAll.classList.toggle('d-none'); expandAll.classList.toggle('d-none'); }; const toggleMultiCollapseIfNeeded = () => { - const allGroups = doc.querySelectorAll(MULTI_COLLAPSE_BODY_CLASS); + const allGroups = doc.querySelectorAll(MULTI_COLLAPSE_BODY_SELECTOR); if (singleElementClicked.length === allGroups.length || singleElementClicked.length === 0) { toggleMultiCollapseButton(); @@ -23,7 +22,7 @@ const isElementCollapsed = collapseNode.classList.contains('ibexa-collapse--collapsed'); if (expandAction === isElementCollapsed) { - bootstrap.Collapse.getOrCreateInstance(collapseNode.querySelector(MULTI_COLLAPSE_BODY_CLASS)).toggle(); + bootstrap.Collapse.getOrCreateInstance(collapseNode.querySelector(MULTI_COLLAPSE_BODY_SELECTOR)).toggle(); } }); }; @@ -36,20 +35,24 @@ collapseNode.dataset.collapsed = isCollapsed; if (toggleAllBtn) { - const uniqeName = toggleButton.getAttribute('data-bs-target'); + const uniqueName = toggleButton.getAttribute('data-bs-target'); collapseNode.addEventListener('click', (event) => { event.stopPropagation(); - const toggleIndex = singleElementClicked.findIndex((elementIndex) => elementIndex === uniqeName); + + const toggleIndex = singleElementClicked.findIndex((elementIndex) => elementIndex === uniqueName); window.clearTimeout(toggleAllTimeout); + toggleAllTimeout = window.setTimeout(() => { if (toggleIndex !== -1) { singleElementClicked.splice(toggleIndex, 1); toggleMultiCollapseIfNeeded(); + return; } - singleElementClicked.push(uniqeName); + + singleElementClicked.push(uniqueName); toggleMultiCollapseIfNeeded(); }, 200); }); @@ -71,7 +74,9 @@ if (toggleAllBtn) { toggleAllBtn.addEventListener('click', (event) => { event.stopPropagation(); + window.clearTimeout(toggleAllTimeout); + toggleAllTimeout = window.setTimeout(() => { const isExpanding = collapseAll.classList.contains('d-none'); From 0d5782341319017f7c9901e21e5c484225cd7ed0 Mon Sep 17 00:00:00 2001 From: Aleksandra Bozek Date: Tue, 10 Dec 2024 12:26:43 +0100 Subject: [PATCH 05/12] Globally handled multi collapse --- .../public/js/scripts/core/collapse.js | 164 +++++++++++++----- .../public/scss/_multi-collapse.scss | 37 ++++ src/bundle/Resources/public/scss/ibexa.scss | 1 + 3 files changed, 155 insertions(+), 47 deletions(-) create mode 100644 src/bundle/Resources/public/scss/_multi-collapse.scss diff --git a/src/bundle/Resources/public/js/scripts/core/collapse.js b/src/bundle/Resources/public/js/scripts/core/collapse.js index 062b97280b..0c7913f2a9 100644 --- a/src/bundle/Resources/public/js/scripts/core/collapse.js +++ b/src/bundle/Resources/public/js/scripts/core/collapse.js @@ -1,28 +1,67 @@ (function (global, doc, bootstrap) { let toggleAllTimeout; - let singleElementClicked = []; - const toggleAllBtn = doc.querySelector('.ibexa-multi-collapse-btn'); - const expandAll = toggleAllBtn?.querySelector('.ibexa-attribute-group__toggler-expand'); - const collapseAll = toggleAllBtn?.querySelector('.ibexa-attribute-group__toggler-collapse'); - const MULTI_COLLAPSE_BODY_SELECTOR = '.ibexa-multi-collapse'; - const toggleMultiCollapseButton = () => { - collapseAll.classList.toggle('d-none'); - expandAll.classList.toggle('d-none'); + const MULTI_COLLAPSE_BTN_TAG = 'data-multi-collapse-btn-id'; + const COLLAPSE_SECTION_BODY_TAG = 'data-multi-collapse-body'; + const MULTI_COLLAPSE_ELEMENT_SELECTOR = '.ibexa-multicollapse--item'; + const toggleAllBtns = doc.querySelectorAll(`[${MULTI_COLLAPSE_BTN_TAG}]`); + const multiCollapsBodies = doc.querySelectorAll(`[${COLLAPSE_SECTION_BODY_TAG}]`); + + const initializeClickedStateArray = () => { + const initToggleState = []; + + if (toggleAllBtns.length === 0) return []; + + Array.from(toggleAllBtns).forEach((collapseBtn) => { + const tagValue = collapseBtn.getAttribute(MULTI_COLLAPSE_BTN_TAG); + let existingEntry = initToggleState.find((obj) => obj.btnName === tagValue); + + if (!existingEntry) { + existingEntry = { btnName: tagValue, collapsedElements: [] }; + initToggleState.push(existingEntry); + } + }); + + return initToggleState; }; - const toggleMultiCollapseIfNeeded = () => { - const allGroups = doc.querySelectorAll(MULTI_COLLAPSE_BODY_SELECTOR); + let clickedElementsState = initializeClickedStateArray(); + const toggleMultiCollapseButton = (btn, changeToCollapseAll) => { + const expandAll = btn.querySelector('.ibexa-multi-collapse__toggler-expand'); + const collapseAll = btn.querySelector('.ibexa-multi-collapse__toggler-collapse'); + + if (changeToCollapseAll && collapseAll.classList.contains('d-none')) { + collapseAll.classList.toggle('d-none'); + expandAll.classList.toggle('d-none'); + } else if (!changeToCollapseAll && expandAll.classList.contains('d-none')) { + collapseAll.classList.toggle('d-none'); + expandAll.classList.toggle('d-none'); + } + }; + const toggleMultiCollapseIfNeeded = (multiCollapseNode, toggleBtn, tabllLength) => { + const allElements = multiCollapseNode.querySelectorAll(MULTI_COLLAPSE_ELEMENT_SELECTOR); - if (singleElementClicked.length === allGroups.length || singleElementClicked.length === 0) { - toggleMultiCollapseButton(); + if (tabllLength === allElements.length || tabllLength === 0) { + toggleMultiCollapseButton(toggleBtn, tabllLength === 0); } }; - const handleCollapseAction = (expandAction) => { - singleElementClicked = []; - doc.querySelectorAll('.ibexa-collapse').forEach((collapseNode) => { + const handleCollapseAction = (multiCollapseNode, expandAction) => { + const index = clickedElementsState.findIndex( + (element) => element.btnName === multiCollapseNode.getAttribute(COLLAPSE_SECTION_BODY_TAG), + ); + + if (expandAction) { + clickedElementsState[index].collapsedElements = []; + } + + multiCollapseNode.querySelectorAll('.ibexa-collapse').forEach((collapseNode) => { const isElementCollapsed = collapseNode.classList.contains('ibexa-collapse--collapsed'); if (expandAction === isElementCollapsed) { - bootstrap.Collapse.getOrCreateInstance(collapseNode.querySelector(MULTI_COLLAPSE_BODY_SELECTOR)).toggle(); + bootstrap.Collapse.getOrCreateInstance(collapseNode.querySelector(MULTI_COLLAPSE_ELEMENT_SELECTOR)).toggle(); + + if (!expandAction) { + const uniqueName = collapseNode.querySelector('.ibexa-collapse__toggle-btn').getAttribute('data-bs-target'); + clickedElementsState[index].collapsedElements.push(uniqueName); + } } }); }; @@ -34,28 +73,49 @@ collapseNode.classList.toggle('ibexa-collapse--collapsed', isCollapsed); collapseNode.dataset.collapsed = isCollapsed; - if (toggleAllBtn) { - const uniqueName = toggleButton.getAttribute('data-bs-target'); - - collapseNode.addEventListener('click', (event) => { - event.stopPropagation(); - - const toggleIndex = singleElementClicked.findIndex((elementIndex) => elementIndex === uniqueName); - - window.clearTimeout(toggleAllTimeout); - - toggleAllTimeout = window.setTimeout(() => { - if (toggleIndex !== -1) { - singleElementClicked.splice(toggleIndex, 1); - toggleMultiCollapseIfNeeded(); - - return; - } - - singleElementClicked.push(uniqueName); - toggleMultiCollapseIfNeeded(); - }, 200); - }); + if (toggleAllBtns && toggleAllBtns.length > 0) { + const multicollapseNode = collapseNode.closest(`[${COLLAPSE_SECTION_BODY_TAG}]`); + + if (!!multicollapseNode) { + const uniqueName = toggleButton.getAttribute('data-bs-target'); + const currentToggleAllButton = Array.from(toggleAllBtns).find( + (button) => button.getAttribute(MULTI_COLLAPSE_BTN_TAG) === multicollapseNode.getAttribute(COLLAPSE_SECTION_BODY_TAG), + ); + + collapseNode.querySelector('.ibexa-collapse__toggle-btn--status').addEventListener('click', (event) => { + event.stopPropagation(); + + const collapseSectionIndex = clickedElementsState.findIndex( + (collapseSection) => collapseSection.btnName === currentToggleAllButton.getAttribute(MULTI_COLLAPSE_BTN_TAG), + ); + const toggleIndex = clickedElementsState[collapseSectionIndex].collapsedElements.findIndex( + (element) => element === uniqueName, + ); + + window.clearTimeout(toggleAllTimeout); + + toggleAllTimeout = window.setTimeout(() => { + if (toggleIndex !== -1) { + clickedElementsState[collapseSectionIndex].collapsedElements.splice(toggleIndex, 1); + + toggleMultiCollapseIfNeeded( + multicollapseNode, + currentToggleAllButton, + clickedElementsState[collapseSectionIndex].collapsedElements.length, + ); + + return; + } + clickedElementsState[collapseSectionIndex].collapsedElements.push(uniqueName); + + toggleMultiCollapseIfNeeded( + multicollapseNode, + currentToggleAllButton, + clickedElementsState[collapseSectionIndex].collapsedElements.length, + ); + }, 200); + }); + } } collapseNode.addEventListener('hide.bs.collapse', (event) => { @@ -71,18 +131,28 @@ }); }); - if (toggleAllBtn) { - toggleAllBtn.addEventListener('click', (event) => { - event.stopPropagation(); + if (toggleAllBtns) { + toggleAllBtns.forEach((btn) => { + btn.addEventListener('click', (event) => { + event.stopPropagation(); + + const collapseAll = btn?.querySelector('.ibexa-multi-collapse__toggler-collapse'); + const collapseSelector = btn.getAttribute(MULTI_COLLAPSE_BTN_TAG); + if (!!collapseSelector) { + const multiCollapseNode = Array.from(multiCollapsBodies).find( + (node) => node.getAttribute(COLLAPSE_SECTION_BODY_TAG) === collapseSelector, + ); - window.clearTimeout(toggleAllTimeout); + window.clearTimeout(toggleAllTimeout); - toggleAllTimeout = window.setTimeout(() => { - const isExpanding = collapseAll.classList.contains('d-none'); + toggleAllTimeout = window.setTimeout(() => { + const isExpandingAction = collapseAll.classList.contains('d-none'); - handleCollapseAction(isExpanding); - toggleMultiCollapseButton(); - }, 200); + handleCollapseAction(multiCollapseNode, isExpandingAction); + toggleMultiCollapseButton(btn, isExpandingAction); + }, 200); + } + }); }); } })(window, window.document, window.bootstrap); diff --git a/src/bundle/Resources/public/scss/_multi-collapse.scss b/src/bundle/Resources/public/scss/_multi-collapse.scss new file mode 100644 index 0000000000..4f9f3c8000 --- /dev/null +++ b/src/bundle/Resources/public/scss/_multi-collapse.scss @@ -0,0 +1,37 @@ +.ibexa-multi-collapse { + &__toggler-expand, + &__toggler-collapse { + pointer-events: none; + } + + &__header { + display: flex; + align-items: center; + justify-content: space-between; + } + + &__content { + width: 100%; + margin: calculateRem(16px) 0; + } + + &__input { + margin-top: calculateRem(16px); + } + + &__group { + .ibexa-collapse { + &__header { + display: flex; + border-bottom: calculateRem(1px) solid $ibexa-color-light; + } + + &__toggle-btn:not(.ibexa-collapse__toggle-btn--status) { + font-size: $ibexa-text-font-size-large; + font-weight: bold; + margin-right: auto; + padding-left: 0; + } + } + } +} diff --git a/src/bundle/Resources/public/scss/ibexa.scss b/src/bundle/Resources/public/scss/ibexa.scss index e318699fe5..60bf354145 100644 --- a/src/bundle/Resources/public/scss/ibexa.scss +++ b/src/bundle/Resources/public/scss/ibexa.scss @@ -102,6 +102,7 @@ @import 'autosave'; @import 'side-menu'; @import 'collapse'; +@import 'multi-collapse'; @import 'tag-view-select'; @import 'grid-view'; @import 'grid-view-item'; From e2cef7503182b1fd1878fd741f35caf3fa4f1ed9 Mon Sep 17 00:00:00 2001 From: Aleksandra Bozek Date: Tue, 10 Dec 2024 12:29:45 +0100 Subject: [PATCH 06/12] Build test fix --- src/bundle/Resources/public/js/scripts/core/collapse.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/bundle/Resources/public/js/scripts/core/collapse.js b/src/bundle/Resources/public/js/scripts/core/collapse.js index 0c7913f2a9..dc369951d6 100644 --- a/src/bundle/Resources/public/js/scripts/core/collapse.js +++ b/src/bundle/Resources/public/js/scripts/core/collapse.js @@ -23,7 +23,7 @@ return initToggleState; }; - let clickedElementsState = initializeClickedStateArray(); + const clickedElementsState = initializeClickedStateArray(); const toggleMultiCollapseButton = (btn, changeToCollapseAll) => { const expandAll = btn.querySelector('.ibexa-multi-collapse__toggler-expand'); const collapseAll = btn.querySelector('.ibexa-multi-collapse__toggler-collapse'); From 2324b86f83b7d658b371be20c4f74566c7b6b5d0 Mon Sep 17 00:00:00 2001 From: Aleksandra Bozek Date: Wed, 11 Dec 2024 16:54:46 +0100 Subject: [PATCH 07/12] review fixes pt 2 --- .../Resources/public/js/scripts/core/collapse.js | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/src/bundle/Resources/public/js/scripts/core/collapse.js b/src/bundle/Resources/public/js/scripts/core/collapse.js index dc369951d6..9ad976508b 100644 --- a/src/bundle/Resources/public/js/scripts/core/collapse.js +++ b/src/bundle/Resources/public/js/scripts/core/collapse.js @@ -2,7 +2,6 @@ let toggleAllTimeout; const MULTI_COLLAPSE_BTN_TAG = 'data-multi-collapse-btn-id'; const COLLAPSE_SECTION_BODY_TAG = 'data-multi-collapse-body'; - const MULTI_COLLAPSE_ELEMENT_SELECTOR = '.ibexa-multicollapse--item'; const toggleAllBtns = doc.querySelectorAll(`[${MULTI_COLLAPSE_BTN_TAG}]`); const multiCollapsBodies = doc.querySelectorAll(`[${COLLAPSE_SECTION_BODY_TAG}]`); @@ -37,7 +36,7 @@ } }; const toggleMultiCollapseIfNeeded = (multiCollapseNode, toggleBtn, tabllLength) => { - const allElements = multiCollapseNode.querySelectorAll(MULTI_COLLAPSE_ELEMENT_SELECTOR); + const allElements = multiCollapseNode.querySelectorAll('.ibexa-multicollapse--item'); if (tabllLength === allElements.length || tabllLength === 0) { toggleMultiCollapseButton(toggleBtn, tabllLength === 0); @@ -56,7 +55,7 @@ const isElementCollapsed = collapseNode.classList.contains('ibexa-collapse--collapsed'); if (expandAction === isElementCollapsed) { - bootstrap.Collapse.getOrCreateInstance(collapseNode.querySelector(MULTI_COLLAPSE_ELEMENT_SELECTOR)).toggle(); + bootstrap.Collapse.getOrCreateInstance(collapseNode.querySelector('.ibexa-multicollapse--item')).toggle(); if (!expandAction) { const uniqueName = collapseNode.querySelector('.ibexa-collapse__toggle-btn').getAttribute('data-bs-target'); @@ -73,7 +72,7 @@ collapseNode.classList.toggle('ibexa-collapse--collapsed', isCollapsed); collapseNode.dataset.collapsed = isCollapsed; - if (toggleAllBtns && toggleAllBtns.length > 0) { + if (toggleAllBtns.length > 0) { const multicollapseNode = collapseNode.closest(`[${COLLAPSE_SECTION_BODY_TAG}]`); if (!!multicollapseNode) { @@ -131,12 +130,12 @@ }); }); - if (toggleAllBtns) { + if (toggleAllBtns.length > 0) { toggleAllBtns.forEach((btn) => { btn.addEventListener('click', (event) => { event.stopPropagation(); - const collapseAll = btn?.querySelector('.ibexa-multi-collapse__toggler-collapse'); + const collapseAll = btn.querySelector('.ibexa-multi-collapse__toggler-collapse'); const collapseSelector = btn.getAttribute(MULTI_COLLAPSE_BTN_TAG); if (!!collapseSelector) { const multiCollapseNode = Array.from(multiCollapsBodies).find( From 09a22734b3c78c8847ab581a8410b2884fdc63f8 Mon Sep 17 00:00:00 2001 From: Aleksandra Bozek Date: Thu, 12 Dec 2024 14:49:27 +0100 Subject: [PATCH 08/12] review fixes pt 3 --- .../public/js/scripts/core/collapse.js | 100 +++++++++--------- .../public/scss/_multi-collapse.scss | 8 +- 2 files changed, 55 insertions(+), 53 deletions(-) diff --git a/src/bundle/Resources/public/js/scripts/core/collapse.js b/src/bundle/Resources/public/js/scripts/core/collapse.js index 9ad976508b..9943156708 100644 --- a/src/bundle/Resources/public/js/scripts/core/collapse.js +++ b/src/bundle/Resources/public/js/scripts/core/collapse.js @@ -1,16 +1,14 @@ -(function (global, doc, bootstrap) { +(function (global, doc, bootstrap, Translator) { let toggleAllTimeout; const MULTI_COLLAPSE_BTN_TAG = 'data-multi-collapse-btn-id'; const COLLAPSE_SECTION_BODY_TAG = 'data-multi-collapse-body'; - const toggleAllBtns = doc.querySelectorAll(`[${MULTI_COLLAPSE_BTN_TAG}]`); - const multiCollapsBodies = doc.querySelectorAll(`[${COLLAPSE_SECTION_BODY_TAG}]`); + const toggleAllBtns = [...doc.querySelectorAll(`[${MULTI_COLLAPSE_BTN_TAG}]`)]; + const multiCollapsBodies = [...doc.querySelectorAll(`[${COLLAPSE_SECTION_BODY_TAG}]`)]; const initializeClickedStateArray = () => { const initToggleState = []; - if (toggleAllBtns.length === 0) return []; - - Array.from(toggleAllBtns).forEach((collapseBtn) => { + toggleAllBtns.forEach((collapseBtn) => { const tagValue = collapseBtn.getAttribute(MULTI_COLLAPSE_BTN_TAG); let existingEntry = initToggleState.find((obj) => obj.btnName === tagValue); @@ -24,22 +22,30 @@ }; const clickedElementsState = initializeClickedStateArray(); const toggleMultiCollapseButton = (btn, changeToCollapseAll) => { - const expandAll = btn.querySelector('.ibexa-multi-collapse__toggler-expand'); - const collapseAll = btn.querySelector('.ibexa-multi-collapse__toggler-collapse'); - - if (changeToCollapseAll && collapseAll.classList.contains('d-none')) { - collapseAll.classList.toggle('d-none'); - expandAll.classList.toggle('d-none'); - } else if (!changeToCollapseAll && expandAll.classList.contains('d-none')) { - collapseAll.classList.toggle('d-none'); - expandAll.classList.toggle('d-none'); + if (changeToCollapseAll && btn.classList.contains('label-expand-all')) { + btn.innerHTML = Translator.trans( + /*@Desc("Change collapseAll button label*/ 'product_type.edit.section.attribute_collapse_all', + {}, + 'ibexa_product_catalog', + ); + btn.classList.remove('label-expand-all'); + + return; + } + if (!changeToCollapseAll) { + btn.innerHTML = Translator.trans( + /*@Desc("Change collapseAll button label*/ 'product_type.edit.section.attribute_expand_all', + {}, + 'ibexa_product_catalog', + ); + btn.classList.add('label-expand-all'); } }; - const toggleMultiCollapseIfNeeded = (multiCollapseNode, toggleBtn, tabllLength) => { - const allElements = multiCollapseNode.querySelectorAll('.ibexa-multicollapse--item'); + const toggleMultiCollapseIfNeeded = (multiCollapseNode, toggleBtn, tableLength) => { + const allElements = multiCollapseNode.querySelectorAll('.ibexa-multi-collapse--item'); - if (tabllLength === allElements.length || tabllLength === 0) { - toggleMultiCollapseButton(toggleBtn, tabllLength === 0); + if (tableLength === allElements.length || tableLength === 0) { + toggleMultiCollapseButton(toggleBtn, tableLength === 0); } }; const handleCollapseAction = (multiCollapseNode, expandAction) => { @@ -53,9 +59,11 @@ multiCollapseNode.querySelectorAll('.ibexa-collapse').forEach((collapseNode) => { const isElementCollapsed = collapseNode.classList.contains('ibexa-collapse--collapsed'); + const needToBeToggled = expandAction === isElementCollapsed; - if (expandAction === isElementCollapsed) { - bootstrap.Collapse.getOrCreateInstance(collapseNode.querySelector('.ibexa-multicollapse--item')).toggle(); + if (needToBeToggled) { + const element = bootstrap.Collapse.getOrCreateInstance(collapseNode.querySelector('.ibexa-multi-collapse--item')); + expandAction ? element.show() : element.hide(); if (!expandAction) { const uniqueName = collapseNode.querySelector('.ibexa-collapse__toggle-btn').getAttribute('data-bs-target'); @@ -73,12 +81,12 @@ collapseNode.dataset.collapsed = isCollapsed; if (toggleAllBtns.length > 0) { - const multicollapseNode = collapseNode.closest(`[${COLLAPSE_SECTION_BODY_TAG}]`); + const multiCollapseNode = collapseNode.closest(`[${COLLAPSE_SECTION_BODY_TAG}]`); - if (!!multicollapseNode) { + if (!!multiCollapseNode) { const uniqueName = toggleButton.getAttribute('data-bs-target'); - const currentToggleAllButton = Array.from(toggleAllBtns).find( - (button) => button.getAttribute(MULTI_COLLAPSE_BTN_TAG) === multicollapseNode.getAttribute(COLLAPSE_SECTION_BODY_TAG), + const currentToggleAllButton = toggleAllBtns.find( + (button) => button.getAttribute(MULTI_COLLAPSE_BTN_TAG) === multiCollapseNode.getAttribute(COLLAPSE_SECTION_BODY_TAG), ); collapseNode.querySelector('.ibexa-collapse__toggle-btn--status').addEventListener('click', (event) => { @@ -98,7 +106,7 @@ clickedElementsState[collapseSectionIndex].collapsedElements.splice(toggleIndex, 1); toggleMultiCollapseIfNeeded( - multicollapseNode, + multiCollapseNode, currentToggleAllButton, clickedElementsState[collapseSectionIndex].collapsedElements.length, ); @@ -108,7 +116,7 @@ clickedElementsState[collapseSectionIndex].collapsedElements.push(uniqueName); toggleMultiCollapseIfNeeded( - multicollapseNode, + multiCollapseNode, currentToggleAllButton, clickedElementsState[collapseSectionIndex].collapsedElements.length, ); @@ -130,28 +138,24 @@ }); }); - if (toggleAllBtns.length > 0) { - toggleAllBtns.forEach((btn) => { - btn.addEventListener('click', (event) => { - event.stopPropagation(); + const attachAllElementsToggler = (btn) => + btn.addEventListener('click', () => { + const collapseSelector = btn.getAttribute(MULTI_COLLAPSE_BTN_TAG); + if (!!collapseSelector) { + const multiCollapseNode = multiCollapsBodies.find( + (node) => node.getAttribute(COLLAPSE_SECTION_BODY_TAG) === collapseSelector, + ); - const collapseAll = btn.querySelector('.ibexa-multi-collapse__toggler-collapse'); - const collapseSelector = btn.getAttribute(MULTI_COLLAPSE_BTN_TAG); - if (!!collapseSelector) { - const multiCollapseNode = Array.from(multiCollapsBodies).find( - (node) => node.getAttribute(COLLAPSE_SECTION_BODY_TAG) === collapseSelector, - ); + window.clearTimeout(toggleAllTimeout); - window.clearTimeout(toggleAllTimeout); + toggleAllTimeout = window.setTimeout(() => { + const isExpandingAction = btn.classList.contains('label-expand-all'); - toggleAllTimeout = window.setTimeout(() => { - const isExpandingAction = collapseAll.classList.contains('d-none'); - - handleCollapseAction(multiCollapseNode, isExpandingAction); - toggleMultiCollapseButton(btn, isExpandingAction); - }, 200); - } - }); + handleCollapseAction(multiCollapseNode, isExpandingAction); + toggleMultiCollapseButton(btn, isExpandingAction); + }, 200); + } }); - } -})(window, window.document, window.bootstrap); + + toggleAllBtns.forEach((btn) => attachAllElementsToggler(btn)); +})(window, window.document, window.bootstrap, window.Translator); diff --git a/src/bundle/Resources/public/scss/_multi-collapse.scss b/src/bundle/Resources/public/scss/_multi-collapse.scss index 4f9f3c8000..c8d75bfe73 100644 --- a/src/bundle/Resources/public/scss/_multi-collapse.scss +++ b/src/bundle/Resources/public/scss/_multi-collapse.scss @@ -1,9 +1,4 @@ .ibexa-multi-collapse { - &__toggler-expand, - &__toggler-collapse { - pointer-events: none; - } - &__header { display: flex; align-items: center; @@ -34,4 +29,7 @@ } } } + &--item { + pointer-events: none; + } } From c43983f8b9a71ab7367381ef9463d5c9b79da554 Mon Sep 17 00:00:00 2001 From: Aleksandra Bozek Date: Thu, 12 Dec 2024 16:02:05 +0100 Subject: [PATCH 09/12] Remove collapse state --- .../public/js/scripts/core/collapse.js | 86 ++++--------------- .../public/scss/_multi-collapse.scss | 3 - 2 files changed, 16 insertions(+), 73 deletions(-) diff --git a/src/bundle/Resources/public/js/scripts/core/collapse.js b/src/bundle/Resources/public/js/scripts/core/collapse.js index 9943156708..c4c4020155 100644 --- a/src/bundle/Resources/public/js/scripts/core/collapse.js +++ b/src/bundle/Resources/public/js/scripts/core/collapse.js @@ -5,22 +5,6 @@ const toggleAllBtns = [...doc.querySelectorAll(`[${MULTI_COLLAPSE_BTN_TAG}]`)]; const multiCollapsBodies = [...doc.querySelectorAll(`[${COLLAPSE_SECTION_BODY_TAG}]`)]; - const initializeClickedStateArray = () => { - const initToggleState = []; - - toggleAllBtns.forEach((collapseBtn) => { - const tagValue = collapseBtn.getAttribute(MULTI_COLLAPSE_BTN_TAG); - let existingEntry = initToggleState.find((obj) => obj.btnName === tagValue); - - if (!existingEntry) { - existingEntry = { btnName: tagValue, collapsedElements: [] }; - initToggleState.push(existingEntry); - } - }); - - return initToggleState; - }; - const clickedElementsState = initializeClickedStateArray(); const toggleMultiCollapseButton = (btn, changeToCollapseAll) => { if (changeToCollapseAll && btn.classList.contains('label-expand-all')) { btn.innerHTML = Translator.trans( @@ -41,37 +25,6 @@ btn.classList.add('label-expand-all'); } }; - const toggleMultiCollapseIfNeeded = (multiCollapseNode, toggleBtn, tableLength) => { - const allElements = multiCollapseNode.querySelectorAll('.ibexa-multi-collapse--item'); - - if (tableLength === allElements.length || tableLength === 0) { - toggleMultiCollapseButton(toggleBtn, tableLength === 0); - } - }; - const handleCollapseAction = (multiCollapseNode, expandAction) => { - const index = clickedElementsState.findIndex( - (element) => element.btnName === multiCollapseNode.getAttribute(COLLAPSE_SECTION_BODY_TAG), - ); - - if (expandAction) { - clickedElementsState[index].collapsedElements = []; - } - - multiCollapseNode.querySelectorAll('.ibexa-collapse').forEach((collapseNode) => { - const isElementCollapsed = collapseNode.classList.contains('ibexa-collapse--collapsed'); - const needToBeToggled = expandAction === isElementCollapsed; - - if (needToBeToggled) { - const element = bootstrap.Collapse.getOrCreateInstance(collapseNode.querySelector('.ibexa-multi-collapse--item')); - expandAction ? element.show() : element.hide(); - - if (!expandAction) { - const uniqueName = collapseNode.querySelector('.ibexa-collapse__toggle-btn').getAttribute('data-bs-target'); - clickedElementsState[index].collapsedElements.push(uniqueName); - } - } - }); - }; doc.querySelectorAll('.ibexa-collapse').forEach((collapseNode) => { const toggleButton = collapseNode.querySelector('.ibexa-collapse__toggle-btn'); @@ -84,7 +37,6 @@ const multiCollapseNode = collapseNode.closest(`[${COLLAPSE_SECTION_BODY_TAG}]`); if (!!multiCollapseNode) { - const uniqueName = toggleButton.getAttribute('data-bs-target'); const currentToggleAllButton = toggleAllBtns.find( (button) => button.getAttribute(MULTI_COLLAPSE_BTN_TAG) === multiCollapseNode.getAttribute(COLLAPSE_SECTION_BODY_TAG), ); @@ -92,34 +44,17 @@ collapseNode.querySelector('.ibexa-collapse__toggle-btn--status').addEventListener('click', (event) => { event.stopPropagation(); - const collapseSectionIndex = clickedElementsState.findIndex( - (collapseSection) => collapseSection.btnName === currentToggleAllButton.getAttribute(MULTI_COLLAPSE_BTN_TAG), - ); - const toggleIndex = clickedElementsState[collapseSectionIndex].collapsedElements.findIndex( - (element) => element === uniqueName, - ); + const myToggleButtons = [...multiCollapseNode.querySelectorAll('.ibexa-collapse__toggle-btn--status')]; window.clearTimeout(toggleAllTimeout); toggleAllTimeout = window.setTimeout(() => { - if (toggleIndex !== -1) { - clickedElementsState[collapseSectionIndex].collapsedElements.splice(toggleIndex, 1); + const countCollapsed = myToggleButtons.filter((button) => button.classList.contains('collapsed')).length; + const needToBeToggled = countCollapsed === myToggleButtons.length || countCollapsed === 0; - toggleMultiCollapseIfNeeded( - multiCollapseNode, - currentToggleAllButton, - clickedElementsState[collapseSectionIndex].collapsedElements.length, - ); - - return; + if (needToBeToggled) { + toggleMultiCollapseButton(currentToggleAllButton, countCollapsed === 0); } - clickedElementsState[collapseSectionIndex].collapsedElements.push(uniqueName); - - toggleMultiCollapseIfNeeded( - multiCollapseNode, - currentToggleAllButton, - clickedElementsState[collapseSectionIndex].collapsedElements.length, - ); }, 200); }); } @@ -138,6 +73,17 @@ }); }); + const handleCollapseAction = (multiCollapseNode, expandAction) => { + multiCollapseNode.querySelectorAll('.ibexa-collapse').forEach((collapseNode) => { + const isElementCollapsed = collapseNode.classList.contains('ibexa-collapse--collapsed'); + const needToBeToggled = expandAction === isElementCollapsed; + + if (needToBeToggled) { + const element = bootstrap.Collapse.getOrCreateInstance(collapseNode.querySelector('.ibexa-multi-collapse-single-item')); + expandAction ? element.show() : element.hide(); + } + }); + }; const attachAllElementsToggler = (btn) => btn.addEventListener('click', () => { const collapseSelector = btn.getAttribute(MULTI_COLLAPSE_BTN_TAG); diff --git a/src/bundle/Resources/public/scss/_multi-collapse.scss b/src/bundle/Resources/public/scss/_multi-collapse.scss index c8d75bfe73..bf49d0c4b1 100644 --- a/src/bundle/Resources/public/scss/_multi-collapse.scss +++ b/src/bundle/Resources/public/scss/_multi-collapse.scss @@ -29,7 +29,4 @@ } } } - &--item { - pointer-events: none; - } } From c8db495d8129a34f1687a5af1fa235c19ff1b07e Mon Sep 17 00:00:00 2001 From: Aleksandra Bozek Date: Fri, 13 Dec 2024 11:20:09 +0100 Subject: [PATCH 10/12] Rename toggleAllBtn selector --- .../public/js/scripts/core/collapse.js | 26 +++++-------------- 1 file changed, 7 insertions(+), 19 deletions(-) diff --git a/src/bundle/Resources/public/js/scripts/core/collapse.js b/src/bundle/Resources/public/js/scripts/core/collapse.js index c4c4020155..fa1f86ac25 100644 --- a/src/bundle/Resources/public/js/scripts/core/collapse.js +++ b/src/bundle/Resources/public/js/scripts/core/collapse.js @@ -6,24 +6,12 @@ const multiCollapsBodies = [...doc.querySelectorAll(`[${COLLAPSE_SECTION_BODY_TAG}]`)]; const toggleMultiCollapseButton = (btn, changeToCollapseAll) => { - if (changeToCollapseAll && btn.classList.contains('label-expand-all')) { - btn.innerHTML = Translator.trans( - /*@Desc("Change collapseAll button label*/ 'product_type.edit.section.attribute_collapse_all', - {}, - 'ibexa_product_catalog', - ); - btn.classList.remove('label-expand-all'); - - return; - } - if (!changeToCollapseAll) { - btn.innerHTML = Translator.trans( - /*@Desc("Change collapseAll button label*/ 'product_type.edit.section.attribute_expand_all', - {}, - 'ibexa_product_catalog', - ); - btn.classList.add('label-expand-all'); - } + const displayedText = changeToCollapseAll + ? /*@Desc("Collapse all)*/ 'product_type.edit.section.attribute_collapse_all' + : /*@Desc("Expand all)*/ 'product_type.edit.section.attribute_expand_all'; + + btn.innerHTML = Translator.trans(displayedText, {}, 'ibexa_product_catalog'); + btn.classList.toggle('ibexa-label-expand-all'); }; doc.querySelectorAll('.ibexa-collapse').forEach((collapseNode) => { @@ -95,7 +83,7 @@ window.clearTimeout(toggleAllTimeout); toggleAllTimeout = window.setTimeout(() => { - const isExpandingAction = btn.classList.contains('label-expand-all'); + const isExpandingAction = btn.classList.contains('ibexa-label-expand-all'); handleCollapseAction(multiCollapseNode, isExpandingAction); toggleMultiCollapseButton(btn, isExpandingAction); From 42df142c9d2f48cdd57e664acacedec432b9c9a0 Mon Sep 17 00:00:00 2001 From: Aleksandra Bozek Date: Fri, 13 Dec 2024 14:05:13 +0100 Subject: [PATCH 11/12] review fixes pt 4 --- .../public/js/scripts/core/collapse.js | 59 ++++++++++--------- 1 file changed, 30 insertions(+), 29 deletions(-) diff --git a/src/bundle/Resources/public/js/scripts/core/collapse.js b/src/bundle/Resources/public/js/scripts/core/collapse.js index fa1f86ac25..f664a3c506 100644 --- a/src/bundle/Resources/public/js/scripts/core/collapse.js +++ b/src/bundle/Resources/public/js/scripts/core/collapse.js @@ -3,15 +3,14 @@ const MULTI_COLLAPSE_BTN_TAG = 'data-multi-collapse-btn-id'; const COLLAPSE_SECTION_BODY_TAG = 'data-multi-collapse-body'; const toggleAllBtns = [...doc.querySelectorAll(`[${MULTI_COLLAPSE_BTN_TAG}]`)]; - const multiCollapsBodies = [...doc.querySelectorAll(`[${COLLAPSE_SECTION_BODY_TAG}]`)]; - + const multiCollapseBodyNodes = [...doc.querySelectorAll(`[${COLLAPSE_SECTION_BODY_TAG}]`)]; const toggleMultiCollapseButton = (btn, changeToCollapseAll) => { const displayedText = changeToCollapseAll ? /*@Desc("Collapse all)*/ 'product_type.edit.section.attribute_collapse_all' : /*@Desc("Expand all)*/ 'product_type.edit.section.attribute_expand_all'; btn.innerHTML = Translator.trans(displayedText, {}, 'ibexa_product_catalog'); - btn.classList.toggle('ibexa-label-expand-all'); + btn.classList.toggle('ibexa-multi-collapse__btn--expand-all-label', !changeToCollapseAll); }; doc.querySelectorAll('.ibexa-collapse').forEach((collapseNode) => { @@ -21,31 +20,32 @@ collapseNode.classList.toggle('ibexa-collapse--collapsed', isCollapsed); collapseNode.dataset.collapsed = isCollapsed; - if (toggleAllBtns.length > 0) { - const multiCollapseNode = collapseNode.closest(`[${COLLAPSE_SECTION_BODY_TAG}]`); - - if (!!multiCollapseNode) { - const currentToggleAllButton = toggleAllBtns.find( - (button) => button.getAttribute(MULTI_COLLAPSE_BTN_TAG) === multiCollapseNode.getAttribute(COLLAPSE_SECTION_BODY_TAG), - ); + if (!toggleAllBtns.length) { + return; + } + const multiCollapseNode = collapseNode.closest(`[${COLLAPSE_SECTION_BODY_TAG}]`); - collapseNode.querySelector('.ibexa-collapse__toggle-btn--status').addEventListener('click', (event) => { - event.stopPropagation(); + if (!!multiCollapseNode) { + const currentToggleAllButton = toggleAllBtns.find( + (toggleAllBtn) => + toggleAllBtn.getAttribute(MULTI_COLLAPSE_BTN_TAG) === multiCollapseNode.getAttribute(COLLAPSE_SECTION_BODY_TAG), + ); - const myToggleButtons = [...multiCollapseNode.querySelectorAll('.ibexa-collapse__toggle-btn--status')]; + collapseNode.querySelector('.ibexa-collapse__toggle-btn--status').addEventListener('click', (event) => { + event.stopPropagation(); + const currentCollapsibleButtons = [...multiCollapseNode.querySelectorAll('.ibexa-collapse__toggle-btn--status')]; - window.clearTimeout(toggleAllTimeout); + window.clearTimeout(toggleAllTimeout); - toggleAllTimeout = window.setTimeout(() => { - const countCollapsed = myToggleButtons.filter((button) => button.classList.contains('collapsed')).length; - const needToBeToggled = countCollapsed === myToggleButtons.length || countCollapsed === 0; + toggleAllTimeout = window.setTimeout(() => { + const collapsedCount = currentCollapsibleButtons.filter((button) => button.classList.contains('collapsed')).length; + const shouldBeToggled = collapsedCount === currentCollapsibleButtons.length || collapsedCount === 0; - if (needToBeToggled) { - toggleMultiCollapseButton(currentToggleAllButton, countCollapsed === 0); - } - }, 200); - }); - } + if (shouldBeToggled) { + toggleMultiCollapseButton(currentToggleAllButton, collapsedCount === 0); + } + }, 200); + }); } collapseNode.addEventListener('hide.bs.collapse', (event) => { @@ -64,10 +64,10 @@ const handleCollapseAction = (multiCollapseNode, expandAction) => { multiCollapseNode.querySelectorAll('.ibexa-collapse').forEach((collapseNode) => { const isElementCollapsed = collapseNode.classList.contains('ibexa-collapse--collapsed'); - const needToBeToggled = expandAction === isElementCollapsed; + const shouldBeToggled = expandAction === isElementCollapsed; - if (needToBeToggled) { - const element = bootstrap.Collapse.getOrCreateInstance(collapseNode.querySelector('.ibexa-multi-collapse-single-item')); + if (shouldBeToggled) { + const element = bootstrap.Collapse.getOrCreateInstance(collapseNode.querySelector('.ibexa-multi-collapse__single-item')); expandAction ? element.show() : element.hide(); } }); @@ -75,15 +75,16 @@ const attachAllElementsToggler = (btn) => btn.addEventListener('click', () => { const collapseSelector = btn.getAttribute(MULTI_COLLAPSE_BTN_TAG); + if (!!collapseSelector) { - const multiCollapseNode = multiCollapsBodies.find( - (node) => node.getAttribute(COLLAPSE_SECTION_BODY_TAG) === collapseSelector, + const multiCollapseNode = multiCollapseBodyNodes.find( + (multiCollapseBodyNode) => multiCollapseBodyNode.getAttribute(COLLAPSE_SECTION_BODY_TAG) === collapseSelector, ); window.clearTimeout(toggleAllTimeout); toggleAllTimeout = window.setTimeout(() => { - const isExpandingAction = btn.classList.contains('ibexa-label-expand-all'); + const isExpandingAction = btn.classList.contains('ibexa-multi-collapse__btn--expand-all-label'); handleCollapseAction(multiCollapseNode, isExpandingAction); toggleMultiCollapseButton(btn, isExpandingAction); From 88c29a3eae91fbe100e960bed1aeedc4830b440f Mon Sep 17 00:00:00 2001 From: Aleksandra Bozek Date: Mon, 16 Dec 2024 12:23:59 +0100 Subject: [PATCH 12/12] review fixes pt 5 --- .../public/js/scripts/core/collapse.js | 101 +++++++++--------- 1 file changed, 51 insertions(+), 50 deletions(-) diff --git a/src/bundle/Resources/public/js/scripts/core/collapse.js b/src/bundle/Resources/public/js/scripts/core/collapse.js index f664a3c506..ab20b1b1aa 100644 --- a/src/bundle/Resources/public/js/scripts/core/collapse.js +++ b/src/bundle/Resources/public/js/scripts/core/collapse.js @@ -1,15 +1,12 @@ (function (global, doc, bootstrap, Translator) { let toggleAllTimeout; - const MULTI_COLLAPSE_BTN_TAG = 'data-multi-collapse-btn-id'; - const COLLAPSE_SECTION_BODY_TAG = 'data-multi-collapse-body'; - const toggleAllBtns = [...doc.querySelectorAll(`[${MULTI_COLLAPSE_BTN_TAG}]`)]; - const multiCollapseBodyNodes = [...doc.querySelectorAll(`[${COLLAPSE_SECTION_BODY_TAG}]`)]; - const toggleMultiCollapseButton = (btn, changeToCollapseAll) => { + const toggleAllBtns = [...doc.querySelectorAll(`[data-multi-collapse-btn-id]`)]; + const toggleMultiCollapseBtn = (btn, changeToCollapseAll) => { const displayedText = changeToCollapseAll ? /*@Desc("Collapse all)*/ 'product_type.edit.section.attribute_collapse_all' : /*@Desc("Expand all)*/ 'product_type.edit.section.attribute_expand_all'; - btn.innerHTML = Translator.trans(displayedText, {}, 'ibexa_product_catalog'); + btn.innerText = Translator.trans(displayedText, {}, 'ibexa_product_catalog'); btn.classList.toggle('ibexa-multi-collapse__btn--expand-all-label', !changeToCollapseAll); }; @@ -20,77 +17,81 @@ collapseNode.classList.toggle('ibexa-collapse--collapsed', isCollapsed); collapseNode.dataset.collapsed = isCollapsed; - if (!toggleAllBtns.length) { + const multiCollapseNode = collapseNode.closest(`[data-multi-collapse-body]`); + + collapseNode.addEventListener('hide.bs.collapse', (event) => { + event.stopPropagation(); + + collapseNode.classList.add('ibexa-collapse--collapsed'); + collapseNode.dataset.collapsed = true; + }); + + collapseNode.addEventListener('show.bs.collapse', (event) => { + event.stopPropagation(); + + collapseNode.classList.remove('ibexa-collapse--collapsed'); + collapseNode.dataset.collapsed = false; + }); + + if (!multiCollapseNode || !toggleAllBtns.length) { return; } - const multiCollapseNode = collapseNode.closest(`[${COLLAPSE_SECTION_BODY_TAG}]`); - - if (!!multiCollapseNode) { - const currentToggleAllButton = toggleAllBtns.find( - (toggleAllBtn) => - toggleAllBtn.getAttribute(MULTI_COLLAPSE_BTN_TAG) === multiCollapseNode.getAttribute(COLLAPSE_SECTION_BODY_TAG), - ); - collapseNode.querySelector('.ibexa-collapse__toggle-btn--status').addEventListener('click', (event) => { - event.stopPropagation(); - const currentCollapsibleButtons = [...multiCollapseNode.querySelectorAll('.ibexa-collapse__toggle-btn--status')]; + const currentToggleAllBtn = doc.querySelector(`[data-multi-collapse-btn-id="${multiCollapseNode.dataset.multiCollapseBody}"]`); + const attachClickToggleHandler = (section) => { + section.addEventListener('click', () => { + const currentCollapsibleBtns = [...multiCollapseNode.querySelectorAll('[data-bs-toggle]')]; window.clearTimeout(toggleAllTimeout); toggleAllTimeout = window.setTimeout(() => { - const collapsedCount = currentCollapsibleButtons.filter((button) => button.classList.contains('collapsed')).length; - const shouldBeToggled = collapsedCount === currentCollapsibleButtons.length || collapsedCount === 0; + const collapsedCount = currentCollapsibleBtns.filter((btn) => btn.classList.contains('collapsed')).length; + const shouldBeToggled = collapsedCount === currentCollapsibleBtns.length || collapsedCount === 0; if (shouldBeToggled) { - toggleMultiCollapseButton(currentToggleAllButton, collapsedCount === 0); + toggleMultiCollapseBtn(currentToggleAllBtn, collapsedCount === 0); } }, 200); }); - } - - collapseNode.addEventListener('hide.bs.collapse', (event) => { - event.stopPropagation(); - collapseNode.classList.add('ibexa-collapse--collapsed'); - collapseNode.dataset.collapsed = true; - }); + }; - collapseNode.addEventListener('show.bs.collapse', (event) => { - event.stopPropagation(); - collapseNode.classList.remove('ibexa-collapse--collapsed'); - collapseNode.dataset.collapsed = false; - }); + collapseNode.querySelectorAll('[data-bs-toggle]').forEach(attachClickToggleHandler); }); - const handleCollapseAction = (multiCollapseNode, expandAction) => { + const handleCollapseAction = (multiCollapseNode, isExpandAction) => { multiCollapseNode.querySelectorAll('.ibexa-collapse').forEach((collapseNode) => { const isElementCollapsed = collapseNode.classList.contains('ibexa-collapse--collapsed'); - const shouldBeToggled = expandAction === isElementCollapsed; + const shouldBeToggled = isExpandAction === isElementCollapsed; if (shouldBeToggled) { const element = bootstrap.Collapse.getOrCreateInstance(collapseNode.querySelector('.ibexa-multi-collapse__single-item')); - expandAction ? element.show() : element.hide(); + if (isExpandAction) { + element.show(); + } else { + element.hide(); + } } }); }; - const attachAllElementsToggler = (btn) => + const attachAllElementsToggler = (btn) => { btn.addEventListener('click', () => { - const collapseSelector = btn.getAttribute(MULTI_COLLAPSE_BTN_TAG); + const collapseId = btn.dataset.multiCollapseBtnId; - if (!!collapseSelector) { - const multiCollapseNode = multiCollapseBodyNodes.find( - (multiCollapseBodyNode) => multiCollapseBodyNode.getAttribute(COLLAPSE_SECTION_BODY_TAG) === collapseSelector, - ); + if (!collapseId) { + return; + } - window.clearTimeout(toggleAllTimeout); + const multiCollapseBodyNode = doc.querySelector(`[data-multi-collapse-body="${collapseId}"]`); - toggleAllTimeout = window.setTimeout(() => { - const isExpandingAction = btn.classList.contains('ibexa-multi-collapse__btn--expand-all-label'); + window.clearTimeout(toggleAllTimeout); - handleCollapseAction(multiCollapseNode, isExpandingAction); - toggleMultiCollapseButton(btn, isExpandingAction); - }, 200); - } - }); + toggleAllTimeout = window.setTimeout(() => { + const isExpandingAction = btn.classList.contains('ibexa-multi-collapse__btn--expand-all-label'); - toggleAllBtns.forEach((btn) => attachAllElementsToggler(btn)); + handleCollapseAction(multiCollapseBodyNode, isExpandingAction); + toggleMultiCollapseBtn(btn, isExpandingAction); + }, 200); + }); + }; + toggleAllBtns.forEach(attachAllElementsToggler); })(window, window.document, window.bootstrap, window.Translator);