Drop Fomantic tab, checkbox and form patches

web_src/js/features/admin/common.ts

@@ -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 {showModal} 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');
+    showModal(detailModal);
   }));
 
   // Select actions

web_src/js/features/citation.ts

@@ -1,6 +1,6 @@
 import {getCurrentLocale} from '../utils.ts';
 import {errorMessage} from '../modules/errors.ts';
-import {fomanticQuery} from '../modules/fomantic/base.ts';
+import {showModal} 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');
+    showModal(document.querySelector('#cite-repo-modal'));
   });
 }

web_src/js/features/common-button.ts

@@ -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 {showModal} 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({
+      showModal(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');
+  showModal(elModal);
 }
 
 export function initGlobalButtons(): void {

web_src/js/features/common-page.ts

@@ -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 {initTabs} 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();
+  initTabs(document.querySelectorAll('.ui.menu.tabular:not(.custom) .item'));
   registerGlobalInitFunc('initAvatarUploader', initAvatarUploaderWithCropper);
   registerGlobalInitFunc('initSearchRepoBox', initCompSearchRepoBox);
 }

web_src/js/features/comp/ComboMarkdownEditor.ts

@@ -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 {initTabs} from '../../modules/fomantic/tab.ts';
 import type EasyMDE from 'easymde';
 import {localUserSettings} from '../../modules/user-settings.ts';
 
@@ -227,7 +227,7 @@ export class ComboMarkdownEditor {
       });
     });
 
-    fomanticQuery(tabs).tab();
+    initTabs(tabs);
 
     this.tabPreviewer.addEventListener('click', async () => {
       const formData = new FormData();

web_src/js/features/comp/ConfirmModal.ts

@@ -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 {showModal} 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({
+    showModal(modal, {
       onApprove() {
         resolve(true);
       },
       onHidden() {
-        $modal.remove();
+        modal.remove();
         resolve(false);
       },
-    }).modal('show');
+    });
   });
 }

web_src/js/features/comp/LabelEdit.ts

@@ -1,5 +1,5 @@
 import {toggleElem} from '../../utils/dom.ts';
-import {fomanticQuery} from '../../modules/fomantic/base.ts';
+import {showModal} 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({
+    showModal(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());

web_src/js/features/imagediff.ts

@@ -1,7 +1,7 @@
 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';
+import {initTabs} from '../modules/fomantic/tab.ts';
 
 type ImageContext = {
   imageBefore: HTMLImageElement | undefined,
@@ -101,7 +101,7 @@ class ImageDiff {
     this.containerEl = containerEl;
     containerEl.setAttribute('data-image-diff-loaded', 'true');
 
-    fomanticQuery(containerEl).find('.ui.menu.tabular .item').tab();
+    initTabs(containerEl.querySelectorAll('.ui.menu.tabular .item'));
 
     // 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);

web_src/js/features/repo-branch.ts

@@ -1,5 +1,5 @@
 import {toggleElem} from '../utils/dom.ts';
-import {fomanticQuery} from '../modules/fomantic/base.ts';
+import {showModal} 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');
+      showModal(document.querySelector(el.getAttribute('data-modal')!));
     });
   }
 }

web_src/js/features/repo-editor.ts

@@ -9,13 +9,13 @@ 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 {initTabs} from '../modules/fomantic/tab.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();
+  initTabs(elTabMenu.querySelectorAll('.item'));
 
   const elTreePath = elForm.querySelector<HTMLInputElement>('input#tree_path');
   const elTextarea = elForm.querySelector<HTMLTextAreaElement>('.tab[data-tab="write"] textarea');

web_src/js/features/repo-issue-content.ts

@@ -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 {hideModal, showModal} 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');
+              hideModal(elDetailDialog);
             } else {
               showErrorToast(resp.message);
             }
@@ -63,7 +63,7 @@ function showContentHistoryDetail(issueBaseUrl: string, commentId: string, histo
       $fomanticDropdownOptions.dropdown('clear', true);
     },
   });
-  $fomanticDialog.modal({
+  showModal(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) {

web_src/js/features/repo-issue.ts

@@ -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 {showModal} 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');
+    showModal(modal);
   });
 }
 

web_src/js/features/repo-projects.ts

@@ -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 {hideModal} 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');
+      hideModal(elModal);
     } finally {
       elForm.classList.remove('is-loading');
     }

web_src/js/features/repo-release.ts

@@ -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 {hideModal, showModal} 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');
+      hideModal(elModal);
       comboEditor.focus();
     }
   };
@@ -139,12 +140,12 @@ function initGenerateReleaseNotes(elForm: HTMLFormElement) {
     }
     $dropdown.dropdown('set selected', guessPreviousReleaseTag(tagName, existingTags));
 
-    fomanticQuery(elModal).modal({
+    showModal(elModal, {
       onApprove: () => {
         doSubmit(tagName); // don't await, need to return false to keep the modal
         return false;
       },
-    }).modal('show');
+    });
   };
 
   buttonShowModal.addEventListener('click', doShowModal);

web_src/js/modules/devtest.ts

@@ -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 {showModal} 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', () => showModal(el));
       modalButtons.append(btn);
     }
   }

web_src/js/modules/fomantic.ts

@@ -1,11 +1,9 @@
-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';
+import {initAriaLabels} from './fomantic/aria.ts';
 
 export const fomanticMobileScreen = window.matchMedia('only screen and (max-width: 767.98px)');
 
@@ -24,11 +22,9 @@ 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();
+  initAriaLabels();
   initAriaDropdownPatch();
   initAriaModalPatch();
 }

web_src/js/modules/fomantic/aria.md

@@ -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.