diff --git a/components/interactive-elements.html b/components/interactive-elements.html index ab5850b..6774886 100644 --- a/components/interactive-elements.html +++ b/components/interactive-elements.html @@ -512,8 +512,8 @@
-

Variante aktivierbar: inaktiv

-
- -
-

Variante aktivierbar: aktiv

-
@@ -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) => {