{{template "base/alert" .}}
-
-{{template "base/footer" .}}
+{{template "devtest/devtest-footer"}}
diff --git a/web_src/js/features/admin/emails.ts b/web_src/js/features/admin/emails.ts
deleted file mode 100644
index 8e97b67bf9..0000000000
--- a/web_src/js/features/admin/emails.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import $ from 'jquery';
-
-export function initAdminEmails(): void {
- $('.link-email-action').on('click', (e) => {
- const $this = $(this);
- $('#form-uid').val($this.data('uid'));
- $('#form-email').val($this.data('email'));
- $('#form-primary').val($this.data('primary'));
- $('#form-activate').val($this.data('activate'));
- $('#change-email-modal').modal('show');
- e.preventDefault();
- });
-}
diff --git a/web_src/js/features/common-button.ts b/web_src/js/features/common-button.ts
index 4aca5ef8f5..acce992b90 100644
--- a/web_src/js/features/common-button.ts
+++ b/web_src/js/features/common-button.ts
@@ -1,13 +1,13 @@
-import $ from 'jquery';
import {POST} from '../modules/fetch.ts';
-import {hideElem, showElem, toggleElem} from '../utils/dom.ts';
-import {showErrorToast} from '../modules/toast.ts';
+import {addDelegatedEventListener, hideElem, queryElems, showElem, toggleElem} from '../utils/dom.ts';
+import {fomanticQuery} from '../modules/fomantic/base.ts';
+import {camelize} from 'vue';
export function initGlobalButtonClickOnEnter(): void {
- $(document).on('keypress', 'div.ui.button,span.ui.button', (e) => {
- if (e.code === ' ' || e.code === 'Enter') {
- $(e.target).trigger('click');
+ addDelegatedEventListener(document, 'keypress', 'div.ui.button, span.ui.button', (el, e: KeyboardEvent) => {
+ if (e.code === 'Space' || e.code === 'Enter') {
e.preventDefault();
+ el.click();
}
});
}
@@ -40,7 +40,7 @@ export function initGlobalDeleteButton(): void {
}
}
- $(modal).modal({
+ fomanticQuery(modal).modal({
closable: false,
onApprove: async () => {
// if `data-type="form"` exists, then submit the form by the selector provided by `data-form="..."`
@@ -73,87 +73,93 @@ export function initGlobalDeleteButton(): void {
}
}
+function onShowPanelClick(e) {
+ // a '.show-panel' element can show a panel, by `data-panel="selector"`
+ // if it has "toggle" class, it toggles the panel
+ const el = e.currentTarget;
+ e.preventDefault();
+ const sel = el.getAttribute('data-panel');
+ if (el.classList.contains('toggle')) {
+ toggleElem(sel);
+ } else {
+ showElem(sel);
+ }
+}
+
+function onHidePanelClick(e) {
+ // a `.hide-panel` element can hide a panel, by `data-panel="selector"` or `data-panel-closest="selector"`
+ const el = e.currentTarget;
+ e.preventDefault();
+ let sel = el.getAttribute('data-panel');
+ if (sel) {
+ hideElem(sel);
+ return;
+ }
+ sel = el.getAttribute('data-panel-closest');
+ if (sel) {
+ hideElem(el.parentNode.closest(sel));
+ return;
+ }
+ throw new Error('no panel to hide'); // should never happen, otherwise there is a bug in code
+}
+
+function onShowModalClick(e) {
+ // A ".show-modal" button will show a modal dialog defined by its "data-modal" attribute.
+ // Each "data-modal-{target}" attribute will be filled to target element's value or text-content.
+ // * First, try to query '#target'
+ // * Then, try to query '[name=target]'
+ // * Then, try to query '.target'
+ // * Then, try to query 'target' as HTML tag
+ // If there is a ".{attr}" part like "data-modal-form.action", then the form's "action" attribute will be set.
+ const el = e.currentTarget;
+ e.preventDefault();
+ const modalSelector = el.getAttribute('data-modal');
+ const elModal = document.querySelector(modalSelector);
+ if (!elModal) throw new Error('no modal for this action');
+
+ const modalAttrPrefix = 'data-modal-';
+ for (const attrib of el.attributes) {
+ if (!attrib.name.startsWith(modalAttrPrefix)) {
+ continue;
+ }
+
+ const attrTargetCombo = attrib.name.substring(modalAttrPrefix.length);
+ const [attrTargetName, attrTargetAttr] = attrTargetCombo.split('.');
+ // try to find target by: "#target" -> "[name=target]" -> ".target" -> " tag"
+ const attrTarget = elModal.querySelector(`#${attrTargetName}`) ||
+ elModal.querySelector(`[name=${attrTargetName}]`) ||
+ elModal.querySelector(`.${attrTargetName}`) ||
+ elModal.querySelector(`${attrTargetName}`);
+ if (!attrTarget) {
+ if (!window.config.runModeIsProd) throw new Error(`attr target "${attrTargetCombo}" not found for modal`);
+ continue;
+ }
+
+ if (attrTargetAttr) {
+ attrTarget[camelize(attrTargetAttr)] = attrib.value;
+ } else if (attrTarget.matches('input, textarea')) {
+ attrTarget.value = attrib.value; // FIXME: add more supports like checkbox
+ } else {
+ attrTarget.textContent = attrib.value; // FIXME: it should be more strict here, only handle div/span/p
+ }
+ }
+
+ fomanticQuery(elModal).modal('setting', {
+ onApprove: () => {
+ // "form-fetch-action" can handle network errors gracefully,
+ // so keep the modal dialog to make users can re-submit the form if anything wrong happens.
+ if (elModal.querySelector('.form-fetch-action')) return false;
+ },
+ }).modal('show');
+}
+
export function initGlobalButtons(): void {
// 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.
// 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) => {
- e.preventDefault();
- });
+ addDelegatedEventListener(document, 'click', 'form button.ui.cancel.button', (_ /* el */, e) => 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) {
- // a `.hide-panel` element can hide a panel, by `data-panel="selector"` or `data-panel-closest="selector"`
- e.preventDefault();
- let sel = this.getAttribute('data-panel');
- if (sel) {
- hideElem($(sel));
- return;
- }
- sel = this.getAttribute('data-panel-closest');
- if (sel) {
- hideElem($(this).closest(sel));
- return;
- }
- // should never happen, otherwise there is a bug in code
- showErrorToast('Nothing to hide');
- });
-}
-
-export function initGlobalShowModal() {
- // A ".show-modal" button will show a modal dialog defined by its "data-modal" attribute.
- // Each "data-modal-{target}" attribute will be filled to target element's value or text-content.
- // * First, try to query '#target'
- // * Then, try to query '.target'
- // * Then, try to query 'target' as HTML tag
- // If there is a ".{attr}" part like "data-modal-form.action", then the form's "action" attribute will be set.
- $('.show-modal').on('click', function (e) {
- e.preventDefault();
- const modalSelector = this.getAttribute('data-modal');
- const $modal = $(modalSelector);
- if (!$modal.length) {
- throw new Error('no modal for this action');
- }
- const modalAttrPrefix = 'data-modal-';
- for (const attrib of this.attributes) {
- if (!attrib.name.startsWith(modalAttrPrefix)) {
- continue;
- }
-
- const attrTargetCombo = attrib.name.substring(modalAttrPrefix.length);
- const [attrTargetName, attrTargetAttr] = attrTargetCombo.split('.');
- // try to find target by: "#target" -> ".target" -> "target tag"
- let $attrTarget = $modal.find(`#${attrTargetName}`);
- if (!$attrTarget.length) $attrTarget = $modal.find(`.${attrTargetName}`);
- if (!$attrTarget.length) $attrTarget = $modal.find(`${attrTargetName}`);
- if (!$attrTarget.length) continue; // TODO: show errors in dev mode to remind developers that there is a bug
-
- if (attrTargetAttr) {
- $attrTarget[0][attrTargetAttr] = attrib.value;
- } else if ($attrTarget[0].matches('input, textarea')) {
- $attrTarget.val(attrib.value); // FIXME: add more supports like checkbox
- } else {
- $attrTarget[0].textContent = attrib.value; // FIXME: it should be more strict here, only handle div/span/p
- }
- }
-
- $modal.modal('setting', {
- onApprove: () => {
- // "form-fetch-action" can handle network errors gracefully,
- // so keep the modal dialog to make users can re-submit the form if anything wrong happens.
- if ($modal.find('.form-fetch-action').length) return false;
- },
- }).modal('show');
- });
+ queryElems(document, '.show-panel', (el) => el.addEventListener('click', onShowPanelClick));
+ queryElems(document, '.hide-panel', (el) => el.addEventListener('click', onHidePanelClick));
+ queryElems(document, '.show-modal', (el) => el.addEventListener('click', onShowModalClick));
}
diff --git a/web_src/js/features/common-fetch-action.ts b/web_src/js/features/common-fetch-action.ts
index 76973d8ce7..0caa27c0e2 100644
--- a/web_src/js/features/common-fetch-action.ts
+++ b/web_src/js/features/common-fetch-action.ts
@@ -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);
}
diff --git a/web_src/js/features/comp/ConfirmModal.ts b/web_src/js/features/comp/ConfirmModal.ts
index 93459ae1a0..bf645cdbdb 100644
--- a/web_src/js/features/comp/ConfirmModal.ts
+++ b/web_src/js/features/comp/ConfirmModal.ts
@@ -5,10 +5,12 @@ import {fomanticQuery} from '../../modules/fomantic/base.ts';
const {i18n} = window.config;
-export function confirmModal(content, {confirmButtonColor = 'primary'} = {}) {
+export function confirmModal({header = '', content = '', confirmButtonColor = 'primary'} = {}) {
return new Promise((resolve) => {
+ const headerHtml = header ? `
${htmlEscape(header)}
` : '';
const modal = createElementFromHTML(`
+ ${headerHtml}
${htmlEscape(content)}
diff --git a/web_src/js/features/repo-issue-list.ts b/web_src/js/features/repo-issue-list.ts
index caf517c5e0..931122db3c 100644
--- a/web_src/js/features/repo-issue-list.ts
+++ b/web_src/js/features/repo-issue-list.ts
@@ -76,7 +76,7 @@ function initRepoIssueListCheckboxes() {
// for delete
if (action === 'delete') {
const confirmText = e.target.getAttribute('data-action-delete-confirm');
- if (!await confirmModal(confirmText, {confirmButtonColor: 'red'})) {
+ if (!await confirmModal({content: confirmText, confirmButtonColor: 'red'})) {
return;
}
}
diff --git a/web_src/js/index.ts b/web_src/js/index.ts
index eeead37333..90e2d29225 100644
--- a/web_src/js/index.ts
+++ b/web_src/js/index.ts
@@ -34,7 +34,6 @@ import {
} from './features/repo-issue.ts';
import {initRepoEllipsisButton, initCommitStatuses} from './features/repo-commit.ts';
import {initRepoTopicBar} from './features/repo-home.ts';
-import {initAdminEmails} from './features/admin/emails.ts';
import {initAdminCommon} from './features/admin/common.ts';
import {initRepoTemplateSearch} from './features/repo-template.ts';
import {initRepoCodeView} from './features/repo-code.ts';
@@ -83,7 +82,6 @@ import {
initGlobalButtonClickOnEnter,
initGlobalButtons,
initGlobalDeleteButton,
- initGlobalShowModal,
} from './features/common-button.ts';
import {initGlobalEnterQuickSubmit, initGlobalFormDirtyLeaveConfirm} from './features/common-form.ts';
@@ -122,7 +120,6 @@ onDomReady(() => {
callInitFunctions([
initGlobalDropdown,
initGlobalTabularMenu,
- initGlobalShowModal,
initGlobalFetchAction,
initGlobalTooltips,
initGlobalButtonClickOnEnter,
@@ -157,7 +154,6 @@ onDomReady(() => {
initCopyContent,
initAdminCommon,
- initAdminEmails,
initAdminUserListSearchForm,
initAdminConfigs,
initAdminSelfCheck,
diff --git a/web_src/js/utils/dom.ts b/web_src/js/utils/dom.ts
index da9ce71644..06c5e8b486 100644
--- a/web_src/js/utils/dom.ts
+++ b/web_src/js/utils/dom.ts
@@ -353,7 +353,7 @@ export function querySingleVisibleElem(parent: Element, s
return candidates.length ? candidates[0] as T : null;
}
-export function addDelegatedEventListener(parent: Node, type: string, selector: string, listener: (elem: T, e: Event) => void | Promise, options?: boolean | AddEventListenerOptions) {
+export function addDelegatedEventListener(parent: Node, type: string, selector: string, listener: (elem: T, e: E) => void | Promise, options?: boolean | AddEventListenerOptions) {
parent.addEventListener(type, (e: Event) => {
const elem = (e.target as HTMLElement).closest(selector);
if (!elem) return;