gitea_admin/Styleguide
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Activate create-list submit on input

Browse Source
This commit is contained in:
Mathias Gläser
2026-06-15 11:15:46 +02:00
parent 29afac7be4
commit 3bbf797840
1 changed files with 40 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
patterns/delete-confirmation-overlay.html
+40 -5
View File
@@ -143,6 +143,11 @@
</li>
</ul>
<div class="sg-delete-confirmation-pattern__actions">
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-create-list-form-toggle aria-expanded="false">Neue Liste anlegen</button>
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-overlay-dialog-close>Abbrechen</button>
</div>
<div class="sg-form-sections-card-wrapper sg-delete-confirmation-pattern__create-list-form" data-create-list-form hidden aria-label="Formular mit Abschnitten">
<form class="sg-form-sections-card" action="#" method="post" aria-label="Neue Liste anlegen Formular">
<div class="sg-form-sections-card__body" data-pattern-part="form-body">
@@ -181,11 +186,6 @@
</footer>
</form>
</div>
<div class="sg-delete-confirmation-pattern__actions">
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-create-list-form-toggle aria-expanded="false">Neue Liste anlegen</button>
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-overlay-dialog-close>Abbrechen</button>
</div>
</div>
</article>
</div>
@@ -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();
});
}