loading up the forgejo repo on tangled to test page performance
Remove jQuery class from the diff view (#30176)
- Switched from jQuery class functions to plain JavaScript `classList`
- Tested the diff view functionality and it works as before
---------
Signed-off-by: Yarden Shoham <git@yardenshoham.com>
Co-authored-by: silverwind <me@silverwind.io>
(cherry picked from commit c487a32bcd093affe3284282ea279d97f52a867f)
authored by
Yarden Shoham
silverwind
and committed by
Gergely Nagy
ecc78da5
6d164224
+32
-25
+31
-24
web_src/js/features/repo-diff.js
+31
-24
web_src/js/features/repo-diff.js
···
7
7
import {initViewedCheckboxListenerFor, countAndUpdateViewedFiles, initExpandAndCollapseFilesButton} from './pull-view-file.js';
8
8
import {initImageDiff} from './imagediff.js';
9
9
import {showErrorToast} from '../modules/toast.js';
10
-
import {submitEventSubmitter} from '../utils/dom.js';
10
+
import {submitEventSubmitter, queryElemSiblings, hideElem, showElem} from '../utils/dom.js';
11
11
import {POST, GET} from '../modules/fetch.js';
12
12
13
13
const {pageData, i18n} = window.config;
···
16
16
const reviewBox = document.getElementById('review-box');
17
17
if (!reviewBox) return;
18
18
19
-
const $reviewBox = $(reviewBox);
20
19
const counter = reviewBox.querySelector('.review-comments-counter');
21
20
if (!counter) return;
22
21
···
27
26
const num = parseInt(counter.getAttribute('data-pending-comment-number')) + 1 || 1;
28
27
counter.setAttribute('data-pending-comment-number', num);
29
28
counter.textContent = num;
30
-
// Force the browser to reflow the DOM. This is to ensure that the browser replay the animation
31
-
$reviewBox.removeClass('pulse');
32
-
$reviewBox.width();
33
-
$reviewBox.addClass('pulse');
29
+
30
+
reviewBox.classList.remove('pulse');
31
+
requestAnimationFrame(() => {
32
+
reviewBox.classList.add('pulse');
33
+
});
34
34
});
35
35
});
36
36
}
37
37
38
38
function initRepoDiffFileViewToggle() {
39
39
$('.file-view-toggle').on('click', function () {
40
-
const $this = $(this);
41
-
$this.parent().children().removeClass('active');
42
-
$this.addClass('active');
40
+
for (const el of queryElemSiblings(this)) {
41
+
el.classList.remove('active');
42
+
}
43
+
this.classList.add('active');
44
+
45
+
const target = document.querySelector(this.getAttribute('data-toggle-selector'));
46
+
if (!target) return;
43
47
44
-
const $target = $($this.data('toggle-selector'));
45
-
$target.parent().children().addClass('tw-hidden');
46
-
$target.removeClass('tw-hidden');
48
+
hideElem(queryElemSiblings(target));
49
+
showElem(target);
47
50
});
48
51
}
49
52
···
57
60
return;
58
61
}
59
62
60
-
if ($form.hasClass('is-loading')) return;
63
+
if (e.target.classList.contains('is-loading')) return;
61
64
try {
62
-
$form.addClass('is-loading');
65
+
e.target.classList.add('is-loading');
63
66
const formData = new FormData($form[0]);
64
67
65
68
// If the form is submitted by a button, append the button's name and value to the form data.
···
76
79
const {path, side, idx} = $newConversationHolder.data();
77
80
78
81
$form.closest('.conversation-holder').replaceWith($newConversationHolder);
82
+
let selector;
79
83
if ($form.closest('tr').data('line-type') === 'same') {
80
-
$(`[data-path="${path}"] .add-code-comment[data-idx="${idx}"]`).addClass('tw-invisible');
84
+
selector = `[data-path="${path}"] .add-code-comment[data-idx="${idx}"]`;
81
85
} else {
82
-
$(`[data-path="${path}"] .add-code-comment[data-side="${side}"][data-idx="${idx}"]`).addClass('tw-invisible');
86
+
selector = `[data-path="${path}"] .add-code-comment[data-side="${side}"][data-idx="${idx}"]`;
87
+
}
88
+
for (const el of document.querySelectorAll(selector)) {
89
+
el.classList.add('tw-invisible');
83
90
}
84
91
$newConversationHolder.find('.dropdown').dropdown();
85
92
initCompReactionSelector($newConversationHolder);
···
87
94
console.error('error when submitting conversation', e);
88
95
showErrorToast(i18n.network_error);
89
96
} finally {
90
-
$form.removeClass('is-loading');
97
+
e.target.classList.remove('is-loading');
91
98
}
92
99
});
93
100
···
147
154
}
148
155
149
156
export async function loadMoreFiles(url) {
150
-
const $target = $('a#diff-show-more-files');
151
-
if ($target.hasClass('disabled') || pageData.diffFileInfo.isLoadingNewData) {
157
+
const target = document.querySelector('a#diff-show-more-files');
158
+
if (target?.classList.contains('disabled') || pageData.diffFileInfo.isLoadingNewData) {
152
159
return;
153
160
}
154
161
155
162
pageData.diffFileInfo.isLoadingNewData = true;
156
-
$target.addClass('disabled');
163
+
target?.classList.add('disabled');
157
164
158
165
try {
159
166
const response = await GET(url);
···
170
177
console.error('Error:', error);
171
178
showErrorToast('An error occurred while loading more files.');
172
179
} finally {
173
-
$target.removeClass('disabled');
180
+
target?.classList.remove('disabled');
174
181
pageData.diffFileInfo.isLoadingNewData = false;
175
182
}
176
183
}
···
187
194
e.preventDefault();
188
195
const $target = $(e.target);
189
196
190
-
if ($target.hasClass('disabled')) {
197
+
if (e.target.classList.contains('disabled')) {
191
198
return;
192
199
}
193
200
194
-
$target.addClass('disabled');
201
+
e.target.classList.add('disabled');
195
202
196
203
const url = $target.data('href');
197
204
···
207
214
} catch (error) {
208
215
console.error('Error:', error);
209
216
} finally {
210
-
$target.removeClass('disabled');
217
+
e.target.classList.remove('disabled');
211
218
}
212
219
});
213
220
}
+1
-1
web_src/js/utils/dom.js
+1
-1
web_src/js/utils/dom.js