mirrors/forgejo
1
0
Fork 0
mirror of https://codeberg.org/forgejo/forgejo.git synced 2025-10-01 15:15:59 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat: first native dialog for modal (#8859)

Browse source 
- The current implementation for modals is provided by fomantic UI.
- This patch introduces a new implementation that relies on the `<dialog>` element to provide modal, whereby the heavy lifting is done by the browser.
- This implementation is considerably simpler, accessible (although untested) and lightweight. It is capable of replacing fomantic UI's modal implementation + our dimmer implementation (~2k lines of code and CSS).[^1] As a first step the empty content modal is migrated.
- This brings in the CSS needed to display `<dialog>` and a helper function that hides some boilerplate code that's needed to show `<dialog>` as a modal.
- Add a E2E test that shows the modal's cancel and approve button works.

[^1]: The heavy work has already been done by me in a local branch, but reviewing that gigantic patch in one PR is not doable.

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/8859
Reviewed-by: 0ko <0ko@noreply.codeberg.org>
Co-authored-by: Gusted <postmaster@gusted.xyz>
Co-committed-by: Gusted <postmaster@gusted.xyz>
This commit is contained in:
Gusted 2025-09-20 20:09:17 +02:00 • committed by Gusted
commit aa345c9e0c
9 changed files with 232 additions and 57 deletions
Download patch file Download diff file Expand all files Collapse all files

33
web_src/js/modules/modal.ts Normal file
View file

@ -0,0 +1,33 @@
// 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, {once: true, 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();
});
}