598 lines
37 KiB
HTML
598 lines
37 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 – VSF List Detailseite</title>
|
||
<link rel="stylesheet" href="../styleguide.css">
|
||
</head>
|
||
<body>
|
||
<section class="sg-vsf-list-detail-page" aria-label="VSF List Detailseite">
|
||
<h1 class="sg-main-heading">Layout – VSF List Detailseite</h1>
|
||
|
||
<div class="sg-tab-button-group sg-vsf-list-detail-page__mobile-tabs" role="tablist" aria-label="Tasten Navigation gross" data-component="tab-navigation" data-component-size="large">
|
||
<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="true" aria-controls="vsf-list-detail-panel-meldungen" id="vsf-list-detail-tab-meldungen" data-component-part="tab-button" data-vsf-list-detail-tab="meldungen">Meldungen</button>
|
||
<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" aria-controls="vsf-list-detail-panel-unternehmen" id="vsf-list-detail-tab-unternehmen" data-component-part="tab-button" data-vsf-list-detail-tab="unternehmen">Unternehmen</button>
|
||
</div>
|
||
|
||
<div class="sg-vsf-list-detail-page__content" data-vsf-list-detail-active="meldungen">
|
||
<aside class="sg-vsf-list-detail-page__left-column" aria-label="Benachrichtigungen" role="tabpanel" aria-labelledby="vsf-list-detail-tab-meldungen" id="vsf-list-detail-panel-meldungen" data-vsf-list-detail-panel="meldungen">
|
||
<div class="sg-delete-confirmation-pattern sg-vsf-list-detail-page__meldungen-overlay-pattern">
|
||
<div class="sg-delete-confirmation-pattern__stage" data-pattern="overlay-card" data-dialog-open="false">
|
||
<div class="sg-group-card sg-delete-confirmation-pattern__target" data-component="group-card">
|
||
<div class="sg-group-card__header-row">
|
||
<h2 class="sg-heading-h2 sg-text-on-dark sg-group-card__heading">Meldungen</h2>
|
||
<div class="sg-sandwich-menu-wrap" data-open="false" data-align="right" data-component="sandwich-menu" data-component-size="small">
|
||
<button class="sg-interaction-element sg-sandwich-button sg-sandwich-button--small" type="button" aria-expanded="false" aria-label="Meldungsmenü öffnen" data-component-part="sandwich-trigger">
|
||
<span class="sg-sandwich-button__icon" aria-hidden="true">
|
||
<span class="sg-sandwich-button__line"></span>
|
||
<span class="sg-sandwich-button__line"></span>
|
||
<span class="sg-sandwich-button__line"></span>
|
||
</span>
|
||
</button>
|
||
<div class="sg-sandwich-menu-panel" aria-label="Meldungsmenü" data-component-part="sandwich-panel">
|
||
<a class="sg-sandwich-menu-link" href="#!" data-component-part="sandwich-menu-link" data-overlay-open-dialog="meldungen">Meldungen anpassen</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<button class="sg-interaction-element sg-button sg-button--active sg-vsf-list-detail-page__mobile-toggle" type="button" data-toggle-target="meldungen" data-collapsed-label="Meldungen einblenden" data-expanded-label="Meldungen ausblenden" aria-expanded="true">
|
||
Meldungen ausblenden
|
||
</button>
|
||
<article class="sg-card sg-vsf-list-detail-page__notification-card" data-component="notification-card" data-component-context="group-card">
|
||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-red" data-component-part="card-header">
|
||
<p class="sg-body">
|
||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit posuere, posuere mauris eu, tincidunt lorem. Proin gravida sapien in mattis molestie. Sed non risus augue. Fusce sed odio vitae purus porta efficitur. Integer tempor congue sem, a convallis lorem ornare eget. Nam. Aenean.
|
||
</p>
|
||
</div>
|
||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-red" data-component-part="card-body">
|
||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">Details</button>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="sg-card sg-vsf-list-detail-page__notification-card" data-component="notification-card" data-component-context="group-card">
|
||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--signal-green" data-component-part="card-header">
|
||
<p class="sg-body">
|
||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit posuere, posuere mauris eu, tincidunt lorem. Proin gravida sapien in mattis molestie. Sed non risus augue. Fusce sed odio vitae purus porta efficitur. Integer tempor congue sem, a convallis lorem ornare eget. Nam. Aenean.
|
||
</p>
|
||
</div>
|
||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--signal-green" data-component-part="card-body">
|
||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">Details</button>
|
||
</div>
|
||
</article>
|
||
|
||
<article class="sg-card sg-card--notification-white sg-vsf-list-detail-page__notification-card" data-component="notification-card" data-component-context="group-card">
|
||
<div class="sg-card-segment sg-card-segment--header sg-card-segment--white" data-component-part="card-header">
|
||
<p class="sg-body">
|
||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae velit posuere, posuere mauris eu, tincidunt lorem. Proin gravida sapien in mattis molestie. Sed non risus augue. Fusce sed odio vitae purus porta efficitur. Integer tempor congue sem, a convallis lorem ornare eget. Nam. Aenean.
|
||
</p>
|
||
</div>
|
||
<div class="sg-card-segment sg-card-segment--body sg-card-segment--white" data-component-part="card-body">
|
||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-component="button" data-component-state="active">Details</button>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
|
||
<article class="sg-card sg-card--overlay-host sg-delete-confirmation-pattern__floating-card" aria-label="Meldungen anpassen" role="dialog" aria-modal="true" aria-labelledby="vsf-meldungen-overlay-title" data-overlay-dialog="meldungen" hidden>
|
||
<div class="sg-card-segment sg-card-segment--body sg-delete-confirmation-pattern__body">
|
||
<p class="sg-body sg-delete-confirmation-pattern__text" id="vsf-meldungen-overlay-title"><strong>Wähle, welche Meldungen angezeigt werden sollen</strong></p>
|
||
<section class="sg-form-sections-card__chapter" aria-labelledby="vsf-meldungen-kapitel-1">
|
||
<h2 id="vsf-meldungen-kapitel-1" class="sg-strong sg-form-sections-card__chapter-title">Meldungen</h2>
|
||
<div class="sg-form-sections-card__option-group" aria-label="Meldungsarten">
|
||
<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="Meldungsart 1" data-vsf-meldungen-checkbox>
|
||
<span class="sg-checkbox-field__mark" aria-hidden="true">✓</span>
|
||
</button>
|
||
<span>Meldungsart 1</span>
|
||
</label>
|
||
<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="Meldungsart 2" data-vsf-meldungen-checkbox>
|
||
<span class="sg-checkbox-field__mark" aria-hidden="true">✓</span>
|
||
</button>
|
||
<span>Meldungsart 2</span>
|
||
</label>
|
||
<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="Meldungsart 3" data-vsf-meldungen-checkbox>
|
||
<span class="sg-checkbox-field__mark" aria-hidden="true">✓</span>
|
||
</button>
|
||
<span>Meldungsart 3</span>
|
||
</label>
|
||
</div>
|
||
</section>
|
||
<div class="sg-delete-confirmation-pattern__actions">
|
||
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-overlay-dialog-close>Abbrechen</button>
|
||
<button class="sg-interaction-element sg-button sg-button--process sg-button--process-inactive" type="button" disabled aria-disabled="true" data-overlay-dialog-close data-vsf-meldungen-save>Speichern</button>
|
||
</div>
|
||
</div>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</aside>
|
||
|
||
<div class="sg-vsf-list-detail-page__right-column" aria-label="Objektkarten" role="tabpanel" aria-labelledby="vsf-list-detail-tab-unternehmen" id="vsf-list-detail-panel-unternehmen" data-vsf-list-detail-panel="unternehmen">
|
||
<div class="sg-group-card" data-component="group-card">
|
||
<h2 class="sg-heading-h2 sg-text-on-dark sg-group-card__heading">Unternehmen</h2>
|
||
<div class="sg-object-card-grid" aria-label="Pattern – Object Card Liste">
|
||
<article class="sg-card sg-object-card" data-pattern="object-card" aria-label="Objekt Card">
|
||
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-card-header">
|
||
<div class="sg-strong">Alcon Inc.</div>
|
||
<div class="sg-sandwich-menu-wrap" data-open="false" data-align="right" data-component="sandwich-menu" data-component-size="small">
|
||
<button class="sg-interaction-element sg-sandwich-button sg-sandwich-button--small" type="button" aria-expanded="false" aria-label="Menü öffnen" data-component-part="sandwich-trigger">
|
||
<span class="sg-sandwich-button__icon" aria-hidden="true">
|
||
<span class="sg-sandwich-button__line"></span>
|
||
<span class="sg-sandwich-button__line"></span>
|
||
<span class="sg-sandwich-button__line"></span>
|
||
</span>
|
||
</button>
|
||
<div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel">
|
||
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
|
||
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
|
||
<a class="sg-sandwich-menu-link" href="#">Menüpunkt</a>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
<div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-card-content">
|
||
<p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill.</p>
|
||
</div>
|
||
<footer class="sg-card-segment sg-card-segment--body sg-object-card__actions-segment" data-pattern-part="object-card-actions">
|
||
<div class="sg-object-card__actions">
|
||
<button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Peer-Group</button>
|
||
<button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Fundamentalanalyse</button>
|
||
</div>
|
||
</footer>
|
||
</article>
|
||
|
||
<article class="sg-card sg-object-card" data-pattern="object-card" aria-label="Objekt Card">
|
||
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-card-header"><div class="sg-strong">Alcon Inc.</div><div class="sg-sandwich-menu-wrap" data-open="false" data-align="right" data-component="sandwich-menu" data-component-size="small"><button class="sg-interaction-element sg-sandwich-button sg-sandwich-button--small" type="button" aria-expanded="false" aria-label="Menü öffnen" data-component-part="sandwich-trigger"><span class="sg-sandwich-button__icon" aria-hidden="true"><span class="sg-sandwich-button__line"></span><span class="sg-sandwich-button__line"></span><span class="sg-sandwich-button__line"></span></span></button><div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel"><a class="sg-sandwich-menu-link" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link" href="#">Menüpunkt</a></div></div></header>
|
||
<div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-card-content">
|
||
<p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill.</p>
|
||
</div>
|
||
<footer class="sg-card-segment sg-card-segment--body sg-object-card__actions-segment" data-pattern-part="object-card-actions">
|
||
<div class="sg-object-card__actions">
|
||
<button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Peer-Group</button><button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Fundamentalanalyse</button>
|
||
</div>
|
||
</footer>
|
||
</article>
|
||
|
||
<article class="sg-card sg-object-card" data-pattern="object-card" aria-label="Objekt Card">
|
||
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-card-header"><div class="sg-strong">Alcon Inc.</div><div class="sg-sandwich-menu-wrap" data-open="false" data-align="right" data-component="sandwich-menu" data-component-size="small"><button class="sg-interaction-element sg-sandwich-button sg-sandwich-button--small" type="button" aria-expanded="false" aria-label="Menü öffnen" data-component-part="sandwich-trigger"><span class="sg-sandwich-button__icon" aria-hidden="true"><span class="sg-sandwich-button__line"></span><span class="sg-sandwich-button__line"></span><span class="sg-sandwich-button__line"></span></span></button><div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel"><a class="sg-sandwich-menu-link" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link" href="#">Menüpunkt</a></div></div></header>
|
||
<div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-card-content">
|
||
<p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill.</p>
|
||
</div>
|
||
<footer class="sg-card-segment sg-card-segment--body sg-object-card__actions-segment" data-pattern-part="object-card-actions">
|
||
<div class="sg-object-card__actions">
|
||
<button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Peer-Group</button><button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Fundamentalanalyse</button>
|
||
</div>
|
||
</footer>
|
||
</article>
|
||
|
||
<article class="sg-card sg-object-card" data-pattern="object-card" aria-label="Objekt Card">
|
||
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-card-header"><div class="sg-strong">Alcon Inc.</div><div class="sg-sandwich-menu-wrap" data-open="false" data-align="right" data-component="sandwich-menu" data-component-size="small"><button class="sg-interaction-element sg-sandwich-button sg-sandwich-button--small" type="button" aria-expanded="false" aria-label="Menü öffnen" data-component-part="sandwich-trigger"><span class="sg-sandwich-button__icon" aria-hidden="true"><span class="sg-sandwich-button__line"></span><span class="sg-sandwich-button__line"></span><span class="sg-sandwich-button__line"></span></span></button><div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel"><a class="sg-sandwich-menu-link" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link" href="#">Menüpunkt</a></div></div></header>
|
||
<div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-card-content">
|
||
<p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill.</p>
|
||
</div>
|
||
<footer class="sg-card-segment sg-card-segment--body sg-object-card__actions-segment" data-pattern-part="object-card-actions">
|
||
<div class="sg-object-card__actions">
|
||
<button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Peer-Group</button><button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Fundamentalanalyse</button>
|
||
</div>
|
||
</footer>
|
||
</article>
|
||
|
||
<article class="sg-card sg-object-card" data-pattern="object-card" aria-label="Objekt Card">
|
||
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-card-header"><div class="sg-strong">Alcon Inc.</div><div class="sg-sandwich-menu-wrap" data-open="false" data-align="right" data-component="sandwich-menu" data-component-size="small"><button class="sg-interaction-element sg-sandwich-button sg-sandwich-button--small" type="button" aria-expanded="false" aria-label="Menü öffnen" data-component-part="sandwich-trigger"><span class="sg-sandwich-button__icon" aria-hidden="true"><span class="sg-sandwich-button__line"></span><span class="sg-sandwich-button__line"></span><span class="sg-sandwich-button__line"></span></span></button><div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel"><a class="sg-sandwich-menu-link" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link" href="#">Menüpunkt</a></div></div></header>
|
||
<div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-card-content">
|
||
<p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill.</p>
|
||
</div>
|
||
<footer class="sg-card-segment sg-card-segment--body sg-object-card__actions-segment" data-pattern-part="object-card-actions">
|
||
<div class="sg-object-card__actions">
|
||
<button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Peer-Group</button><button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Fundamentalanalyse</button>
|
||
</div>
|
||
</footer>
|
||
</article>
|
||
|
||
<article class="sg-card sg-object-card" data-pattern="object-card" aria-label="Objekt Card">
|
||
<header class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-object-card__header" data-pattern-part="object-card-header"><div class="sg-strong">Alcon Inc.</div><div class="sg-sandwich-menu-wrap" data-open="false" data-align="right" data-component="sandwich-menu" data-component-size="small"><button class="sg-interaction-element sg-sandwich-button sg-sandwich-button--small" type="button" aria-expanded="false" aria-label="Menü öffnen" data-component-part="sandwich-trigger"><span class="sg-sandwich-button__icon" aria-hidden="true"><span class="sg-sandwich-button__line"></span><span class="sg-sandwich-button__line"></span><span class="sg-sandwich-button__line"></span></span></button><div class="sg-sandwich-menu-panel" aria-label="Ausgeklapptes Menü" data-component-part="sandwich-panel"><a class="sg-sandwich-menu-link" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link" href="#">Menüpunkt</a><a class="sg-sandwich-menu-link" href="#">Menüpunkt</a></div></div></header>
|
||
<div class="sg-card-segment sg-card-segment--body sg-object-card__content" data-pattern-part="object-card-content">
|
||
<p class="sg-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill.</p>
|
||
</div>
|
||
<footer class="sg-card-segment sg-card-segment--body sg-object-card__actions-segment" data-pattern-part="object-card-actions">
|
||
<div class="sg-object-card__actions">
|
||
<button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Peer-Group</button><button class="sg-interaction-element sg-button sg-button--active sg-object-card__action" type="button">Fundamentalanalyse</button>
|
||
</div>
|
||
</footer>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<script src="../scripts/help-icon-overlays.js"></script>
|
||
<script>
|
||
const updateObjectCardGridRowState = () => {
|
||
document.querySelectorAll('.sg-object-card-grid').forEach((grid) => {
|
||
const cards = Array.from(grid.querySelectorAll('.sg-object-card'));
|
||
grid.classList.remove('sg-object-card-grid--multi-row');
|
||
grid.style.removeProperty('--layout-object-card-shared-width');
|
||
|
||
if (cards.length <= 1) {
|
||
return;
|
||
}
|
||
|
||
const firstTop = cards[0].offsetTop;
|
||
const hasMultipleRows = cards.some((card) => card.offsetTop !== firstTop);
|
||
|
||
if (!hasMultipleRows) {
|
||
return;
|
||
}
|
||
|
||
const firstRowCards = cards.filter((card) => card.offsetTop === firstTop);
|
||
const referenceCard = firstRowCards[0];
|
||
if (!referenceCard) {
|
||
return;
|
||
}
|
||
|
||
const referenceWidth = referenceCard.getBoundingClientRect().width;
|
||
grid.style.setProperty('--layout-object-card-shared-width', `${referenceWidth}px`);
|
||
grid.classList.add('sg-object-card-grid--multi-row');
|
||
});
|
||
};
|
||
|
||
const vsfListDetailPage = document.querySelector('.sg-vsf-list-detail-page');
|
||
const vsfListDetailMobileTabs = document.querySelector('.sg-vsf-list-detail-page__mobile-tabs');
|
||
const vsfListDetailButtons = vsfListDetailMobileTabs ? Array.from(vsfListDetailMobileTabs.querySelectorAll('.sg-tab-button')) : [];
|
||
const vsfListDetailPanels = {
|
||
meldungen: document.querySelector('[data-vsf-list-detail-panel="meldungen"]'),
|
||
unternehmen: document.querySelector('[data-vsf-list-detail-panel="unternehmen"]'),
|
||
};
|
||
const vsfListDetailMobileQuery = window.matchMedia('(max-width: 767px)');
|
||
|
||
const syncVsfListDetailMobileState = (activeKey) => {
|
||
const nextActiveKey = activeKey === 'unternehmen' ? 'unternehmen' : 'meldungen';
|
||
|
||
if (vsfListDetailPage) {
|
||
vsfListDetailPage.dataset.vsfListDetailActive = nextActiveKey;
|
||
}
|
||
|
||
vsfListDetailButtons.forEach((button) => {
|
||
const isActive = button.dataset.vsfListDetailTab === nextActiveKey;
|
||
button.setAttribute('aria-selected', String(isActive));
|
||
button.dataset.componentState = isActive ? 'active' : 'inactive';
|
||
});
|
||
|
||
const isMobile = vsfListDetailMobileQuery.matches;
|
||
Object.entries(vsfListDetailPanels).forEach(([key, panel]) => {
|
||
if (!panel) {
|
||
return;
|
||
}
|
||
|
||
panel.hidden = isMobile && key !== nextActiveKey;
|
||
panel.setAttribute('aria-hidden', String(isMobile && key !== nextActiveKey));
|
||
});
|
||
};
|
||
|
||
if (vsfListDetailMobileTabs) {
|
||
vsfListDetailButtons.forEach((button) => {
|
||
button.addEventListener('click', () => {
|
||
syncVsfListDetailMobileState(button.dataset.vsfListDetailTab || 'meldungen');
|
||
});
|
||
});
|
||
}
|
||
|
||
const handleVsfListDetailMobileModeChange = () => {
|
||
syncVsfListDetailMobileState(vsfListDetailPage?.dataset.vsfListDetailActive || 'meldungen');
|
||
};
|
||
|
||
if (typeof vsfListDetailMobileQuery.addEventListener === 'function') {
|
||
vsfListDetailMobileQuery.addEventListener('change', handleVsfListDetailMobileModeChange);
|
||
} else if (typeof vsfListDetailMobileQuery.addListener === 'function') {
|
||
vsfListDetailMobileQuery.addListener(handleVsfListDetailMobileModeChange);
|
||
}
|
||
|
||
syncVsfListDetailMobileState(vsfListDetailPage?.dataset.vsfListDetailActive || 'meldungen');
|
||
|
||
document.querySelectorAll('.sg-sandwich-menu-wrap').forEach((wrap) => {
|
||
const button = wrap.querySelector('.sg-sandwich-button');
|
||
if (!button) {
|
||
return;
|
||
}
|
||
|
||
button.addEventListener('click', (event) => {
|
||
event.stopPropagation();
|
||
const nextState = wrap.dataset.open !== 'true';
|
||
document.querySelectorAll('.sg-sandwich-menu-wrap').forEach((otherWrap) => {
|
||
const otherButton = otherWrap.querySelector('.sg-sandwich-button');
|
||
otherWrap.dataset.open = 'false';
|
||
if (otherButton) {
|
||
otherButton.setAttribute('aria-expanded', 'false');
|
||
}
|
||
});
|
||
|
||
wrap.dataset.open = String(nextState);
|
||
button.setAttribute('aria-expanded', String(nextState));
|
||
});
|
||
});
|
||
|
||
document.querySelectorAll('.sg-mode-toggle').forEach((toggle) => {
|
||
toggle.addEventListener('click', () => {
|
||
const nextState = toggle.dataset.active === 'relative' ? 'absolute' : 'relative';
|
||
toggle.dataset.active = nextState;
|
||
toggle.dataset.componentState = nextState;
|
||
toggle.setAttribute(
|
||
'aria-label',
|
||
`Modus Schieber global: ${nextState === 'relative' ? 'relativ' : 'absolut'} aktiv`
|
||
);
|
||
});
|
||
});
|
||
|
||
document.querySelectorAll('[data-toggle-target="meldungen"]').forEach((button) => {
|
||
button.addEventListener('click', () => {
|
||
const groupCard = button.closest('.sg-group-card');
|
||
if (!groupCard) {
|
||
return;
|
||
}
|
||
|
||
const cards = groupCard.querySelectorAll('.sg-vsf-list-detail-page__notification-card');
|
||
const isExpanded = button.getAttribute('aria-expanded') === 'true';
|
||
const nextExpanded = !isExpanded;
|
||
|
||
cards.forEach((card) => {
|
||
card.classList.toggle('sg-vsf-list-detail-page__notification-card--hidden', !nextExpanded);
|
||
card.setAttribute('aria-hidden', String(!nextExpanded));
|
||
});
|
||
|
||
button.setAttribute('aria-expanded', String(nextExpanded));
|
||
button.textContent = nextExpanded ? (button.dataset.expandedLabel || 'Meldungen ausblenden') : (button.dataset.collapsedLabel || 'Meldungen einblenden');
|
||
});
|
||
});
|
||
|
||
const closeVsfDialog = (stage) => {
|
||
if (!stage) {
|
||
return;
|
||
}
|
||
|
||
stage.querySelectorAll('[data-overlay-dialog]').forEach((dialog) => {
|
||
dialog.hidden = true;
|
||
});
|
||
stage.dataset.dialogOpen = 'false';
|
||
};
|
||
|
||
document.querySelectorAll('[data-overlay-open-dialog]').forEach((link) => {
|
||
link.addEventListener('click', (event) => {
|
||
event.preventDefault();
|
||
event.stopPropagation();
|
||
|
||
const stage = link.closest('.sg-delete-confirmation-pattern__stage');
|
||
if (!stage) {
|
||
return;
|
||
}
|
||
|
||
const target = link.getAttribute('data-overlay-open-dialog');
|
||
const dialog = stage.querySelector(`[data-overlay-dialog="${target}"]`);
|
||
if (!dialog) {
|
||
return;
|
||
}
|
||
|
||
stage.querySelectorAll('[data-overlay-dialog]').forEach((otherDialog) => {
|
||
otherDialog.hidden = true;
|
||
});
|
||
|
||
dialog.hidden = false;
|
||
stage.dataset.dialogOpen = 'true';
|
||
|
||
const menuWrap = link.closest('.sg-sandwich-menu-wrap');
|
||
const menuButton = menuWrap?.querySelector('.sg-sandwich-button');
|
||
if (menuWrap) {
|
||
menuWrap.dataset.open = 'false';
|
||
}
|
||
if (menuButton) {
|
||
menuButton.setAttribute('aria-expanded', 'false');
|
||
}
|
||
});
|
||
});
|
||
|
||
document.querySelectorAll('[data-overlay-dialog-close]').forEach((button) => {
|
||
button.addEventListener('click', () => {
|
||
const stage = button.closest('.sg-delete-confirmation-pattern__stage');
|
||
closeVsfDialog(stage);
|
||
});
|
||
});
|
||
|
||
const meldungenSaveButton = document.querySelector('[data-vsf-meldungen-save]');
|
||
const meldungenCheckboxes = document.querySelectorAll('[data-vsf-meldungen-checkbox]');
|
||
|
||
const updateMeldungenSaveState = () => {
|
||
if (!meldungenSaveButton) {
|
||
return;
|
||
}
|
||
const hasSelection = Array.from(meldungenCheckboxes).some((checkbox) => checkbox.getAttribute('aria-checked') === 'true');
|
||
meldungenSaveButton.disabled = !hasSelection;
|
||
meldungenSaveButton.setAttribute('aria-disabled', String(!hasSelection));
|
||
meldungenSaveButton.classList.toggle('sg-button--process-inactive', !hasSelection);
|
||
};
|
||
|
||
meldungenCheckboxes.forEach((checkbox) => {
|
||
checkbox.addEventListener('click', () => {
|
||
if (checkbox.disabled) {
|
||
return;
|
||
}
|
||
|
||
const option = checkbox.closest('[data-component="checkbox-field"]');
|
||
const nextState = checkbox.getAttribute('aria-checked') !== 'true';
|
||
checkbox.setAttribute('aria-checked', String(nextState));
|
||
checkbox.classList.toggle('sg-form-active', nextState);
|
||
checkbox.classList.toggle('sg-checkbox-field--inactive-selectable', !nextState);
|
||
if (option) {
|
||
option.setAttribute('data-component-state', nextState ? 'active' : 'inactive-selectable');
|
||
}
|
||
updateMeldungenSaveState();
|
||
});
|
||
});
|
||
|
||
updateMeldungenSaveState();
|
||
|
||
const updatePulldownSelectionState = (demo) => {
|
||
const trigger = demo.querySelector('.sg-pulldown-demo__trigger');
|
||
const selectableOptions = demo.querySelectorAll('[data-pulldown-option]');
|
||
|
||
if (!trigger || selectableOptions.length === 0) {
|
||
return;
|
||
}
|
||
|
||
const selectedCount = Array.from(selectableOptions).filter((option) => {
|
||
return option.getAttribute('aria-checked') === 'true';
|
||
}).length;
|
||
|
||
selectableOptions.forEach((option) => {
|
||
const optionRow = option.closest('.sg-pulldown-option');
|
||
if (!optionRow) {
|
||
return;
|
||
}
|
||
|
||
optionRow.classList.toggle(
|
||
'sg-pulldown-option--selected',
|
||
option.getAttribute('aria-checked') === 'true'
|
||
);
|
||
});
|
||
|
||
const labelBase = trigger.dataset.labelBase || 'Auswahl';
|
||
trigger.textContent = selectedCount > 0 ? `${labelBase} (${selectedCount})` : labelBase;
|
||
trigger.classList.toggle('sg-pulldown--selected', selectedCount > 0);
|
||
trigger.classList.toggle('sg-form-active', selectedCount > 0);
|
||
trigger.dataset.componentState = selectedCount > 0 ? 'selected' : 'inactive-selectable';
|
||
demo.dataset.componentState = selectedCount > 0 ? 'selected' : 'inactive-selectable';
|
||
trigger.setAttribute(
|
||
'aria-label',
|
||
selectedCount > 0 ? `Pulldown ${labelBase} mit aktiver Auswahl` : `Pulldown ${labelBase} ohne aktive Auswahl`
|
||
);
|
||
};
|
||
|
||
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';
|
||
|
||
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;
|
||
}
|
||
|
||
const triggerRect = trigger.getBoundingClientRect();
|
||
const panel = demo.querySelector('.sg-pulldown-panel');
|
||
if (!panel) {
|
||
return;
|
||
}
|
||
|
||
const panelRect = panel.getBoundingClientRect();
|
||
if (panelRect.width > triggerRect.width || panelRect.right > window.innerWidth) {
|
||
demo.dataset.align = 'right';
|
||
}
|
||
|
||
const alignedPanelRect = panel.getBoundingClientRect();
|
||
if (alignedPanelRect.left < 0) {
|
||
demo.dataset.align = 'left';
|
||
}
|
||
});
|
||
});
|
||
|
||
document.querySelectorAll('.sg-pulldown-option[data-pulldown-option]').forEach((option) => {
|
||
option.addEventListener('click', (event) => {
|
||
event.stopPropagation();
|
||
const pulldownDemo = option.closest('.sg-pulldown-demo');
|
||
if (pulldownDemo) {
|
||
pulldownDemo.querySelectorAll('[data-pulldown-option]').forEach((otherOption) => {
|
||
otherOption.setAttribute('aria-checked', String(otherOption === option));
|
||
});
|
||
|
||
updatePulldownSelectionState(pulldownDemo);
|
||
const trigger = pulldownDemo.querySelector('.sg-pulldown-demo__trigger');
|
||
pulldownDemo.dataset.open = 'false';
|
||
if (trigger) {
|
||
trigger.setAttribute('aria-expanded', 'false');
|
||
}
|
||
}
|
||
});
|
||
});
|
||
|
||
document.querySelectorAll('.sg-pulldown-demo').forEach(updatePulldownSelectionState);
|
||
window.sgInitHelpIconOverlays({
|
||
closeOnOpenSelectors: ['.sg-pulldown-demo', '.sg-sandwich-menu-wrap'],
|
||
outsideClickIgnoreSelectors: ['.sg-pulldown-demo', '.sg-sandwich-menu-wrap'],
|
||
});
|
||
|
||
document.querySelectorAll('.sg-input-single-line-wrap').forEach((wrap) => {
|
||
const input = wrap.querySelector('.sg-input-single-line');
|
||
const clearButton = wrap.querySelector('.sg-input-clear-button');
|
||
|
||
if (!input || !clearButton) {
|
||
return;
|
||
}
|
||
|
||
const updateState = () => {
|
||
wrap.dataset.hasValue = String(input.value.length > 0);
|
||
wrap.dataset.componentState = input.value.length > 0 ? 'active' : 'inactive-selectable';
|
||
};
|
||
|
||
input.addEventListener('input', updateState);
|
||
|
||
clearButton.addEventListener('click', () => {
|
||
input.value = '';
|
||
updateState();
|
||
input.focus();
|
||
});
|
||
|
||
updateState();
|
||
});
|
||
|
||
document.addEventListener('click', (event) => {
|
||
if (!event.target.closest('.sg-sandwich-menu-wrap')) {
|
||
document.querySelectorAll('.sg-sandwich-menu-wrap').forEach((wrap) => {
|
||
const button = wrap.querySelector('.sg-sandwich-button');
|
||
wrap.dataset.open = 'false';
|
||
if (button) {
|
||
button.setAttribute('aria-expanded', 'false');
|
||
}
|
||
});
|
||
}
|
||
|
||
if (!event.target.closest('.sg-pulldown-demo')) {
|
||
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');
|
||
}
|
||
});
|
||
}
|
||
|
||
if (!event.target.closest('.sg-delete-confirmation-pattern__floating-card') && !event.target.closest('[data-overlay-open-dialog]')) {
|
||
document.querySelectorAll('.sg-delete-confirmation-pattern__stage').forEach((stage) => {
|
||
if (stage.dataset.dialogOpen === 'true') {
|
||
closeVsfDialog(stage);
|
||
}
|
||
});
|
||
}
|
||
});
|
||
|
||
window.addEventListener('load', updateObjectCardGridRowState);
|
||
window.addEventListener('resize', updateObjectCardGridRowState);
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|