loading up the forgejo repo on tangled to test page performance
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>
(cherry picked from commit 5687aca4fc9aef44e1fb5af655b2320d18583dbd)
authored by
Yarden Shoham
silverwind
Giteabot
and committed by
Earl Warren
0cf30810
95024f14
+71
-60
+71
-60
web_src/js/features/repo-legacy.js
+71
-60
web_src/js/features/repo-legacy.js
···
74
74
}
75
75
76
76
if (editMode === 'true') {
77
-
const $form = $('#update_issueref_form');
77
+
const form = document.getElementById('update_issueref_form');
78
78
const params = new URLSearchParams();
79
79
params.append('ref', selectedValue);
80
80
try {
81
-
await POST($form.attr('action'), {data: params});
81
+
await POST(form.getAttribute('action'), {data: params});
82
82
window.location.reload();
83
83
} catch (error) {
84
84
console.error(error);
···
138
138
hasUpdateAction = $listMenu.data('action') === 'update'; // Update the var
139
139
140
140
const clickedItem = this; // eslint-disable-line unicorn/no-this-assignment
141
-
const scope = $(this).attr('data-scope');
141
+
const scope = this.getAttribute('data-scope');
142
142
143
143
$(this).parent().find('.item').each(function () {
144
144
if (scope) {
145
145
// Enable only clicked item for scoped labels
146
-
if ($(this).attr('data-scope') !== scope) {
146
+
if (this.getAttribute('data-scope') !== scope) {
147
147
return true;
148
148
}
149
149
if (this !== clickedItem && !$(this).hasClass('checked')) {
···
319
319
async function onEditContent(event) {
320
320
event.preventDefault();
321
321
322
-
const $segment = $(this).closest('.header').next();
323
-
const $editContentZone = $segment.find('.edit-content-zone');
324
-
const $renderContent = $segment.find('.render-content');
325
-
const $rawContent = $segment.find('.raw-content');
322
+
const segment = this.closest('.header').nextElementSibling;
323
+
const editContentZone = segment.querySelector('.edit-content-zone');
324
+
const renderContent = segment.querySelector('.render-content');
325
+
const rawContent = segment.querySelector('.raw-content');
326
326
327
327
let comboMarkdownEditor;
328
328
329
-
const setupDropzone = async ($dropzone) => {
330
-
if (!$dropzone.length) return null;
329
+
/**
330
+
* @param {HTMLElement} dropzone
331
+
*/
332
+
const setupDropzone = async (dropzone) => {
333
+
if (!dropzone) return null;
331
334
332
335
let disableRemovedfileEvent = false; // when resetting the dropzone (removeAllFiles), disable the "removedfile" event
333
336
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
334
-
const dz = await createDropzone($dropzone[0], {
335
-
url: $dropzone.attr('data-upload-url'),
337
+
const dz = await createDropzone(dropzone, {
338
+
url: dropzone.getAttribute('data-upload-url'),
336
339
headers: {'X-Csrf-Token': csrfToken},
337
-
maxFiles: $dropzone.attr('data-max-file'),
338
-
maxFilesize: $dropzone.attr('data-max-size'),
339
-
acceptedFiles: (['*/*', ''].includes($dropzone.attr('data-accepts'))) ? null : $dropzone.attr('data-accepts'),
340
+
maxFiles: dropzone.getAttribute('data-max-file'),
341
+
maxFilesize: dropzone.getAttribute('data-max-size'),
342
+
acceptedFiles: ['*/*', ''].includes(dropzone.getAttribute('data-accepts')) ? null : dropzone.getAttribute('data-accepts'),
340
343
addRemoveLinks: true,
341
-
dictDefaultMessage: $dropzone.attr('data-default-message'),
342
-
dictInvalidFileType: $dropzone.attr('data-invalid-input-type'),
343
-
dictFileTooBig: $dropzone.attr('data-file-too-big'),
344
-
dictRemoveFile: $dropzone.attr('data-remove-file'),
344
+
dictDefaultMessage: dropzone.getAttribute('data-default-message'),
345
+
dictInvalidFileType: dropzone.getAttribute('data-invalid-input-type'),
346
+
dictFileTooBig: dropzone.getAttribute('data-file-too-big'),
347
+
dictRemoveFile: dropzone.getAttribute('data-remove-file'),
345
348
timeout: 0,
346
349
thumbnailMethod: 'contain',
347
350
thumbnailWidth: 480,
···
350
353
this.on('success', (file, data) => {
351
354
file.uuid = data.uuid;
352
355
fileUuidDict[file.uuid] = {submitted: false};
353
-
const $input = $(`<input id="${data.uuid}" name="files" type="hidden">`).val(data.uuid);
354
-
$dropzone.find('.files').append($input);
356
+
const input = document.createElement('input');
357
+
input.id = data.uuid;
358
+
input.name = 'files';
359
+
input.type = 'hidden';
360
+
input.value = data.uuid;
361
+
dropzone.querySelector('.files').insertAdjacentHTML('beforeend', input.outerHTML);
355
362
});
356
363
this.on('removedfile', async (file) => {
357
364
if (disableRemovedfileEvent) return;
358
-
$(`#${file.uuid}`).remove();
359
-
if ($dropzone.attr('data-remove-url') && !fileUuidDict[file.uuid].submitted) {
365
+
document.getElementById(file.uuid)?.remove();
366
+
if (dropzone.getAttribute('data-remove-url') && !fileUuidDict[file.uuid].submitted) {
360
367
try {
361
-
await POST($dropzone.attr('data-remove-url'), {data: new URLSearchParams({file: file.uuid})});
368
+
await POST(dropzone.getAttribute('data-remove-url'), {data: new URLSearchParams({file: file.uuid})});
362
369
} catch (error) {
363
370
console.error(error);
364
371
}
365
372
}
366
373
});
367
374
this.on('submit', () => {
368
-
$.each(fileUuidDict, (fileUuid) => {
375
+
for (const fileUuid of Object.keys(fileUuidDict)) {
369
376
fileUuidDict[fileUuid].submitted = true;
370
-
});
377
+
}
371
378
});
372
379
this.on('reload', async () => {
373
380
try {
374
-
const response = await GET($editContentZone.attr('data-attachment-url'));
381
+
const response = await GET(editContentZone.getAttribute('data-attachment-url'));
375
382
const data = await response.json();
376
383
// do not trigger the "removedfile" event, otherwise the attachments would be deleted from server
377
384
disableRemovedfileEvent = true;
378
385
dz.removeAllFiles(true);
379
-
$dropzone.find('.files').empty();
386
+
dropzone.querySelector('.files').innerHTML = '';
380
387
fileUuidDict = {};
381
388
disableRemovedfileEvent = false;
382
389
383
390
for (const attachment of data) {
384
-
const imgSrc = `${$dropzone.attr('data-link-url')}/${attachment.uuid}`;
391
+
const imgSrc = `${dropzone.getAttribute('data-link-url')}/${attachment.uuid}`;
385
392
dz.emit('addedfile', attachment);
386
393
dz.emit('thumbnail', attachment, imgSrc);
387
394
dz.emit('complete', attachment);
388
395
dz.files.push(attachment);
389
396
fileUuidDict[attachment.uuid] = {submitted: true};
390
-
$dropzone.find(`img[src='${imgSrc}']`)[0].style.maxWidth = '100%';
391
-
const $input = $(`<input id="${attachment.uuid}" name="files" type="hidden">`).val(attachment.uuid);
392
-
$dropzone.find('.files').append($input);
397
+
dropzone.querySelector(`img[src='${imgSrc}']`).style.maxWidth = '100%';
398
+
const input = document.createElement('input');
399
+
input.id = attachment.uuid;
400
+
input.name = 'files';
401
+
input.type = 'hidden';
402
+
input.value = attachment.uuid;
403
+
dropzone.querySelector('.files').insertAdjacentHTML('beforeend', input.outerHTML);
393
404
}
394
405
} catch (error) {
395
406
console.error(error);
···
402
413
};
403
414
404
415
const cancelAndReset = (dz) => {
405
-
showElem($renderContent);
406
-
hideElem($editContentZone);
416
+
showElem(renderContent);
417
+
hideElem(editContentZone);
407
418
if (dz) {
408
419
dz.emit('reload');
409
420
}
410
421
};
411
422
412
423
const saveAndRefresh = async (dz) => {
413
-
showElem($renderContent);
414
-
hideElem($editContentZone);
424
+
showElem(renderContent);
425
+
hideElem(editContentZone);
415
426
416
427
try {
417
428
const params = new URLSearchParams({
418
429
content: comboMarkdownEditor.value(),
419
-
context: $editContentZone.attr('data-context'),
430
+
context: editContentZone.getAttribute('data-context'),
420
431
});
421
432
for (const file of dz.files) params.append('files[]', file.uuid);
422
433
423
-
const response = await POST($editContentZone.attr('data-update-url'), {data: params});
434
+
const response = await POST(editContentZone.getAttribute('data-update-url'), {data: params});
424
435
const data = await response.json();
425
436
if (!data.content) {
426
-
$renderContent.html($('#no-content').html());
427
-
$rawContent.text('');
437
+
renderContent.innerHTML = document.getElementById('no-content').innerHTML;
438
+
rawContent.textContent = '';
428
439
} else {
429
-
$renderContent.html(data.content);
430
-
$rawContent.text(comboMarkdownEditor.value());
431
-
const $refIssues = $renderContent.find('p .ref-issue');
432
-
attachRefIssueContextPopup($refIssues);
440
+
renderContent.innerHTML = data.content;
441
+
rawContent.textContent = comboMarkdownEditor.value();
442
+
const refIssues = renderContent.querySelectorAll('p .ref-issue');
443
+
attachRefIssueContextPopup(refIssues);
433
444
}
434
-
const $content = $segment;
435
-
if (!$content.find('.dropzone-attachments').length) {
445
+
const content = segment;
446
+
if (!content.querySelector('.dropzone-attachments')) {
436
447
if (data.attachments !== '') {
437
-
$content[0].insertAdjacentHTML('beforeend', data.attachments);
448
+
content.insertAdjacentHTML('beforeend', data.attachments);
438
449
}
439
450
} else if (data.attachments === '') {
440
-
$content.find('.dropzone-attachments').remove();
451
+
content.querySelector('.dropzone-attachments').remove();
441
452
} else {
442
-
$content.find('.dropzone-attachments')[0].outerHTML = data.attachments;
453
+
content.querySelector('.dropzone-attachments').outerHTML = data.attachments;
443
454
}
444
455
if (dz) {
445
456
dz.emit('submit');
···
452
463
}
453
464
};
454
465
455
-
if (!$editContentZone.html()) {
456
-
$editContentZone.html($('#issue-comment-editor-template').html());
457
-
comboMarkdownEditor = await initComboMarkdownEditor($editContentZone.find('.combo-markdown-editor'));
466
+
if (!editContentZone.innerHTML) {
467
+
editContentZone.innerHTML = document.getElementById('issue-comment-editor-template').innerHTML;
468
+
comboMarkdownEditor = await initComboMarkdownEditor(editContentZone.querySelector('.combo-markdown-editor'));
458
469
459
-
const $dropzone = $editContentZone.find('.dropzone');
460
-
const dz = await setupDropzone($dropzone);
461
-
$editContentZone.find('.cancel.button').on('click', (e) => {
470
+
const dropzone = editContentZone.querySelector('.dropzone');
471
+
const dz = await setupDropzone(dropzone);
472
+
editContentZone.querySelector('.cancel.button').addEventListener('click', (e) => {
462
473
e.preventDefault();
463
474
cancelAndReset(dz);
464
475
});
465
-
$editContentZone.find('.save.button').on('click', (e) => {
476
+
editContentZone.querySelector('.save.button').addEventListener('click', (e) => {
466
477
e.preventDefault();
467
478
saveAndRefresh(dz);
468
479
});
···
470
481
$editContentZone.find('.save.button').trigger('click');
471
482
});
472
483
} else {
473
-
comboMarkdownEditor = getComboMarkdownEditor($editContentZone.find('.combo-markdown-editor'));
484
+
comboMarkdownEditor = getComboMarkdownEditor(editContentZone.querySelector('.combo-markdown-editor'));
474
485
}
475
486
476
487
// Show write/preview tab and copy raw content as needed
477
-
showElem($editContentZone);
478
-
hideElem($renderContent);
488
+
showElem(editContentZone);
489
+
hideElem(renderContent);
479
490
if (!comboMarkdownEditor.value()) {
480
-
comboMarkdownEditor.value($rawContent.text());
491
+
comboMarkdownEditor.value(rawContent.textContent);
481
492
}
482
493
comboMarkdownEditor.focus();
483
494
}