237 lines
13 KiB
HTML
237 lines
13 KiB
HTML
<!doctype html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Styleguide – Pattern Multiselektionspulldown</title>
|
||
<link rel="stylesheet" href="../styleguide.css">
|
||
</head>
|
||
<body>
|
||
|
||
<h1 class="sg-main-heading">Pattern – Multiselektionspulldown</h1>
|
||
<section id="pattern-multiselektionspulldown">
|
||
<p class="sg-preview-label">Pattern: Multiselektionspulldown</p>
|
||
|
||
<div class="sg-multiselect-pulldown-demo" data-pattern="multiselektionspulldown" aria-label="Multiselektionspulldown Kennzahlen">
|
||
<div class="sg-multiselect-pulldown-demo__controls" aria-hidden="true">
|
||
<button class="sg-interaction-element sg-pulldown sg-pulldown--selected" type="button">Kennzahlen (1)</button>
|
||
<span class="sg-input-single-line-wrap sg-multiselect-pulldown-demo__search-wrap" data-has-value="false">
|
||
<input class="sg-interaction-element sg-input-single-line" type="text" placeholder="suchen" aria-label="suchen" disabled>
|
||
</span>
|
||
<span class="sg-table-label sg-multiselect-pulldown-demo__results">236 Treffer</span>
|
||
</div>
|
||
|
||
<div class="sg-pulldown-demo sg-multiselect-pulldown" data-open="true" data-align="left" data-selection-mode="multiple" data-component="pulldown" data-component-context="multiselektionspulldown" data-component-state="selected">
|
||
<button
|
||
class="sg-interaction-element sg-pulldown sg-pulldown-demo__trigger sg-pulldown--selected"
|
||
type="button"
|
||
aria-expanded="true"
|
||
aria-label="Pulldown Kennzahlen mit aktiver Auswahl"
|
||
data-component-part="pulldown-trigger"
|
||
data-label-base="Kennzahlen"
|
||
>
|
||
Kennzahlen (1)
|
||
</button>
|
||
|
||
<div class="sg-pulldown-panel" aria-label="Geöffnetes Pulldown Kennzahlen" data-component-part="pulldown-panel">
|
||
<div class="sg-form-sections-card-wrapper sg-multiselect-pulldown__form-wrapper" data-pattern-part="multiselect-form-wrapper">
|
||
<form class="sg-form-sections-card sg-multiselect-pulldown__form" action="#" method="post">
|
||
<div class="sg-form-sections-card__body sg-multiselect-pulldown__form-body" data-pattern-part="multiselect-form-body">
|
||
<div class="sg-multiselect-pulldown__section" aria-labelledby="kennzahlen-score-minimum">
|
||
<h2 id="kennzahlen-score-minimum" class="sg-sub-heading sg-multiselect-pulldown__section-title">Scores Minimum</h2>
|
||
|
||
<label class="sg-checkbox-field-option sg-body sg-multiselect-pulldown__row-label" data-component="checkbox-field" data-component-state="inactive-selectable">
|
||
<button class="sg-checkbox-field sg-form-active" type="button" role="checkbox" aria-checked="true" aria-label="Nur Score attraktiv">
|
||
<span class="sg-checkbox-field__mark" aria-hidden="true">✓</span>
|
||
</button>
|
||
<span>Nur Score "attraktiv"</span>
|
||
</label>
|
||
|
||
<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 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" 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 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" 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 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" 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 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" 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 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" 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 sg-multiselect-pulldown__toggle" type="button" aria-label="PE forw. aktivieren" data-action="toggle">+</button>
|
||
</div>
|
||
|
||
<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 sg-multiselect-pulldown__toggle" type="button" aria-label="PEG deaktivieren" data-action="toggle">×</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sg-multiselect-pulldown__section" aria-labelledby="kennzahlen-weitere-filter">
|
||
<h2 id="kennzahlen-weitere-filter" class="sg-sub-heading sg-multiselect-pulldown__section-title">Weitere Filter</h2>
|
||
|
||
<div class="sg-multiselect-pulldown__radio-row" role="radiogroup" aria-label="Zyklus-Empfehlung">
|
||
<span class="sg-label">Zyklus-Empfehlung</span>
|
||
<label class="sg-radio-activatable-group__choice sg-body" data-component="radio-field" data-component-state="inactive-selectable">
|
||
<button class="sg-radio-field sg-radio-field--inactive-selectable" type="button" role="radio" aria-checked="false" aria-label="kaufen">
|
||
<span class="sg-radio-field__mark" aria-hidden="true"></span>
|
||
</button>
|
||
<span>kaufen</span>
|
||
</label>
|
||
<label class="sg-radio-activatable-group__choice sg-body" data-component="radio-field" data-component-state="active">
|
||
<button class="sg-radio-field" type="button" role="radio" aria-checked="true" aria-label="nicht kaufen">
|
||
<span class="sg-radio-field__mark" aria-hidden="true"></span>
|
||
</button>
|
||
<span>nicht kaufen</span>
|
||
</label>
|
||
</div>
|
||
|
||
<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" data-moat-options="Schwach|Maessig|Stark|Sehr stark" data-moat-index="1">Maessig</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<footer class="sg-form-sections-card__actions-segment sg-multiselect-pulldown__actions-segment" data-pattern-part="multiselect-actions-segment">
|
||
<div class="sg-form-sections-card__actions"></div>
|
||
</footer>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</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>
|