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

Set multiselect pulldown trigger to always-active normal variant

Browse Source
This commit is contained in:
Mathias Gläser
2026-05-19 15:42:09 +02:00
parent cb79060f70
commit 0895b8d24a
1 changed files with 11 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
patterns/multiselektions-pulldown.html
+11 -9
View File
@@ -14,12 +14,11 @@
<div class="sg-options-row" aria-label="Multiselektions-Pulldown Wrapper" data-pattern="multiselektions-pulldown"> <div class="sg-options-row" aria-label="Multiselektions-Pulldown Wrapper" data-pattern="multiselektions-pulldown">
<div class="sg-options-row__left" data-pattern-part="multiselektions-pulldown-trigger-area"> <div class="sg-options-row__left" data-pattern-part="multiselektions-pulldown-trigger-area">
<div class="sg-pulldown-demo" data-open="false" data-align="left" data-selection-mode="multiple" data-component="pulldown" data-component-state="inactive-selectable" data-activatable="true"> <div class="sg-pulldown-demo" data-open="false" data-align="left" data-selection-mode="multiple" data-component="pulldown" data-component-state="active" data-force-active="true">
<span class="sg-activatable-control"> <span class="sg-activatable-control">
<button class="sg-interaction-element sg-pulldown sg-pulldown--inactive-selectable sg-pulldown-demo__trigger" type="button" aria-expanded="false" aria-label="Multiselektions-Pulldown ohne aktive Auswahl" data-label-base="Multiselektions-Pulldown" data-component-part="pulldown-trigger"> <button class="sg-interaction-element sg-pulldown sg-pulldown--selected sg-form-active sg-pulldown-demo__trigger" type="button" aria-expanded="false" aria-label="Multiselektions-Pulldown mit aktiver Auswahl" data-label-base="Multiselektions-Pulldown" data-component-part="pulldown-trigger">
Multiselektions-Pulldown Multiselektions-Pulldown
</button> </button>
<button class="sg-activatable-remove" type="button" aria-label="Multiselektions-Pulldown entfernen" data-pulldown-activate-remove hidden>×</button>
</span> </span>
<div class="sg-pulldown-panel" aria-label="Geöffnetes Multiselektions-Pulldown" data-component-part="pulldown-panel"> <div class="sg-pulldown-panel" aria-label="Geöffnetes Multiselektions-Pulldown" data-component-part="pulldown-panel">
@@ -140,6 +139,7 @@
const trigger = demo.querySelector('.sg-pulldown-demo__trigger'); const trigger = demo.querySelector('.sg-pulldown-demo__trigger');
const selectableOptions = demo.querySelectorAll('[data-pulldown-option]'); const selectableOptions = demo.querySelectorAll('[data-pulldown-option]');
const activatableRemove = demo.querySelector('[data-pulldown-activate-remove]'); const activatableRemove = demo.querySelector('[data-pulldown-activate-remove]');
const forceActive = demo.dataset.forceActive === 'true';
if (!trigger || selectableOptions.length === 0) { if (!trigger || selectableOptions.length === 0) {
return; return;
@@ -150,16 +150,18 @@
}).length; }).length;
const labelBase = trigger.dataset.labelBase || 'Auswahl'; const labelBase = trigger.dataset.labelBase || 'Auswahl';
trigger.textContent = selectedCount > 0 ? `${labelBase} (${selectedCount})` : labelBase; trigger.textContent = forceActive
trigger.classList.toggle('sg-pulldown--selected', selectedCount > 0); ? labelBase
trigger.classList.toggle('sg-form-active', selectedCount > 0); : (selectedCount > 0 ? `${labelBase} (${selectedCount})` : labelBase);
trigger.classList.toggle('sg-pulldown--inactive-selectable', selectedCount === 0); trigger.classList.toggle('sg-pulldown--selected', forceActive || selectedCount > 0);
trigger.classList.toggle('sg-form-active', forceActive || selectedCount > 0);
trigger.classList.toggle('sg-pulldown--inactive-selectable', !forceActive && selectedCount === 0);
if (activatableRemove) { if (activatableRemove) {
activatableRemove.hidden = selectedCount === 0; activatableRemove.hidden = forceActive || selectedCount === 0;
} }
trigger.setAttribute( trigger.setAttribute(
'aria-label', 'aria-label',
selectedCount > 0 ? `${labelBase} mit aktiver Auswahl` : `${labelBase} ohne aktive Auswahl` forceActive || selectedCount > 0 ? `${labelBase} mit aktiver Auswahl` : `${labelBase} ohne aktive Auswahl`
); );
}; };