Mirrors/gitea
0
0
Fork 0
mirror of https://github.com/go-gitea/gitea.git synced 2026-05-07 01:43:24 +02:00
Code Issues Activity

Drop Fomantic tab, checkbox and form patches (#37377)

Browse Source 
Clean up the fomantic helpers that nothing inside fomantic depends on.
Manually tested all functionality.

---------

Co-authored-by: Claude (Opus 4.7) <noreply@anthropic.com>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
This commit is contained in:
silverwind 2026-04-24 10:02:37 +02:00 committed by GitHub
parent 0817a405af
commit 3816210c05
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
28 changed files with 135 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
templates/repo/diff/image_diff.tmpl
View File

@ -7,8 +7,8 @@
data-mime-before="{{.sniffedTypeBase.GetMimeType}}"
data-mime-after="{{.sniffedTypeHead.GetMimeType}}"
>
<overflow-menu class="ui secondary pointing tabular menu custom">
<div class="overflow-menu-items tw-justify-center">
<overflow-menu class="ui secondary pointing tabular menu">
<div class="overflow-menu-items tw-justify-center" data-global-init="initTabSwitcher">
<a class="item active" data-tab="diff-side-by-side-{{.file.NameHash}}">{{ctx.Locale.Tr "repo.diff.image.side_by_side"}}</a>
{{if and .blobBase .blobHead}}
<a class="item" data-tab="diff-swipe-{{.file.NameHash}}">{{ctx.Locale.Tr "repo.diff.image.swipe"}}</a>

2
templates/repo/editor/edit.tmpl
View File

@ -19,7 +19,7 @@
<div class="field">
<div class="ui top attached header">
<div class="flex-left-right">
<div class="ui compact small menu small-menu-items repo-editor-menu" data-repo-link="{{.RepoLink}}" data-ref-sub-url="{{.RefTypeNameSubURL}}" data-branch-name="{{.BranchName}}">
<div class="ui compact small menu small-menu-items repo-editor-menu" data-repo-link="{{.RepoLink}}" data-ref-sub-url="{{.RefTypeNameSubURL}}" data-branch-name="{{.BranchName}}" data-global-init="initTabSwitcher">
<a class="active item" data-tab="write">{{svg "octicon-code"}} {{if .IsNewFile}}{{ctx.Locale.Tr "repo.editor.new_file"}}{{else}}{{ctx.Locale.Tr "repo.editor.edit_file"}}{{end}}</a>
<a class="item {{if not .CodeEditorConfig.Previewable}}tw-hidden{{end}}" data-tab="preview">{{svg "octicon-eye"}} {{ctx.Locale.Tr "preview"}}</a>
{{if not .IsNewFile}}

4
templates/repo/editor/patch.tmpl
View File

@ -23,13 +23,13 @@
<div class="ui top attached header">
<div class="flex-left-right">
<div class="ui compact small menu small-menu-items repo-editor-menu">
<a class="active item" data-tab="write">{{svg "octicon-code" 16 "tw-mr-1"}}{{ctx.Locale.Tr "repo.editor.new_patch"}}</a>
<a class="active item">{{svg "octicon-code" 16 "tw-mr-1"}}{{ctx.Locale.Tr "repo.editor.new_patch"}}</a>
</div>
{{template "repo/editor/options" dict "CodeEditorConfig" $.CodeEditorConfig}}
</div>
</div>
<div class="ui bottom attached segment tw-p-0">
<div class="ui active tab tw-rounded-b" data-tab="write">
<div class="ui active tab tw-rounded-b">
<textarea id="edit_area" name="content" class="tw-hidden" data-id="repo-{{.Repository.Name}}-patch"
data-code-editor-config="{{JsonUtils.EncodeToString $.CodeEditorConfig}}"
data-context="{{.RepoLink}}"

2
templates/repo/settings/webhook/history.tmpl
View File

@ -33,7 +33,7 @@
</span>
</div>
<div class="info tw-hidden" id="info-{{.ID}}">
<div class="ui top attached tabular menu">
<div class="ui top attached tabular menu" data-global-init="initTabSwitcher">
<a class="item active" data-tab="request-{{.ID}}">
{{template "shared/misc/tabtitle" (ctx.Locale.Tr "repo.settings.webhook.request")}}
</a>

8
templates/user/auth/link_account.tmpl
View File

@ -1,16 +1,14 @@
{{template "base/head" .}}
<div role="main" aria-label="{{.Title}}" class="page-content user link-account">
<overflow-menu class="ui secondary pointing tabular top attached borderless menu secondary-nav">
<div class="overflow-menu-items tw-justify-center">
<div class="overflow-menu-items tw-justify-center" data-global-init="initTabSwitcher">
<!-- TODO handle .ShowRegistrationButton once other login bugs are fixed -->
{{if not .AllowOnlyInternalRegistration}}
<a class="item {{if not .user_exists}}active{{end}}"
data-tab="auth-link-signup-tab">
<a class="item {{if not .user_exists}}active{{end}}" data-tab="auth-link-signup-tab">
{{ctx.Locale.Tr "auth.oauth_signup_tab"}}
</a>
{{end}}
<a class="item {{if .user_exists}}active{{end}}"
data-tab="auth-link-signin-tab">
<a class="item {{if .user_exists}}active{{end}}" data-tab="auth-link-signin-tab">
{{ctx.Locale.Tr "auth.oauth_signin_tab"}}
</a>
</div>

4
web_src/js/features/admin/common.ts
View File

@ -1,7 +1,7 @@
import {checkAppUrl} from '../common-page.ts';
import {hideElem, queryElems, showElem, toggleElem} from '../../utils/dom.ts';
import {POST} from '../../modules/fetch.ts';
import {fomanticQuery} from '../../modules/fomantic/base.ts';
import {showFomanticModal} from '../../modules/fomantic/modal.ts';
import {pathEscape} from '../../utils/url.ts';
const {appSubUrl} = window.config;
@ -250,7 +250,7 @@ function initAdminNotice() {
const elNoticeDesc = el.closest('tr')!.querySelector('.notice-description')!;
const elModalDesc = detailModal.querySelector('.content pre')!;
elModalDesc.textContent = elNoticeDesc.textContent;
fomanticQuery(detailModal).modal('show');
showFomanticModal(detailModal);
}));
// Select actions

