nune/gitea
nune/gitea
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Refactor some frontend problems (#32646)

Browse source 
1. correct the modal usage on "admin email list" page (then
`web_src/js/features/admin/emails.ts` is removed)
2. use `addDelegatedEventListener` instead of `jQuery().on`
3. more jQuery related changes and remove jQuery from
`web_src/js/features/common-button.ts`
4. improve `confirmModal` to make it support header, and remove
incorrect double-escaping
5. fix more typescript related types
6. fine tune devtest pages and add more tests
This commit is contained in:
wxiaoguang 2024-11-26 23:36:55 +08:00 • committed by GitHub
parent 722e703c6b
commit 0f4b0cf892
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
22 changed files with 200 additions and 191 deletions
Download patch file Download diff file Expand all files Collapse all files

37
web_src/js/features/common-fetch-action.ts
View file

@ -1,14 +1,14 @@
import {request} from '../modules/fetch.ts';
import {showErrorToast} from '../modules/toast.ts';
import {submitEventSubmitter} from '../utils/dom.ts';
import {htmlEscape} from 'escape-goat';
import {addDelegatedEventListener, submitEventSubmitter} from '../utils/dom.ts';
import {confirmModal} from './comp/ConfirmModal.ts';
import type {RequestOpts} from '../types.ts';
const {appSubUrl, i18n} = window.config;
// fetchActionDoRedirect does real redirection to bypass the browser's limitations of "location"
// more details are in the backend's fetch-redirect handler
function fetchActionDoRedirect(redirect) {
function fetchActionDoRedirect(redirect: string) {
const form = document.createElement('form');
const input = document.createElement('input');
form.method = 'post';
@ -21,7 +21,7 @@ function fetchActionDoRedirect(redirect) {
form.submit();
}
async function fetchActionDoRequest(actionElem, url, opt) {
async function fetchActionDoRequest(actionElem: HTMLElement, url: string, opt: RequestOpts) {
try {
const resp = await request(url, opt);
if (resp.status === 200) {
@ -55,11 +55,8 @@ async function fetchActionDoRequest(actionElem, url, opt) {
actionElem.classList.remove('is-loading', 'loading-icon-2px');
}
async function formFetchAction(e) {
if (!e.target.classList.contains('form-fetch-action')) return;
async function formFetchAction(formEl: HTMLFormElement, e: SubmitEvent) {
e.preventDefault();
const formEl = e.target;
if (formEl.classList.contains('is-loading')) return;
formEl.classList.add('is-loading');
@ -77,7 +74,7 @@ async function formFetchAction(e) {
}
let reqUrl = formActionUrl;
const reqOpt = {method: formMethod.toUpperCase()};
const reqOpt = {method: formMethod.toUpperCase(), body: null};
if (formMethod.toLowerCase() === 'get') {
const params = new URLSearchParams();
for (const [key, value] of formData) {
@ -95,34 +92,36 @@ async function formFetchAction(e) {
await fetchActionDoRequest(formEl, reqUrl, reqOpt);
}
async function linkAction(e) {
async function linkAction(el: HTMLElement, e: Event) {
// A "link-action" can post AJAX request to its "data-url"
// Then the browser is redirected to: the "redirect" in response, or "data-redirect" attribute, or current URL by reloading.
// If the "link-action" has "data-modal-confirm" attribute, a confirm modal dialog will be shown before taking action.
const el = e.target.closest('.link-action');
if (!el) return;
e.preventDefault();
const url = el.getAttribute('data-url');
const doRequest = async () => {
el.disabled = true;
if ('disabled' in el) el.disabled = true; // el could be A or BUTTON, but A doesn't have disabled attribute
await fetchActionDoRequest(el, url, {method: 'POST'});
el.disabled = false;
if ('disabled' in el) el.disabled = false;
};
const modalConfirmContent = htmlEscape(el.getAttribute('data-modal-confirm') || '');
const modalConfirmContent = el.getAttribute('data-modal-confirm') ||
el.getAttribute('data-modal-confirm-content') || '';
if (!modalConfirmContent) {
await doRequest();
return;
}
const isRisky = el.classList.contains('red') || el.classList.contains('negative');
if (await confirmModal(modalConfirmContent, {confirmButtonColor: isRisky ? 'red' : 'primary'})) {
if (await confirmModal({
header: el.getAttribute('data-modal-confirm-header') || '',
content: modalConfirmContent,
confirmButtonColor: isRisky ? 'red' : 'primary',
})) {
await doRequest();
}
}
export function initGlobalFetchAction() {
document.addEventListener('submit', formFetchAction);
document.addEventListener('click', linkAction);
addDelegatedEventListener(document, 'click', '.form-fetch-action', formFetchAction);
addDelegatedEventListener(document, 'click', '.link-action', linkAction);
}