diff --git a/docs/modules/shared/ui_foundation/editable-action-card.md b/docs/modules/shared/ui_foundation/editable-action-card.md index 4904db3..4c0a15f 100644 --- a/docs/modules/shared/ui_foundation/editable-action-card.md +++ b/docs/modules/shared/ui_foundation/editable-action-card.md @@ -8,6 +8,7 @@ Titelaktionen, Lesemodus und optionalem Bearbeitungsmodus. Das Pattern kapselt nur die technische Interaktion: - Umschalten zwischen Lese- und Bearbeitungsansicht +- Sichtbarer, im Bearbeitungsmodus deaktivierter Bearbeiten-Button - Abbrechen einer Bearbeitung - optionale Loeschbestaetigung mit konfigurierbarem Token - Deaktivieren der Loeschaktion bis zur gueltigen Bestaetigung @@ -31,6 +32,10 @@ Bedienelemente verwenden folgende Attribute: - optional `data-shared-editable-card-delete-submit` - optional `data-shared-editable-card-delete-cancel` +Der Bearbeiten-Button bleibt im Titelsegment sichtbar. Im Bearbeitungsmodus +wird er deaktiviert (`disabled`, `aria-disabled="true"` und +`sg-button--inactive`); die Aktionen zum Abbrechen und Speichern bleiben aktiv. + Das Loesch-Token wird je Karte mit `data-shared-editable-delete-token` konfiguriert. Die Standardaktion fuer das Loeschen bleibt im owning Modul und verwendet den bestehenden fachlichen diff --git a/public/scripts/shared-editable-action-card.js b/public/scripts/shared-editable-action-card.js index b2d8ebb..4910d09 100644 --- a/public/scripts/shared-editable-action-card.js +++ b/public/scripts/shared-editable-action-card.js @@ -12,6 +12,7 @@ const readView = card.querySelector('[data-shared-editable-card-read]'); const editView = card.querySelector('[data-shared-editable-card-form]'); + const editButtons = card.querySelectorAll('[data-shared-editable-card-edit]'); if (readView) { readView.hidden = enabled; @@ -19,6 +20,11 @@ if (editView) { editView.hidden = !enabled; } + editButtons.forEach((editButton) => { + editButton.disabled = enabled; + editButton.setAttribute('aria-disabled', String(enabled)); + editButton.classList.toggle('sg-button--inactive', enabled); + }); }; const resetDeleteConfirmation = (card) => { @@ -77,6 +83,7 @@ } root.dataset.sharedEditableActionCardsInitialized = 'true'; + root.querySelectorAll(cardSelector).forEach((card) => setEditMode(card, false)); root.addEventListener('click', (event) => { const edit = event.target.closest('[data-shared-editable-card-edit]'); if (edit && root.contains(edit)) {