4
web_src/js/features/citation.ts
View File

@ -1,6 +1,6 @@
import {getCurrentLocale} from '../utils.ts';
import {errorMessage} from '../modules/errors.ts';
import {fomanticQuery} from '../modules/fomantic/base.ts';
import {showFomanticModal} from '../modules/fomantic/modal.ts';
import {localUserSettings} from '../modules/user-settings.ts';
const {pageData} = window.config;
@ -66,6 +66,6 @@ export async function initCitationFileCopyContent() {
inputContent.select();
});
fomanticQuery('#cite-repo-modal').modal('show');
showFomanticModal(document.querySelector('#cite-repo-modal'));
});
}

8
web_src/js/features/common-button.ts
View File

@ -1,6 +1,6 @@
import {POST} from '../modules/fetch.ts';
import {addDelegatedEventListener, hideElem, isElemVisible, showElem, toggleElem} from '../utils/dom.ts';
import {fomanticQuery} from '../modules/fomantic/base.ts';
import {showFomanticModal} from '../modules/fomantic/modal.ts';
import {camelize} from 'vue';
import {applyAutoFocus} from './common-page.ts';
@ -42,7 +42,7 @@ export function initGlobalDeleteButton(): void {
}
}
fomanticQuery(modal).modal({
showFomanticModal(modal, {
closable: false,
onApprove: () => {
// if `data-type="form"` exists, then submit the form by the selector provided by `data-form="..."`
@ -76,7 +76,7 @@ export function initGlobalDeleteButton(): void {
modal.classList.add('is-loading'); // the request is in progress, so also add loading indicator to the modal
return false; // prevent modal from closing automatically
},
}).modal('show');
});
});
}
}
@ -174,7 +174,7 @@ function onShowModalClick(el: HTMLElement, e: MouseEvent) {
}
}
fomanticQuery(elModal).modal('show');
showFomanticModal(elModal);
}
export function initGlobalButtons(): void {

3
web_src/js/features/common-page.ts
View File

@ -1,6 +1,7 @@
import {GET, POST} from '../modules/fetch.ts';
import {showGlobalErrorMessage} from '../modules/errors.ts';
import {fomanticQuery} from '../modules/fomantic/base.ts';
import {initTabSwitcher} from '../modules/fomantic/tab.ts';
import {addDelegatedEventListener, queryElems} from '../utils/dom.ts';
import {registerGlobalInitFunc, registerGlobalSelectorFunc} from '../modules/observer.ts';
import {initAvatarUploaderWithCropper} from './comp/Cropper.ts';
@ -100,7 +101,7 @@ export function initGlobalDropdown() {
}
export function initGlobalComponent() {
fomanticQuery('.ui.menu.tabular:not(.custom) .item').tab();
registerGlobalInitFunc('initTabSwitcher', initTabSwitcher);
registerGlobalInitFunc('initAvatarUploader', initAvatarUploaderWithCropper);
registerGlobalInitFunc('initSearchRepoBox', initCompSearchRepoBox);
}

19
web_src/js/features/comp/ComboMarkdownEditor.ts
View File

@ -23,7 +23,7 @@ import {
} from './EditorMarkdown.ts';
import {DropzoneCustomEventReloadFiles, initDropzone} from '../dropzone.ts';
import {createTippy} from '../../modules/tippy.ts';
import {fomanticQuery} from '../../modules/fomantic/base.ts';
import {initTabSwitcher} from '../../modules/fomantic/tab.ts';
import type EasyMDE from 'easymde';
import {localUserSettings} from '../../modules/user-settings.ts';
@ -204,22 +204,21 @@ export class ComboMarkdownEditor {
}
setupTab() {
const tabs = this.container.querySelectorAll<HTMLElement>('.tabular.menu > .item');
if (!tabs.length) return;
const elTabular = this.container.querySelector('.ui.tabular');
if (!elTabular) return;
this.tabEditor = this.container.querySelector('[data-tab-for="markdown-writer"]')!;
this.tabPreviewer = this.container.querySelector('[data-tab-for="markdown-previewer"]')!;
const panelEditor = this.container.querySelector('.ui.tab[data-tab-panel="markdown-writer"]')!;
const panelPreviewer = this.container.querySelector('.ui.tab[data-tab-panel="markdown-previewer"]')!;
// Fomantic Tab requires the "data-tab" to be globally unique.
// So here it uses our defined "data-tab-for" and "data-tab-panel" to generate the "data-tab" attribute for Fomantic.
const tabIdSuffix = generateElemId();
const tabsArr = Array.from(tabs);
this.tabEditor = tabsArr.find((tab) => tab.getAttribute('data-tab-for') === 'markdown-writer')!;
this.tabPreviewer = tabsArr.find((tab) => tab.getAttribute('data-tab-for') === 'markdown-previewer')!;
this.tabEditor.setAttribute('data-tab', `markdown-writer-${tabIdSuffix}`);
this.tabPreviewer.setAttribute('data-tab', `markdown-previewer-${tabIdSuffix}`);
const panelEditor = this.container.querySelector('.ui.tab[data-tab-panel="markdown-writer"]')!;
const panelPreviewer = this.container.querySelector('.ui.tab[data-tab-panel="markdown-previewer"]')!;
panelEditor.setAttribute('data-tab', `markdown-writer-${tabIdSuffix}`);
panelPreviewer.setAttribute('data-tab', `markdown-previewer-${tabIdSuffix}`);
initTabSwitcher(elTabular);
this.tabEditor.addEventListener('click', () => {
requestAnimationFrame(() => {
@ -227,8 +226,6 @@ export class ComboMarkdownEditor {
});
});
fomanticQuery(tabs).tab();
this.tabPreviewer.addEventListener('click', async () => {
const formData = new FormData();
formData.append('mode', this.previewMode);

9
web_src/js/features/comp/ConfirmModal.ts
View File

@ -1,7 +1,7 @@
import {svg} from '../../svg.ts';
import {html, htmlRaw} from '../../utils/html.ts';
import {createElementFromHTML} from '../../utils/dom.ts';
import {fomanticQuery} from '../../modules/fomantic/base.ts';
import {showFomanticModal} from '../../modules/fomantic/modal.ts';
import {hideToastsAll} from '../../modules/toast.ts';
const {i18n} = window.config;
@ -32,15 +32,14 @@ export function confirmModal(modal: HTMLElement | ConfirmModalOptions): Promise<
// it's fine to do so because the modal is triggered by user's explicit action, so the user should already have read the toast messages
hideToastsAll();
return new Promise((resolve) => {
const $modal = fomanticQuery(modal);
$modal.modal({
showFomanticModal(modal, {
onApprove() {
resolve(true);
},
onHidden() {
$modal.remove();
modal.remove();
resolve(false);
},
}).modal('show');
});
});
}

6
web_src/js/features/comp/LabelEdit.ts
View File

@ -1,5 +1,5 @@
import {toggleElem} from '../../utils/dom.ts';
import {fomanticQuery} from '../../modules/fomantic/base.ts';
import {showFomanticModal} from '../../modules/fomantic/modal.ts';
import {submitFormFetchAction} from '../common-fetch-action.ts';
function nameHasScope(name: string): boolean {
@ -65,7 +65,7 @@ export function initCompLabelEdit(pageSelector: string) {
form.action = isEdit ? `${curPageLink}/edit` : `${curPageLink}/new`;
toggleElem(elIsArchivedField, isEdit);
syncModalUi();
fomanticQuery(elModal).modal({
showFomanticModal(elModal, {
onApprove() {
if (!form.checkValidity()) {
form.reportValidity();
@ -74,7 +74,7 @@ export function initCompLabelEdit(pageSelector: string) {
submitFormFetchAction(form);
return false;
},
}).modal('show');
});
};
elModal.addEventListener('input', () => syncModalUi());

3
web_src/js/features/imagediff.ts
View File

@ -1,7 +1,6 @@
import {GET} from '../modules/fetch.ts';
import {hideElem, loadElem, queryElemChildren, queryElems} from '../utils/dom.ts';
import {parseDom} from '../utils.ts';
import {fomanticQuery} from '../modules/fomantic/base.ts';
type ImageContext = {
imageBefore: HTMLImageElement | undefined,
@ -101,8 +100,6 @@ class ImageDiff {
this.containerEl = containerEl;
containerEl.setAttribute('data-image-diff-loaded', 'true');
fomanticQuery(containerEl).find('.ui.menu.tabular .item').tab();
// the container may be hidden by "viewed" checkbox, so use the parent's width for reference
this.diffContainerWidth = Math.max(containerEl.closest('.diff-file-box')!.clientWidth - 300, 100);

4
web_src/js/features/repo-branch.ts
View File

@ -1,5 +1,5 @@
import {toggleElem} from '../utils/dom.ts';
import {fomanticQuery} from '../modules/fomantic/base.ts';
import {showFomanticModal} from '../modules/fomantic/modal.ts';
export function initRepoBranchButton() {
initRepoCreateBranchButton();
@ -18,7 +18,7 @@ function initRepoCreateBranchButton() {
const fromSpanName = el.getAttribute('data-modal-from-span') || '#modal-create-branch-from-span';
document.querySelector(fromSpanName)!.textContent = el.getAttribute('data-branch-from');
fomanticQuery(el.getAttribute('data-modal')!).modal('show');
showFomanticModal(document.querySelector(el.getAttribute('data-modal')!));
});
}
}

2
web_src/js/features/repo-editor.ts
View File

@ -9,13 +9,11 @@ import {applyAreYouSure, ignoreAreYouSure} from '../vendor/jquery.are-you-sure.t
import {submitFormFetchAction} from './common-fetch-action.ts';
import {dirname} from '../utils.ts';
import {pathEscapeSegments} from '../utils/url.ts';
import {fomanticQuery} from '../modules/fomantic/base.ts';
import {showErrorToast} from '../modules/toast.ts';
function initEditPreviewTab(elForm: HTMLFormElement) {
const elTabMenu = elForm.querySelector('.repo-editor-menu');
if (!elTabMenu) return;
fomanticQuery(elTabMenu.querySelectorAll('.item')).tab();
const elTreePath = elForm.querySelector<HTMLInputElement>('input#tree_path');
const elTextarea = elForm.querySelector<HTMLTextAreaElement>('.tab[data-tab="write"] textarea');

10
web_src/js/features/repo-issue-content.ts
View File

@ -4,6 +4,7 @@ import {GET, POST} from '../modules/fetch.ts';
import {createElementFromHTML, showElem} from '../utils/dom.ts';
import {parseIssuePageInfo} from '../utils.ts';
import {fomanticQuery} from '../modules/fomantic/base.ts';
import {hideFomanticModal, showFomanticModal} from '../modules/fomantic/modal.ts';
let i18nTextEdited: string;
let i18nTextOptions: string;
@ -28,7 +29,6 @@ function showContentHistoryDetail(issueBaseUrl: string, commentId: string, histo
</div>`);
document.body.append(elDetailDialog);
const elOptionsDropdown = elDetailDialog.querySelector('.ui.dropdown.dialog-header-options')!;
const $fomanticDialog = fomanticQuery(elDetailDialog);
const $fomanticDropdownOptions = fomanticQuery(elOptionsDropdown);
$fomanticDropdownOptions.dropdown({
showOnFocus: false,
@ -46,7 +46,7 @@ function showContentHistoryDetail(issueBaseUrl: string, commentId: string, histo
const resp = await response.json();
if (resp.ok) {
$fomanticDialog.modal('hide');
hideFomanticModal(elDetailDialog);
} else {
showErrorToast(resp.message);
}
@ -63,7 +63,7 @@ function showContentHistoryDetail(issueBaseUrl: string, commentId: string, histo
$fomanticDropdownOptions.dropdown('clear', true);
},
});
$fomanticDialog.modal({
showFomanticModal(elDetailDialog, {
async onShow() {
try {
const params = new URLSearchParams();
@ -86,9 +86,9 @@ function showContentHistoryDetail(issueBaseUrl: string, commentId: string, histo
}
},
onHidden() {
$fomanticDialog.remove();
elDetailDialog.remove();
},
}).modal('show');
});
}
function showContentHistoryMenu(issueBaseUrl: string, elCommentItem: Element, commentId: string) {

3
web_src/js/features/repo-issue.ts
View File

@ -16,6 +16,7 @@ import {GET, POST} from '../modules/fetch.ts';
import {showErrorToast} from '../modules/toast.ts';
import {initRepoIssueSidebar} from './repo-issue-sidebar.ts';
import {fomanticQuery} from '../modules/fomantic/base.ts';
import {showFomanticModal} from '../modules/fomantic/modal.ts';
import {ignoreAreYouSure} from '../vendor/jquery.are-you-sure.ts';
import {registerGlobalInitFunc} from '../modules/observer.ts';
@ -335,7 +336,7 @@ export function initRepoIssueReferenceIssue() {
const modal = document.querySelector(modalSelector)!;
const textarea = modal.querySelector<HTMLTextAreaElement>('textarea[name="content"]')!;
textarea.value = `${content}\n\n_Originally posted by @${poster} in ${reference}_`;
fomanticQuery(modal).modal('show');
showFomanticModal(modal);
});
}

4
web_src/js/features/repo-projects.ts
View File

@ -1,7 +1,7 @@
import {contrastColor} from '../utils/color.ts';
import {createSortable} from '../modules/sortable.ts';
import {POST, request} from '../modules/fetch.ts';
import {fomanticQuery} from '../modules/fomantic/base.ts';
import {hideFomanticModal} from '../modules/fomantic/modal.ts';
import {queryElemChildren, queryElems, toggleElem} from '../utils/dom.ts';
import type {SortableEvent} from 'sortablejs';
import {toggleFullScreen} from '../utils.ts';
@ -138,7 +138,7 @@ function initRepoProjectColumnEdit(writableProjectBoard: Element): void {
queryElemChildren(elBoardColumn, '.divider', (divider: HTMLElement) => divider.style.removeProperty('color'));
}
fomanticQuery(elModal).modal('hide');
hideFomanticModal(elModal);
} finally {
elForm.classList.remove('is-loading');
}

7
web_src/js/features/repo-release.ts
View File

@ -3,6 +3,7 @@ import {hideToastsAll, showErrorToast} from '../modules/toast.ts';
import {getComboMarkdownEditor} from './comp/ComboMarkdownEditor.ts';
import {hideElem} from '../utils/dom.ts';
import {fomanticQuery} from '../modules/fomantic/base.ts';
import {hideFomanticModal, showFomanticModal} from '../modules/fomantic/modal.ts';
import {registerGlobalEventFunc, registerGlobalInitFunc} from '../modules/observer.ts';
import {htmlEscape} from '../utils/html.ts';
import {compareVersions} from 'compare-versions';
@ -112,7 +113,7 @@ function initGenerateReleaseNotes(elForm: HTMLFormElement) {
}
} finally {
elModal.classList.remove('loading', 'disabled');
fomanticQuery(elModal).modal('hide');
hideFomanticModal(elModal);
comboEditor.focus();
}
};
@ -139,12 +140,12 @@ function initGenerateReleaseNotes(elForm: HTMLFormElement) {
}
$dropdown.dropdown('set selected', guessPreviousReleaseTag(tagName, existingTags));
fomanticQuery(elModal).modal({
showFomanticModal(elModal, {
onApprove: () => {
doSubmit(tagName); // don't await, need to return false to keep the modal
return false;
},
}).modal('show');
});
};
buttonShowModal.addEventListener('click', doShowModal);

4
web_src/js/modules/devtest.ts
View File

@ -1,7 +1,7 @@
import {showInfoToast, showWarningToast, showErrorToast} from './toast.ts';
import type {Toast} from './toast.ts';
import {registerGlobalInitFunc} from './observer.ts';
import {fomanticQuery} from './fomantic/base.ts';
import {showFomanticModal} from './fomantic/modal.ts';
import {createElementFromHTML} from '../utils/dom.ts';
import {html} from '../utils/html.ts';
import {showGlobalErrorMessage} from './errors.ts';
@ -25,7 +25,7 @@ function initDevtestPage() {
if (modalButtons) {
for (const el of document.querySelectorAll('.ui.modal:not([data-skip-button])')) {
const btn = createElementFromHTML(html`<button class="ui button">${el.id}</button`);
btn.addEventListener('click', () => fomanticQuery(el).modal('show'));
btn.addEventListener('click', () => showFomanticModal(el));
modalButtons.append(btn);
}
}

6
web_src/js/modules/fomantic.ts
View File

@ -1,11 +1,8 @@
import {initAriaCheckboxPatch} from './fomantic/checkbox.ts';
import {initAriaFormFieldPatch} from './fomantic/form.ts';
import {initAriaDropdownPatch} from './fomantic/dropdown.ts';
import {initAriaModalPatch} from './fomantic/modal.ts';
import {initFomanticTransition} from './fomantic/transition.ts';
import {initFomanticDimmer} from './fomantic/dimmer.ts';
import {svg} from '../svg.ts';
import {initFomanticTab} from './fomantic/tab.ts';
export const fomanticMobileScreen = window.matchMedia('only screen and (max-width: 767.98px)');
@ -24,11 +21,8 @@ export function initGiteaFomantic() {
initFomanticTransition();
initFomanticDimmer();
initFomanticTab();
// Use the patches to improve accessibility, these patches are designed to be as independent as possible, make it easy to modify or remove in the future.
initAriaCheckboxPatch();
initAriaFormFieldPatch();
initAriaDropdownPatch();
initAriaModalPatch();
}

2
web_src/js/modules/fomantic/aria.md
View File

@ -50,7 +50,7 @@ However, the templates still have the Fomantic-style HTML layout:
</div>
```
We call `initAriaCheckboxPatch` to link the `input` and `label` which makes clicking the
We call `initAriaLabels` to link the `input` and `label` which makes clicking the
label etc. work. There is still a problem: These checkboxes are not friendly to screen readers,
so we add IDs to all the Fomantic UI checkboxes automatically by JS. If the `label` part is empty,
then the checkbox needs to get the `aria-label` attribute manually.

32
web_src/js/modules/fomantic/base.ts
View File

@ -1,6 +1,6 @@
import {generateElemId} from '../../utils/dom.ts';
import {generateElemId, queryElems} from '../../utils/dom.ts';
export function linkLabelAndInput(label: Element, input: Element) {
function linkLabelAndInput(label: Element, input: Element) {
const labelFor = label.getAttribute('for');
const inputId = input.getAttribute('id');
@ -13,6 +13,34 @@ export function linkLabelAndInput(label: Element, input: Element) {
}
}
function patchLabels(parent: ParentNode, containerSelector: string, labelSelector: string, inputSelector: string, marker: string) {
// Sample layout for this function:
// <div parent>
// <div container><label/><input/></div>
// <div container><label/><input/></div>
// </div>
//
// OR the parent is also the container:
// <div parent container><label/><input/></div>
const patchLabelContainer = (container: Element) => {
if (container.hasAttribute(marker)) return;
const label = container.querySelector(labelSelector);
const input = container.querySelector(inputSelector);
if (!label || !input) return;
linkLabelAndInput(label, input);
container.setAttribute(marker, 'true');
};
queryElems(parent, containerSelector, patchLabelContainer);
if (parent instanceof Element && parent.matches(containerSelector)) patchLabelContainer(parent);
}
// link labels and inputs in `.ui.checkbox` and `.ui.form .field` so labels are clickable and accessible
export function initAriaLabels(container: ParentNode) {
patchLabels(container, '.ui.checkbox', 'label', 'input', 'data-checkbox-patched');
patchLabels(container, '.ui.form .field', ':scope > label', ':scope > input, :scope > select', 'data-field-patched');
}
export function fomanticQuery(s: string | Element | NodeListOf<Element>): ReturnType<typeof $> {
// intentionally make it only work for query selector, it isn't used for creating HTML elements (for safety)
return typeof s === 'string' ? $(document).find(s) : $(s);

13
web_src/js/modules/fomantic/checkbox.ts
View File

@ -1,13 +0,0 @@
import {linkLabelAndInput} from './base.ts';
export function initAriaCheckboxPatch() {
// link the label and the input element so it's clickable and accessible
for (const el of document.querySelectorAll('.ui.checkbox')) {
if (el.hasAttribute('data-checkbox-patched')) continue;
const label = el.querySelector('label');
const input = el.querySelector('input');
if (!label || !input) continue;
linkLabelAndInput(label, input);
el.setAttribute('data-checkbox-patched', 'true');
}
}

13
web_src/js/modules/fomantic/form.ts
View File

@ -1,13 +0,0 @@
import {linkLabelAndInput} from './base.ts';
export function initAriaFormFieldPatch() {
// link the label and the input element so it's clickable and accessible
for (const el of document.querySelectorAll('.ui.form .field')) {
if (el.hasAttribute('data-field-patched')) continue;
const label = el.querySelector(':scope > label');
const input = el.querySelector(':scope > input, :scope > select');
if (!label || !input) continue;
linkLabelAndInput(label, input);
el.setAttribute('data-field-patched', 'true');
}
}

21
web_src/js/modules/fomantic/modal.ts
View File

@ -2,6 +2,27 @@ import type {FomanticInitFunction} from '../../types.ts';
import {queryElems} from '../../utils/dom.ts';
import {hideToastsFrom} from '../toast.ts';
type ModalOpts = {
closable?: boolean;
onApprove?: (this: HTMLElement) => boolean | void;
onShow?: (this: HTMLElement) => void | Promise<void>;
onHide?: (this: HTMLElement) => void;
onHidden?: (this: HTMLElement) => void;
};
// thin wrapper around Fomantic's jQuery modal plugin so callers don't have to touch jQuery or fomanticQuery
export function showFomanticModal(el: Element | null, opts: ModalOpts = {}) {
if (!el) return;
const $el = $(el);
if (Object.keys(opts).length) $el.modal(opts);
$el.modal('show');
}
export function hideFomanticModal(el: Element | null) {
if (!el) return;
$(el).modal('hide');
}
const fomanticModalFn = $.fn.modal;
// use our own `$.fn.modal` to patch Fomantic's modal module

30
web_src/js/modules/fomantic/tab.ts
View File

@ -1,18 +1,18 @@
import {queryElemSiblings} from '../../utils/dom.ts';
export function initFomanticTab() {
$.fn.tab = function (this: any) {
for (const elBtn of this) {
const tabName = elBtn.getAttribute('data-tab');
if (!tabName) continue;
elBtn.addEventListener('click', () => {
const elTab = document.querySelector(`.ui.tab[data-tab="${tabName}"]`)!;
queryElemSiblings(elTab, `.ui.tab`, (el) => el.classList.remove('active'));
queryElemSiblings(elBtn, `[data-tab]`, (el) => el.classList.remove('active'));
elBtn.classList.add('active');
elTab.classList.add('active');
});
}
return this;
};
export function initTabSwitcher(tabItemContainer: Element) {
// Clicking a `.item[data-tab]` menu item activates the matching `.ui.tab[data-tab=...]` panel
// This design is from Fomantic UI, and it has problems like :
// * The panel selector is global, callers should make sure the "data-tab" values don't conflict on the same page
const tabItems = tabItemContainer.querySelectorAll('.item[data-tab]');
for (const elItem of tabItems) {
const tabName = elItem.getAttribute('data-tab')!;
elItem.addEventListener('click', () => {
const elPanel = document.querySelector(`.ui.tab[data-tab="${tabName}"]`)!;
queryElemSiblings(elPanel, '.ui.tab', (el) => el.classList.remove('active'));
queryElemSiblings(elItem, '.item[data-tab]', (el) => el.classList.remove('active'));
elItem.classList.add('active');
elPanel.classList.add('active');
});
}
}

30
web_src/js/modules/observer.ts
View File

@ -1,17 +1,18 @@
import {isDocumentFragmentOrElementNode} from '../utils/dom.ts';
import type {Promisable} from '../types.ts';
import type {InitPerformanceTracer} from './init.ts';
import {initAriaLabels} from './fomantic/base.ts';
let globalSelectorObserverInited = false;
type SelectorHandler = {selector: string, handler: (el: HTMLElement) => void};
const selectorHandlers: SelectorHandler[] = [];
type SelectorHandler<T extends Element> = {selector: string, handler: (el: T) => void};
const selectorHandlers: SelectorHandler<Element>[] = [];
type GlobalEventFunc<T extends HTMLElement, E extends Event> = (el: T, e: E) => Promisable<void>;
const globalEventFuncs: Record<string, GlobalEventFunc<HTMLElement, Event>> = {};
type GlobalInitFunc<T extends HTMLElement> = (el: T) => Promisable<void>;
const globalInitFuncs: Record<string, GlobalInitFunc<HTMLElement>> = {};
type GlobalInitFunc<T extends Element> = (el: T) => Promisable<void>;
const globalInitFuncs: Record<string, GlobalInitFunc<Element>> = {};
// It handles the global events for all `<div data-global-click="onSomeElemClick"></div>` elements.
export function registerGlobalEventFunc<T extends HTMLElement, E extends Event>(event: string, name: string, func: GlobalEventFunc<T, E>) {
@ -23,32 +24,32 @@ export function registerGlobalEventFunc<T extends HTMLElement, E extends Event>(
// ATTENTION: For most cases, it's recommended to use registerGlobalInitFunc instead,
// Because this selector-based approach is less efficient and less maintainable.
// But if there are already a lot of elements on many pages, this selector-based approach is more convenient for exiting code.
export function registerGlobalSelectorFunc(selector: string, handler: (el: HTMLElement) => void) {
selectorHandlers.push({selector, handler});
export function registerGlobalSelectorFunc<T extends Element>(selector: string, handler: (el: T) => void) {
selectorHandlers.push({selector, handler: handler as (el: Element) => void});
// Then initAddedElementObserver will call this handler for all existing elements after all handlers are added.
// This approach makes the init stage only need to do one "querySelectorAll".
if (!globalSelectorObserverInited) return;
for (const el of document.querySelectorAll<HTMLElement>(selector)) {
for (const el of document.querySelectorAll<T>(selector)) {
handler(el);
}
}
// It handles the global init functions for all `<div data-global-int="initSomeElem"></div>` elements.
export function registerGlobalInitFunc<T extends HTMLElement>(name: string, handler: GlobalInitFunc<T>) {
globalInitFuncs[name] = handler as GlobalInitFunc<HTMLElement>;
globalInitFuncs[name] = handler as GlobalInitFunc<Element>;
// The "global init" functions are managed internally and called by callGlobalInitFunc
// They must be ready before initGlobalSelectorObserver is called.
if (globalSelectorObserverInited) throw new Error('registerGlobalInitFunc() must be called before initGlobalSelectorObserver()');
}
function callGlobalInitFunc(el: HTMLElement) {
function callGlobalInitFunc(el: Element) {
// TODO: GLOBAL-INIT-MULTIPLE-FUNCTIONS: maybe in the future we need to extend it to support multiple functions, for example: `data-global-init="func1 func2 func3"`
const initFunc = el.getAttribute('data-global-init')!;
const func = globalInitFuncs[initFunc];
if (!func) throw new Error(`Global init function "${initFunc}" not found`);
// when an element node is removed and added again, it should not be re-initialized again.
type GiteaGlobalInitElement = Partial<HTMLElement> & {_giteaGlobalInited: boolean};
type GiteaGlobalInitElement = Partial<Element> & {_giteaGlobalInited: boolean};
if ((el as GiteaGlobalInitElement)._giteaGlobalInited) return;
(el as GiteaGlobalInitElement)._giteaGlobalInited = true;
@ -80,20 +81,23 @@ export function initGlobalSelectorObserver(perfTracer: InitPerformanceTracer | n
const mutation = mutationList[i];
const len = mutation.addedNodes.length;
for (let i = 0; i < len; i++) {
const addedNode = mutation.addedNodes[i] as HTMLElement;
const addedNode = mutation.addedNodes[i] as ParentNode;
if (!isDocumentFragmentOrElementNode(addedNode)) continue;
initAriaLabels(addedNode);
for (const {selector, handler} of selectorHandlers) {
if (addedNode.matches(selector)) {
if ((addedNode instanceof Element) && addedNode.matches(selector)) {
handler(addedNode);
}
for (const el of addedNode.querySelectorAll<HTMLElement>(selector)) {
for (const el of addedNode.querySelectorAll?.<HTMLElement>(selector) ?? []) {
handler(el);
}
}
}
}
});
initAriaLabels(document);
if (perfTracer) {
for (const {selector, handler} of selectorHandlers) {
perfTracer.recordCall(`initGlobalSelectorObserver ${selector}`, () => {