Skip to content

Commit 169a9b5

Browse files
committed
Remove jQuery from repo commit functions
- 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 Signed-off-by: Yarden Shoham <[email protected]>
1 parent 5e1bf3e commit 169a9b5

File tree

1 file changed

+48
-44
lines changed

1 file changed

+48
-44
lines changed

web_src/js/features/repo-commit.js

Lines changed: 48 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,72 +1,76 @@
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 {POST} from '../modules/fetch.js';
64

75
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-
});
6+
for (const button of document.querySelectorAll('.js-toggle-commit-body')) {
7+
button.addEventListener('click', function (e) {
8+
e.preventDefault();
9+
const expanded = this.getAttribute('aria-expanded') === 'true';
10+
toggleElem(this.parentElement.querySelector('.commit-body'));
11+
this.setAttribute('aria-expanded', String(!expanded));
12+
});
13+
}
1414
}
1515

16-
export function initRepoCommitLastCommitLoader() {
16+
const parser = new DOMParser();
17+
18+
export async function initRepoCommitLastCommitLoader() {
1719
const entryMap = {};
1820

19-
const entries = $('table#repo-files-table tr.notready')
20-
.map((_, v) => {
21-
entryMap[$(v).attr('data-entryname')] = $(v);
22-
return $(v).attr('data-entryname');
23-
})
24-
.get();
21+
const entries = Array.from(document.querySelectorAll('table#repo-files-table tr.notready'), (v) => {
22+
entryMap[v.getAttribute('data-entryname')] = v;
23+
return v.getAttribute('data-entryname');
24+
});
2525

2626
if (entries.length === 0) {
2727
return;
2828
}
2929

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

3232
if (entries.length > 200) {
33-
$.post(lastCommitLoaderURL, {
34-
_csrf: csrfToken,
35-
}, (data) => {
36-
$('table#repo-files-table').replaceWith(data);
37-
});
33+
// For more than 200 entries, replace the entire table
34+
const response = await POST(lastCommitLoaderURL);
35+
const data = await response.text();
36+
const table = document.querySelector('table#repo-files-table');
37+
const parent = table.parentNode;
38+
const wrapper = document.createElement('div');
39+
wrapper.innerHTML = data;
40+
const newTable = wrapper.querySelector('table');
41+
if (newTable) {
42+
parent.replaceChild(newTable, table);
43+
}
3844
return;
3945
}
4046

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

6064
export function initCommitStatuses() {
61-
$('[data-tippy="commit-statuses"]').each(function () {
62-
const top = $('.repository.file.list').length > 0 || $('.repository.diff').length > 0;
65+
for (const element of document.querySelectorAll('[data-tippy="commit-statuses"]')) {
66+
const top = document.querySelector('.repository.file.list') || document.querySelector('.repository.diff');
6367

64-
createTippy(this, {
65-
content: this.nextElementSibling,
68+
createTippy(element, {
69+
content: element.nextElementSibling,
6670
placement: top ? 'top-start' : 'bottom-start',
6771
interactive: true,
6872
role: 'dialog',
6973
theme: 'box-with-header',
7074
});
71-
});
75+
}
7276
}

0 commit comments

Comments
 (0)