refactor: introduce ActivePageTimer to help to do partial page refresh (#38372)

Before, the logic is already there for "pull merge box".

After, the logic is extracted into a general class ActivePageTimer and
will help more pages (including #38329)
This commit is contained in:
wxiaoguang
2026-07-09 20:39:03 +08:00
committed by GitHub
parent 3b3a06e06f
commit 1e682a26eb
3 changed files with 93 additions and 52 deletions
+16 -40
View File
@@ -1,7 +1,7 @@
import {createApp} from 'vue';
import {GET} from '../modules/fetch.ts';
import {fomanticQuery} from '../modules/fomantic/base.ts';
import {createElementFromHTML} from '../utils/dom.ts';
import {createElementFromHTML, activePageTimerRefresh} from '../utils/dom.ts';
import {registerGlobalEventFunc} from '../modules/observer.ts';
export function initRepoPullRequestUpdate(el: HTMLElement) {
@@ -35,46 +35,22 @@ async function initRepoPullRequestMergeForm(box: HTMLElement) {
view.mount(el); // TODO: can unmount when reloaded?
}
function initRepoPullMergeBoxRefresh(el: Element) {
activePageTimerRefresh({
once: true, // on successful refresh, the data-global-init will re-initialize the element
interval: () => Number(el.getAttribute('data-pull-merge-box-reloading-interval')),
async callback() {
const pullLink = el.getAttribute('data-pull-link')!;
const resp = await GET(`${pullLink}/merge_box`);
if (!resp.ok) return;
const newEl = createElementFromHTML(await resp.text());
el.replaceWith(newEl); // don't morph, do full replacement to make sure data-global-init and Vue components are re-initialized
},
});
}
export function initRepoPullMergeBox(el: HTMLElement) {
registerGlobalEventFunc('click', 'onCommitStatusChecksToggle', onCommitStatusChecksToggle);
initRepoPullRequestMergeForm(el);
const reloadingIntervalValue = el.getAttribute('data-pull-merge-box-reloading-interval');
if (!reloadingIntervalValue) return;
const reloadingInterval = parseInt(reloadingIntervalValue);
const pullLink = el.getAttribute('data-pull-link');
let timerId: number | null;
let reloadMergeBox: () => Promise<void>;
const stopReloading = () => {
if (!timerId) return;
clearTimeout(timerId);
timerId = null;
};
const startReloading = () => {
if (timerId) return;
setTimeout(reloadMergeBox, reloadingInterval);
};
const onVisibilityChange = () => {
if (document.hidden) {
stopReloading();
} else {
startReloading();
}
};
reloadMergeBox = async () => {
const resp = await GET(`${pullLink}/merge_box`);
stopReloading();
if (!resp.ok) {
startReloading();
return;
}
document.removeEventListener('visibilitychange', onVisibilityChange);
const newElem = createElementFromHTML(await resp.text());
el.replaceWith(newElem);
};
document.addEventListener('visibilitychange', onVisibilityChange);
startReloading();
initRepoPullMergeBoxRefresh(el);
}