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

Make Multiselektionspulldown fully interactive

Browse Source
This commit is contained in:
Mathias Gläser
2026-05-19 13:33:22 +02:00
parent ba31de8870
commit b81fd57e57
2 changed files with 116 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
patterns/multiselektionspulldown.html
+111 -15
View File
@@ -47,57 +47,57 @@
<span>Nur Score "attraktiv"</span>
</label>
<div class="sg-slider-row sg-slider-row--inactive-selectable" data-activatable="true" aria-disabled="true">
<div class="sg-slider-row sg-slider-row--inactive-selectable" data-activatable="true" data-active="false" data-decimals="1" aria-disabled="true">
<span class="sg-label">Aktienbewertung</span>
<input class="sg-slider" type="range" min="0" max="10" step="0.1" value="6.5" disabled>
<span class="sg-slider-value">6.5</span>
<button class="sg-activatable-remove" type="button" aria-label="Aktienbewertung entfernen" hidden>&times;</button>
<button class="sg-activatable-remove sg-multiselect-pulldown__toggle" type="button" aria-label="Aktienbewertung aktivieren" data-action="toggle">+</button>
</div>
<div class="sg-slider-row sg-slider-row--inactive-selectable" data-activatable="true" aria-disabled="true">
<div class="sg-slider-row sg-slider-row--inactive-selectable" data-activatable="true" data-active="false" data-decimals="1" aria-disabled="true">
<span class="sg-label">Wachstum</span>
<input class="sg-slider" type="range" min="0" max="10" step="0.1" value="9.5" disabled>
<span class="sg-slider-value">9.5</span>
<button class="sg-activatable-remove" type="button" aria-label="Wachstum entfernen" hidden>&times;</button>
<button class="sg-activatable-remove sg-multiselect-pulldown__toggle" type="button" aria-label="Wachstum aktivieren" data-action="toggle">+</button>
</div>
<div class="sg-slider-row sg-slider-row--inactive-selectable" data-activatable="true" aria-disabled="true">
<div class="sg-slider-row sg-slider-row--inactive-selectable" data-activatable="true" data-active="false" data-decimals="1" aria-disabled="true">
<span class="sg-label">Profitabilität</span>
<input class="sg-slider" type="range" min="0" max="10" step="0.1" value="5.0" disabled>
<span class="sg-slider-value">5.0</span>
<button class="sg-activatable-remove" type="button" aria-label="Profitabilität entfernen" hidden>&times;</button>
<button class="sg-activatable-remove sg-multiselect-pulldown__toggle" type="button" aria-label="Profitabilität aktivieren" data-action="toggle">+</button>
</div>
<div class="sg-slider-row sg-slider-row--inactive-selectable" data-activatable="true" aria-disabled="true">
<div class="sg-slider-row sg-slider-row--inactive-selectable" data-activatable="true" data-active="false" data-decimals="1" aria-disabled="true">
<span class="sg-label">Stabilität</span>
<input class="sg-slider" type="range" min="0" max="10" step="0.1" value="6.5" disabled>
<span class="sg-slider-value">6.5</span>
<button class="sg-activatable-remove" type="button" aria-label="Stabilität entfernen" hidden>&times;</button>
<button class="sg-activatable-remove sg-multiselect-pulldown__toggle" type="button" aria-label="Stabilität aktivieren" data-action="toggle">+</button>
</div>
</div>
<div class="sg-multiselect-pulldown__section" aria-labelledby="kennzahlen-marktbewertung-max">
<h2 id="kennzahlen-marktbewertung-max" class="sg-sub-heading sg-multiselect-pulldown__section-title">Marktbewertung Maximum</h2>
<div class="sg-slider-row sg-slider-row--inactive-selectable" data-activatable="true" aria-disabled="true">
<div class="sg-slider-row sg-slider-row--inactive-selectable" data-activatable="true" data-active="false" data-decimals="0" aria-disabled="true">
<span class="sg-label">PE</span>
<input class="sg-slider" type="range" min="0" max="60" step="1" value="30" disabled>
<span class="sg-slider-value">30</span>
<button class="sg-activatable-remove" type="button" aria-label="PE entfernen" hidden>&times;</button>
<button class="sg-activatable-remove sg-multiselect-pulldown__toggle" type="button" aria-label="PE aktivieren" data-action="toggle">+</button>
</div>
<div class="sg-slider-row sg-slider-row--inactive-selectable" data-activatable="true" aria-disabled="true">
<div class="sg-slider-row sg-slider-row--inactive-selectable" data-activatable="true" data-active="false" data-decimals="0" aria-disabled="true">
<span class="sg-label">PE forw.</span>
<input class="sg-slider" type="range" min="0" max="50" step="1" value="25" disabled>
<span class="sg-slider-value">25</span>
<button class="sg-activatable-remove" type="button" aria-label="PE forw. entfernen" hidden>&times;</button>
<button class="sg-activatable-remove sg-multiselect-pulldown__toggle" type="button" aria-label="PE forw. aktivieren" data-action="toggle">+</button>
</div>
<div class="sg-slider-row" data-activatable="true">
<div class="sg-slider-row" data-activatable="true" data-active="true" data-decimals="1">
<span class="sg-label">PEG</span>
<input class="sg-slider" type="range" min="0" max="4" step="0.1" value="1.6">
<span class="sg-slider-value">1.6</span>
<button class="sg-activatable-remove" type="button" aria-label="PEG entfernen">&times;</button>
<button class="sg-activatable-remove sg-multiselect-pulldown__toggle" type="button" aria-label="PEG deaktivieren" data-action="toggle">&times;</button>
</div>
</div>
@@ -122,7 +122,7 @@
<div class="sg-multiselect-pulldown__row-label">
<span class="sg-label">Moat mindestens</span>
<button class="sg-interaction-element sg-pulldown sg-multiselect-pulldown__compact-pulldown" type="button" aria-label="Moat mindestens Maessig">Maessig</button>
<button class="sg-interaction-element sg-pulldown sg-multiselect-pulldown__compact-pulldown" type="button" aria-label="Moat mindestens Maessig" data-moat-options="Schwach|Maessig|Stark|Sehr stark" data-moat-index="1">Maessig</button>
</div>
</div>
</div>
@@ -136,5 +136,101 @@
</div>
</section>
<script>
(() => {
const pattern = document.querySelector('[data-pattern="multiselektionspulldown"]');
if (!pattern) {
return;
}
const formatSliderValue = (row, value) => {
const decimals = Number(row.dataset.decimals || 0);
return Number(value).toFixed(decimals);
};
const updateSliderRowState = (row, isActive) => {
const slider = row.querySelector('.sg-slider');
const toggle = row.querySelector('[data-action="toggle"]');
const label = row.querySelector('.sg-label');
if (!slider || !toggle || !label) {
return;
}
row.dataset.active = String(isActive);
row.classList.toggle('sg-slider-row--inactive-selectable', !isActive);
row.setAttribute('aria-disabled', String(!isActive));
slider.disabled = !isActive;
toggle.textContent = isActive ? '×' : '+';
toggle.setAttribute(
'aria-label',
`${label.textContent?.trim() || 'Filter'} ${isActive ? 'deaktivieren' : 'aktivieren'}`
);
};
pattern.querySelectorAll('.sg-slider-row[data-activatable="true"]').forEach((row) => {
const slider = row.querySelector('.sg-slider');
const valueEl = row.querySelector('.sg-slider-value');
const toggle = row.querySelector('[data-action="toggle"]');
if (!slider || !valueEl || !toggle) {
return;
}
valueEl.textContent = formatSliderValue(row, slider.value);
updateSliderRowState(row, row.dataset.active === 'true');
slider.addEventListener('input', () => {
valueEl.textContent = formatSliderValue(row, slider.value);
});
toggle.addEventListener('click', () => {
updateSliderRowState(row, row.dataset.active !== 'true');
});
});
pattern.querySelectorAll('[data-component="checkbox-field"] .sg-checkbox-field').forEach((checkbox) => {
checkbox.addEventListener('click', () => {
const isChecked = checkbox.getAttribute('aria-checked') === 'true';
const nextState = !isChecked;
checkbox.setAttribute('aria-checked', String(nextState));
checkbox.classList.toggle('sg-form-active', nextState);
checkbox.classList.toggle('sg-checkbox-field--inactive-selectable', !nextState);
});
});
pattern.querySelectorAll('.sg-multiselect-pulldown__radio-row').forEach((group) => {
const options = Array.from(group.querySelectorAll('[role="radio"]'));
options.forEach((radio) => {
radio.addEventListener('click', () => {
options.forEach((other) => {
const selected = other === radio;
other.setAttribute('aria-checked', String(selected));
other.classList.toggle('sg-radio-field--inactive-selectable', !selected);
});
});
});
});
const moatButton = pattern.querySelector('.sg-multiselect-pulldown__compact-pulldown');
if (moatButton) {
const options = (moatButton.dataset.moatOptions || '')
.split('|')
.map((option) => option.trim())
.filter(Boolean);
moatButton.addEventListener('click', () => {
if (options.length === 0) {
return;
}
const currentIndex = Number(moatButton.dataset.moatIndex || 0);
const nextIndex = (currentIndex + 1) % options.length;
moatButton.dataset.moatIndex = String(nextIndex);
moatButton.textContent = options[nextIndex];
moatButton.setAttribute('aria-label', `Moat mindestens ${options[nextIndex]}`);
});
}
})();
</script>
</body>
</html>
styleguide.css
+5
View File
@@ -1743,6 +1743,11 @@ section + section {
min-width: 7.5rem;
}
.sg-multiselect-pulldown__toggle {
font-size: 1.2rem;
line-height: 1;
}
@media (max-width: 48rem) {
.sg-multiselect-pulldown-demo {
width: 100%;