chore: Refactor global buttons init

This commit rewrites `initGlobalButtons()` to remove jQuery usage.
This commit is contained in:
Jordan Atwood 2025-08-29 13:47:35 -07:00
commit 654c02a8dd
No known key found for this signature in database
GPG key ID: 615A619C2D73A6DF

View file

@ -481,38 +481,44 @@ export function initGlobalButtons() {
// There are many "cancel button" elements in modal dialogs, Fomantic UI expects they are button-like elements but never submit a form. // There are many "cancel button" elements in modal dialogs, Fomantic UI expects they are button-like elements but never submit a form.
// However, Gitea misuses the modal dialog and put the cancel buttons inside forms, so we must prevent the form submission. // However, Gitea misuses the modal dialog and put the cancel buttons inside forms, so we must prevent the form submission.
// There are a few cancel buttons in non-modal forms, and there are some dynamically created forms (eg: the "Edit Issue Content") // There are a few cancel buttons in non-modal forms, and there are some dynamically created forms (eg: the "Edit Issue Content")
$(document).on('click', 'form button.ui.cancel.button', (e) => { document.addEventListener('click', (e) => {
e.preventDefault(); if (e.target.matches('form button.ui.cancel.button')) {
}); e.preventDefault();
$('.show-panel').on('click', function (e) {
// a '.show-panel' element can show a panel, by `data-panel="selector"`
// if it has "toggle" class, it toggles the panel
e.preventDefault();
const sel = this.getAttribute('data-panel');
if (this.classList.contains('toggle')) {
toggleElem(sel);
} else {
showElem(sel);
} }
}); });
$('.hide-panel').on('click', function (e) { for (const showPanelButton of document.querySelectorAll('.show-panel')) {
// a `.hide-panel` element can hide a panel, by `data-panel="selector"` or `data-panel-closest="selector"` showPanelButton.addEventListener('click', (e) => {
e.preventDefault(); // a '.show-panel' element can show a panel, by `data-panel="selector"`
let sel = this.getAttribute('data-panel'); // if it has "toggle" class, it toggles the panel
if (sel) { e.preventDefault();
hideElem($(sel)); const sel = e.currentTarget.getAttribute('data-panel');
return; if (e.currentTarget.classList.contains('toggle')) {
} toggleElem(sel);
sel = this.getAttribute('data-panel-closest'); } else {
if (sel) { showElem(sel);
hideElem($(this).closest(sel)); }
return; });
} }
// should never happen, otherwise there is a bug in code
showErrorToast('Nothing to hide'); for (const hidePanelButton of document.querySelectorAll('.hide-panel')) {
}); hidePanelButton.addEventListener('click', (e) => {
// a `.hide-panel` element can hide a panel, by `data-panel="selector"` or `data-panel-closest="selector"`
e.preventDefault();
let sel = e.currentTarget.getAttribute('data-panel');
if (sel) {
hideElem(sel);
return;
}
sel = e.currentTarget.getAttribute('data-panel-closest');
if (sel) {
hideElem(e.currentTarget.closest(sel));
return;
}
// should never happen, otherwise there is a bug in code
showErrorToast('Nothing to hide');
});
}
initGlobalShowModal(); initGlobalShowModal();
} }