jojo/web_src/js/modules/modal.ts
forgejo-backport-action e919aedcec [v15.0/forgejo] fix: allow modals to be submitted multiple times (#11931)
**Backport:** https://codeberg.org/forgejo/forgejo/pulls/11843

Fixes #11842.

The `once: true` was likely added to prevent multiple concurrent
submissions of the same form. This could still be worth preventing,
but I suspect it would require wrapping the supplied `onApprove`
callback with the corresponding logic, implemented manually, as I
am not aware of any native API to prevent concurrent executions of
callbacks.

## Checklist

### Tests for JavaScript changes

- I added test coverage for JavaScript changes...
  - [ ] in `web_src/js/*.test.js` if it can be unit tested.
  - [x] in `tests/e2e/*.test.e2e.js` if it requires interactions with a live Forgejo server (see also the [developer guide for JavaScript testing](https://codeberg.org/forgejo/forgejo/src/branch/forgejo/tests/e2e/README.md#end-to-end-tests)).

### Documentation

- [ ] I created a pull request [to the documentation](https://codeberg.org/forgejo/docs) to explain to Forgejo users how to use this change.
- [x] I did not document these changes and I do not expect someone else to do it.

### Release notes

- [x] This change will be noticed by a Forgejo user or admin (feature, bug fix, performance, etc.). I suggest to include a release note for this change.
- [ ] This change is not visible to a Forgejo user or admin (refactor, dependency upgrade, etc.). I think there is no need to add a release note for this change.

Co-authored-by: Antonin Delpeuch <antonin@delpeuch.eu>
Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/11931
Reviewed-by: Mathieu Fenniak <mfenniak@noreply.codeberg.org>
Co-authored-by: forgejo-backport-action <forgejo-backport-action@noreply.codeberg.org>
Co-committed-by: forgejo-backport-action <forgejo-backport-action@noreply.codeberg.org>
2026-04-01 08:13:12 +02:00

33 lines
1.3 KiB
TypeScript

// Copyright 2025 The Forgejo Authors. All rights reserved.
// SPDX-License-Identifier: MIT
// showModal will show the given modal and run `onApprove` if the approve/ok/yes
// button is pressed.
export function showModal(modalID: string, onApprove: () => void) {
const modal = document.getElementById(modalID) as HTMLDialogElement;
// Move the modal to `<body>`, to avoid inheriting any bad CSS or if the
// parent becomes `display: hidden`.
document.body.append(modal);
// Close the modal if the cancel button is pressed.
modal.querySelector('.cancel')?.addEventListener('click', () => {
modal.close();
}, {once: true, passive: true});
modal.querySelector('.ok')?.addEventListener('click', onApprove, {passive: true});
// The modal is ready to be shown.
modal.showModal();
}
// NOTE: Can be replaced in late 2026 with `closedBy` attribute on `<dialog>` element.
export function initModalClose() {
document.addEventListener('click', (event) => {
const dialog = document.querySelector<HTMLDialogElement>('dialog[open]');
// No open dialogs on page, nothing to do.
if (dialog === null) return;
const target = event.target as HTMLElement;
// User clicked dialog itself (not it's content), likely ::backdrop, so close it.
if (dialog === target) dialog.close();
});
}