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

Stage overlay card changes until save

Browse Source
This commit is contained in:
Mathias Gläser
2026-06-16 06:59:04 +02:00
parent 36ae461901
commit c1ab1f1e96
2 changed files with 77 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
patterns/delete-confirmation-overlay.html
+72 -21
View File
@@ -143,7 +143,6 @@
</ul>
<div class="sg-delete-confirmation-pattern__actions">
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-overlay-dialog-close>Abbrechen</button>
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-create-list-form-toggle aria-expanded="false">Neue Liste anlegen</button>
</div>
</div>
@@ -189,6 +188,13 @@
</form>
</div>
</div>
<footer class="sg-card-segment sg-card-segment--body sg-delete-confirmation-pattern__actions-segment">
<div class="sg-delete-confirmation-pattern__actions sg-delete-confirmation-pattern__actions--footer">
<button class="sg-interaction-element sg-button sg-button--active" type="button" data-overlay-dialog-cancel>Abbrechen</button>
<button class="sg-interaction-element sg-button sg-button--process" type="button" data-overlay-dialog-save>Speichern</button>
</div>
</footer>
</article>
</div>
</section>
@@ -206,26 +212,23 @@
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(
const isAddToListOverlay = stage.dataset.pattern === 'add-to-list-overlay';
const committedListIds = new Set(
(stage.dataset.overlaySelectedLists ?? '')
.split(',')
.map((value) => value.trim())
.filter(Boolean)
);
let draftListIds = new Set(committedListIds);
let updateCreateListButtonState = () => {};
let resetAddToListDraftState = () => {};
const closeStageDialogs = () => {
const closeStageDialogs = ({ resetAddToListDraft = false } = {}) => {
stage.querySelectorAll('[data-overlay-dialog]').forEach((dialog) => {
dialog.hidden = true;
});
if (createListSegment) {
createListSegment.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');
if (isAddToListOverlay && resetAddToListDraft) {
resetAddToListDraftState();
}
stage.dataset.dialogOpen = 'false';
};
@@ -233,12 +236,10 @@
const syncOverlayListState = () => {
overlayListButtons.forEach((button) => {
const listId = button.dataset.overlayListId;
const isSelected = Boolean(listId && selectedListIds.has(listId));
const isSelected = Boolean(listId && draftListIds.has(listId));
button.dataset.selected = String(isSelected);
button.setAttribute('aria-pressed', String(isSelected));
});
stage.dataset.overlaySelectedLists = Array.from(selectedListIds).join(',');
};
if (confirmationInput && confirmationSubmitButton) {
@@ -266,10 +267,10 @@
return;
}
if (selectedListIds.has(listId)) {
selectedListIds.delete(listId);
if (draftListIds.has(listId)) {
draftListIds.delete(listId);
} else {
selectedListIds.add(listId);
draftListIds.add(listId);
}
syncOverlayListState();
@@ -278,7 +279,7 @@
}
if (createListForm && createListFormToggle) {
const updateCreateListButtonState = () => {
updateCreateListButtonState = () => {
if (!createListSubmitButton) {
return;
}
@@ -294,6 +295,33 @@
createListNameInput?.addEventListener('input', updateCreateListButtonState);
createListDescriptionInput?.addEventListener('input', updateCreateListButtonState);
createListForm.addEventListener('submit', (event) => {
event.preventDefault();
});
resetAddToListDraftState = () => {
draftListIds = new Set(committedListIds);
syncOverlayListState();
if (createListSegment) {
createListSegment.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');
}
if (createListNameInput) {
createListNameInput.value = '';
}
if (createListDescriptionInput) {
createListDescriptionInput.value = '';
}
updateCreateListButtonState();
};
updateCreateListButtonState();
createListFormToggle.addEventListener('click', (event) => {
@@ -310,7 +338,11 @@
});
}
closeStageDialogs();
if (isAddToListOverlay) {
resetAddToListDraftState();
}
closeStageDialogs({ resetAddToListDraft: false });
stage.querySelectorAll('[data-overlay-open-dialog]').forEach((link) => {
link.addEventListener('click', (event) => {
@@ -323,7 +355,7 @@
return;
}
closeStageDialogs();
closeStageDialogs({ resetAddToListDraft: target === 'add-to-list' });
dialog.hidden = false;
stage.dataset.dialogOpen = 'true';
@@ -345,6 +377,25 @@
});
});
stage.querySelectorAll('[data-overlay-dialog-cancel]').forEach((button) => {
button.addEventListener('click', (event) => {
event.preventDefault();
closeStageDialogs({ resetAddToListDraft: true });
});
});
stage.querySelectorAll('[data-overlay-dialog-save]').forEach((button) => {
button.addEventListener('click', (event) => {
event.preventDefault();
if (isAddToListOverlay) {
committedListIds.clear();
draftListIds.forEach((value) => committedListIds.add(value));
stage.dataset.overlaySelectedLists = Array.from(committedListIds).join(',');
}
closeStageDialogs({ resetAddToListDraft: true });
});
});
stage.querySelectorAll('.sg-sandwich-menu-wrap').forEach((wrap) => {
const button = wrap.querySelector('.sg-sandwich-button');
const panel = wrap.querySelector('.sg-sandwich-menu-panel');