mirror of
https://github.com/go-gitea/gitea.git
synced 2024-12-29 23:48:44 +08:00
249e67672a
Many files do not directly depend on jQuery now. To clarify the usage: use `fomanticQuery` to operate Fomantic components. Then developers could focus on removing the remaining jQuery usages by searching `import $` globally. 21 files now: ``` ./components/RepoBranchTagSelector.vue:3:import $ from 'jquery'; ./features/admin/common.ts:1:import $ from 'jquery'; ./features/admin/emails.ts:1:import $ from 'jquery'; ./features/common-button.ts:1:import $ from 'jquery'; ./features/comp/ComboMarkdownEditor.ts:3:import $ from 'jquery'; (I am working on it, there will be a new PR) ./features/comp/LabelEdit.ts:1:import $ from 'jquery'; ./features/notification.ts:1:import $ from 'jquery'; ./features/org-team.ts:1:import $ from 'jquery'; ./features/repo-code.ts:1:import $ from 'jquery'; ./features/repo-common.ts:1:import $ from 'jquery'; ./features/repo-diff.ts:1:import $ from 'jquery'; ./features/repo-editor.ts:1:import $ from 'jquery'; ./features/repo-issue-content.ts:1:import $ from 'jquery'; ./features/repo-issue-list.ts:1:import $ from 'jquery'; ./features/repo-issue-sidebar.ts:1:import $ from 'jquery'; ./features/repo-issue.ts:1:import $ from 'jquery'; ./features/repo-legacy.ts:1:import $ from 'jquery'; ./features/repo-new.ts:1:import $ from 'jquery'; ./features/repo-projects.ts:1:import $ from 'jquery'; ./features/repo-settings.ts:1:import $ from 'jquery'; ./features/repo-template.ts:1:import $ from 'jquery'; ```
156 lines
6.3 KiB
TypeScript
156 lines
6.3 KiB
TypeScript
import {hideElem, showElem} from '../utils/dom.ts';
|
|
import {GET} from '../modules/fetch.ts';
|
|
import {fomanticQuery} from '../modules/fomantic/base.ts';
|
|
|
|
export function initRepoGraphGit() {
|
|
const graphContainer = document.querySelector('#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);
|
|
const params = url.searchParams;
|
|
params.set('mode', 'monochrome');
|
|
url.search = `?${params.toString()}`;
|
|
link.setAttribute('href', url.href);
|
|
}
|
|
});
|
|
|
|
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')) {
|
|
const href = link.getAttribute('href');
|
|
if (!href) continue;
|
|
const url = new URL(href, window.location);
|
|
const params = url.searchParams;
|
|
params.delete('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);
|
|
}
|
|
});
|
|
const url = new URL(window.location);
|
|
const params = url.searchParams;
|
|
const updateGraph = () => {
|
|
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');
|
|
})();
|
|
};
|
|
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');
|
|
fomanticQuery(flowSelectRefsDropdown).dropdown('set selected', dropdownSelected);
|
|
fomanticQuery(flowSelectRefsDropdown).dropdown({
|
|
clearable: true,
|
|
fullTextSeach: 'exact',
|
|
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();
|
|
},
|
|
});
|
|
|
|
graphContainer.addEventListener('mouseenter', (e) => {
|
|
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) => {
|
|
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');
|
|
}
|
|
});
|
|
}
|