mirrors/gitea
1
0
Fork 0
mirror of https://github.com/go-gitea/gitea.git synced 2025-10-26 12:27:06 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix git graph page (#34948)

Browse Source 
fix #34946
This commit is contained in:
wxiaoguang
2025-07-04 23:41:19 +08:00
committed by GitHub
parent 41678e1a57
commit 70685a9489
10 changed files with 90 additions and 210 deletions
Download Patch File Download Diff File Expand all files Collapse all files

145
web_src/js/features/repo-graph.ts
View File

@@ -1,4 +1,4 @@
import {hideElem, showElem, type DOMEvent} from '../utils/dom.ts';
import {toggleClass} from '../utils/dom.ts';
import {GET} from '../modules/fetch.ts';
import {fomanticQuery} from '../modules/fomantic/base.ts';
@@ -6,87 +6,59 @@ export function initRepoGraphGit() {
const graphContainer = document.querySelector<HTMLElement>('#git-graph-container');
if (!graphContainer) return;
document.querySelector('#flow-color-monochrome')?.addEventListener('click', () => {
document.querySelector('#flow-color-monochrome').classList.add('active');
document.querySelector('#flow-color-colored')?.classList.remove('active');
graphContainer.classList.remove('colored');
graphContainer.classList.add('monochrome');
const params = new URLSearchParams(window.location.search);
params.set('mode', 'monochrome');
const queryString = params.toString();
if (queryString) {
window.history.replaceState({}, '', `?${queryString}`);
} else {
window.history.replaceState({}, '', window.location.pathname);
}
for (const link of document.querySelectorAll('.pagination a')) {
const href = link.getAttribute('href');
if (!href) continue;
const url = new URL(href, window.location.href);
const params = url.searchParams;
params.set('mode', 'monochrome');
url.search = `?${params.toString()}`;
link.setAttribute('href', url.href);
}
});
const elColorMonochrome = document.querySelector<HTMLElement>('#flow-color-monochrome');
const elColorColored = document.querySelector<HTMLElement>('#flow-color-colored');
const toggleColorMode = (mode: 'monochrome' | 'colored') => {
toggleClass(graphContainer, 'monochrome', mode === 'monochrome');
toggleClass(graphContainer, 'colored', mode === 'colored');
document.querySelector('#flow-color-colored')?.addEventListener('click', () => {
document.querySelector('#flow-color-colored').classList.add('active');
document.querySelector('#flow-color-monochrome')?.classList.remove('active');
graphContainer.classList.add('colored');
graphContainer.classList.remove('monochrome');
for (const link of document.querySelectorAll('.pagination a')) {
toggleClass(elColorMonochrome, 'active', mode === 'monochrome');
toggleClass(elColorColored, 'active', mode === 'colored');
const params = new URLSearchParams(window.location.search);
params.set('mode', mode);
window.history.replaceState(null, '', `?${params.toString()}`);
for (const link of document.querySelectorAll('#pagination .pagination a')) {
const href = link.getAttribute('href');
if (!href) continue;
const url = new URL(href, window.location.href);
const params = url.searchParams;
params.delete('mode');
params.set('mode', mode);
url.search = `?${params.toString()}`;
link.setAttribute('href', url.href);
}
const params = new URLSearchParams(window.location.search);
params.delete('mode');
const queryString = params.toString();
if (queryString) {
window.history.replaceState({}, '', `?${queryString}`);
} else {
window.history.replaceState({}, '', window.location.pathname);
}
});
};
elColorMonochrome.addEventListener('click', () => toggleColorMode('monochrome'));
elColorColored.addEventListener('click', () => toggleColorMode('colored'));
const elGraphBody = document.querySelector<HTMLElement>('#git-graph-body');
const url = new URL(window.location.href);
const params = url.searchParams;
const updateGraph = () => {
const loadGitGraph = async () => {
const queryString = params.toString();
const ajaxUrl = new URL(url);
ajaxUrl.searchParams.set('div-only', 'true');
window.history.replaceState({}, '', queryString ? `?${queryString}` : window.location.pathname);
document.querySelector('#pagination').innerHTML = '';
hideElem('#rel-container');
hideElem('#rev-container');
showElem('#loading-indicator');
(async () => {
const response = await GET(String(ajaxUrl));
const html = await response.text();
const div = document.createElement('div');
div.innerHTML = html;
document.querySelector('#pagination').innerHTML = div.querySelector('#pagination').innerHTML;
document.querySelector('#rel-container').innerHTML = div.querySelector('#rel-container').innerHTML;
document.querySelector('#rev-container').innerHTML = div.querySelector('#rev-container').innerHTML;
hideElem('#loading-indicator');
showElem('#rel-container');
showElem('#rev-container');
})();
window.history.replaceState(null, '', queryString ? `?${queryString}` : window.location.pathname);
elGraphBody.classList.add('is-loading');
try {
const resp = await GET(ajaxUrl.toString());
elGraphBody.innerHTML = await resp.text();
} finally {
elGraphBody.classList.remove('is-loading');
}
};
const dropdownSelected = params.getAll('branch');
if (params.has('hide-pr-refs') && params.get('hide-pr-refs') === 'true') {
dropdownSelected.splice(0, 0, '...flow-hide-pr-refs');
}
const flowSelectRefsDropdown = document.querySelector('#flow-select-refs-dropdown');
const $dropdown = fomanticQuery(flowSelectRefsDropdown);
$dropdown.dropdown({
clearable: true,
fullTextSeach: 'exact',
const $dropdown = fomanticQuery('#flow-select-refs-dropdown');
$dropdown.dropdown({clearable: true});
$dropdown.dropdown('set selected', dropdownSelected);
// must add the callback after setting the selected items, otherwise each "selected" item will trigger the callback
$dropdown.dropdown('setting', {
onRemove(toRemove: string) {
if (toRemove === '...flow-hide-pr-refs') {
params.delete('hide-pr-refs');
@@ -99,7 +71,7 @@ export function initRepoGraphGit() {
}
}
}
updateGraph();
loadGitGraph();
},
onAdd(toAdd: string) {
if (toAdd === '...flow-hide-pr-refs') {
@@ -107,50 +79,7 @@ export function initRepoGraphGit() {
} else {
params.append('branch', toAdd);
}
updateGraph();
loadGitGraph();
},
});
$dropdown.dropdown('set selected', dropdownSelected);
graphContainer.addEventListener('mouseenter', (e: DOMEvent<MouseEvent>) => {
if (e.target.matches('#rev-list li')) {
const flow = e.target.getAttribute('data-flow');
if (flow === '0') return;
document.querySelector(`#flow-${flow}`)?.classList.add('highlight');
e.target.classList.add('hover');
for (const item of document.querySelectorAll(`#rev-list li[data-flow='${flow}']`)) {
item.classList.add('highlight');
}
} else if (e.target.matches('#rel-container .flow-group')) {
e.target.classList.add('highlight');
const flow = e.target.getAttribute('data-flow');
for (const item of document.querySelectorAll(`#rev-list li[data-flow='${flow}']`)) {
item.classList.add('highlight');
}
} else if (e.target.matches('#rel-container .flow-commit')) {
const rev = e.target.getAttribute('data-rev');
document.querySelector(`#rev-list li#commit-${rev}`)?.classList.add('hover');
}
});
graphContainer.addEventListener('mouseleave', (e: DOMEvent<MouseEvent>) => {
if (e.target.matches('#rev-list li')) {
const flow = e.target.getAttribute('data-flow');
if (flow === '0') return;
document.querySelector(`#flow-${flow}`)?.classList.remove('highlight');
e.target.classList.remove('hover');
for (const item of document.querySelectorAll(`#rev-list li[data-flow='${flow}']`)) {
item.classList.remove('highlight');
}
} else if (e.target.matches('#rel-container .flow-group')) {
e.target.classList.remove('highlight');
const flow = e.target.getAttribute('data-flow');
for (const item of document.querySelectorAll(`#rev-list li[data-flow='${flow}']`)) {
item.classList.remove('highlight');
}
} else if (e.target.matches('#rel-container .flow-commit')) {
const rev = e.target.getAttribute('data-rev');
document.querySelector(`#rev-list li#commit-${rev}`)?.classList.remove('hover');
}
});
}