implement logic that may collapse list, fixes #6380biest-6380

2 files changed, 58 insertions, 0 deletions

diff --git a/resources/assets/javascripts/bootstrap/lists.js b/resources/assets/javascripts/bootstrap/lists.js
new file mode 100644
index 0000000..ac7b85c
--- /dev/null
+++ b/resources/assets/javascripts/bootstrap/lists.js
@@ -0,0 +1,57 @@
+import {$gettext} from "@/assets/javascripts/lib/gettext";
+
+(() => {
+    let uniqueId = 0;
+
+    STUDIP.ready(() => {
+        document.querySelectorAll('.collapsible-list').forEach(list => {
+            if (!list.matches('ol,ul')) {
+                console.error('Not applicable for anything else than ol/ul lists');
+            }
+
+            const data = list.dataset;
+
+            if (data.collapsibleListInitialized !== undefined) {
+                return;
+            }
+
+            data.collapsibleListInitialized = true;
+
+            const label = data.label ?? $gettext('Einträge');
+            const max = Number.parseInt(data.collapseAfter ?? 5, 10);
+            const items = Array.from(list.children);
+            const hiddenItems = items.slice(max);
+            const hiddenCount = hiddenItems.length;
+
+            if (hiddenCount === 0) {
+                return;
+            }
+
+            const id = list.getAttribute('id') ?? `collapsable-list-${uniqueId++}`;
+            list.setAttribute('id', id);
+
+            const button = Object.assign(document.createElement('button'), {
+                className: 'as-link',
+                textContent: '',
+                type: 'button',
+            });
+            button.setAttribute('aria-controls', id);
+
+            const update = (collapsed) => {
+                button.textContent = collapsed
+                    ? $gettext('%{count} weitere %{label} anzeigen', {count: hiddenCount, label})
+                    : $gettext('weniger %{label} anzeigen', {label});
+                button.setAttribute('aria-expanded', collapsed ? 'false' : 'true');
+                hiddenItems.forEach(li => li.toggleAttribute('hidden', collapsed));
+            };
+
+            update(true);
+
+            button.addEventListener('click', () => {
+                update(button.getAttribute('aria-expanded') === 'true');
+            });
+
+            list.after(button);
+        });
+    });
+})();
diff --git a/resources/assets/javascripts/entry-base.js b/resources/assets/javascripts/entry-base.js
index ad114f1..b4f807c 100644
--- a/resources/assets/javascripts/entry-base.js
+++ b/resources/assets/javascripts/entry-base.js
@@ -15,6 +15,7 @@ import "./jquery-bundle.js"
 import "./init.js"
 import "./bootstrap/responsive.js"
 import "./bootstrap/vue.js"
+import "./bootstrap/lists.js"
 
 import "./studip-ui.js"
 import "./bootstrap/fullscreen.js"