1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
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);
});
});
})();
|
