rdelaage
/
gitea
mirror of https://github.com/go-gitea/gitea.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Remove jQuery from the commit graph (except Fomantic) (#30395) 

- Switched to plain JavaScript
- Tested the commit graph and it works as before

# Demo using JavaScript without jQuery

![demo](https://github.com/go-gitea/gitea/assets/20454870/d0755ed6-bb5c-4601-a2b7-ebccaf4abce4)

---------

Signed-off-by: Yarden Shoham <git@yardenshoham.com>
Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: delvh <dev.lh@web.de>
Co-authored-by: Giteabot <teabot@gitea.io>
This commit is contained in:
Yarden Shoham 2024-04-12 13:34:12 +03:00 committed by GitHub
parent 9466fec879
commit 25427e0aee
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 77 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

138
web_src/js/features/repo-graph.js
View File

@ -1,14 +1,16 @@
import $ from 'jquery'; import $ from 'jquery';
import {hideElem, showElem} from '../utils/dom.js';
import {GET} from '../modules/fetch.js'; import {GET} from '../modules/fetch.js';
export function initRepoGraphGit() { export function initRepoGraphGit() {
const graphContainer = document.getElementById('git-graph-container'); const graphContainer = document.getElementById('git-graph-container');
if (!graphContainer) return; if (!graphContainer) return;
$('#flow-color-monochrome').on('click', () => { document.getElementById('flow-color-monochrome')?.addEventListener('click', () => {
$('#flow-color-monochrome').addClass('active'); document.getElementById('flow-color-monochrome').classList.add('active');
$('#flow-color-colored').removeClass('active'); document.getElementById('flow-color-colored')?.classList.remove('active');
$('#git-graph-container').removeClass('colored').addClass('monochrome'); graphContainer.classList.remove('colored');
graphContainer.classList.add('monochrome');
const params = new URLSearchParams(window.location.search); const params = new URLSearchParams(window.location.search);
params.set('mode', 'monochrome'); params.set('mode', 'monochrome');
const queryString = params.toString(); const queryString = params.toString();
@ -17,29 +19,31 @@ export function initRepoGraphGit() {
} else { } else {
window.history.replaceState({}, '', window.location.pathname); window.history.replaceState({}, '', window.location.pathname);
} }
$('.pagination a').each((_, that) => { for (const link of document.querySelectorAll('.pagination a')) {
const href = that.getAttribute('href'); const href = link.getAttribute('href');
if (!href) return; if (!href) continue;
const url = new URL(href, window.location); const url = new URL(href, window.location);
const params = url.searchParams; const params = url.searchParams;
params.set('mode', 'monochrome'); params.set('mode', 'monochrome');
url.search = `?${params.toString()}`; url.search = `?${params.toString()}`;
that.setAttribute('href', url.href); link.setAttribute('href', url.href);
}); }
}); });
$('#flow-color-colored').on('click', () => {
$('#flow-color-colored').addClass('active'); document.getElementById('flow-color-colored')?.addEventListener('click', () => {
$('#flow-color-monochrome').removeClass('active'); document.getElementById('flow-color-colored').classList.add('active');
$('#git-graph-container').addClass('colored').removeClass('monochrome'); document.getElementById('flow-color-monochrome')?.classList.remove('active');
$('.pagination a').each((_, that) => { graphContainer.classList.add('colored');
const href = that.getAttribute('href'); graphContainer.classList.remove('monochrome');
if (!href) return; for (const link of document.querySelectorAll('.pagination a')) {
const href = link.getAttribute('href');
if (!href) continue;
const url = new URL(href, window.location); const url = new URL(href, window.location);
const params = url.searchParams; const params = url.searchParams;
params.delete('mode'); params.delete('mode');
url.search = `?${params.toString()}`; url.search = `?${params.toString()}`;
that.setAttribute('href', url.href); link.setAttribute('href', url.href);
}); }
const params = new URLSearchParams(window.location.search); const params = new URLSearchParams(window.location.search);
params.delete('mode'); params.delete('mode');
const queryString = params.toString(); const queryString = params.toString();
@ -56,20 +60,21 @@ export function initRepoGraphGit() {
const ajaxUrl = new URL(url); const ajaxUrl = new URL(url);
ajaxUrl.searchParams.set('div-only', 'true'); ajaxUrl.searchParams.set('div-only', 'true');
window.history.replaceState({}, '', queryString ? `?${queryString}` : window.location.pathname); window.history.replaceState({}, '', queryString ? `?${queryString}` : window.location.pathname);
$('#pagination').empty(); document.getElementById('pagination').innerHTML = '';
$('#rel-container').addClass('tw-hidden'); hideElem('#rel-container');
$('#rev-container').addClass('tw-hidden'); hideElem('#rev-container');
$('#loading-indicator').removeClass('tw-hidden'); showElem('#loading-indicator');
(async () => { (async () => {
const response = await GET(String(ajaxUrl)); const response = await GET(String(ajaxUrl));
const html = await response.text(); const html = await response.text();
const $div = $(html); const div = document.createElement('div');
$('#pagination').html($div.find('#pagination').html()); div.innerHTML = html;
$('#rel-container').html($div.find('#rel-container').html()); document.getElementById('pagination').innerHTML = div.getElementById('pagination').innerHTML;
$('#rev-container').html($div.find('#rev-container').html()); document.getElementById('rel-container').innerHTML = div.getElementById('rel-container').innerHTML;
$('#loading-indicator').addClass('tw-hidden'); document.getElementById('rev-container').innerHTML = div.getElementById('rev-container').innerHTML;
$('#rel-container').removeClass('tw-hidden'); hideElem('#loading-indicator');
$('#rev-container').removeClass('tw-hidden'); showElem('#rel-container');
showElem('#rev-container');
})(); })();
}; };
const dropdownSelected = params.getAll('branch'); const dropdownSelected = params.getAll('branch');
@ -77,8 +82,9 @@ export function initRepoGraphGit() {
dropdownSelected.splice(0, 0, '...flow-hide-pr-refs'); dropdownSelected.splice(0, 0, '...flow-hide-pr-refs');
} }
$('#flow-select-refs-dropdown').dropdown('set selected', dropdownSelected); const flowSelectRefsDropdown = document.getElementById('flow-select-refs-dropdown');
$('#flow-select-refs-dropdown').dropdown({ $(flowSelectRefsDropdown).dropdown('set selected', dropdownSelected);
$(flowSelectRefsDropdown).dropdown({
clearable: true, clearable: true,
fullTextSeach: 'exact', fullTextSeach: 'exact',
onRemove(toRemove) { onRemove(toRemove) {
@ -104,36 +110,46 @@ export function initRepoGraphGit() {
updateGraph(); updateGraph();
}, },
}); });
$('#git-graph-container').on('mouseenter', '#rev-list li', (e) => {
const flow = $(e.currentTarget).data('flow'); graphContainer.addEventListener('mouseenter', (e) => {
if (flow === 0) return; if (e.target.matches('#rev-list li')) {
$(`#flow-${flow}`).addClass('highlight'); const flow = e.target.getAttribute('data-flow');
$(e.currentTarget).addClass('hover'); if (flow === '0') return;
$(`#rev-list li[data-flow='${flow}']`).addClass('highlight'); document.getElementById(`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');
}
}); });
$('#git-graph-container').on('mouseleave', '#rev-list li', (e) => {
const flow = $(e.currentTarget).data('flow'); graphContainer.addEventListener('mouseleave', (e) => {
if (flow === 0) return; if (e.target.matches('#rev-list li')) {
$(`#flow-${flow}`).removeClass('highlight'); const flow = e.target.getAttribute('data-flow');
$(e.currentTarget).removeClass('hover'); if (flow === '0') return;
$(`#rev-list li[data-flow='${flow}']`).removeClass('highlight'); document.getElementById(`flow-${flow}`)?.classList.remove('highlight');
}); e.target.classList.remove('hover');
$('#git-graph-container').on('mouseenter', '#rel-container .flow-group', (e) => { for (const item of document.querySelectorAll(`#rev-list li[data-flow='${flow}']`)) {
$(e.currentTarget).addClass('highlight'); item.classList.remove('highlight');
const flow = $(e.currentTarget).data('flow'); }
$(`#rev-list li[data-flow='${flow}']`).addClass('highlight'); } else if (e.target.matches('#rel-container .flow-group')) {
}); e.target.classList.remove('highlight');
$('#git-graph-container').on('mouseleave', '#rel-container .flow-group', (e) => { const flow = e.target.getAttribute('data-flow');
$(e.currentTarget).removeClass('highlight'); for (const item of document.querySelectorAll(`#rev-list li[data-flow='${flow}']`)) {
const flow = $(e.currentTarget).data('flow'); item.classList.remove('highlight');
$(`#rev-list li[data-flow='${flow}']`).removeClass('highlight'); }
}); } else if (e.target.matches('#rel-container .flow-commit')) {
$('#git-graph-container').on('mouseenter', '#rel-container .flow-commit', (e) => { const rev = e.target.getAttribute('data-rev');
const rev = $(e.currentTarget).data('rev'); document.querySelector(`#rev-list li#commit-${rev}`)?.classList.remove('hover');
$(`#rev-list li#commit-${rev}`).addClass('hover'); }
});
$('#git-graph-container').on('mouseleave', '#rel-container .flow-commit', (e) => {
const rev = $(e.currentTarget).data('rev');
$(`#rev-list li#commit-${rev}`).removeClass('hover');
}); });
} }