Disable edit action while card is open
This commit is contained in:
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:
|
||||
|
||||
- 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
|
||||
|
||||
@@ -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)) {
|
||||
|
||||
Reference in new issue
Block a user