IBX-3456 Collapse all button support

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

@@ -1,11 +1,60 @@
-(function (global, doc) {
+(function (global, doc, bootstrap) {
+    let toggleAllTimeout;
+    let singleElementClicked = [];
+    const toggleAllBtn = doc.querySelector('.ibexa-multi-collapse-btn');
+    const expandAll = toggleAllBtn?.querySelector('.ibexa-attribute-group__toggler-expand');
+    const collapseAll = toggleAllBtn?.querySelector('.ibexa-attribute-group__toggler-collapse');
+    const MULTI_COLLAPSE_BODY_CLASS = '.ibexa-multi-collapse';
+
+    const toggleMultiCollapseButton = () => {
+        collapseAll.classList.toggle('d-none');
+        expandAll.classList.toggle('d-none');
+    };
+    const toggleMultiCollapseIfNeeded = () => {
+        const allGroups = doc.querySelectorAll(MULTI_COLLAPSE_BODY_CLASS);
+
+        if (singleElementClicked.length === allGroups.length || singleElementClicked.length === 0) {
+            toggleMultiCollapseButton();
+        }
+    };
+    const handleCollapseAction = (expandAction) => {
+        singleElementClicked = [];
+        doc.querySelectorAll('.ibexa-collapse').forEach((collapseNode) => {
+            const isElementCollapsed = collapseNode.classList.contains('ibexa-collapse--collapsed');
+
+            if (expandAction === isElementCollapsed) {
+                bootstrap.Collapse.getOrCreateInstance(collapseNode.querySelector(MULTI_COLLAPSE_BODY_CLASS)).toggle();
+            }
+        });
+    };
+
     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;
 
+        if (toggleAllBtn) {
+            const uniqeName = toggleButton.getAttribute('data-bs-target');
+
+            collapseNode.addEventListener('click', (event) => {
+                event.stopPropagation();
+                const toggleIndex = singleElementClicked.findIndex((elementIndex) => elementIndex === uniqeName);
+
+                window.clearTimeout(toggleAllTimeout);
+                toggleAllTimeout = window.setTimeout(() => {
+                    if (toggleIndex !== -1) {
+                        singleElementClicked.splice(toggleIndex, 1);
+                        toggleMultiCollapseIfNeeded();
+                        return;
+                    }
+                    singleElementClicked.push(uniqeName);
+                    toggleMultiCollapseIfNeeded();
+                }, 200);
+            });
+        }
+
         collapseNode.addEventListener('hide.bs.collapse', (event) => {
             event.stopPropagation();
             collapseNode.classList.add('ibexa-collapse--collapsed');
@@ -18,4 +67,17 @@
             collapseNode.dataset.collapsed = false;
         });
     });
-})(window, window.document);
+
+    if (toggleAllBtn) {
+        toggleAllBtn.addEventListener('click', (event) => {
+            event.stopPropagation();
+            window.clearTimeout(toggleAllTimeout);
+            toggleAllTimeout = window.setTimeout(() => {
+                const isExpanding = collapseAll.classList.contains('d-none');
+
+                handleCollapseAction(isExpanding);
+                toggleMultiCollapseButton();
+            }, 200);
+        });
+    }
+})(window, window.document, window.bootstrap);

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

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