review fixes pt 4

ibexa · Dec 13, 2024 · 42df142 · 42df142
1 parent c8db495
commit 42df142
Showing 1 changed file with 30 additions and 29 deletions.
diff --git 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,26 +64,27 @@
     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();
             }
         });
     };
     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);