-
-
-
-
-
-
- -
- Menüpunkt 1
-
- -
- Menüpunkt 2
-
- -
- Menüpunkt 3
-
- -
- Menüpunkt 4
-
- -
- Menüpunkt 5
-
-
-
-
-
-
-
-
-
-
- -
- Menüpunkt 1
-
- -
- Menüpunkt 2
-
- -
- Menüpunkt 3
-
- -
- Menüpunkt 4
-
- -
- Menüpunkt 5
-
-
-
-
-
-
-
-
-
-
- 0 Treffer
-
-
-
-
-
-
-
-
-
-
- Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt.
-
-
-
-
H1 Überschrift
@@ -167,91 +78,6 @@
});
});
- 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((otherDemo) => {
- const otherTrigger = otherDemo.querySelector('.sg-pulldown-demo__trigger');
- otherDemo.dataset.open = 'false';
- if (otherTrigger) {
- otherTrigger.setAttribute('aria-expanded', 'false');
- }
- });
-
- demo.dataset.align = 'left';
- demo.dataset.open = String(nextState);
- trigger.setAttribute('aria-expanded', String(nextState));
- updatePulldownSelectionState(demo);
- });
-
- demo.querySelectorAll('[data-pulldown-option]').forEach((option) => {
- option.addEventListener('click', (event) => {
- event.stopPropagation();
- const nextChecked = option.getAttribute('aria-checked') !== 'true';
- option.setAttribute('aria-checked', String(nextChecked));
- updatePulldownSelectionState(demo);
- });
- });
-
- updatePulldownSelectionState(demo);
- });