From d35afc02283194d643a6b037c8c2e8d956e5b929 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= Date: Tue, 16 Jun 2026 07:03:39 +0200 Subject: [PATCH] Move create-list action to save --- patterns/delete-confirmation-overlay.html | 113 ++++++++++++---------- 1 file changed, 63 insertions(+), 50 deletions(-) diff --git a/patterns/delete-confirmation-overlay.html b/patterns/delete-confirmation-overlay.html index 53884c5..2100b90 100644 --- a/patterns/delete-confirmation-overlay.html +++ b/patterns/delete-confirmation-overlay.html @@ -180,11 +180,6 @@ - @@ -205,13 +200,13 @@ const confirmationSubmitButton = stage.querySelector('[data-overlay-confirmation-submit]'); const expectedConfirmationValue = stage.dataset.overlayConfirmationValue ?? ''; const overlayListButtons = Array.from(stage.querySelectorAll('[data-overlay-list-toggle]')); + const overlayList = stage.querySelector('.sg-delete-confirmation-pattern__list'); const createListForm = stage.querySelector('[data-create-list-form]'); const createListFormToggle = stage.querySelector('[data-create-list-form-toggle]'); const createListTitle = stage.querySelector('[data-create-list-title]'); const createListSegment = stage.querySelector('[data-create-list-form]'); 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 isAddToListOverlay = stage.dataset.pattern === 'add-to-list-overlay'; const committedListIds = new Set( (stage.dataset.overlaySelectedLists ?? '') @@ -220,7 +215,6 @@ .filter(Boolean) ); let draftListIds = new Set(committedListIds); - let updateCreateListButtonState = () => {}; let resetAddToListDraftState = () => {}; const closeStageDialogs = ({ resetAddToListDraft = false } = {}) => { @@ -242,6 +236,59 @@ }); }; + const bindOverlayListButton = (button) => { + button.addEventListener('click', (event) => { + event.preventDefault(); + + const listId = button.dataset.overlayListId; + if (!listId) { + return; + } + + if (draftListIds.has(listId)) { + draftListIds.delete(listId); + } else { + draftListIds.add(listId); + } + + syncOverlayListState(); + }); + }; + + const appendCreatedListButton = (title) => { + if (!overlayList) { + return null; + } + + const listId = `created-${Date.now()}`; + const listItem = document.createElement('li'); + listItem.className = 'sg-delete-confirmation-pattern__list-item'; + + const button = document.createElement('button'); + button.type = 'button'; + button.className = 'sg-interaction-element sg-button sg-delete-confirmation-pattern__list-button'; + button.dataset.overlayListToggle = ''; + button.dataset.overlayListId = listId; + button.dataset.selected = 'true'; + button.setAttribute('aria-pressed', 'true'); + + const icon = document.createElement('span'); + icon.className = 'sg-delete-confirmation-pattern__list-icon'; + icon.setAttribute('aria-hidden', 'true'); + + const label = document.createElement('span'); + label.className = 'sg-delete-confirmation-pattern__list-label'; + label.textContent = title; + + button.append(icon, label); + listItem.appendChild(button); + overlayList.appendChild(listItem); + overlayListButtons.push(button); + bindOverlayListButton(button); + + return listId; + }; + if (confirmationInput && confirmationSubmitButton) { const updateConfirmationState = () => { const isValid = confirmationInput.value === expectedConfirmationValue; @@ -257,48 +304,9 @@ if (overlayListButtons.length > 0) { syncOverlayListState(); - - overlayListButtons.forEach((button) => { - button.addEventListener('click', (event) => { - event.preventDefault(); - - const listId = button.dataset.overlayListId; - if (!listId) { - return; - } - - if (draftListIds.has(listId)) { - draftListIds.delete(listId); - } else { - draftListIds.add(listId); - } - - syncOverlayListState(); - }); - }); } if (createListForm && createListFormToggle) { - 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); - createListForm.addEventListener('submit', (event) => { - event.preventDefault(); - }); - resetAddToListDraftState = () => { draftListIds = new Set(committedListIds); syncOverlayListState(); @@ -319,11 +327,8 @@ if (createListDescriptionInput) { createListDescriptionInput.value = ''; } - updateCreateListButtonState(); }; - updateCreateListButtonState(); - createListFormToggle.addEventListener('click', (event) => { event.preventDefault(); if (createListSegment) { @@ -334,7 +339,6 @@ createListFormToggle.classList.add('sg-button--inactive'); createListFormToggle.disabled = true; createListFormToggle.setAttribute('aria-disabled', 'true'); - updateCreateListButtonState(); }); } @@ -388,6 +392,15 @@ button.addEventListener('click', (event) => { event.preventDefault(); if (isAddToListOverlay) { + const createdListTitle = createListNameInput?.value.trim() ?? ''; + if (createdListTitle) { + const createdListId = appendCreatedListButton(createdListTitle); + if (createdListId) { + draftListIds.add(createdListId); + committedListIds.add(createdListId); + } + } + committedListIds.clear(); draftListIds.forEach((value) => committedListIds.add(value)); stage.dataset.overlaySelectedLists = Array.from(committedListIds).join(',');