loading up the forgejo repo on tangled to test page performance
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
---------
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>
(cherry picked from commit 25427e0aee435cdedb9f8aae58767174d877767f)
authored by
Yarden Shoham
silverwind
delvh
Giteabot
and committed by
Gergely Nagy
5ef80ceb
65135155
+77
-61
+77
-61
web_src/js/features/repo-graph.js
+77
-61
web_src/js/features/repo-graph.js
···
1
1
import $ from 'jquery';
2
+
import {hideElem, showElem} from '../utils/dom.js';
2
3
import {GET} from '../modules/fetch.js';
3
4
4
5
export function initRepoGraphGit() {
5
6
const graphContainer = document.getElementById('git-graph-container');
6
7
if (!graphContainer) return;
7
8
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');
12
14
const params = new URLSearchParams(window.location.search);
13
15
params.set('mode', 'monochrome');
14
16
const queryString = params.toString();
···
17
19
} else {
18
20
window.history.replaceState({}, '', window.location.pathname);
19
21
}
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;
23
25
const url = new URL(href, window.location);
24
26
const params = url.searchParams;
25
27
params.set('mode', 'monochrome');
26
28
url.search = `?${params.toString()}`;
27
-
that.setAttribute('href', url.href);
28
-
});
29
+
link.setAttribute('href', url.href);
30
+
}
29
31
});
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;
37
41
const url = new URL(href, window.location);
38
42
const params = url.searchParams;
39
43
params.delete('mode');
40
44
url.search = `?${params.toString()}`;
41
-
that.setAttribute('href', url.href);
42
-
});
45
+
link.setAttribute('href', url.href);
46
+
}
43
47
const params = new URLSearchParams(window.location.search);
44
48
params.delete('mode');
45
49
const queryString = params.toString();
···
56
60
const ajaxUrl = new URL(url);
57
61
ajaxUrl.searchParams.set('div-only', 'true');
58
62
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');
63
67
(async () => {
64
68
const response = await GET(String(ajaxUrl));
65
69
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');
73
78
})();
74
79
};
75
80
const dropdownSelected = params.getAll('branch');
···
77
82
dropdownSelected.splice(0, 0, '...flow-hide-pr-refs');
78
83
}
79
84
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({
82
88
clearable: true,
83
89
fullTextSeach: 'exact',
84
90
onRemove(toRemove) {
···
104
110
updateGraph();
105
111
},
106
112
});
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
+
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
+
}
113
133
});
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');
134
-
});
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
+
}
138
154
});
139
155
}