Add shared editable action card pattern

2026-09-19 12:39:05 +02:00
1 parent 1eef7bd70b
commit a672fc76e4
@@ -0,0 +1,116 @@
+(function () {
+  'use strict';
+
+  const cardSelector = '[data-shared-editable-action-card]';
+
+  const getCard = (element) => element.closest(cardSelector);
+
+  const setEditMode = (card, enabled) => {
+    if (!card) {
+      return;
+    }
+
+    const readView = card.querySelector('[data-shared-editable-card-read]');
+    const editView = card.querySelector('[data-shared-editable-card-form]');
+
+    if (readView) {
+      readView.hidden = enabled;
+    }
+    if (editView) {
+      editView.hidden = !enabled;
+    }
+  };
+
+  const resetDeleteConfirmation = (card) => {
+    const confirmation = card?.querySelector('[data-shared-editable-card-delete-confirmation]');
+    const input = card?.querySelector('[data-shared-editable-card-delete-input]');
+    const submit = card?.querySelector('[data-shared-editable-card-delete-submit]');
+
+    if (input) {
+      input.value = '';
+    }
+    if (submit) {
+      submit.disabled = true;
+      submit.setAttribute('aria-disabled', 'true');
+      submit.classList.add('sg-button--process-inactive');
+    }
+    if (confirmation) {
+      confirmation.hidden = true;
+    }
+    if (card) {
+      card.dataset.dialogOpen = 'false';
+    }
+  };
+
+  const openDeleteConfirmation = (card) => {
+    const confirmation = card?.querySelector('[data-shared-editable-card-delete-confirmation]');
+    const input = card?.querySelector('[data-shared-editable-card-delete-input]');
+
+    if (input) {
+      input.value = '';
+      input.focus();
+    }
+    if (confirmation) {
+      confirmation.hidden = false;
+    }
+    if (card) {
+      card.dataset.dialogOpen = 'true';
+    }
+  };
+
+  const updateDeleteButton = (input) => {
+    const card = getCard(input);
+    const submit = card?.querySelector('[data-shared-editable-card-delete-submit]');
+    const token = card?.dataset.sharedEditableDeleteToken || 'DELETE';
+    const valid = input.value === token;
+
+    if (submit) {
+      submit.disabled = !valid;
+      submit.setAttribute('aria-disabled', String(!valid));
+      submit.classList.toggle('sg-button--process-inactive', !valid);
+    }
+  };
+
+  const init = (root) => {
+    if (!root || root.dataset.sharedEditableActionCardsInitialized === 'true') {
+      return;
+    }
+
+    root.dataset.sharedEditableActionCardsInitialized = 'true';
+    root.addEventListener('click', (event) => {
+      const edit = event.target.closest('[data-shared-editable-card-edit]');
+      if (edit && root.contains(edit)) {
+        setEditMode(getCard(edit), true);
+        return;
+      }
+
+      const cancel = event.target.closest('[data-shared-editable-card-cancel]');
+      if (cancel && root.contains(cancel)) {
+        const card = getCard(cancel);
+        resetDeleteConfirmation(card);
+        setEditMode(card, false);
+        return;
+      }
+
+      const deleteButton = event.target.closest('[data-shared-editable-card-delete]');
+      if (deleteButton && root.contains(deleteButton)) {
+        openDeleteConfirmation(getCard(deleteButton));
+        return;
+      }
+
+      const deleteCancel = event.target.closest('[data-shared-editable-card-delete-cancel]');
+      if (deleteCancel && root.contains(deleteCancel)) {
+        resetDeleteConfirmation(getCard(deleteCancel));
+      }
+    });
+
+    root.addEventListener('input', (event) => {
+      const input = event.target.closest('[data-shared-editable-card-delete-input]');
+      if (input && root.contains(input)) {
+        updateDeleteButton(input);
+      }
+    });
+  };
+
+  window.SharedEditableActionCard = { init, resetDeleteConfirmation, setEditMode };
+}());