IBX-3456 Added collapse all button (#1394)

Author: albozek

src/bundle/Resources/config/bazinga_js_translation.yaml

@@ -13,4 +13,5 @@ active_domains:
     - 'ibexa_content_type'
     - 'ibexa_dropdown'
     - 'ibexa_popup_menu'
+    - 'ibexa_collapse'
     - 'messages'

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

@@ -1,21 +1,99 @@
-(function (global, doc) {
+(function (global, doc, bootstrap, Translator) {
+    let toggleAllTimeout;
+    const TOGGLE_TIMEOUT = 200;
+    const toggleAllBtns = [...doc.querySelectorAll(`[data-multi-collapse-btn-id]`)];
+    const toggleMultiCollapseBtn = (btn, changeToCollapseAll) => {
+        const displayedText = changeToCollapseAll
+            ? Translator.trans(/*@Desc("Collapse all sections")*/ 'collapse.collapse_all', {}, 'ibexa_collapse')
+            : Translator.trans(/*@Desc("Expand all sections")*/ 'collapse.expand_all', {}, 'ibexa_collapse');
+
+        btn.innerText = displayedText;
+        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]')];
+
+                global.clearTimeout(toggleAllTimeout);
+
+                toggleAllTimeout = global.setTimeout(() => {
+                    const collapsedCount = currentCollapsibleBtns.filter((btn) => btn.classList.contains('collapsed')).length;
+                    const shouldBeToggled = collapsedCount === currentCollapsibleBtns.length || collapsedCount === 0;
+
+                    if (shouldBeToggled) {
+                        toggleMultiCollapseBtn(currentToggleAllBtn, collapsedCount === 0);
+                    }
+                }, TOGGLE_TIMEOUT);
+            });
+        };
+
+        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}"]`);
+
+            global.clearTimeout(toggleAllTimeout);
+
+            toggleAllTimeout = global.setTimeout(() => {
+                const isExpandingAction = btn.classList.contains('ibexa-multi-collapse__btn--expand-all-label');
+
+                handleCollapseAction(multiCollapseBodyNode, isExpandingAction);
+                toggleMultiCollapseBtn(btn, isExpandingAction);
+            }, TOGGLE_TIMEOUT);
+        });
+    };
+    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,33 @@
+.ibexa-multi-collapse {
+    &__header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    }
+
+    &__content {
+        width: 100%;
+        margin: calculateRem(16px) 0;
+        padding-left: calculateRem(4px);
+    }
+
+    &__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';

src/bundle/Resources/translations/ibexa_collapse.en.xliff

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="utf-8"?>
+<xliff xmlns="urn:oasis:names:tc:xliff:document:1.2" xmlns:jms="urn:jms:translation" version="1.2">
+  <file source-language="en" target-language="en" datatype="plaintext" original="not.available">
+    <header>
+      <tool tool-id="JMSTranslationBundle" tool-name="JMSTranslationBundle" tool-version="1.1.0-DEV"/>
+      <note>The source node in most cases contains the sample message as written by the developer. If it looks like a dot-delimitted string such as "form.label.firstname", then the developer has not provided a default message.</note>
+    </header>
+    <body>
+      <trans-unit id="4436e5415672ea41ee48dbda15f8cb25baae6c64" resname="collapse.collapse_all">
+        <source>Collapse all sections</source>
+        <target state="new">Collapse all sections</target>
+        <note>key: collapse.collapse_all</note>
+      </trans-unit>
+      <trans-unit id="5f80091b211b46190856ec877c535d63aee17627" resname="collapse.expand_all">
+        <source>Expand all sections</source>
+        <target state="new">Expand all sections</target>
+        <note>key: collapse.expand_all</note>
+      </trans-unit>
+    </body>
+  </file>
+</xliff>

src/bundle/Resources/views/themes/admin/ui/component/collapse_all_btn/collapse_all_btn.html.twig

@@ -0,0 +1,7 @@
+{% trans_default_domain 'ibexa_collapse' %}
+
+<div class="ibexa-multi-collapse__header">
+    <button type="button" data-multi-collapse-btn-id="{{ multi_collapse_btn_id }}" class="ibexa-multi-collapse-btn btn ibexa-btn ibexa-btn--small ibexa-btn--ghost">
+        {{ 'collapse.collapse_all'|trans({}, 'ibexa_collapse')|desc('Collapse all sections') }}
+    </button>
+</div>