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

Keep multiselect pulldown sliders active in off state

Browse Source
This commit is contained in:
Mathias Gläser
2026-05-27 10:37:29 +02:00
parent 2d49a1dd18
commit e9c1952e57
1 changed files with 18 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
patterns/multiselektions-pulldown.html
+18 -28
View File
@@ -36,7 +36,7 @@
<span>Checkbox 1</span> <span>Checkbox 1</span>
</label> </label>
<label class="sg-slider-row sg-slider-row--inactive-selectable" data-component="slider" data-component-state="inactive-selectable" data-activatable="true"> <label class="sg-slider-row" data-component="slider" data-component-state="inactive-selectable" data-activatable="true">
<button class="sg-mode-toggle sg-mode-toggle--local sg-activation-mode-toggle" type="button" data-active="absolute" aria-label="Aktivierung Slider 1: aus"> <button class="sg-mode-toggle sg-mode-toggle--local sg-activation-mode-toggle" type="button" data-active="absolute" aria-label="Aktivierung Slider 1: aus">
<span class="sg-mode-toggle__switch" aria-hidden="true"> <span class="sg-mode-toggle__switch" aria-hidden="true">
<span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--left">aus</span> <span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--left">aus</span>
@@ -46,19 +46,18 @@
</button> </button>
<span class="sg-label">Slider 1</span> <span class="sg-label">Slider 1</span>
<input <input
class="sg-interaction-element sg-slider sg-form-inactive-selectable" class="sg-interaction-element sg-slider sg-form-active"
type="range" type="range"
min="1" min="1"
max="10" max="10"
step="0.1" step="0.1"
value="6.5" value="6.5"
aria-label="Slider 1 von 1 bis 10" aria-label="Slider 1 von 1 bis 10"
disabled
> >
<output class="sg-slider-value" for="slider">6.5</output> <output class="sg-slider-value" for="slider">6.5</output>
</label> </label>
<label class="sg-slider-row sg-slider-row--inactive-selectable" data-component="slider" data-component-state="inactive-selectable" data-activatable="true"> <label class="sg-slider-row" data-component="slider" data-component-state="inactive-selectable" data-activatable="true">
<button class="sg-mode-toggle sg-mode-toggle--local sg-activation-mode-toggle" type="button" data-active="absolute" aria-label="Aktivierung Slider 2: aus"> <button class="sg-mode-toggle sg-mode-toggle--local sg-activation-mode-toggle" type="button" data-active="absolute" aria-label="Aktivierung Slider 2: aus">
<span class="sg-mode-toggle__switch" aria-hidden="true"> <span class="sg-mode-toggle__switch" aria-hidden="true">
<span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--left">aus</span> <span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--left">aus</span>
@@ -68,19 +67,18 @@
</button> </button>
<span class="sg-label">Slider 2</span> <span class="sg-label">Slider 2</span>
<input <input
class="sg-interaction-element sg-slider sg-form-inactive-selectable" class="sg-interaction-element sg-slider sg-form-active"
type="range" type="range"
min="1" min="1"
max="10" max="10"
step="0.1" step="0.1"
value="9.5" value="9.5"
aria-label="Slider 2 von 1 bis 10" aria-label="Slider 2 von 1 bis 10"
disabled
> >
<output class="sg-slider-value" for="slider">9.5</output> <output class="sg-slider-value" for="slider">9.5</output>
</label> </label>
<label class="sg-slider-row sg-slider-row--inactive-selectable" data-component="slider" data-component-state="inactive-selectable" data-activatable="true"> <label class="sg-slider-row" data-component="slider" data-component-state="inactive-selectable" data-activatable="true">
<button class="sg-mode-toggle sg-mode-toggle--local sg-activation-mode-toggle" type="button" data-active="absolute" aria-label="Aktivierung Slider 3: aus"> <button class="sg-mode-toggle sg-mode-toggle--local sg-activation-mode-toggle" type="button" data-active="absolute" aria-label="Aktivierung Slider 3: aus">
<span class="sg-mode-toggle__switch" aria-hidden="true"> <span class="sg-mode-toggle__switch" aria-hidden="true">
<span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--left">aus</span> <span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--left">aus</span>
@@ -90,19 +88,18 @@
</button> </button>
<span class="sg-label">Slider 3</span> <span class="sg-label">Slider 3</span>
<input <input
class="sg-interaction-element sg-slider sg-form-inactive-selectable" class="sg-interaction-element sg-slider sg-form-active"
type="range" type="range"
min="1" min="1"
max="10" max="10"
step="0.1" step="0.1"
value="5.0" value="5.0"
aria-label="Slider 3 von 1 bis 10" aria-label="Slider 3 von 1 bis 10"
disabled
> >
<output class="sg-slider-value" for="slider">5.0</output> <output class="sg-slider-value" for="slider">5.0</output>
</label> </label>
<label class="sg-slider-row sg-slider-row--inactive-selectable" data-component="slider" data-component-state="inactive-selectable" data-activatable="true"> <label class="sg-slider-row" data-component="slider" data-component-state="inactive-selectable" data-activatable="true">
<button class="sg-mode-toggle sg-mode-toggle--local sg-activation-mode-toggle" type="button" data-active="absolute" aria-label="Aktivierung Slider 4: aus"> <button class="sg-mode-toggle sg-mode-toggle--local sg-activation-mode-toggle" type="button" data-active="absolute" aria-label="Aktivierung Slider 4: aus">
<span class="sg-mode-toggle__switch" aria-hidden="true"> <span class="sg-mode-toggle__switch" aria-hidden="true">
<span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--left">aus</span> <span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--left">aus</span>
@@ -112,14 +109,13 @@
</button> </button>
<span class="sg-label">Slider 4</span> <span class="sg-label">Slider 4</span>
<input <input
class="sg-interaction-element sg-slider sg-form-inactive-selectable" class="sg-interaction-element sg-slider sg-form-active"
type="range" type="range"
min="1" min="1"
max="10" max="10"
step="0.1" step="0.1"
value="6.5" value="6.5"
aria-label="Slider 4 von 1 bis 10" aria-label="Slider 4 von 1 bis 10"
disabled
> >
<output class="sg-slider-value" for="slider">6.5</output> <output class="sg-slider-value" for="slider">6.5</output>
</label> </label>
@@ -128,7 +124,7 @@
<section class="sg-form-sections-card__chapter" aria-labelledby="multiselect-block-2"> <section class="sg-form-sections-card__chapter" aria-labelledby="multiselect-block-2">
<h2 id="multiselect-block-2" class="sg-strong sg-form-sections-card__chapter-title">Block 2</h2> <h2 id="multiselect-block-2" class="sg-strong sg-form-sections-card__chapter-title">Block 2</h2>
<label class="sg-slider-row sg-slider-row--inactive-selectable" data-component="slider" data-component-state="inactive-selectable" data-activatable="true"> <label class="sg-slider-row" data-component="slider" data-component-state="inactive-selectable" data-activatable="true">
<button class="sg-mode-toggle sg-mode-toggle--local sg-activation-mode-toggle" type="button" data-active="absolute" aria-label="Aktivierung Slider 5: aus"> <button class="sg-mode-toggle sg-mode-toggle--local sg-activation-mode-toggle" type="button" data-active="absolute" aria-label="Aktivierung Slider 5: aus">
<span class="sg-mode-toggle__switch" aria-hidden="true"> <span class="sg-mode-toggle__switch" aria-hidden="true">
<span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--left">aus</span> <span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--left">aus</span>
@@ -138,19 +134,18 @@
</button> </button>
<span class="sg-label">Slider 5</span> <span class="sg-label">Slider 5</span>
<input <input
class="sg-interaction-element sg-slider sg-form-inactive-selectable" class="sg-interaction-element sg-slider sg-form-active"
type="range" type="range"
min="1" min="1"
max="10" max="10"
step="0.1" step="0.1"
value="3.0" value="3.0"
aria-label="Slider 5 von 1 bis 10" aria-label="Slider 5 von 1 bis 10"
disabled
> >
<output class="sg-slider-value" for="slider">3.0</output> <output class="sg-slider-value" for="slider">3.0</output>
</label> </label>
<label class="sg-slider-row sg-slider-row--inactive-selectable" data-component="slider" data-component-state="inactive-selectable" data-activatable="true"> <label class="sg-slider-row" data-component="slider" data-component-state="inactive-selectable" data-activatable="true">
<button class="sg-mode-toggle sg-mode-toggle--local sg-activation-mode-toggle" type="button" data-active="absolute" aria-label="Aktivierung Slider 6: aus"> <button class="sg-mode-toggle sg-mode-toggle--local sg-activation-mode-toggle" type="button" data-active="absolute" aria-label="Aktivierung Slider 6: aus">
<span class="sg-mode-toggle__switch" aria-hidden="true"> <span class="sg-mode-toggle__switch" aria-hidden="true">
<span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--left">aus</span> <span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--left">aus</span>
@@ -160,19 +155,18 @@
</button> </button>
<span class="sg-label">Slider 6</span> <span class="sg-label">Slider 6</span>
<input <input
class="sg-interaction-element sg-slider sg-form-inactive-selectable" class="sg-interaction-element sg-slider sg-form-active"
type="range" type="range"
min="1" min="1"
max="10" max="10"
step="0.1" step="0.1"
value="2.5" value="2.5"
aria-label="Slider 6 von 1 bis 10" aria-label="Slider 6 von 1 bis 10"
disabled
> >
<output class="sg-slider-value" for="slider">2.5</output> <output class="sg-slider-value" for="slider">2.5</output>
</label> </label>
<label class="sg-slider-row sg-slider-row--inactive-selectable" data-component="slider" data-component-state="inactive-selectable" data-activatable="true"> <label class="sg-slider-row" data-component="slider" data-component-state="inactive-selectable" data-activatable="true">
<button class="sg-mode-toggle sg-mode-toggle--local sg-activation-mode-toggle" type="button" data-active="absolute" aria-label="Aktivierung Slider 7: aus"> <button class="sg-mode-toggle sg-mode-toggle--local sg-activation-mode-toggle" type="button" data-active="absolute" aria-label="Aktivierung Slider 7: aus">
<span class="sg-mode-toggle__switch" aria-hidden="true"> <span class="sg-mode-toggle__switch" aria-hidden="true">
<span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--left">aus</span> <span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--left">aus</span>
@@ -182,14 +176,13 @@
</button> </button>
<span class="sg-label">Slider 7</span> <span class="sg-label">Slider 7</span>
<input <input
class="sg-interaction-element sg-slider sg-form-inactive-selectable" class="sg-interaction-element sg-slider sg-form-active"
type="range" type="range"
min="1" min="1"
max="10" max="10"
step="0.1" step="0.1"
value="1.6" value="1.6"
aria-label="Slider 7 von 1 bis 10" aria-label="Slider 7 von 1 bis 10"
disabled
> >
<output class="sg-slider-value" for="slider">1.6</output> <output class="sg-slider-value" for="slider">1.6</output>
</label> </label>
@@ -316,10 +309,10 @@
return; return;
} }
sliderRow.dataset.componentState = isActive ? 'active' : 'inactive-selectable'; sliderRow.dataset.componentState = isActive ? 'active' : 'inactive-selectable';
sliderRow.classList.toggle('sg-slider-row--inactive-selectable', !isActive); sliderRow.classList.remove('sg-slider-row--inactive-selectable');
slider.classList.toggle('sg-form-active', isActive); slider.classList.add('sg-form-active');
slider.classList.toggle('sg-form-inactive-selectable', !isActive); slider.classList.remove('sg-form-inactive-selectable');
slider.disabled = !isActive; slider.disabled = false;
return; return;
} }
@@ -431,9 +424,6 @@
}; };
slider.addEventListener('input', () => { slider.addEventListener('input', () => {
if (row.dataset.activatable === 'true' && row.dataset.componentState !== 'active') {
return;
}
updateSliderState(); updateSliderState();
}); });