2024-07-07 23:32:30 +08:00
|
|
|
import {hideElem, showElem} from '../utils/dom.ts';
|
|
|
|
import {GET} from '../modules/fetch.ts';
|
2024-11-15 02:48:41 +08:00
|
|
|
import {fomanticQuery} from '../modules/fomantic/base.ts';
|
2022-01-29 05:00:11 +08:00
|
|
|
|
2022-12-24 00:03:11 +08:00
|
|
|
export function initRepoGraphGit() {
|
2024-06-11 04:49:33 +08:00
|
|
|
const graphContainer = document.querySelector('#git-graph-container');
|
2020-08-06 16:04:08 +08:00
|
|
|
if (!graphContainer) return;
|
|
|
|
|
2024-06-11 04:49:33 +08:00
|
|
|
document.querySelector('#flow-color-monochrome')?.addEventListener('click', () => {
|
|
|
|
document.querySelector('#flow-color-monochrome').classList.add('active');
|
|
|
|
document.querySelector('#flow-color-colored')?.classList.remove('active');
|
2024-04-12 18:34:12 +08:00
|
|
|
graphContainer.classList.remove('colored');
|
|
|
|
graphContainer.classList.add('monochrome');
|
2020-08-06 16:04:08 +08:00
|
|
|
const params = new URLSearchParams(window.location.search);
|
|
|
|
params.set('mode', 'monochrome');
|
|
|
|
const queryString = params.toString();
|
|
|
|
if (queryString) {
|
|
|
|
window.history.replaceState({}, '', `?${queryString}`);
|
2020-07-05 09:04:24 +08:00
|
|
|
} else {
|
2020-08-06 16:04:08 +08:00
|
|
|
window.history.replaceState({}, '', window.location.pathname);
|
|
|
|
}
|
2024-04-12 18:34:12 +08:00
|
|
|
for (const link of document.querySelectorAll('.pagination a')) {
|
|
|
|
const href = link.getAttribute('href');
|
|
|
|
if (!href) continue;
|
2020-08-06 16:04:08 +08:00
|
|
|
const url = new URL(href, window.location);
|
|
|
|
const params = url.searchParams;
|
|
|
|
params.set('mode', 'monochrome');
|
|
|
|
url.search = `?${params.toString()}`;
|
2024-04-12 18:34:12 +08:00
|
|
|
link.setAttribute('href', url.href);
|
|
|
|
}
|
2020-08-06 16:04:08 +08:00
|
|
|
});
|
2024-04-12 18:34:12 +08:00
|
|
|
|
2024-06-11 04:49:33 +08:00
|
|
|
document.querySelector('#flow-color-colored')?.addEventListener('click', () => {
|
|
|
|
document.querySelector('#flow-color-colored').classList.add('active');
|
|
|
|
document.querySelector('#flow-color-monochrome')?.classList.remove('active');
|
2024-04-12 18:34:12 +08:00
|
|
|
graphContainer.classList.add('colored');
|
|
|
|
graphContainer.classList.remove('monochrome');
|
|
|
|
for (const link of document.querySelectorAll('.pagination a')) {
|
|
|
|
const href = link.getAttribute('href');
|
|
|
|
if (!href) continue;
|
2020-08-06 16:04:08 +08:00
|
|
|
const url = new URL(href, window.location);
|
|
|
|
const params = url.searchParams;
|
|
|
|
params.delete('mode');
|
|
|
|
url.search = `?${params.toString()}`;
|
2024-04-12 18:34:12 +08:00
|
|
|
link.setAttribute('href', url.href);
|
|
|
|
}
|
2020-08-06 16:04:08 +08:00
|
|
|
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);
|
2020-07-05 09:04:24 +08:00
|
|
|
}
|
2019-11-22 07:30:14 +08:00
|
|
|
});
|
2020-11-09 01:21:54 +08:00
|
|
|
const url = new URL(window.location);
|
|
|
|
const params = url.searchParams;
|
2021-11-12 20:37:45 +08:00
|
|
|
const updateGraph = () => {
|
2020-11-09 01:21:54 +08:00
|
|
|
const queryString = params.toString();
|
|
|
|
const ajaxUrl = new URL(url);
|
|
|
|
ajaxUrl.searchParams.set('div-only', 'true');
|
|
|
|
window.history.replaceState({}, '', queryString ? `?${queryString}` : window.location.pathname);
|
2024-06-11 04:49:33 +08:00
|
|
|
document.querySelector('#pagination').innerHTML = '';
|
2024-04-12 18:34:12 +08:00
|
|
|
hideElem('#rel-container');
|
|
|
|
hideElem('#rev-container');
|
|
|
|
showElem('#loading-indicator');
|
2021-11-12 20:37:45 +08:00
|
|
|
(async () => {
|
2024-02-25 12:09:55 +08:00
|
|
|
const response = await GET(String(ajaxUrl));
|
|
|
|
const html = await response.text();
|
2024-04-12 18:34:12 +08:00
|
|
|
const div = document.createElement('div');
|
|
|
|
div.innerHTML = html;
|
2024-06-11 04:49:33 +08:00
|
|
|
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;
|
2024-04-12 18:34:12 +08:00
|
|
|
hideElem('#loading-indicator');
|
|
|
|
showElem('#rel-container');
|
|
|
|
showElem('#rev-container');
|
2021-11-12 20:37:45 +08:00
|
|
|
})();
|
2020-11-09 01:21:54 +08:00
|
|
|
};
|
|
|
|
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');
|
|
|
|
}
|
|
|
|
|
2024-06-11 04:49:33 +08:00
|
|
|
const flowSelectRefsDropdown = document.querySelector('#flow-select-refs-dropdown');
|
2024-11-15 02:48:41 +08:00
|
|
|
fomanticQuery(flowSelectRefsDropdown).dropdown('set selected', dropdownSelected);
|
|
|
|
fomanticQuery(flowSelectRefsDropdown).dropdown({
|
2020-11-09 01:21:54 +08:00
|
|
|
clearable: true,
|
2021-02-16 11:03:32 +08:00
|
|
|
fullTextSeach: 'exact',
|
2020-11-09 01:21:54 +08:00
|
|
|
onRemove(toRemove) {
|
|
|
|
if (toRemove === '...flow-hide-pr-refs') {
|
|
|
|
params.delete('hide-pr-refs');
|
|
|
|
} else {
|
|
|
|
const branches = params.getAll('branch');
|
|
|
|
params.delete('branch');
|
|
|
|
for (const branch of branches) {
|
|
|
|
if (branch !== toRemove) {
|
|
|
|
params.append('branch', branch);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
updateGraph();
|
|
|
|
},
|
|
|
|
onAdd(toAdd) {
|
|
|
|
if (toAdd === '...flow-hide-pr-refs') {
|
|
|
|
params.set('hide-pr-refs', true);
|
|
|
|
} else {
|
|
|
|
params.append('branch', toAdd);
|
|
|
|
}
|
|
|
|
updateGraph();
|
|
|
|
},
|
|
|
|
});
|
2024-04-12 18:34:12 +08:00
|
|
|
|
|
|
|
graphContainer.addEventListener('mouseenter', (e) => {
|
|
|
|
if (e.target.matches('#rev-list li')) {
|
|
|
|
const flow = e.target.getAttribute('data-flow');
|
|
|
|
if (flow === '0') return;
|
2024-06-11 04:49:33 +08:00
|
|
|
document.querySelector(`#flow-${flow}`)?.classList.add('highlight');
|
2024-04-12 18:34:12 +08:00
|
|
|
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');
|
|
|
|
}
|
2020-08-06 16:04:08 +08:00
|
|
|
});
|
2024-04-12 18:34:12 +08:00
|
|
|
|
|
|
|
graphContainer.addEventListener('mouseleave', (e) => {
|
|
|
|
if (e.target.matches('#rev-list li')) {
|
|
|
|
const flow = e.target.getAttribute('data-flow');
|
|
|
|
if (flow === '0') return;
|
2024-06-11 04:49:33 +08:00
|
|
|
document.querySelector(`#flow-${flow}`)?.classList.remove('highlight');
|
2024-04-12 18:34:12 +08:00
|
|
|
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');
|
|
|
|
}
|
2020-08-06 16:04:08 +08:00
|
|
|
});
|
2020-02-08 01:09:30 +08:00
|
|
|
}
|