Disable edit action while card is open

This commit is contained in:
gitea_admin committed 2026-09-19 14:04:16 +02:00
1 parent e503759197
commit 2a754973cd
2 files changed
+12

No files matched your search

@@ -8,6 +8,7 @@ Titelaktionen, Lesemodus und optionalem Bearbeitungsmodus.
Das Pattern kapselt nur die technische Interaktion: Das Pattern kapselt nur die technische Interaktion:
- Umschalten zwischen Lese- und Bearbeitungsansicht - Umschalten zwischen Lese- und Bearbeitungsansicht
- Sichtbarer, im Bearbeitungsmodus deaktivierter Bearbeiten-Button
- Abbrechen einer Bearbeitung - Abbrechen einer Bearbeitung
- optionale Loeschbestaetigung mit konfigurierbarem Token - optionale Loeschbestaetigung mit konfigurierbarem Token
- Deaktivieren der Loeschaktion bis zur gueltigen Bestaetigung - 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-submit`
- optional `data-shared-editable-card-delete-cancel` - 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 Das Loesch-Token wird je Karte mit
`data-shared-editable-delete-token` konfiguriert. Die Standardaktion fuer das `data-shared-editable-delete-token` konfiguriert. Die Standardaktion fuer das
Loeschen bleibt im owning Modul und verwendet den bestehenden fachlichen Loeschen bleibt im owning Modul und verwendet den bestehenden fachlichen
@@ -12,6 +12,7 @@
const readView = card.querySelector('[data-shared-editable-card-read]'); const readView = card.querySelector('[data-shared-editable-card-read]');
const editView = card.querySelector('[data-shared-editable-card-form]'); const editView = card.querySelector('[data-shared-editable-card-form]');
const editButtons = card.querySelectorAll('[data-shared-editable-card-edit]');
if (readView) { if (readView) {
readView.hidden = enabled; readView.hidden = enabled;
@@ -19,6 +20,11 @@
if (editView) { if (editView) {
editView.hidden = !enabled; 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) => { const resetDeleteConfirmation = (card) => {
@@ -77,6 +83,7 @@
} }
root.dataset.sharedEditableActionCardsInitialized = 'true'; root.dataset.sharedEditableActionCardsInitialized = 'true';
root.querySelectorAll(cardSelector).forEach((card) => setEditMode(card, false));
root.addEventListener('click', (event) => { root.addEventListener('click', (event) => {
const edit = event.target.closest('[data-shared-editable-card-edit]'); const edit = event.target.closest('[data-shared-editable-card-edit]');
if (edit && root.contains(edit)) { if (edit && root.contains(edit)) {