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> (cherry picked from commit eaede2de98fbe0ac2156c9f4cd8b5899d2c7cbbf)
This commit is contained in:
parent
60447a7097
commit
6db296f1cb
1 changed files with 48 additions and 48 deletions
|
@ -1,70 +1,70 @@
|
||||||
import $ from 'jquery';
|
|
||||||
import {createTippy} from '../modules/tippy.js';
|
import {createTippy} from '../modules/tippy.js';
|
||||||
import {toggleElem} from '../utils/dom.js';
|
import {toggleElem} from '../utils/dom.js';
|
||||||
|
import {parseDom} from '../utils.js';
|
||||||
const {csrfToken} = window.config;
|
import {POST} from '../modules/fetch.js';
|
||||||
|
|
||||||
export function initRepoEllipsisButton() {
|
export function initRepoEllipsisButton() {
|
||||||
$('.js-toggle-commit-body').on('click', function (e) {
|
for (const button of document.querySelectorAll('.js-toggle-commit-body')) {
|
||||||
e.preventDefault();
|
button.addEventListener('click', function (e) {
|
||||||
const expanded = $(this).attr('aria-expanded') === 'true';
|
e.preventDefault();
|
||||||
toggleElem($(this).parent().find('.commit-body'));
|
const expanded = this.getAttribute('aria-expanded') === 'true';
|
||||||
$(this).attr('aria-expanded', String(!expanded));
|
toggleElem(this.parentElement.querySelector('.commit-body'));
|
||||||
});
|
this.setAttribute('aria-expanded', String(!expanded));
|
||||||
|
});
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export function initRepoCommitLastCommitLoader() {
|
export async function initRepoCommitLastCommitLoader() {
|
||||||
const notReadyEls = document.querySelectorAll('table#repo-files-table tr.notready');
|
|
||||||
if (!notReadyEls.length) return;
|
|
||||||
|
|
||||||
const entryMap = {};
|
const entryMap = {};
|
||||||
const entries = [];
|
|
||||||
for (const el of notReadyEls) {
|
|
||||||
const entryname = el.getAttribute('data-entryname');
|
|
||||||
entryMap[entryname] = $(el);
|
|
||||||
entries.push(entryname);
|
|
||||||
}
|
|
||||||
|
|
||||||
const lastCommitLoaderURL = $('table#repo-files-table').data('lastCommitLoaderUrl');
|
const entries = Array.from(document.querySelectorAll('table#repo-files-table tr.notready'), (el) => {
|
||||||
|
const entryName = el.getAttribute('data-entryname');
|
||||||
|
entryMap[entryName] = el;
|
||||||
|
return entryName;
|
||||||
|
});
|
||||||
|
|
||||||
if (entries.length > 200) {
|
if (entries.length === 0) {
|
||||||
$.post(lastCommitLoaderURL, {
|
|
||||||
_csrf: csrfToken,
|
|
||||||
}, (data) => {
|
|
||||||
$('table#repo-files-table').replaceWith(data);
|
|
||||||
});
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
$.post(lastCommitLoaderURL, {
|
const lastCommitLoaderURL = document.querySelector('table#repo-files-table').getAttribute('data-last-commit-loader-url');
|
||||||
_csrf: csrfToken,
|
|
||||||
'f': entries,
|
if (entries.length > 200) {
|
||||||
}, (data) => {
|
// For more than 200 entries, replace the entire table
|
||||||
$(data).find('tr').each((_, row) => {
|
const response = await POST(lastCommitLoaderURL);
|
||||||
if (row.className === 'commit-list') {
|
const data = await response.text();
|
||||||
$('table#repo-files-table .commit-list').replaceWith(row);
|
document.querySelector('table#repo-files-table').outerHTML = data;
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
// there are other <tr> rows in response (eg: <tr class="has-parent">)
|
|
||||||
// at the moment only the "data-entryname" rows should be processed
|
// For fewer entries, update individual rows
|
||||||
const entryName = $(row).attr('data-entryname');
|
const response = await POST(lastCommitLoaderURL, {data: {'f': entries}});
|
||||||
if (entryName) {
|
const data = await response.text();
|
||||||
entryMap[entryName].replaceWith(row);
|
const doc = parseDom(data, 'text/html');
|
||||||
}
|
for (const row of doc.querySelectorAll('tr')) {
|
||||||
});
|
if (row.className === 'commit-list') {
|
||||||
});
|
document.querySelector('table#repo-files-table .commit-list')?.replaceWith(row);
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
// there are other <tr> rows in response (eg: <tr class="has-parent">)
|
||||||
|
// at the moment only the "data-entryname" rows should be processed
|
||||||
|
const entryName = row.getAttribute('data-entryname');
|
||||||
|
if (entryName) {
|
||||||
|
entryMap[entryName]?.replaceWith(row);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export function initCommitStatuses() {
|
export function initCommitStatuses() {
|
||||||
$('[data-tippy="commit-statuses"]').each(function () {
|
for (const element of document.querySelectorAll('[data-tippy="commit-statuses"]')) {
|
||||||
const top = $('.repository.file.list').length > 0 || $('.repository.diff').length > 0;
|
const top = document.querySelector('.repository.file.list') || document.querySelector('.repository.diff');
|
||||||
|
|
||||||
createTippy(this, {
|
createTippy(element, {
|
||||||
content: this.nextElementSibling,
|
content: element.nextElementSibling,
|
||||||
placement: top ? 'top-start' : 'bottom-start',
|
placement: top ? 'top-start' : 'bottom-start',
|
||||||
interactive: true,
|
interactive: true,
|
||||||
role: 'dialog',
|
role: 'dialog',
|
||||||
theme: 'box-with-header',
|
theme: 'box-with-header',
|
||||||
});
|
});
|
||||||
});
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue