diff --git a/patterns/vsf-listen-uebersicht-seite-v2.html b/patterns/vsf-listen-uebersicht-seite-v2.html index fbbad41..ea10760 100644 --- a/patterns/vsf-listen-uebersicht-seite-v2.html +++ b/patterns/vsf-listen-uebersicht-seite-v2.html @@ -111,6 +111,126 @@ +

Layout 3 - List Card inklusive Lösch- und Editier-Funktion

+
+
+
+
NAME DER LISTE
+
+ +
+ Editieren + Liste loeschen +
+
+
+
+
+
+

Medianscore:

+ +

attraktiv

+
+
+
+
+
+

+ PE: 28.8 +

+

+ PE forw.: 23.3 +

+

+ PEG: 3.54 +

+
+
+
+

Median-Subscores:

+
+
+

Marktbewertung:

+
+
+
+
+
+

Wachstum:

+
+
+
+
+
+

Profitabilität:

+
+
+
+
+
+

Stabilität:

+
+
+
+
+
+

BESCHREIBUNG LISTE

+
+
+
+ +
+
+
+ + + + +
+
@@ -350,6 +470,91 @@ } }); }); + + const editInputs = document.querySelectorAll('[data-vsf-edit-input]'); + const editSaveButton = document.querySelector('[data-vsf-edit-save]'); + const deleteDialogInput = document.querySelector('[data-vsf-delete-confirmation-input]'); + const deleteDialogSubmitButton = document.querySelector('[data-vsf-delete-confirmation-submit]'); + + if (editInputs.length > 0 && editSaveButton) { + const updateEditSaveState = () => { + const hasInput = Array.from(editInputs).some((field) => field.value.trim().length > 0); + editSaveButton.disabled = !hasInput; + editSaveButton.setAttribute('aria-disabled', String(!hasInput)); + editSaveButton.classList.toggle('sg-button--process-inactive', !hasInput); + }; + + editInputs.forEach((field) => { + field.addEventListener('input', updateEditSaveState); + }); + updateEditSaveState(); + } + + if (deleteDialogInput && deleteDialogSubmitButton) { + const updateDeleteDialogState = () => { + const isValid = deleteDialogInput.value === 'DELETE'; + deleteDialogSubmitButton.disabled = !isValid; + deleteDialogSubmitButton.setAttribute('aria-disabled', String(!isValid)); + deleteDialogSubmitButton.classList.toggle('sg-button--process-inactive', !isValid); + }; + + deleteDialogInput.addEventListener('input', updateDeleteDialogState); + updateDeleteDialogState(); + } + + const closeStageDialogs = (stage) => { + stage.querySelectorAll('.sg-delete-confirmation-pattern__floating-card').forEach((dialog) => { + dialog.hidden = true; + }); + stage.dataset.dialogOpen = 'false'; + }; + + document.querySelectorAll('.sg-delete-confirmation-pattern__stage').forEach((stage) => { + closeStageDialogs(stage); + }); + + 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(`.sg-delete-confirmation-pattern__floating-card[data-overlay-dialog="${target}"]`); + + if (!dialog) { + return; + } + + closeStageDialogs(stage); + 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], [data-vsf-delete-confirmation-submit], [data-vsf-edit-save]').forEach((button) => { + button.addEventListener('click', (event) => { + event.preventDefault(); + const stage = button.closest('.sg-delete-confirmation-pattern__stage'); + if (!stage) { + return; + } + closeStageDialogs(stage); + }); + });