Sync styleguide 2026.05.18.1
This commit is contained in:
@@ -0,0 +1,602 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Styleguide – Pattern Multiselektions-Pulldown</title>
|
||||
<link rel="stylesheet" href="../styleguide.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1 class="sg-main-heading">Pattern – Multiselektions-Pulldown</h1>
|
||||
<section id="pattern-multiselektions-pulldown">
|
||||
<p class="sg-preview-label">Pattern: Multiselektions-Pulldown</p>
|
||||
|
||||
<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-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">
|
||||
<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
|
||||
</button>
|
||||
</span>
|
||||
|
||||
<div class="sg-pulldown-panel" aria-label="Geöffnetes Multiselektions-Pulldown" data-component-part="pulldown-panel">
|
||||
<div class="sg-form-sections-card-wrapper" data-pattern="form-sections" aria-label="Multiselektions-Inhalt">
|
||||
<form class="sg-form-sections-card" action="#" method="post">
|
||||
<div class="sg-form-sections-card__body" data-pattern-part="form-body">
|
||||
|
||||
<section class="sg-form-sections-card__chapter" aria-labelledby="multiselect-block-1">
|
||||
<h2 id="multiselect-block-1" class="sg-strong sg-form-sections-card__chapter-title">Block 1</h2>
|
||||
|
||||
<label class="sg-checkbox-field-option sg-body" data-component="checkbox-field" data-component-state="inactive-selectable">
|
||||
<button class="sg-checkbox-field sg-checkbox-field--inactive-selectable" type="button" role="checkbox" aria-checked="false" aria-label="Checkbox 1 wählen" data-pulldown-option>
|
||||
<span class="sg-checkbox-field__mark" aria-hidden="true">✓</span>
|
||||
</button>
|
||||
<span>Checkbox 1</span>
|
||||
</label>
|
||||
|
||||
<div class="sg-slider-row sg-slider-row--inactive-selectable" 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">
|
||||
<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--right">an</span>
|
||||
<span class="sg-mode-toggle__handle"></span>
|
||||
</span>
|
||||
</button>
|
||||
<span class="sg-label" id="multiselect-slider-1-label">Slider 1</span>
|
||||
<input
|
||||
class="sg-interaction-element sg-slider sg-form-inactive-selectable"
|
||||
type="range"
|
||||
min="1"
|
||||
max="10"
|
||||
step="0.1"
|
||||
value="6.5"
|
||||
aria-labelledby="multiselect-slider-1-label"
|
||||
disabled
|
||||
>
|
||||
<output class="sg-slider-value" for="slider">6.5</output>
|
||||
</div>
|
||||
|
||||
<div class="sg-slider-row sg-slider-row--inactive-selectable" 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">
|
||||
<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--right">an</span>
|
||||
<span class="sg-mode-toggle__handle"></span>
|
||||
</span>
|
||||
</button>
|
||||
<span class="sg-label" id="multiselect-slider-2-label">Slider 2</span>
|
||||
<input
|
||||
class="sg-interaction-element sg-slider sg-form-inactive-selectable"
|
||||
type="range"
|
||||
min="1"
|
||||
max="10"
|
||||
step="0.1"
|
||||
value="9.5"
|
||||
aria-labelledby="multiselect-slider-2-label"
|
||||
disabled
|
||||
>
|
||||
<output class="sg-slider-value" for="slider">9.5</output>
|
||||
</div>
|
||||
|
||||
<div class="sg-slider-row sg-slider-row--inactive-selectable" 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">
|
||||
<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--right">an</span>
|
||||
<span class="sg-mode-toggle__handle"></span>
|
||||
</span>
|
||||
</button>
|
||||
<span class="sg-label" id="multiselect-slider-3-label">Slider 3</span>
|
||||
<input
|
||||
class="sg-interaction-element sg-slider sg-form-inactive-selectable"
|
||||
type="range"
|
||||
min="1"
|
||||
max="10"
|
||||
step="0.1"
|
||||
value="5.0"
|
||||
aria-labelledby="multiselect-slider-3-label"
|
||||
disabled
|
||||
>
|
||||
<output class="sg-slider-value" for="slider">5.0</output>
|
||||
</div>
|
||||
|
||||
<div class="sg-slider-row sg-slider-row--inactive-selectable" 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">
|
||||
<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--right">an</span>
|
||||
<span class="sg-mode-toggle__handle"></span>
|
||||
</span>
|
||||
</button>
|
||||
<span class="sg-label" id="multiselect-slider-4-label">Slider 4</span>
|
||||
<input
|
||||
class="sg-interaction-element sg-slider sg-form-inactive-selectable"
|
||||
type="range"
|
||||
min="1"
|
||||
max="10"
|
||||
step="0.1"
|
||||
value="6.5"
|
||||
aria-labelledby="multiselect-slider-4-label"
|
||||
disabled
|
||||
>
|
||||
<output class="sg-slider-value" for="slider">6.5</output>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<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>
|
||||
|
||||
<div class="sg-slider-row sg-slider-row--inactive-selectable" 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">
|
||||
<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--right">an</span>
|
||||
<span class="sg-mode-toggle__handle"></span>
|
||||
</span>
|
||||
</button>
|
||||
<span class="sg-label" id="multiselect-slider-5-label">Slider 5</span>
|
||||
<input
|
||||
class="sg-interaction-element sg-slider sg-form-inactive-selectable"
|
||||
type="range"
|
||||
min="1"
|
||||
max="10"
|
||||
step="0.1"
|
||||
value="3.0"
|
||||
aria-labelledby="multiselect-slider-5-label"
|
||||
disabled
|
||||
>
|
||||
<output class="sg-slider-value" for="slider">3.0</output>
|
||||
</div>
|
||||
|
||||
<div class="sg-slider-row sg-slider-row--inactive-selectable" 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">
|
||||
<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--right">an</span>
|
||||
<span class="sg-mode-toggle__handle"></span>
|
||||
</span>
|
||||
</button>
|
||||
<span class="sg-label" id="multiselect-slider-6-label">Slider 6</span>
|
||||
<input
|
||||
class="sg-interaction-element sg-slider sg-form-inactive-selectable"
|
||||
type="range"
|
||||
min="1"
|
||||
max="10"
|
||||
step="0.1"
|
||||
value="2.5"
|
||||
aria-labelledby="multiselect-slider-6-label"
|
||||
disabled
|
||||
>
|
||||
<output class="sg-slider-value" for="slider">2.5</output>
|
||||
</div>
|
||||
|
||||
<div class="sg-slider-row sg-slider-row--inactive-selectable" 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">
|
||||
<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--right">an</span>
|
||||
<span class="sg-mode-toggle__handle"></span>
|
||||
</span>
|
||||
</button>
|
||||
<span class="sg-label" id="multiselect-slider-7-label">Slider 7</span>
|
||||
<input
|
||||
class="sg-interaction-element sg-slider sg-form-inactive-selectable"
|
||||
type="range"
|
||||
min="1"
|
||||
max="10"
|
||||
step="0.1"
|
||||
value="1.6"
|
||||
aria-labelledby="multiselect-slider-7-label"
|
||||
disabled
|
||||
>
|
||||
<output class="sg-slider-value" for="slider">1.6</output>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="sg-form-sections-card__chapter" aria-labelledby="multiselect-block-3">
|
||||
<h2 id="multiselect-block-3" class="sg-strong sg-form-sections-card__chapter-title">Block 3</h2>
|
||||
|
||||
<div id="component-radio-activatable" class="sg-checkbox-field-option sg-checkbox-field-option--inactive-selectable sg-body sg-radio-activatable-group" data-component="radio-field" data-component-state="inactive-selectable" data-activatable="true" data-activatable-radio-group="true">
|
||||
<button class="sg-mode-toggle sg-mode-toggle--local sg-activation-mode-toggle" type="button" data-active="absolute" aria-label="Aktivierung Radio Auswahl: aus">
|
||||
<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--right">an</span>
|
||||
<span class="sg-mode-toggle__handle"></span>
|
||||
</span>
|
||||
</button>
|
||||
<span class="sg-label" id="multiselect-radio-group-label">Radio Auswahl</span>
|
||||
<span class="sg-radio-activatable-group__choices">
|
||||
<span class="sg-radio-activatable-group__choice">
|
||||
<button class="sg-radio-field sg-radio-field--inactive-selectable" type="button" role="radio" aria-checked="false" aria-label="Radio 1 wählen" aria-describedby="multiselect-radio-group-label">
|
||||
<span class="sg-radio-field__mark" aria-hidden="true"></span>
|
||||
</button>
|
||||
<span>Radio 1</span>
|
||||
</span>
|
||||
<span class="sg-radio-activatable-group__choice">
|
||||
<button class="sg-radio-field sg-radio-field--inactive-selectable" type="button" role="radio" aria-checked="false" aria-label="Radio 2 wählen" aria-describedby="multiselect-radio-group-label">
|
||||
<span class="sg-radio-field__mark" aria-hidden="true"></span>
|
||||
</button>
|
||||
<span>Radio 2</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="sg-pulldown-panel__row sg-pulldown-panel__row--disabled" data-pulldown-filter-row data-active="false" data-component-part="pulldown-filter-row">
|
||||
<button class="sg-mode-toggle sg-mode-toggle--local sg-activation-mode-toggle" type="button" data-active="absolute" aria-label="Aktivierung Pulldown 1: aus">
|
||||
<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--right">an</span>
|
||||
<span class="sg-mode-toggle__handle"></span>
|
||||
</span>
|
||||
</button>
|
||||
<p class="sg-pulldown-panel__label sg-body">Pulldown 1</p>
|
||||
|
||||
<select class="sg-interaction-element sg-pulldown" aria-label="Pulldown 1 Auswahl" disabled>
|
||||
<option selected>Option 1</option>
|
||||
<option>Option 2</option>
|
||||
<option>Option 3</option>
|
||||
</select>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="sg-form-sections-card__chapter" aria-labelledby="multiselect-block-4">
|
||||
<h2 id="multiselect-block-4" class="sg-strong sg-form-sections-card__chapter-title">Block 4</h2>
|
||||
|
||||
<div class="sg-pulldown-panel__row sg-pulldown-panel__row--disabled" data-pulldown-filter-row data-active="false" data-component-part="pulldown-filter-row">
|
||||
<button class="sg-mode-toggle sg-mode-toggle--local sg-activation-mode-toggle" type="button" data-active="absolute" aria-label="Aktivierung Pulldown 2: aus">
|
||||
<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--right">an</span>
|
||||
<span class="sg-mode-toggle__handle"></span>
|
||||
</span>
|
||||
</button>
|
||||
<p class="sg-pulldown-panel__label sg-body">Pulldown 2</p>
|
||||
|
||||
<select class="sg-interaction-element sg-pulldown" aria-label="Pulldown 2 Auswahl" disabled>
|
||||
<option selected>Option 1</option>
|
||||
<option>Option 2</option>
|
||||
<option>Option 3</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="sg-pulldown-panel__row sg-pulldown-panel__row--disabled" data-pulldown-filter-row data-active="false" data-component-part="pulldown-filter-row">
|
||||
<button class="sg-mode-toggle sg-mode-toggle--local sg-activation-mode-toggle" type="button" data-active="absolute" aria-label="Aktivierung Pulldown 3: aus">
|
||||
<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--right">an</span>
|
||||
<span class="sg-mode-toggle__handle"></span>
|
||||
</span>
|
||||
</button>
|
||||
<p class="sg-pulldown-panel__label sg-body">Pulldown 3</p>
|
||||
|
||||
<select class="sg-interaction-element sg-pulldown" aria-label="Pulldown 3 Auswahl" disabled>
|
||||
<option selected>Option 1</option>
|
||||
<option>Option 2</option>
|
||||
<option>Option 3</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="sg-pulldown-panel__row sg-pulldown-panel__row--disabled" data-pulldown-filter-row data-active="false" data-component-part="pulldown-filter-row">
|
||||
<button class="sg-mode-toggle sg-mode-toggle--local sg-activation-mode-toggle" type="button" data-active="absolute" aria-label="Aktivierung Pulldown 4: aus">
|
||||
<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--right">an</span>
|
||||
<span class="sg-mode-toggle__handle"></span>
|
||||
</span>
|
||||
</button>
|
||||
<p class="sg-pulldown-panel__label sg-body">Pulldown 4</p>
|
||||
|
||||
<select class="sg-interaction-element sg-pulldown" aria-label="Pulldown 4 Auswahl" disabled>
|
||||
<option selected>Option 1</option>
|
||||
<option>Option 2</option>
|
||||
<option>Option 3</option>
|
||||
</select>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<script>
|
||||
(() => {
|
||||
const setLocalActivationState = (toggle, isActive) => {
|
||||
const sliderRow = toggle.closest('.sg-slider-row[data-activatable="true"]');
|
||||
if (sliderRow) {
|
||||
const slider = sliderRow.querySelector('.sg-slider');
|
||||
if (!slider) {
|
||||
return;
|
||||
}
|
||||
sliderRow.dataset.componentState = isActive ? 'active' : 'inactive-selectable';
|
||||
sliderRow.classList.toggle('sg-slider-row--inactive-selectable', !isActive);
|
||||
slider.classList.toggle('sg-form-active', isActive);
|
||||
slider.classList.toggle('sg-form-inactive-selectable', !isActive);
|
||||
slider.disabled = !isActive;
|
||||
return;
|
||||
}
|
||||
|
||||
const radioGroup = toggle.closest('[data-activatable-radio-group="true"]');
|
||||
if (radioGroup) {
|
||||
const radios = radioGroup.querySelectorAll('.sg-radio-field');
|
||||
radioGroup.dataset.componentState = isActive ? 'active' : 'inactive-selectable';
|
||||
radios.forEach((radio) => {
|
||||
radio.disabled = !isActive;
|
||||
if (!isActive) {
|
||||
radio.setAttribute('aria-checked', 'false');
|
||||
}
|
||||
const checked = radio.getAttribute('aria-checked') === 'true';
|
||||
radio.classList.toggle('sg-form-active', checked);
|
||||
radio.classList.toggle('sg-radio-field--inactive-selectable', !isActive);
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const pulldownRow = toggle.closest('[data-pulldown-filter-row]');
|
||||
if (pulldownRow) {
|
||||
const select = pulldownRow.querySelector('.sg-pulldown');
|
||||
if (!select) {
|
||||
return;
|
||||
}
|
||||
pulldownRow.dataset.active = isActive ? 'true' : 'false';
|
||||
select.disabled = !isActive;
|
||||
pulldownRow.classList.toggle('sg-pulldown-panel__row--disabled', !isActive);
|
||||
select.classList.toggle('sg-pulldown--selected', isActive);
|
||||
select.classList.toggle('sg-pulldown--inactive-selectable', !isActive);
|
||||
}
|
||||
};
|
||||
|
||||
document.querySelectorAll('.sg-activation-mode-toggle').forEach((toggle) => {
|
||||
toggle.addEventListener('click', (event) => {
|
||||
event.stopPropagation();
|
||||
const nextState = toggle.dataset.active === 'absolute' ? 'relative' : 'absolute';
|
||||
const isActive = nextState === 'relative';
|
||||
toggle.dataset.active = nextState;
|
||||
toggle.setAttribute('aria-label', toggle.getAttribute('aria-label').replace(/(an|aus)$/, isActive ? 'an' : 'aus'));
|
||||
setLocalActivationState(toggle, isActive);
|
||||
});
|
||||
});
|
||||
|
||||
const updatePulldownSelectionState = (demo) => {
|
||||
const trigger = demo.querySelector('.sg-pulldown-demo__trigger');
|
||||
const selectableOptions = demo.querySelectorAll('[data-pulldown-option]');
|
||||
const forceActive = demo.dataset.forceActive === 'true';
|
||||
|
||||
if (!trigger || selectableOptions.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
const selectedCount = Array.from(selectableOptions).filter((option) => {
|
||||
return option.getAttribute('aria-checked') === 'true';
|
||||
}).length;
|
||||
|
||||
const labelBase = trigger.dataset.labelBase || 'Auswahl';
|
||||
trigger.textContent = forceActive
|
||||
? labelBase
|
||||
: (selectedCount > 0 ? `${labelBase} (${selectedCount})` : labelBase);
|
||||
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);
|
||||
trigger.setAttribute(
|
||||
'aria-label',
|
||||
forceActive || selectedCount > 0 ? `${labelBase} mit aktiver Auswahl` : `${labelBase} ohne aktive Auswahl`
|
||||
);
|
||||
};
|
||||
|
||||
const updateMultiselectLabelAlignment = () => {
|
||||
document.querySelectorAll('.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-pulldown-panel').forEach((panel) => {
|
||||
const labels = panel.querySelectorAll(
|
||||
'.sg-slider-row[data-activatable="true"] > .sg-label, .sg-radio-activatable-group > .sg-label, [data-pulldown-filter-row] > .sg-pulldown-panel__label'
|
||||
);
|
||||
|
||||
let maxWidth = 0;
|
||||
labels.forEach((label) => {
|
||||
const width = Math.ceil(label.scrollWidth || label.getBoundingClientRect().width);
|
||||
if (width > maxWidth) {
|
||||
maxWidth = width;
|
||||
}
|
||||
});
|
||||
|
||||
if (maxWidth > 0) {
|
||||
panel.style.setProperty('--sg-multiselect-label-column-width', `${maxWidth}px`);
|
||||
} else {
|
||||
panel.style.removeProperty('--sg-multiselect-label-column-width');
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
document.querySelectorAll('.sg-slider-row').forEach((row) => {
|
||||
const slider = row.querySelector('.sg-slider');
|
||||
const valueOutput = row.querySelector('.sg-slider-value');
|
||||
|
||||
if (!slider || !valueOutput) {
|
||||
return;
|
||||
}
|
||||
|
||||
const updateSliderState = () => {
|
||||
const min = Number(slider.min || 0);
|
||||
const max = Number(slider.max || 100);
|
||||
const value = Number(slider.value || 0);
|
||||
const denominator = max - min;
|
||||
const progress = denominator > 0 ? ((value - min) / denominator) * 100 : 0;
|
||||
|
||||
slider.style.setProperty('--sg-slider-progress', `${progress}%`);
|
||||
valueOutput.textContent = value.toFixed(1);
|
||||
};
|
||||
|
||||
slider.addEventListener('input', () => {
|
||||
if (row.dataset.activatable === 'true' && row.dataset.componentState !== 'active') {
|
||||
return;
|
||||
}
|
||||
updateSliderState();
|
||||
});
|
||||
|
||||
updateSliderState();
|
||||
});
|
||||
|
||||
document.querySelectorAll('.sg-checkbox-field').forEach((checkbox) => {
|
||||
checkbox.addEventListener('click', (event) => {
|
||||
event.stopPropagation();
|
||||
if (checkbox.disabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
const activatableOption = checkbox.closest('[data-component="checkbox-field"][data-activatable="true"]');
|
||||
if (activatableOption) {
|
||||
checkbox.setAttribute('aria-checked', 'true');
|
||||
checkbox.classList.add('sg-form-active');
|
||||
checkbox.classList.remove('sg-checkbox-field--inactive-selectable');
|
||||
activatableOption.dataset.componentState = 'active';
|
||||
}
|
||||
|
||||
const pulldownDemo = checkbox.closest('.sg-pulldown-demo');
|
||||
if (pulldownDemo) {
|
||||
updatePulldownSelectionState(pulldownDemo);
|
||||
pulldownDemo.dataset.open = 'true';
|
||||
const trigger = pulldownDemo.querySelector('.sg-pulldown-demo__trigger');
|
||||
if (trigger) {
|
||||
trigger.setAttribute('aria-expanded', 'true');
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
document.querySelectorAll('.sg-radio-field').forEach((radio) => {
|
||||
radio.addEventListener('click', (event) => {
|
||||
event.stopPropagation();
|
||||
if (radio.disabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
const activatableGroup = radio.closest('[data-activatable-radio-group="true"]');
|
||||
if (!activatableGroup) {
|
||||
return;
|
||||
}
|
||||
if (activatableGroup.dataset.componentState !== 'active') {
|
||||
return;
|
||||
}
|
||||
|
||||
const radios = activatableGroup.querySelectorAll('.sg-radio-field');
|
||||
radios.forEach((otherRadio) => {
|
||||
otherRadio.setAttribute('aria-checked', String(otherRadio === radio));
|
||||
otherRadio.disabled = false;
|
||||
otherRadio.classList.remove('sg-radio-field--inactive-selectable');
|
||||
otherRadio.classList.toggle('sg-form-active', otherRadio === radio);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
document.querySelectorAll('[data-activatable-radio-group="true"]').forEach((group) => {
|
||||
const isActive = group.dataset.componentState === 'active';
|
||||
group.querySelectorAll('.sg-radio-field').forEach((radio) => {
|
||||
radio.disabled = !isActive;
|
||||
});
|
||||
});
|
||||
|
||||
updateMultiselectLabelAlignment();
|
||||
window.addEventListener('resize', updateMultiselectLabelAlignment);
|
||||
|
||||
document.querySelectorAll('.sg-pulldown-demo').forEach((demo) => {
|
||||
const trigger = demo.querySelector('.sg-pulldown-demo__trigger');
|
||||
|
||||
if (!trigger) {
|
||||
return;
|
||||
}
|
||||
|
||||
trigger.addEventListener('click', (event) => {
|
||||
event.stopPropagation();
|
||||
const nextState = demo.dataset.open !== 'true';
|
||||
|
||||
if (demo.dataset.activatable === 'true') {
|
||||
trigger.classList.add('sg-pulldown--selected', 'sg-form-active');
|
||||
trigger.classList.remove('sg-pulldown--inactive-selectable');
|
||||
}
|
||||
|
||||
document.querySelectorAll('.sg-pulldown-demo').forEach((otherDemo) => {
|
||||
const otherTrigger = otherDemo.querySelector('.sg-pulldown-demo__trigger');
|
||||
otherDemo.dataset.open = 'false';
|
||||
if (otherTrigger) {
|
||||
otherTrigger.setAttribute('aria-expanded', 'false');
|
||||
}
|
||||
});
|
||||
|
||||
demo.dataset.align = 'left';
|
||||
demo.dataset.open = String(nextState);
|
||||
trigger.setAttribute('aria-expanded', String(nextState));
|
||||
|
||||
if (!nextState) {
|
||||
return;
|
||||
}
|
||||
|
||||
updateMultiselectLabelAlignment();
|
||||
|
||||
const panel = demo.querySelector('.sg-pulldown-panel');
|
||||
if (!panel) {
|
||||
return;
|
||||
}
|
||||
|
||||
demo.dataset.align = 'left';
|
||||
panel.style.left = '0px';
|
||||
panel.style.right = 'auto';
|
||||
|
||||
const initialRect = panel.getBoundingClientRect();
|
||||
let offsetX = 0;
|
||||
const maxRight = window.innerWidth;
|
||||
|
||||
if (initialRect.right > maxRight) {
|
||||
offsetX -= initialRect.right - maxRight;
|
||||
}
|
||||
|
||||
if (initialRect.left + offsetX < 0) {
|
||||
offsetX += 0 - (initialRect.left + offsetX);
|
||||
}
|
||||
|
||||
panel.style.left = `${offsetX}px`;
|
||||
});
|
||||
});
|
||||
|
||||
document.querySelectorAll('[data-pulldown-filter-row]').forEach((row) => {
|
||||
const select = row.querySelector('.sg-pulldown');
|
||||
|
||||
if (!select) {
|
||||
return;
|
||||
}
|
||||
|
||||
const updateFilterRowState = () => {
|
||||
const isActive = row.dataset.active === 'true';
|
||||
row.classList.toggle('sg-pulldown-panel__row--disabled', !isActive);
|
||||
select.classList.toggle('sg-pulldown--selected', isActive);
|
||||
select.classList.toggle('sg-pulldown--inactive-selectable', !isActive);
|
||||
select.disabled = !isActive;
|
||||
};
|
||||
|
||||
updateFilterRowState();
|
||||
});
|
||||
|
||||
document.addEventListener('click', (event) => {
|
||||
if (event.target.closest('.sg-pulldown-demo')) {
|
||||
return;
|
||||
}
|
||||
|
||||
document.querySelectorAll('.sg-pulldown-demo').forEach((demo) => {
|
||||
const trigger = demo.querySelector('.sg-pulldown-demo__trigger');
|
||||
demo.dataset.open = 'false';
|
||||
if (trigger) {
|
||||
trigger.setAttribute('aria-expanded', 'false');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
document.querySelectorAll('.sg-pulldown-demo').forEach(updatePulldownSelectionState);
|
||||
})();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user