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; - } }