Skip to content

Commit 25427e0

Browse files
yardenshohamsilverwinddelvhGiteaBot
authored
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 <[email protected]> Co-authored-by: silverwind <[email protected]> Co-authored-by: delvh <[email protected]> Co-authored-by: Giteabot <[email protected]>
1 parent 9466fec commit 25427e0

File tree

1 file changed

+77
-61
lines changed

1 file changed

+77
-61
lines changed

‎web_src/js/features/repo-graph.js‎

Lines changed: 77 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,16 @@
11
import $ from 'jquery';
2+
import {hideElem, showElem} from '../utils/dom.js';
23
import {GET} from '../modules/fetch.js';
34

45
export function initRepoGraphGit() {
56
const graphContainer = document.getElementById('git-graph-container');
67
if (!graphContainer) return;
78

8-
$('#flow-color-monochrome').on('click', () => {
9-
$('#flow-color-monochrome').addClass('active');
10-
$('#flow-color-colored').removeClass('active');
11-
$('#git-graph-container').removeClass('colored').addClass('monochrome');
9+
document.getElementById('flow-color-monochrome')?.addEventListener('click', () => {
10+
document.getElementById('flow-color-monochrome').classList.add('active');
11+
document.getElementById('flow-color-colored')?.classList.remove('active');
12+
graphContainer.classList.remove('colored');
13+
graphContainer.classList.add('monochrome');
1214
const params = new URLSearchParams(window.location.search);
1315
params.set('mode', 'monochrome');
1416
const queryString = params.toString();
@@ -17,29 +19,31 @@ export function initRepoGraphGit() {
1719
} else {
1820
window.history.replaceState({}, '', window.location.pathname);
1921
}
20-
$('.pagination a').each((_, that) => {
21-
const href = that.getAttribute('href');
22-
if (!href) return;
22+
for (const link of document.querySelectorAll('.pagination a')) {
23+
const href = link.getAttribute('href');
24+
if (!href) continue;
2325
const url = new URL(href, window.location);
2426
const params = url.searchParams;
2527
params.set('mode', 'monochrome');
2628
url.search = `?${params.toString()}`;
27-
that.setAttribute('href', url.href);
28-
});
29+
link.setAttribute('href', url.href);
30+
}
2931
});
30-
$('#flow-color-colored').on('click', () => {
31-
$('#flow-color-colored').addClass('active');
32-
$('#flow-color-monochrome').removeClass('active');
33-
$('#git-graph-container').addClass('colored').removeClass('monochrome');
34-
$('.pagination a').each((_, that) => {
35-
const href = that.getAttribute('href');
36-
if (!href) return;
32+
33+
document.getElementById('flow-color-colored')?.addEventListener('click', () => {
34+
document.getElementById('flow-color-colored').classList.add('active');
35+
document.getElementById('flow-color-monochrome')?.classList.remove('active');
36+
graphContainer.classList.add('colored');
37+
graphContainer.classList.remove('monochrome');
38+
for (const link of document.querySelectorAll('.pagination a')) {
39+
const href = link.getAttribute('href');
40+
if (!href) continue;
3741
const url = new URL(href, window.location);
3842
const params = url.searchParams;
3943
params.delete('mode');
4044
url.search = `?${params.toString()}`;
41-
that.setAttribute('href', url.href);
42-
});
45+
link.setAttribute('href', url.href);
46+
}
4347
const params = new URLSearchParams(window.location.search);
4448
params.delete('mode');
4549
const queryString = params.toString();
@@ -56,29 +60,31 @@ export function initRepoGraphGit() {
5660
const ajaxUrl = new URL(url);
5761
ajaxUrl.searchParams.set('div-only', 'true');
5862
window.history.replaceState({}, '', queryString ? `?${queryString}` : window.location.pathname);
59-
$('#pagination').empty();
60-
$('#rel-container').addClass('tw-hidden');
61-
$('#rev-container').addClass('tw-hidden');
62-
$('#loading-indicator').removeClass('tw-hidden');
63+
document.getElementById('pagination').innerHTML = '';
64+
hideElem('#rel-container');
65+
hideElem('#rev-container');
66+
showElem('#loading-indicator');
6367
(async () => {
6468
const response = await GET(String(ajaxUrl));
6569
const html = await response.text();
66-
const $div = $(html);
67-
$('#pagination').html($div.find('#pagination').html());
68-
$('#rel-container').html($div.find('#rel-container').html());
69-
$('#rev-container').html($div.find('#rev-container').html());
70-
$('#loading-indicator').addClass('tw-hidden');
71-
$('#rel-container').removeClass('tw-hidden');
72-
$('#rev-container').removeClass('tw-hidden');
70+
const div = document.createElement('div');
71+
div.innerHTML = html;
72+
document.getElementById('pagination').innerHTML = div.getElementById('pagination').innerHTML;
73+
document.getElementById('rel-container').innerHTML = div.getElementById('rel-container').innerHTML;
74+
document.getElementById('rev-container').innerHTML = div.getElementById('rev-container').innerHTML;
75+
hideElem('#loading-indicator');
76+
showElem('#rel-container');
77+
showElem('#rev-container');
7378
})();
7479
};
7580
const dropdownSelected = params.getAll('branch');
7681
if (params.has('hide-pr-refs') && params.get('hide-pr-refs') === 'true') {
7782
dropdownSelected.splice(0, 0, '...flow-hide-pr-refs');
7883
}
7984

80-
$('#flow-select-refs-dropdown').dropdown('set selected', dropdownSelected);
81-
$('#flow-select-refs-dropdown').dropdown({
85+
const flowSelectRefsDropdown = document.getElementById('flow-select-refs-dropdown');
86+
$(flowSelectRefsDropdown).dropdown('set selected', dropdownSelected);
87+
$(flowSelectRefsDropdown).dropdown({
8288
clearable: true,
8389
fullTextSeach: 'exact',
8490
onRemove(toRemove) {
@@ -104,36 +110,46 @@ export function initRepoGraphGit() {
104110
updateGraph();
105111
},
106112
});
107-
$('#git-graph-container').on('mouseenter', '#rev-list li', (e) => {
108-
const flow = $(e.currentTarget).data('flow');
109-
if (flow === 0) return;
110-
$(`#flow-${flow}`).addClass('highlight');
111-
$(e.currentTarget).addClass('hover');
112-
$(`#rev-list li[data-flow='${flow}']`).addClass('highlight');
113-
});
114-
$('#git-graph-container').on('mouseleave', '#rev-list li', (e) => {
115-
const flow = $(e.currentTarget).data('flow');
116-
if (flow === 0) return;
117-
$(`#flow-${flow}`).removeClass('highlight');
118-
$(e.currentTarget).removeClass('hover');
119-
$(`#rev-list li[data-flow='${flow}']`).removeClass('highlight');
120-
});
121-
$('#git-graph-container').on('mouseenter', '#rel-container .flow-group', (e) => {
122-
$(e.currentTarget).addClass('highlight');
123-
const flow = $(e.currentTarget).data('flow');
124-
$(`#rev-list li[data-flow='${flow}']`).addClass('highlight');
125-
});
126-
$('#git-graph-container').on('mouseleave', '#rel-container .flow-group', (e) => {
127-
$(e.currentTarget).removeClass('highlight');
128-
const flow = $(e.currentTarget).data('flow');
129-
$(`#rev-list li[data-flow='${flow}']`).removeClass('highlight');
130-
});
131-
$('#git-graph-container').on('mouseenter', '#rel-container .flow-commit', (e) => {
132-
const rev = $(e.currentTarget).data('rev');
133-
$(`#rev-list li#commit-${rev}`).addClass('hover');
113+
114+
graphContainer.addEventListener('mouseenter', (e) => {
115+
if (e.target.matches('#rev-list li')) {
116+
const flow = e.target.getAttribute('data-flow');
117+
if (flow === '0') return;
118+
document.getElementById(`flow-${flow}`)?.classList.add('highlight');
119+
e.target.classList.add('hover');
120+
for (const item of document.querySelectorAll(`#rev-list li[data-flow='${flow}']`)) {
121+
item.classList.add('highlight');
122+
}
123+
} else if (e.target.matches('#rel-container .flow-group')) {
124+
e.target.classList.add('highlight');
125+
const flow = e.target.getAttribute('data-flow');
126+
for (const item of document.querySelectorAll(`#rev-list li[data-flow='${flow}']`)) {
127+
item.classList.add('highlight');
128+
}
129+
} else if (e.target.matches('#rel-container .flow-commit')) {
130+
const rev = e.target.getAttribute('data-rev');
131+
document.querySelector(`#rev-list li#commit-${rev}`)?.classList.add('hover');
132+
}
134133
});
135-
$('#git-graph-container').on('mouseleave', '#rel-container .flow-commit', (e) => {
136-
const rev = $(e.currentTarget).data('rev');
137-
$(`#rev-list li#commit-${rev}`).removeClass('hover');
134+
135+
graphContainer.addEventListener('mouseleave', (e) => {
136+
if (e.target.matches('#rev-list li')) {
137+
const flow = e.target.getAttribute('data-flow');
138+
if (flow === '0') return;
139+
document.getElementById(`flow-${flow}`)?.classList.remove('highlight');
140+
e.target.classList.remove('hover');
141+
for (const item of document.querySelectorAll(`#rev-list li[data-flow='${flow}']`)) {
142+
item.classList.remove('highlight');
143+
}
144+
} else if (e.target.matches('#rel-container .flow-group')) {
145+
e.target.classList.remove('highlight');
146+
const flow = e.target.getAttribute('data-flow');
147+
for (const item of document.querySelectorAll(`#rev-list li[data-flow='${flow}']`)) {
148+
item.classList.remove('highlight');
149+
}
150+
} else if (e.target.matches('#rel-container .flow-commit')) {
151+
const rev = e.target.getAttribute('data-rev');
152+
document.querySelector(`#rev-list li#commit-${rev}`)?.classList.remove('hover');
153+
}
138154
});
139155
}

0 commit comments

Comments
 (0)