Skip to content

Commit eaede2d

Browse files
Remove jQuery from the repo commit functions (#29230)
- Switched to plain JavaScript - Tested the commit ellipsis button functionality and it works as before - Tested the commits statuses tippy functionality and it works as before - Tested the last commit loader functionality and it works as before # Demo using JavaScript without jQuery ![action](https://github.com/go-gitea/gitea/assets/20454870/465516f8-0ff3-438c-a17e-26cbab82750b) ![action](https://github.com/go-gitea/gitea/assets/20454870/968da210-9382-4b50-a4c2-09419dc86e07) --------- Signed-off-by: Yarden Shoham <git@yardenshoham.com> Co-authored-by: silverwind <me@silverwind.io>
1 parent 7a1557d commit eaede2d

File tree

1 file changed

+46
-46
lines changed

1 file changed

+46
-46
lines changed

web_src/js/features/repo-commit.js

Lines changed: 46 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,70 +1,70 @@
1-
import $ from 'jquery';
21
import {createTippy} from '../modules/tippy.js';
32
import {toggleElem} from '../utils/dom.js';
4-
5-
const {csrfToken} = window.config;
3+
import {parseDom} from '../utils.js';
4+
import {POST} from '../modules/fetch.js';
65

76
export function initRepoEllipsisButton() {
8-
$('.js-toggle-commit-body').on('click', function (e) {
9-
e.preventDefault();
10-
const expanded = $(this).attr('aria-expanded') === 'true';
11-
toggleElem($(this).parent().find('.commit-body'));
12-
$(this).attr('aria-expanded', String(!expanded));
13-
});
7+
for (const button of document.querySelectorAll('.js-toggle-commit-body')) {
8+
button.addEventListener('click', function (e) {
9+
e.preventDefault();
10+
const expanded = this.getAttribute('aria-expanded') === 'true';
11+
toggleElem(this.parentElement.querySelector('.commit-body'));
12+
this.setAttribute('aria-expanded', String(!expanded));
13+
});
14+
}
1415
}
1516

16-
export function initRepoCommitLastCommitLoader() {
17-
const notReadyEls = document.querySelectorAll('table#repo-files-table tr.notready');
18-
if (!notReadyEls.length) return;
19-
17+
export async function initRepoCommitLastCommitLoader() {
2018
const entryMap = {};
21-
const entries = [];
22-
for (const el of notReadyEls) {
23-
const entryname = el.getAttribute('data-entryname');
24-
entryMap[entryname] = $(el);
25-
entries.push(entryname);
19+
20+
const entries = Array.from(document.querySelectorAll('table#repo-files-table tr.notready'), (el) => {
21+
const entryName = el.getAttribute('data-entryname');
22+
entryMap[entryName] = el;
23+
return entryName;
24+
});
25+
26+
if (entries.length === 0) {
27+
return;
2628
}
2729

28-
const lastCommitLoaderURL = $('table#repo-files-table').data('lastCommitLoaderUrl');
30+
const lastCommitLoaderURL = document.querySelector('table#repo-files-table').getAttribute('data-last-commit-loader-url');
2931

3032
if (entries.length > 200) {
31-
$.post(lastCommitLoaderURL, {
32-
_csrf: csrfToken,
33-
}, (data) => {
34-
$('table#repo-files-table').replaceWith(data);
35-
});
33+
// For more than 200 entries, replace the entire table
34+
const response = await POST(lastCommitLoaderURL);
35+
const data = await response.text();
36+
document.querySelector('table#repo-files-table').outerHTML = data;
3637
return;
3738
}
3839

39-
$.post(lastCommitLoaderURL, {
40-
_csrf: csrfToken,
41-
'f': entries,
42-
}, (data) => {
43-
$(data).find('tr').each((_, row) => {
44-
if (row.className === 'commit-list') {
45-
$('table#repo-files-table .commit-list').replaceWith(row);
46-
return;
47-
}
48-
// there are other <tr> rows in response (eg: <tr class="has-parent">)
49-
// at the moment only the "data-entryname" rows should be processed
50-
const entryName = $(row).attr('data-entryname');
51-
if (entryName) {
52-
entryMap[entryName].replaceWith(row);
53-
}
54-
});
55-
});
40+
// For fewer entries, update individual rows
41+
const response = await POST(lastCommitLoaderURL, {data: {'f': entries}});
42+
const data = await response.text();
43+
const doc = parseDom(data, 'text/html');
44+
for (const row of doc.querySelectorAll('tr')) {
45+
if (row.className === 'commit-list') {
46+
document.querySelector('table#repo-files-table .commit-list')?.replaceWith(row);
47+
continue;
48+
}
49+
// there are other <tr> rows in response (eg: <tr class="has-parent">)
50+
// at the moment only the "data-entryname" rows should be processed
51+
const entryName = row.getAttribute('data-entryname');
52+
if (entryName) {
53+
entryMap[entryName]?.replaceWith(row);
54+
}
55+
}
5656
}
5757

5858
export function initCommitStatuses() {
59-
$('[data-tippy="commit-statuses"]').each(function () {
60-
const top = $('.repository.file.list').length > 0 || $('.repository.diff').length > 0;
59+
for (const element of document.querySelectorAll('[data-tippy="commit-statuses"]')) {
60+
const top = document.querySelector('.repository.file.list') || document.querySelector('.repository.diff');
6161

62-
createTippy(this, {
63-
content: this.nextElementSibling,
62+
createTippy(element, {
63+
content: element.nextElementSibling,
6464
placement: top ? 'top-start' : 'bottom-start',
6565
interactive: true,
6666
role: 'dialog',
6767
theme: 'box-with-header',
6868
});
69-
});
69+
}
7070
}

0 commit comments

Comments
 (0)