mirror of https://github.com/go-gitea/gitea.git
Fix dynamic content loading init problem (#33748)
1. Rewrite `dirauto.ts` to `observer.ts`.
* We have been using MutationObserver for long time, it's proven that it
is quite performant.
* Now we extend its ability to handle more "init" works.
2. Use `observeAddedElement` to init all non-custom "dropdown".
3. Use `data-global-click` to handle click events from dynamically
loaded elements.
* By this new approach, the old fragile selector-based
(`.comment-reaction-button`) mechanism is removed.
4. By the way, remove unused `.diff-box` selector, it was abused and
never really used.
A lot of FIXMEs in "repo-diff.ts" are completely fixed, newly loaded
contents could work as expected.
pull/33752/head^2
wxiaoguang
1 month ago
committed by
GitHub
parent
f3ada61097
commit
698ae7aa5b
@ -1,37 +1,31 @@
|
|||||||
import {POST} from '../../modules/fetch.ts';
|
import {POST} from '../../modules/fetch.ts';
|
||||||
import {fomanticQuery} from '../../modules/fomantic/base.ts';
|
|
||||||
import type {DOMEvent} from '../../utils/dom.ts';
|
import type {DOMEvent} from '../../utils/dom.ts';
|
||||||
|
import {registerGlobalEventFunc} from '../../modules/observer.ts';
|
||||||
|
|
||||||
export function initCompReactionSelector(parent: ParentNode = document) {
|
export function initCompReactionSelector() {
|
||||||
for (const container of parent.querySelectorAll<HTMLElement>('.issue-content, .diff-file-body')) {
|
registerGlobalEventFunc('click', 'onCommentReactionButtonClick', async (target: HTMLElement, e: DOMEvent<MouseEvent>) => {
|
||||||
container.addEventListener('click', async (e: DOMEvent<MouseEvent>) => {
|
// there are 2 places for the "reaction" buttons, one is the top-right reaction menu, one is the bottom of the comment
|
||||||
// there are 2 places for the "reaction" buttons, one is the top-right reaction menu, one is the bottom of the comment
|
e.preventDefault();
|
||||||
const target = e.target.closest('.comment-reaction-button');
|
|
||||||
if (!target) return;
|
|
||||||
e.preventDefault();
|
|
||||||
|
|
||||||
if (target.classList.contains('disabled')) return;
|
if (target.classList.contains('disabled')) return;
|
||||||
|
|
||||||
const actionUrl = target.closest('[data-action-url]').getAttribute('data-action-url');
|
const actionUrl = target.closest('[data-action-url]').getAttribute('data-action-url');
|
||||||
const reactionContent = target.getAttribute('data-reaction-content');
|
const reactionContent = target.getAttribute('data-reaction-content');
|
||||||
|
|
||||||
const commentContainer = target.closest('.comment-container');
|
const commentContainer = target.closest('.comment-container');
|
||||||
|
|
||||||
const bottomReactions = commentContainer.querySelector('.bottom-reactions'); // may not exist if there is no reaction
|
const bottomReactions = commentContainer.querySelector('.bottom-reactions'); // may not exist if there is no reaction
|
||||||
const bottomReactionBtn = bottomReactions?.querySelector(`a[data-reaction-content="${CSS.escape(reactionContent)}"]`);
|
const bottomReactionBtn = bottomReactions?.querySelector(`a[data-reaction-content="${CSS.escape(reactionContent)}"]`);
|
||||||
const hasReacted = bottomReactionBtn?.getAttribute('data-has-reacted') === 'true';
|
const hasReacted = bottomReactionBtn?.getAttribute('data-has-reacted') === 'true';
|
||||||
|
|
||||||
const res = await POST(`${actionUrl}/${hasReacted ? 'unreact' : 'react'}`, {
|
const res = await POST(`${actionUrl}/${hasReacted ? 'unreact' : 'react'}`, {
|
||||||
data: new URLSearchParams({content: reactionContent}),
|
data: new URLSearchParams({content: reactionContent}),
|
||||||
});
|
|
||||||
|
|
||||||
const data = await res.json();
|
|
||||||
bottomReactions?.remove();
|
|
||||||
if (data.html) {
|
|
||||||
commentContainer.insertAdjacentHTML('beforeend', data.html);
|
|
||||||
const bottomReactionsDropdowns = commentContainer.querySelectorAll('.bottom-reactions .dropdown.select-reaction');
|
|
||||||
fomanticQuery(bottomReactionsDropdowns).dropdown(); // re-init the dropdown
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
}
|
|
||||||
|
const data = await res.json();
|
||||||
|
bottomReactions?.remove();
|
||||||
|
if (data.html) {
|
||||||
|
commentContainer.insertAdjacentHTML('beforeend', data.html);
|
||||||
|
}
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,44 +0,0 @@
|
|||||||
import {isDocumentFragmentOrElementNode} from '../utils/dom.ts';
|
|
||||||
|
|
||||||
type DirElement = HTMLInputElement | HTMLTextAreaElement;
|
|
||||||
|
|
||||||
// for performance considerations, it only uses performant syntax
|
|
||||||
function attachDirAuto(el: DirElement) {
|
|
||||||
if (el.type !== 'hidden' &&
|
|
||||||
el.type !== 'checkbox' &&
|
|
||||||
el.type !== 'radio' &&
|
|
||||||
el.type !== 'range' &&
|
|
||||||
el.type !== 'color') {
|
|
||||||
el.dir = 'auto';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export function initDirAuto(): void {
|
|
||||||
const observer = new MutationObserver((mutationList) => {
|
|
||||||
const len = mutationList.length;
|
|
||||||
for (let i = 0; i < len; i++) {
|
|
||||||
const mutation = mutationList[i];
|
|
||||||
const len = mutation.addedNodes.length;
|
|
||||||
for (let i = 0; i < len; i++) {
|
|
||||||
const addedNode = mutation.addedNodes[i] as HTMLElement;
|
|
||||||
if (!isDocumentFragmentOrElementNode(addedNode)) continue;
|
|
||||||
if (addedNode.nodeName === 'INPUT' || addedNode.nodeName === 'TEXTAREA') {
|
|
||||||
attachDirAuto(addedNode as DirElement);
|
|
||||||
}
|
|
||||||
const children = addedNode.querySelectorAll<DirElement>('input, textarea');
|
|
||||||
const len = children.length;
|
|
||||||
for (let childIdx = 0; childIdx < len; childIdx++) {
|
|
||||||
attachDirAuto(children[childIdx]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const docNodes = document.querySelectorAll<DirElement>('input, textarea');
|
|
||||||
const len = docNodes.length;
|
|
||||||
for (let i = 0; i < len; i++) {
|
|
||||||
attachDirAuto(docNodes[i]);
|
|
||||||
}
|
|
||||||
|
|
||||||
observer.observe(document, {subtree: true, childList: true});
|
|
||||||
}
|
|
||||||
@ -0,0 +1,89 @@
|
|||||||
|
import {isDocumentFragmentOrElementNode} from '../utils/dom.ts';
|
||||||
|
|
||||||
|
type DirElement = HTMLInputElement | HTMLTextAreaElement;
|
||||||
|
|
||||||
|
// for performance considerations, it only uses performant syntax
|
||||||
|
function attachDirAuto(el: Partial<DirElement>) {
|
||||||
|
if (el.type !== 'hidden' &&
|
||||||
|
el.type !== 'checkbox' &&
|
||||||
|
el.type !== 'radio' &&
|
||||||
|
el.type !== 'range' &&
|
||||||
|
el.type !== 'color') {
|
||||||
|
el.dir = 'auto';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
type GlobalInitFunc<T extends HTMLElement> = (el: T) => void | Promise<void>;
|
||||||
|
const globalInitFuncs: Record<string, GlobalInitFunc<HTMLElement>> = {};
|
||||||
|
function attachGlobalInit(el: HTMLElement) {
|
||||||
|
const initFunc = el.getAttribute('data-global-init');
|
||||||
|
const func = globalInitFuncs[initFunc];
|
||||||
|
if (!func) throw new Error(`Global init function "${initFunc}" not found`);
|
||||||
|
func(el);
|
||||||
|
}
|
||||||
|
|
||||||
|
type GlobalEventFunc<T extends HTMLElement, E extends Event> = (el: T, e: E) => (void | Promise<void>);
|
||||||
|
const globalEventFuncs: Record<string, GlobalEventFunc<HTMLElement, Event>> = {};
|
||||||
|
export function registerGlobalEventFunc<T extends HTMLElement, E extends Event>(event: string, name: string, func: GlobalEventFunc<T, E>) {
|
||||||
|
globalEventFuncs[`${event}:${name}`] = func as any;
|
||||||
|
}
|
||||||
|
|
||||||
|
type SelectorHandler = {
|
||||||
|
selector: string,
|
||||||
|
handler: (el: HTMLElement) => void,
|
||||||
|
};
|
||||||
|
|
||||||
|
const selectorHandlers: SelectorHandler[] = [
|
||||||
|
{selector: 'input, textarea', handler: attachDirAuto},
|
||||||
|
{selector: '[data-global-init]', handler: attachGlobalInit},
|
||||||
|
];
|
||||||
|
|
||||||
|
export function observeAddedElement(selector: string, handler: (el: HTMLElement) => void) {
|
||||||
|
selectorHandlers.push({selector, handler});
|
||||||
|
const docNodes = document.querySelectorAll<HTMLElement>(selector);
|
||||||
|
for (const el of docNodes) {
|
||||||
|
handler(el);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function initAddedElementObserver(): void {
|
||||||
|
const observer = new MutationObserver((mutationList) => {
|
||||||
|
const len = mutationList.length;
|
||||||
|
for (let i = 0; i < len; i++) {
|
||||||
|
const mutation = mutationList[i];
|
||||||
|
const len = mutation.addedNodes.length;
|
||||||
|
for (let i = 0; i < len; i++) {
|
||||||
|
const addedNode = mutation.addedNodes[i] as HTMLElement;
|
||||||
|
if (!isDocumentFragmentOrElementNode(addedNode)) continue;
|
||||||
|
|
||||||
|
for (const {selector, handler} of selectorHandlers) {
|
||||||
|
if (addedNode.matches(selector)) {
|
||||||
|
handler(addedNode);
|
||||||
|
}
|
||||||
|
const children = addedNode.querySelectorAll<HTMLElement>(selector);
|
||||||
|
for (const el of children) {
|
||||||
|
handler(el);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
for (const {selector, handler} of selectorHandlers) {
|
||||||
|
const docNodes = document.querySelectorAll<HTMLElement>(selector);
|
||||||
|
for (const el of docNodes) {
|
||||||
|
handler(el);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
observer.observe(document, {subtree: true, childList: true});
|
||||||
|
|
||||||
|
document.addEventListener('click', (e) => {
|
||||||
|
const elem = (e.target as HTMLElement).closest<HTMLElement>('[data-global-click]');
|
||||||
|
if (!elem) return;
|
||||||
|
const funcName = elem.getAttribute('data-global-click');
|
||||||
|
const func = globalEventFuncs[`click:${funcName}`];
|
||||||
|
if (!func) throw new Error(`Global event function "click:${funcName}" not found`);
|
||||||
|
func(elem, e);
|
||||||
|
});
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue