IBX-3456 Collapse all button support

src/bundle/Resources/public/js/scripts/core/collapse.js

@@ -1,21 +1,97 @@
-(function (global, doc) {
+(function (global, doc, bootstrap, Translator) {
+    let toggleAllTimeout;
+    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.innerText = Translator.trans(displayedText, {}, 'ibexa_product_catalog');
+        btn.classList.toggle('ibexa-multi-collapse__btn--expand-all-label', !changeToCollapseAll);
+    };
+
     doc.querySelectorAll('.ibexa-collapse').forEach((collapseNode) => {
         const toggleButton = collapseNode.querySelector('.ibexa-collapse__toggle-btn');
         const isCollapsed = toggleButton.classList.contains('collapsed');
 
         collapseNode.classList.toggle('ibexa-collapse--collapsed', isCollapsed);
         collapseNode.dataset.collapsed = isCollapsed;
 
+        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 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 = currentCollapsibleBtns.filter((btn) => btn.classList.contains('collapsed')).length;
+                    const shouldBeToggled = collapsedCount === currentCollapsibleBtns.length || collapsedCount === 0;
+
+                    if (shouldBeToggled) {
+                        toggleMultiCollapseBtn(currentToggleAllBtn, collapsedCount === 0);
+                    }
+                }, 200);
+            });
+        };
+
+        collapseNode.querySelectorAll('[data-bs-toggle]').forEach(attachClickToggleHandler);
     });
-})(window, window.document);
+
+    const handleCollapseAction = (multiCollapseNode, isExpandAction) => {
+        multiCollapseNode.querySelectorAll('.ibexa-collapse').forEach((collapseNode) => {
+            const isElementCollapsed = collapseNode.classList.contains('ibexa-collapse--collapsed');
+            const shouldBeToggled = isExpandAction === isElementCollapsed;
+
+            if (shouldBeToggled) {
+                const element = bootstrap.Collapse.getOrCreateInstance(collapseNode.querySelector('.ibexa-multi-collapse__single-item'));
+                if (isExpandAction) {
+                    element.show();
+                } else {
+                    element.hide();
+                }
+            }
+        });
+    };
+    const attachAllElementsToggler = (btn) => {
+        btn.addEventListener('click', () => {
+            const collapseId = btn.dataset.multiCollapseBtnId;
+
+            if (!collapseId) {
+                return;
+            }
+
+            const multiCollapseBodyNode = doc.querySelector(`[data-multi-collapse-body="${collapseId}"]`);
+
+            window.clearTimeout(toggleAllTimeout);
+
+            toggleAllTimeout = window.setTimeout(() => {
+                const isExpandingAction = btn.classList.contains('ibexa-multi-collapse__btn--expand-all-label');
+
+                handleCollapseAction(multiCollapseBodyNode, isExpandingAction);
+                toggleMultiCollapseBtn(btn, isExpandingAction);
+            }, 200);
+        });
+    };
+    toggleAllBtns.forEach(attachAllElementsToggler);
+})(window, window.document, window.bootstrap, window.Translator);

src/bundle/Resources/public/scss/_anchor-navigation.scss

@@ -18,6 +18,10 @@
         &:last-child {
             border-bottom: none;
         }
+
+        &--no-border {
+            border-bottom: none;
+        }
     }
 
     &__section-group {

src/bundle/Resources/public/scss/_multi-collapse.scss

@@ -0,0 +1,32 @@
+.ibexa-multi-collapse {
+    &__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;
+            }
+        }
+    }
+}

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