review fixes pt 5

ibexa · Dec 16, 2024 · 88c29a3 · 88c29a3
1 parent 42df142
commit 88c29a3
Showing 1 changed file with 51 additions and 50 deletions.
diff --git 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);