Remove jQuery `.attr` from the code comments (#30112)

- Switched from jQuery `attr` to plain javascript `getAttribute`
- Tested the code comments and they work as before

---------

Signed-off-by: Yarden Shoham <git@yardenshoham.com>
Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: Giteabot <teabot@gitea.io>
This commit is contained in:
Yarden Shoham 2024-03-26 21:49:38 +02:00 committed by GitHub
parent a1f11e2e33
commit 5687aca4fc
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 71 additions and 60 deletions

View File

@ -74,11 +74,11 @@ export function initRepoCommentForm() {
} }
if (editMode === 'true') { if (editMode === 'true') {
const $form = $('#update_issueref_form'); const form = document.getElementById('update_issueref_form');
const params = new URLSearchParams(); const params = new URLSearchParams();
params.append('ref', selectedValue); params.append('ref', selectedValue);
try { try {
await POST($form.attr('action'), {data: params}); await POST(form.getAttribute('action'), {data: params});
window.location.reload(); window.location.reload();
} catch (error) { } catch (error) {
console.error(error); console.error(error);
@ -138,12 +138,12 @@ export function initRepoCommentForm() {
hasUpdateAction = $listMenu.data('action') === 'update'; // Update the var hasUpdateAction = $listMenu.data('action') === 'update'; // Update the var
const clickedItem = this; // eslint-disable-line unicorn/no-this-assignment const clickedItem = this; // eslint-disable-line unicorn/no-this-assignment
const scope = $(this).attr('data-scope'); const scope = this.getAttribute('data-scope');
$(this).parent().find('.item').each(function () { $(this).parent().find('.item').each(function () {
if (scope) { if (scope) {
// Enable only clicked item for scoped labels // Enable only clicked item for scoped labels
if ($(this).attr('data-scope') !== scope) { if (this.getAttribute('data-scope') !== scope) {
return true; return true;
} }
if (this !== clickedItem && !$(this).hasClass('checked')) { if (this !== clickedItem && !$(this).hasClass('checked')) {
@ -319,29 +319,32 @@ export function initRepoCommentForm() {
async function onEditContent(event) { async function onEditContent(event) {
event.preventDefault(); event.preventDefault();
const $segment = $(this).closest('.header').next(); const segment = this.closest('.header').nextElementSibling;
const $editContentZone = $segment.find('.edit-content-zone'); const editContentZone = segment.querySelector('.edit-content-zone');
const $renderContent = $segment.find('.render-content'); const renderContent = segment.querySelector('.render-content');
const $rawContent = $segment.find('.raw-content'); const rawContent = segment.querySelector('.raw-content');
let comboMarkdownEditor; let comboMarkdownEditor;
const setupDropzone = async ($dropzone) => { /**
if (!$dropzone.length) return null; * @param {HTMLElement} dropzone
*/
const setupDropzone = async (dropzone) => {
if (!dropzone) return null;
let disableRemovedfileEvent = false; // when resetting the dropzone (removeAllFiles), disable the "removedfile" event let disableRemovedfileEvent = false; // when resetting the dropzone (removeAllFiles), disable the "removedfile" event
let fileUuidDict = {}; // to record: if a comment has been saved, then the uploaded files won't be deleted from server when clicking the Remove in the dropzone let fileUuidDict = {}; // to record: if a comment has been saved, then the uploaded files won't be deleted from server when clicking the Remove in the dropzone
const dz = await createDropzone($dropzone[0], { const dz = await createDropzone(dropzone, {
url: $dropzone.attr('data-upload-url'), url: dropzone.getAttribute('data-upload-url'),
headers: {'X-Csrf-Token': csrfToken}, headers: {'X-Csrf-Token': csrfToken},
maxFiles: $dropzone.attr('data-max-file'), maxFiles: dropzone.getAttribute('data-max-file'),
maxFilesize: $dropzone.attr('data-max-size'), maxFilesize: dropzone.getAttribute('data-max-size'),
acceptedFiles: (['*/*', ''].includes($dropzone.attr('data-accepts'))) ? null : $dropzone.attr('data-accepts'), acceptedFiles: ['*/*', ''].includes(dropzone.getAttribute('data-accepts')) ? null : dropzone.getAttribute('data-accepts'),
addRemoveLinks: true, addRemoveLinks: true,
dictDefaultMessage: $dropzone.attr('data-default-message'), dictDefaultMessage: dropzone.getAttribute('data-default-message'),
dictInvalidFileType: $dropzone.attr('data-invalid-input-type'), dictInvalidFileType: dropzone.getAttribute('data-invalid-input-type'),
dictFileTooBig: $dropzone.attr('data-file-too-big'), dictFileTooBig: dropzone.getAttribute('data-file-too-big'),
dictRemoveFile: $dropzone.attr('data-remove-file'), dictRemoveFile: dropzone.getAttribute('data-remove-file'),
timeout: 0, timeout: 0,
thumbnailMethod: 'contain', thumbnailMethod: 'contain',
thumbnailWidth: 480, thumbnailWidth: 480,
@ -350,46 +353,54 @@ async function onEditContent(event) {
this.on('success', (file, data) => { this.on('success', (file, data) => {
file.uuid = data.uuid; file.uuid = data.uuid;
fileUuidDict[file.uuid] = {submitted: false}; fileUuidDict[file.uuid] = {submitted: false};
const $input = $(`<input id="${data.uuid}" name="files" type="hidden">`).val(data.uuid); const input = document.createElement('input');
$dropzone.find('.files').append($input); input.id = data.uuid;
input.name = 'files';
input.type = 'hidden';
input.value = data.uuid;
dropzone.querySelector('.files').insertAdjacentHTML('beforeend', input.outerHTML);
}); });
this.on('removedfile', async (file) => { this.on('removedfile', async (file) => {
if (disableRemovedfileEvent) return; if (disableRemovedfileEvent) return;
$(`#${file.uuid}`).remove(); document.getElementById(file.uuid)?.remove();
if ($dropzone.attr('data-remove-url') && !fileUuidDict[file.uuid].submitted) { if (dropzone.getAttribute('data-remove-url') && !fileUuidDict[file.uuid].submitted) {
try { try {
await POST($dropzone.attr('data-remove-url'), {data: new URLSearchParams({file: file.uuid})}); await POST(dropzone.getAttribute('data-remove-url'), {data: new URLSearchParams({file: file.uuid})});
} catch (error) { } catch (error) {
console.error(error); console.error(error);
} }
} }
}); });
this.on('submit', () => { this.on('submit', () => {
$.each(fileUuidDict, (fileUuid) => { for (const fileUuid of Object.keys(fileUuidDict)) {
fileUuidDict[fileUuid].submitted = true; fileUuidDict[fileUuid].submitted = true;
}); }
}); });
this.on('reload', async () => { this.on('reload', async () => {
try { try {
const response = await GET($editContentZone.attr('data-attachment-url')); const response = await GET(editContentZone.getAttribute('data-attachment-url'));
const data = await response.json(); const data = await response.json();
// do not trigger the "removedfile" event, otherwise the attachments would be deleted from server // do not trigger the "removedfile" event, otherwise the attachments would be deleted from server
disableRemovedfileEvent = true; disableRemovedfileEvent = true;
dz.removeAllFiles(true); dz.removeAllFiles(true);
$dropzone.find('.files').empty(); dropzone.querySelector('.files').innerHTML = '';
fileUuidDict = {}; fileUuidDict = {};
disableRemovedfileEvent = false; disableRemovedfileEvent = false;
for (const attachment of data) { for (const attachment of data) {
const imgSrc = `${$dropzone.attr('data-link-url')}/${attachment.uuid}`; const imgSrc = `${dropzone.getAttribute('data-link-url')}/${attachment.uuid}`;
dz.emit('addedfile', attachment); dz.emit('addedfile', attachment);
dz.emit('thumbnail', attachment, imgSrc); dz.emit('thumbnail', attachment, imgSrc);
dz.emit('complete', attachment); dz.emit('complete', attachment);
dz.files.push(attachment); dz.files.push(attachment);
fileUuidDict[attachment.uuid] = {submitted: true}; fileUuidDict[attachment.uuid] = {submitted: true};
$dropzone.find(`img[src='${imgSrc}']`)[0].style.maxWidth = '100%'; dropzone.querySelector(`img[src='${imgSrc}']`).style.maxWidth = '100%';
const $input = $(`<input id="${attachment.uuid}" name="files" type="hidden">`).val(attachment.uuid); const input = document.createElement('input');
$dropzone.find('.files').append($input); input.id = attachment.uuid;
input.name = 'files';
input.type = 'hidden';
input.value = attachment.uuid;
dropzone.querySelector('.files').insertAdjacentHTML('beforeend', input.outerHTML);
} }
} catch (error) { } catch (error) {
console.error(error); console.error(error);
@ -402,44 +413,44 @@ async function onEditContent(event) {
}; };
const cancelAndReset = (dz) => { const cancelAndReset = (dz) => {
showElem($renderContent); showElem(renderContent);
hideElem($editContentZone); hideElem(editContentZone);
if (dz) { if (dz) {
dz.emit('reload'); dz.emit('reload');
} }
}; };
const saveAndRefresh = async (dz) => { const saveAndRefresh = async (dz) => {
showElem($renderContent); showElem(renderContent);
hideElem($editContentZone); hideElem(editContentZone);
try { try {
const params = new URLSearchParams({ const params = new URLSearchParams({
content: comboMarkdownEditor.value(), content: comboMarkdownEditor.value(),
context: $editContentZone.attr('data-context'), context: editContentZone.getAttribute('data-context'),
}); });
for (const file of dz.files) params.append('files[]', file.uuid); for (const file of dz.files) params.append('files[]', file.uuid);
const response = await POST($editContentZone.attr('data-update-url'), {data: params}); const response = await POST(editContentZone.getAttribute('data-update-url'), {data: params});
const data = await response.json(); const data = await response.json();
if (!data.content) { if (!data.content) {
$renderContent.html($('#no-content').html()); renderContent.innerHTML = document.getElementById('no-content').innerHTML;
$rawContent.text(''); rawContent.textContent = '';
} else { } else {
$renderContent.html(data.content); renderContent.innerHTML = data.content;
$rawContent.text(comboMarkdownEditor.value()); rawContent.textContent = comboMarkdownEditor.value();
const $refIssues = $renderContent.find('p .ref-issue'); const refIssues = renderContent.querySelectorAll('p .ref-issue');
attachRefIssueContextPopup($refIssues); attachRefIssueContextPopup(refIssues);
} }
const $content = $segment; const content = segment;
if (!$content.find('.dropzone-attachments').length) { if (!content.querySelector('.dropzone-attachments')) {
if (data.attachments !== '') { if (data.attachments !== '') {
$content[0].insertAdjacentHTML('beforeend', data.attachments); content.insertAdjacentHTML('beforeend', data.attachments);
} }
} else if (data.attachments === '') { } else if (data.attachments === '') {
$content.find('.dropzone-attachments').remove(); content.querySelector('.dropzone-attachments').remove();
} else { } else {
$content.find('.dropzone-attachments')[0].outerHTML = data.attachments; content.querySelector('.dropzone-attachments').outerHTML = data.attachments;
} }
if (dz) { if (dz) {
dz.emit('submit'); dz.emit('submit');
@ -452,29 +463,29 @@ async function onEditContent(event) {
} }
}; };
if (!$editContentZone.html()) { if (!editContentZone.innerHTML) {
$editContentZone.html($('#issue-comment-editor-template').html()); editContentZone.innerHTML = document.getElementById('issue-comment-editor-template').innerHTML;
comboMarkdownEditor = await initComboMarkdownEditor($editContentZone.find('.combo-markdown-editor')); comboMarkdownEditor = await initComboMarkdownEditor(editContentZone.querySelector('.combo-markdown-editor'));
const $dropzone = $editContentZone.find('.dropzone'); const dropzone = editContentZone.querySelector('.dropzone');
const dz = await setupDropzone($dropzone); const dz = await setupDropzone(dropzone);
$editContentZone.find('.cancel.button').on('click', (e) => { editContentZone.querySelector('.cancel.button').addEventListener('click', (e) => {
e.preventDefault(); e.preventDefault();
cancelAndReset(dz); cancelAndReset(dz);
}); });
$editContentZone.find('.save.button').on('click', (e) => { editContentZone.querySelector('.save.button').addEventListener('click', (e) => {
e.preventDefault(); e.preventDefault();
saveAndRefresh(dz); saveAndRefresh(dz);
}); });
} else { } else {
comboMarkdownEditor = getComboMarkdownEditor($editContentZone.find('.combo-markdown-editor')); comboMarkdownEditor = getComboMarkdownEditor(editContentZone.querySelector('.combo-markdown-editor'));
} }
// Show write/preview tab and copy raw content as needed // Show write/preview tab and copy raw content as needed
showElem($editContentZone); showElem(editContentZone);
hideElem($renderContent); hideElem(renderContent);
if (!comboMarkdownEditor.value()) { if (!comboMarkdownEditor.value()) {
comboMarkdownEditor.value($rawContent.text()); comboMarkdownEditor.value(rawContent.textContent);
} }
comboMarkdownEditor.focus(); comboMarkdownEditor.focus();
} }