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

Make slider variant activatable with inactive start and shared remove behavior

Browse Source
This commit is contained in:
Mathias Gläser
2026-05-19 11:09:37 +02:00
parent 7457dd34ee
commit 30193be5bd
1 changed files with 35 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/interactive-elements.html
+35 -21
View File
@@ -512,8 +512,8 @@
</div>
<div class="sg-state-example">
<p class="sg-state-example__label sg-table-label">Variante aktivierbar: inaktiv</p>
<label class="sg-slider-row sg-slider-row--inactive-selectable" data-component="slider" data-component-state="inactive-selectable">
<p class="sg-state-example__label sg-table-label">Variante aktivierbar</p>
<label class="sg-slider-row sg-slider-row--inactive-selectable" data-component="slider" data-component-state="inactive-selectable" data-activatable="true">
<span class="sg-label">Wert</span>
<input
class="sg-interaction-element sg-slider sg-form-inactive-selectable"
@@ -525,24 +525,7 @@
aria-label="Slider inaktiv auswählbar"
>
<output class="sg-slider-value sg-body" for="slider">2.0</output>
</label>
</div>
<div class="sg-state-example">
<p class="sg-state-example__label sg-table-label">Variante aktivierbar: aktiv</p>
<label class="sg-slider-row" data-component="slider" data-component-state="active">
<span class="sg-label">Wert</span>
<input
class="sg-interaction-element sg-slider sg-form-active"
type="range"
min="0"
max="10"
step="0.1"
value="6.5"
aria-label="Slider aktiv ausgewählt"
>
<output class="sg-slider-value sg-body" for="slider">6.5</output>
<button class="sg-pulldown-panel__remove" type="button" aria-label="Slider-Filter entfernen">×</button>
<button class="sg-pulldown-panel__remove" type="button" aria-label="Slider-Filter entfernen" data-slider-activate-remove hidden>×</button>
</label>
</div>
</div>
@@ -663,6 +646,7 @@
document.querySelectorAll('.sg-slider-row').forEach((row) => {
const slider = row.querySelector('.sg-slider');
const valueOutput = row.querySelector('.sg-slider-value');
const removeButton = row.querySelector('[data-slider-activate-remove]');
if (!slider || !valueOutput) {
return;
@@ -679,7 +663,19 @@
valueOutput.textContent = value.toFixed(1);
};
slider.addEventListener('input', updateSliderState);
slider.addEventListener('input', () => {
if (row.dataset.activatable === 'true' && row.dataset.componentState === 'inactive-selectable') {
row.dataset.componentState = 'active';
row.classList.remove('sg-slider-row--inactive-selectable');
slider.classList.remove('sg-form-inactive-selectable');
slider.classList.add('sg-form-active');
if (removeButton) {
removeButton.hidden = false;
}
}
updateSliderState();
});
updateSliderState();
});
@@ -955,6 +951,24 @@
});
});
document.querySelectorAll('[data-slider-activate-remove]').forEach((removeButton) => {
removeButton.addEventListener('click', (event) => {
event.stopPropagation();
const row = removeButton.closest('.sg-slider-row[data-activatable="true"]');
const slider = row ? row.querySelector('.sg-slider') : null;
if (!row || !slider) {
return;
}
row.dataset.componentState = 'inactive-selectable';
row.classList.add('sg-slider-row--inactive-selectable');
slider.classList.remove('sg-form-active');
slider.classList.add('sg-form-inactive-selectable');
removeButton.hidden = true;
});
});
// Filter rows inside the opened pulldown start as inactive preselected rows.
// They are visually dimmed but remain operable; clicking or changing them activates the row.
document.querySelectorAll('[data-pulldown-filter-row]').forEach((row) => {