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