diff --git a/patterns/delete-confirmation-overlay.html b/patterns/delete-confirmation-overlay.html index 0c059b7..8a3df8c 100644 --- a/patterns/delete-confirmation-overlay.html +++ b/patterns/delete-confirmation-overlay.html @@ -143,6 +143,11 @@ +
+ + +
+ @@ -199,6 +199,9 @@ const overlayListButtons = Array.from(stage.querySelectorAll('[data-overlay-list-toggle]')); const createListForm = stage.querySelector('[data-create-list-form]'); const createListFormToggle = stage.querySelector('[data-create-list-form-toggle]'); + const createListNameInput = stage.querySelector('[data-create-list-form] input[aria-label="Name"]'); + const createListDescriptionInput = stage.querySelector('[data-create-list-form] textarea[aria-label="Beschreibung"]'); + const createListSubmitButton = stage.querySelector('[data-create-list-form] button[type="submit"]'); const selectedListIds = new Set( (stage.dataset.overlaySelectedLists ?? '') .split(',') @@ -210,6 +213,16 @@ stage.querySelectorAll('[data-overlay-dialog]').forEach((dialog) => { dialog.hidden = true; }); + if (createListForm) { + createListForm.hidden = true; + } + if (createListFormToggle) { + createListFormToggle.disabled = false; + createListFormToggle.setAttribute('aria-disabled', 'false'); + createListFormToggle.setAttribute('aria-expanded', 'false'); + createListFormToggle.classList.remove('sg-button--inactive'); + createListFormToggle.classList.add('sg-button--active'); + } stage.dataset.dialogOpen = 'false'; }; @@ -261,11 +274,33 @@ } if (createListForm && createListFormToggle) { + const updateCreateListButtonState = () => { + if (!createListSubmitButton) { + return; + } + + const hasName = Boolean(createListNameInput?.value.trim()); + const hasDescription = Boolean(createListDescriptionInput?.value.trim()); + const isActive = hasName || hasDescription; + + createListSubmitButton.disabled = !isActive; + createListSubmitButton.setAttribute('aria-disabled', String(!isActive)); + createListSubmitButton.classList.toggle('sg-button--process-inactive', !isActive); + }; + + createListNameInput?.addEventListener('input', updateCreateListButtonState); + createListDescriptionInput?.addEventListener('input', updateCreateListButtonState); + updateCreateListButtonState(); + createListFormToggle.addEventListener('click', (event) => { event.preventDefault(); createListForm.hidden = false; createListFormToggle.setAttribute('aria-expanded', 'true'); + createListFormToggle.classList.remove('sg-button--active'); + createListFormToggle.classList.add('sg-button--inactive'); createListFormToggle.disabled = true; + createListFormToggle.setAttribute('aria-disabled', 'true'); + updateCreateListButtonState(); }); }