loading up the forgejo repo on tangled to test page performance
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

Remove jQuery class from the project page (#30183)

- Switched from jQuery class functions to plain JavaScript `classList`
- Tested the edit column modal functionality and it works as before

Signed-off-by: Yarden Shoham <git@yardenshoham.com>
(cherry picked from commit b535c6ca7b9e8c4bcf5637091ee5ad6d9c807c31)

authored by

Yarden Shoham and committed by
Gergely Nagy
702f1126 f8a332c2

+23 -22
+23 -22
web_src/js/features/repo-projects.js
··· 94 94 } 95 95 96 96 export function initRepoProject() { 97 - if (!$('.repository.projects').length) { 97 + if (!document.querySelector('.repository.projects')) { 98 98 return; 99 99 } 100 100 101 101 const _promise = initRepoProjectSortable(); 102 102 103 - $('.edit-project-column-modal').each(function () { 104 - const $projectHeader = $(this).closest('.project-column-header'); 105 - const $projectTitleLabel = $projectHeader.find('.project-column-title'); 106 - const $projectTitleInput = $(this).find('.project-column-title-input'); 107 - const $projectColorInput = $(this).find('#new_project_column_color'); 108 - const $boardColumn = $(this).closest('.project-column'); 103 + for (const modal of document.getElementsByClassName('edit-project-column-modal')) { 104 + const projectHeader = modal.closest('.project-column-header'); 105 + const projectTitleLabel = projectHeader?.querySelector('.project-column-title'); 106 + const projectTitleInput = modal.querySelector('.project-column-title-input'); 107 + const projectColorInput = modal.querySelector('#new_project_column_color'); 108 + const boardColumn = modal.closest('.project-column'); 109 + const bgColor = boardColumn?.style.backgroundColor; 109 110 110 - const bgColor = $boardColumn[0].style.backgroundColor; 111 111 if (bgColor) { 112 - setLabelColor($projectHeader, rgbToHex(bgColor)); 112 + setLabelColor(projectHeader, rgbToHex(bgColor)); 113 113 } 114 114 115 - $(this).find('.edit-project-column-button').on('click', async function (e) { 115 + modal.querySelector('.edit-project-column-button')?.addEventListener('click', async function (e) { 116 116 e.preventDefault(); 117 - 118 117 try { 119 - await PUT($(this).data('url'), { 118 + await PUT(this.getAttribute('data-url'), { 120 119 data: { 121 - title: $projectTitleInput.val(), 122 - color: $projectColorInput.val(), 120 + title: projectTitleInput?.value, 121 + color: projectColorInput?.value, 123 122 }, 124 123 }); 125 124 } catch (error) { 126 125 console.error(error); 127 126 } finally { 128 - $projectTitleLabel.text($projectTitleInput.val()); 129 - $projectTitleInput.closest('form').removeClass('dirty'); 130 - if ($projectColorInput.val()) { 131 - setLabelColor($projectHeader, $projectColorInput.val()); 127 + projectTitleLabel.textContent = projectTitleInput?.value; 128 + projectTitleInput.closest('form')?.classList.remove('dirty'); 129 + if (projectColorInput?.value) { 130 + setLabelColor(projectHeader, projectColorInput.value); 132 131 } 133 - $boardColumn[0].style = `background: ${$projectColorInput.val()} !important`; 132 + boardColumn.style = `background: ${projectColorInput.value} !important`; 134 133 $('.ui.modal').modal('hide'); 135 134 } 136 135 }); 137 - }); 136 + } 138 137 139 138 $('.default-project-column-modal').each(function () { 140 139 const $boardColumn = $(this).closest('.project-column'); ··· 187 186 function setLabelColor(label, color) { 188 187 const {r, g, b} = tinycolor(color).toRgb(); 189 188 if (useLightTextOnBackground(r, g, b)) { 190 - label.removeClass('dark-label').addClass('light-label'); 189 + label.classList.remove('dark-label'); 190 + label.classList.add('light-label'); 191 191 } else { 192 - label.removeClass('light-label').addClass('dark-label'); 192 + label.classList.remove('light-label'); 193 + label.classList.add('dark-label'); 193 194 } 194 195 } 195 196