Add Meldungen overlay card with layout-scoped top offset and dialog interactions

patterns/vsf-list-detailseite.html

@@ -109,7 +109,9 @@
 
     <div class="sg-vsf-list-detail-page__content">
       <aside class="sg-vsf-list-detail-page__left-column" aria-label="Benachrichtigungen">
-        <div class="sg-group-card" data-component="group-card">
+        <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">
@@ -121,7 +123,7 @@
                     </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">Meldungen anpassen</a>
+                    <a class="sg-sandwich-menu-link" href="#!" data-component-part="sandwich-menu-link" data-vsf-open-dialog="meldungen">Meldungen anpassen</a>
                   </div>
                 </div>
               </div>
@@ -161,6 +163,18 @@
                 </div>
               </article>
             </div>
+
+            <article class="sg-card sg-delete-confirmation-pattern__floating-card" aria-label="Meldungen anpassen" role="dialog" aria-modal="true" aria-labelledby="vsf-meldungen-overlay-title" data-vsf-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>Meldungen anpassen</strong></p>
+                <p class="sg-body sg-delete-confirmation-pattern__text">Passe die Anzeige und Priorisierung der Meldungen an.</p>
+                <div class="sg-delete-confirmation-pattern__actions">
+                  <button class="sg-interaction-element sg-button sg-button--active" type="button" data-vsf-dialog-close>Schließen</button>
+                </div>
+              </div>
+            </article>
+          </div>
+        </div>
       </aside>
 
       <div class="sg-vsf-list-detail-page__right-column" aria-label="Objektkarten">
@@ -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);

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;
 }