diff --git a/patterns/vsf-list-detailseite.html b/patterns/vsf-list-detailseite.html index 92bad93..e7308c5 100644 --- a/patterns/vsf-list-detailseite.html +++ b/patterns/vsf-list-detailseite.html @@ -109,57 +109,71 @@
@@ -359,6 +373,48 @@ }); }); + const closeVsfDialog = (stage) => { + if (!stage) { + return; + } + + stage.querySelectorAll('[data-vsf-dialog]').forEach((dialog) => { + dialog.hidden = true; + }); + stage.dataset.dialogOpen = 'false'; + }; + + document.querySelectorAll('[data-vsf-open-dialog]').forEach((link) => { + link.addEventListener('click', (event) => { + event.preventDefault(); + + const stage = link.closest('.sg-delete-confirmation-pattern__stage'); + if (!stage) { + return; + } + + const target = link.getAttribute('data-vsf-open-dialog'); + const dialog = stage.querySelector(`[data-vsf-dialog="${target}"]`); + if (!dialog) { + return; + } + + stage.querySelectorAll('[data-vsf-dialog]').forEach((otherDialog) => { + otherDialog.hidden = true; + }); + + dialog.hidden = false; + stage.dataset.dialogOpen = 'true'; + }); + }); + + document.querySelectorAll('[data-vsf-dialog-close]').forEach((button) => { + button.addEventListener('click', () => { + const stage = button.closest('.sg-delete-confirmation-pattern__stage'); + closeVsfDialog(stage); + }); + }); + const updatePulldownSelectionState = (demo) => { const trigger = demo.querySelector('.sg-pulldown-demo__trigger'); const selectableOptions = demo.querySelectorAll('[data-pulldown-option]'); @@ -507,6 +563,14 @@ } }); } + + if (!event.target.closest('.sg-delete-confirmation-pattern__floating-card') && !event.target.closest('[data-vsf-open-dialog]')) { + document.querySelectorAll('.sg-delete-confirmation-pattern__stage').forEach((stage) => { + if (stage.dataset.dialogOpen === 'true') { + closeVsfDialog(stage); + } + }); + } }); window.addEventListener('load', updateObjectCardGridRowState); diff --git a/styles/33-layouts-vsf-list-detailseite.css b/styles/33-layouts-vsf-list-detailseite.css index 4a2cf61..64f0ed4 100644 --- a/styles/33-layouts-vsf-list-detailseite.css +++ b/styles/33-layouts-vsf-list-detailseite.css @@ -68,6 +68,15 @@ display: none; } +.sg-vsf-list-detail-page__meldungen-overlay-pattern { + max-width: 100%; +} + +.sg-vsf-list-detail-page__meldungen-overlay-pattern .sg-delete-confirmation-pattern__floating-card { + top: calc(var(--spacing-large) * 5); + transform: translateX(-50%); +} + .sg-vsf-list-detail-page__mobile-toggle { display: none; }