From 0cf308107e2c529a46a0fd3887c6f87ee0a447c5 Mon Sep 17 00:00:00 2001 From: Yarden Shoham Date: Tue, 26 Mar 2024 21:49:38 +0200 Subject: [PATCH] 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 Co-authored-by: silverwind Co-authored-by: Giteabot (cherry picked from commit 5687aca4fc9aef44e1fb5af655b2320d18583dbd) --- web_src/js/features/repo-legacy.js | 131 ++++++++++++++++------------- 1 file changed, 71 insertions(+), 60 deletions(-) diff --git a/web_src/js/features/repo-legacy.js b/web_src/js/features/repo-legacy.js index 73364cd5b8..ee82b5e4bc 100644 --- a/web_src/js/features/repo-legacy.js +++ b/web_src/js/features/repo-legacy.js @@ -74,11 +74,11 @@ export function initRepoCommentForm() { } if (editMode === 'true') { - const $form = $('#update_issueref_form'); + const form = document.getElementById('update_issueref_form'); const params = new URLSearchParams(); params.append('ref', selectedValue); try { - await POST($form.attr('action'), {data: params}); + await POST(form.getAttribute('action'), {data: params}); window.location.reload(); } catch (error) { console.error(error); @@ -138,12 +138,12 @@ export function initRepoCommentForm() { hasUpdateAction = $listMenu.data('action') === 'update'; // Update the var 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 () { if (scope) { // Enable only clicked item for scoped labels - if ($(this).attr('data-scope') !== scope) { + if (this.getAttribute('data-scope') !== scope) { return true; } if (this !== clickedItem && !$(this).hasClass('checked')) { @@ -319,29 +319,32 @@ export function initRepoCommentForm() { async function onEditContent(event) { event.preventDefault(); - const $segment = $(this).closest('.header').next(); - const $editContentZone = $segment.find('.edit-content-zone'); - const $renderContent = $segment.find('.render-content'); - const $rawContent = $segment.find('.raw-content'); + const segment = this.closest('.header').nextElementSibling; + const editContentZone = segment.querySelector('.edit-content-zone'); + const renderContent = segment.querySelector('.render-content'); + const rawContent = segment.querySelector('.raw-content'); 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 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], { - url: $dropzone.attr('data-upload-url'), + const dz = await createDropzone(dropzone, { + url: dropzone.getAttribute('data-upload-url'), headers: {'X-Csrf-Token': csrfToken}, - maxFiles: $dropzone.attr('data-max-file'), - maxFilesize: $dropzone.attr('data-max-size'), - acceptedFiles: (['*/*', ''].includes($dropzone.attr('data-accepts'))) ? null : $dropzone.attr('data-accepts'), + maxFiles: dropzone.getAttribute('data-max-file'), + maxFilesize: dropzone.getAttribute('data-max-size'), + acceptedFiles: ['*/*', ''].includes(dropzone.getAttribute('data-accepts')) ? null : dropzone.getAttribute('data-accepts'), addRemoveLinks: true, - dictDefaultMessage: $dropzone.attr('data-default-message'), - dictInvalidFileType: $dropzone.attr('data-invalid-input-type'), - dictFileTooBig: $dropzone.attr('data-file-too-big'), - dictRemoveFile: $dropzone.attr('data-remove-file'), + dictDefaultMessage: dropzone.getAttribute('data-default-message'), + dictInvalidFileType: dropzone.getAttribute('data-invalid-input-type'), + dictFileTooBig: dropzone.getAttribute('data-file-too-big'), + dictRemoveFile: dropzone.getAttribute('data-remove-file'), timeout: 0, thumbnailMethod: 'contain', thumbnailWidth: 480, @@ -350,46 +353,54 @@ async function onEditContent(event) { this.on('success', (file, data) => { file.uuid = data.uuid; fileUuidDict[file.uuid] = {submitted: false}; - const $input = $(``).val(data.uuid); - $dropzone.find('.files').append($input); + const input = document.createElement('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) => { if (disableRemovedfileEvent) return; - $(`#${file.uuid}`).remove(); - if ($dropzone.attr('data-remove-url') && !fileUuidDict[file.uuid].submitted) { + document.getElementById(file.uuid)?.remove(); + if (dropzone.getAttribute('data-remove-url') && !fileUuidDict[file.uuid].submitted) { 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) { console.error(error); } } }); this.on('submit', () => { - $.each(fileUuidDict, (fileUuid) => { + for (const fileUuid of Object.keys(fileUuidDict)) { fileUuidDict[fileUuid].submitted = true; - }); + } }); this.on('reload', async () => { try { - const response = await GET($editContentZone.attr('data-attachment-url')); + const response = await GET(editContentZone.getAttribute('data-attachment-url')); const data = await response.json(); // do not trigger the "removedfile" event, otherwise the attachments would be deleted from server disableRemovedfileEvent = true; dz.removeAllFiles(true); - $dropzone.find('.files').empty(); + dropzone.querySelector('.files').innerHTML = ''; fileUuidDict = {}; disableRemovedfileEvent = false; 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('thumbnail', attachment, imgSrc); dz.emit('complete', attachment); dz.files.push(attachment); fileUuidDict[attachment.uuid] = {submitted: true}; - $dropzone.find(`img[src='${imgSrc}']`)[0].style.maxWidth = '100%'; - const $input = $(``).val(attachment.uuid); - $dropzone.find('.files').append($input); + dropzone.querySelector(`img[src='${imgSrc}']`).style.maxWidth = '100%'; + const input = document.createElement('input'); + input.id = attachment.uuid; + input.name = 'files'; + input.type = 'hidden'; + input.value = attachment.uuid; + dropzone.querySelector('.files').insertAdjacentHTML('beforeend', input.outerHTML); } } catch (error) { console.error(error); @@ -402,44 +413,44 @@ async function onEditContent(event) { }; const cancelAndReset = (dz) => { - showElem($renderContent); - hideElem($editContentZone); + showElem(renderContent); + hideElem(editContentZone); if (dz) { dz.emit('reload'); } }; const saveAndRefresh = async (dz) => { - showElem($renderContent); - hideElem($editContentZone); + showElem(renderContent); + hideElem(editContentZone); try { const params = new URLSearchParams({ content: comboMarkdownEditor.value(), - context: $editContentZone.attr('data-context'), + context: editContentZone.getAttribute('data-context'), }); 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(); if (!data.content) { - $renderContent.html($('#no-content').html()); - $rawContent.text(''); + renderContent.innerHTML = document.getElementById('no-content').innerHTML; + rawContent.textContent = ''; } else { - $renderContent.html(data.content); - $rawContent.text(comboMarkdownEditor.value()); - const $refIssues = $renderContent.find('p .ref-issue'); - attachRefIssueContextPopup($refIssues); + renderContent.innerHTML = data.content; + rawContent.textContent = comboMarkdownEditor.value(); + const refIssues = renderContent.querySelectorAll('p .ref-issue'); + attachRefIssueContextPopup(refIssues); } - const $content = $segment; - if (!$content.find('.dropzone-attachments').length) { + const content = segment; + if (!content.querySelector('.dropzone-attachments')) { if (data.attachments !== '') { - $content[0].insertAdjacentHTML('beforeend', data.attachments); + content.insertAdjacentHTML('beforeend', data.attachments); } } else if (data.attachments === '') { - $content.find('.dropzone-attachments').remove(); + content.querySelector('.dropzone-attachments').remove(); } else { - $content.find('.dropzone-attachments')[0].outerHTML = data.attachments; + content.querySelector('.dropzone-attachments').outerHTML = data.attachments; } if (dz) { dz.emit('submit'); @@ -452,17 +463,17 @@ async function onEditContent(event) { } }; - if (!$editContentZone.html()) { - $editContentZone.html($('#issue-comment-editor-template').html()); - comboMarkdownEditor = await initComboMarkdownEditor($editContentZone.find('.combo-markdown-editor')); + if (!editContentZone.innerHTML) { + editContentZone.innerHTML = document.getElementById('issue-comment-editor-template').innerHTML; + comboMarkdownEditor = await initComboMarkdownEditor(editContentZone.querySelector('.combo-markdown-editor')); - const $dropzone = $editContentZone.find('.dropzone'); - const dz = await setupDropzone($dropzone); - $editContentZone.find('.cancel.button').on('click', (e) => { + const dropzone = editContentZone.querySelector('.dropzone'); + const dz = await setupDropzone(dropzone); + editContentZone.querySelector('.cancel.button').addEventListener('click', (e) => { e.preventDefault(); cancelAndReset(dz); }); - $editContentZone.find('.save.button').on('click', (e) => { + editContentZone.querySelector('.save.button').addEventListener('click', (e) => { e.preventDefault(); saveAndRefresh(dz); }); @@ -470,14 +481,14 @@ async function onEditContent(event) { $editContentZone.find('.save.button').trigger('click'); }); } 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 - showElem($editContentZone); - hideElem($renderContent); + showElem(editContentZone); + hideElem(renderContent); if (!comboMarkdownEditor.value()) { - comboMarkdownEditor.value($rawContent.text()); + comboMarkdownEditor.value(rawContent.textContent); } comboMarkdownEditor.focus(); }