Fix various Fomantic UI and htmx problems (#33851)

Also fix #31328, fix #33854
This commit is contained in:
wxiaoguang
2025-03-12 02:35:05 +08:00
committed by GitHub
parent 651ef66966
commit 91610a987e
8 changed files with 16 additions and 68 deletions

View File

@ -196,7 +196,9 @@ function initRepoDiffShowMore() {
const resp = await response.text();
const respDoc = parseDom(resp, 'text/html');
const respFileBody = respDoc.querySelector('#diff-file-boxes .diff-file-body .file-body');
el.parentElement.replaceWith(...Array.from(respFileBody.children));
const respFileBodyChildren = Array.from(respFileBody.children); // respFileBody.children will be empty after replaceWith
el.parentElement.replaceWith(...respFileBodyChildren);
for (const el of respFileBodyChildren) window.htmx.process(el);
// FIXME: calling onShowMoreFiles is not quite right here.
// But since onShowMoreFiles mixes "init diff box" and "init diff body" together,
// so it still needs to call it to make the "ImageDiff" and something similar work.

View File

@ -64,6 +64,7 @@ interface Window {
jQuery: typeof import('@types/jquery'),
htmx: Omit<typeof import('htmx.org/dist/htmx.esm.js').default, 'config'> & {
config?: Writable<typeof import('htmx.org').default.config>,
process?: (elt: Element | string) => void,
},
_globalHandlerErrors: Array<ErrorEvent & PromiseRejectionEvent> & {
_inited: boolean,

View File

@ -1,5 +1,4 @@
import $ from 'jquery';
import {initFomanticApiPatch} from './fomantic/api.ts';
import {initAriaCheckboxPatch} from './fomantic/checkbox.ts';
import {initAriaFormFieldPatch} from './fomantic/form.ts';
import {initAriaDropdownPatch} from './fomantic/dropdown.ts';
@ -27,7 +26,6 @@ export function initGiteaFomantic() {
initFomanticTransition();
initFomanticDimmer();
initFomanticTab();
initFomanticApiPatch();
// 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();

View File

@ -1,41 +0,0 @@
import $ from 'jquery';
import type {FomanticInitFunction} from '../../types.ts';
export function initFomanticApiPatch() {
//
// Fomantic API module has some very buggy behaviors:
//
// If encodeParameters=true, it calls `urlEncodedValue` to encode the parameter.
// However, `urlEncodedValue` just tries to "guess" whether the parameter is already encoded, by decoding the parameter and encoding it again.
//
// There are 2 problems:
// 1. It may guess wrong, and skip encoding a parameter which looks like encoded.
// 2. If the parameter can't be decoded, `decodeURIComponent` will throw an error, and the whole request will fail.
//
// This patch only fixes the second error behavior at the moment.
//
const patchKey = '_giteaFomanticApiPatch';
const oldApi = $.api;
$.api = $.fn.api = function(...args: Parameters<FomanticInitFunction>) {
const apiCall = oldApi.bind(this);
const ret = oldApi.apply(this, args);
if (typeof args[0] !== 'string') {
const internalGet = apiCall('internal', 'get');
if (!internalGet.urlEncodedValue[patchKey]) {
const oldUrlEncodedValue = internalGet.urlEncodedValue;
internalGet.urlEncodedValue = function (value: any) {
try {
return oldUrlEncodedValue(value);
} catch {
// if Fomantic API module's `urlEncodedValue` throws an error, we encode it by ourselves.
return encodeURIComponent(value);
}
};
internalGet.urlEncodedValue[patchKey] = true;
}
}
return ret;
};
$.api.settings = oldApi.settings;
}