loading up the forgejo repo on tangled to test page performance
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
+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