gitea_admin/Styleguide
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add missing button and mode-toggle interactions to VSF list detail page

Browse Source
This commit is contained in:
Mathias Gläser
2026-05-28 10:26:50 +02:00
parent 377f23ff6e
commit b97e1d4d47
1 changed files with 88 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
patterns/vsf-list-detailseite.html
+88 -44
View File
@@ -116,23 +116,17 @@
<script src="../scripts/help-icon-overlays.js"></script>
<script>
const updatePulldownSelectionState = (pulldownDemo) => {
const checkedOption = pulldownDemo.querySelector('[data-pulldown-option][aria-checked="true"] span');
const trigger = pulldownDemo.querySelector('.sg-pulldown-demo__trigger');
const labelBase = trigger?.dataset.labelBase || '';
if (!trigger) {
return;
}
if (checkedOption) {
trigger.textContent = `${labelBase}: ${checkedOption.textContent?.trim() || ''}`;
pulldownDemo.dataset.componentState = 'active';
} else {
trigger.textContent = labelBase;
pulldownDemo.dataset.componentState = 'inactive-selectable';
}
};
document.querySelectorAll('.sg-portal-header__tabs').forEach((group) => {
group.querySelectorAll('.sg-tab-button').forEach((button) => {
button.addEventListener('click', () => {
group.querySelectorAll('.sg-tab-button').forEach((otherButton) => {
const isActive = otherButton === button;
otherButton.setAttribute('aria-selected', String(isActive));
otherButton.dataset.componentState = isActive ? 'active' : 'inactive';
});
});
});
});
document.querySelectorAll('.sg-sandwich-menu-wrap').forEach((wrap) => {
const button = wrap.querySelector('.sg-sandwich-button');
@@ -142,29 +136,81 @@
button.addEventListener('click', (event) => {
event.stopPropagation();
const isOpen = wrap.dataset.open === 'true';
wrap.dataset.open = String(!isOpen);
button.setAttribute('aria-expanded', String(!isOpen));
const nextState = wrap.dataset.open !== 'true';
document.querySelectorAll('.sg-sandwich-menu-wrap').forEach((otherWrap) => {
const otherButton = otherWrap.querySelector('.sg-sandwich-button');
otherWrap.dataset.open = 'false';
if (otherButton) {
otherButton.setAttribute('aria-expanded', 'false');
}
});
wrap.dataset.open = String(nextState);
button.setAttribute('aria-expanded', String(nextState));
});
});
document.querySelectorAll('.sg-pulldown-demo .sg-pulldown-demo__trigger').forEach((trigger) => {
trigger.addEventListener('click', (event) => {
event.stopPropagation();
const demo = trigger.closest('.sg-pulldown-demo');
if (!demo) {
document.querySelectorAll('.sg-mode-toggle').forEach((toggle) => {
toggle.addEventListener('click', () => {
const nextState = toggle.dataset.active === 'relative' ? 'absolute' : 'relative';
toggle.dataset.active = nextState;
toggle.dataset.componentState = nextState;
toggle.setAttribute(
'aria-label',
`Modus Schieber global: ${nextState === 'relative' ? 'relativ' : 'absolut'} aktiv`
);
});
});
const updatePulldownSelectionState = (demo) => {
const trigger = demo.querySelector('.sg-pulldown-demo__trigger');
const selectableOptions = demo.querySelectorAll('[data-pulldown-option]');
if (!trigger || selectableOptions.length === 0) {
return;
}
const selectedCount = Array.from(selectableOptions).filter((option) => {
return option.getAttribute('aria-checked') === 'true';
}).length;
selectableOptions.forEach((option) => {
const optionRow = option.closest('.sg-pulldown-option');
if (!optionRow) {
return;
}
optionRow.classList.toggle(
'sg-pulldown-option--selected',
option.getAttribute('aria-checked') === 'true'
);
});
const labelBase = trigger.dataset.labelBase || 'Auswahl';
trigger.textContent = selectedCount > 0 ? `${labelBase} (${selectedCount})` : labelBase;
trigger.classList.toggle('sg-pulldown--selected', selectedCount > 0);
trigger.classList.toggle('sg-form-active', selectedCount > 0);
trigger.dataset.componentState = selectedCount > 0 ? 'selected' : 'inactive-selectable';
demo.dataset.componentState = selectedCount > 0 ? 'selected' : 'inactive-selectable';
trigger.setAttribute(
'aria-label',
selectedCount > 0 ? `Pulldown ${labelBase} mit aktiver Auswahl` : `Pulldown ${labelBase} ohne aktive Auswahl`
);
};
document.querySelectorAll('.sg-pulldown-demo').forEach((demo) => {
const trigger = demo.querySelector('.sg-pulldown-demo__trigger');
if (!trigger) {
return;
}
trigger.addEventListener('click', (event) => {
event.stopPropagation();
const nextState = demo.dataset.open !== 'true';
document.querySelectorAll('.sg-pulldown-demo').forEach((other) => {
if (other === demo) {
return;
}
other.dataset.open = 'false';
const otherTrigger = other.querySelector('.sg-pulldown-demo__trigger');
document.querySelectorAll('.sg-pulldown-demo').forEach((otherDemo) => {
const otherTrigger = otherDemo.querySelector('.sg-pulldown-demo__trigger');
otherDemo.dataset.open = 'false';
if (otherTrigger) {
otherTrigger.setAttribute('aria-expanded', 'false');
}
@@ -199,19 +245,17 @@
option.addEventListener('click', (event) => {
event.stopPropagation();
const pulldownDemo = option.closest('.sg-pulldown-demo');
if (!pulldownDemo) {
return;
}
if (pulldownDemo) {
pulldownDemo.querySelectorAll('[data-pulldown-option]').forEach((otherOption) => {
otherOption.setAttribute('aria-checked', String(otherOption === option));
});
pulldownDemo.querySelectorAll('[data-pulldown-option]').forEach((otherOption) => {
otherOption.setAttribute('aria-checked', String(otherOption === option));
});
updatePulldownSelectionState(pulldownDemo);
const trigger = pulldownDemo.querySelector('.sg-pulldown-demo__trigger');
pulldownDemo.dataset.open = 'false';
if (trigger) {
trigger.setAttribute('aria-expanded', 'false');
updatePulldownSelectionState(pulldownDemo);
const trigger = pulldownDemo.querySelector('.sg-pulldown-demo__trigger');
pulldownDemo.dataset.open = 'false';
if (trigger) {
trigger.setAttribute('aria-expanded', 'false');
}
}
});
});