Shiloh/githaven
Shiloh/githaven
1
0
Fork 1
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Remove jQuery class from the project page (#30183)

Browse Source 
- 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>
This commit is contained in:
Yarden Shoham 2024-03-30 20:36:28 +03:00 committed by GitHub
parent 66f7d47d2c
commit b535c6ca7b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 23 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
web_src/js/features/repo-projects.js
View File

@ -94,47 +94,46 @@ async function initRepoProjectSortable() {
} }
export function initRepoProject() { export function initRepoProject() {
if (!$('.repository.projects').length) { if (!document.querySelector('.repository.projects')) {
return; return;
} }
const _promise = initRepoProjectSortable(); const _promise = initRepoProjectSortable();
$('.edit-project-column-modal').each(function () { for (const modal of document.getElementsByClassName('edit-project-column-modal')) {
const $projectHeader = $(this).closest('.project-column-header'); const projectHeader = modal.closest('.project-column-header');
const $projectTitleLabel = $projectHeader.find('.project-column-title'); const projectTitleLabel = projectHeader?.querySelector('.project-column-title');
const $projectTitleInput = $(this).find('.project-column-title-input'); const projectTitleInput = modal.querySelector('.project-column-title-input');
const $projectColorInput = $(this).find('#new_project_column_color'); const projectColorInput = modal.querySelector('#new_project_column_color');
const $boardColumn = $(this).closest('.project-column'); const boardColumn = modal.closest('.project-column');
const bgColor = boardColumn?.style.backgroundColor;
const bgColor = $boardColumn[0].style.backgroundColor;
if (bgColor) { if (bgColor) {
setLabelColor($projectHeader, rgbToHex(bgColor)); setLabelColor(projectHeader, rgbToHex(bgColor));
} }
$(this).find('.edit-project-column-button').on('click', async function (e) { modal.querySelector('.edit-project-column-button')?.addEventListener('click', async function (e) {
e.preventDefault(); e.preventDefault();
try { try {
await PUT($(this).data('url'), { await PUT(this.getAttribute('data-url'), {
data: { data: {
title: $projectTitleInput.val(), title: projectTitleInput?.value,
color: $projectColorInput.val(), color: projectColorInput?.value,
}, },
}); });
} catch (error) { } catch (error) {
console.error(error); console.error(error);
} finally { } finally {
$projectTitleLabel.text($projectTitleInput.val()); projectTitleLabel.textContent = projectTitleInput?.value;
$projectTitleInput.closest('form').removeClass('dirty'); projectTitleInput.closest('form')?.classList.remove('dirty');
if ($projectColorInput.val()) { if (projectColorInput?.value) {
setLabelColor($projectHeader, $projectColorInput.val()); setLabelColor(projectHeader, projectColorInput.value);
} }
$boardColumn[0].style = `background: ${$projectColorInput.val()} !important`; boardColumn.style = `background: ${projectColorInput.value} !important`;
$('.ui.modal').modal('hide'); $('.ui.modal').modal('hide');
} }
}); });
}); }
$('.default-project-column-modal').each(function () { $('.default-project-column-modal').each(function () {
const $boardColumn = $(this).closest('.project-column'); const $boardColumn = $(this).closest('.project-column');
@ -187,9 +186,11 @@ export function initRepoProject() {
function setLabelColor(label, color) { function setLabelColor(label, color) {
const {r, g, b} = tinycolor(color).toRgb(); const {r, g, b} = tinycolor(color).toRgb();
if (useLightTextOnBackground(r, g, b)) { if (useLightTextOnBackground(r, g, b)) {
label.removeClass('dark-label').addClass('light-label'); label.classList.remove('dark-label');
label.classList.add('light-label');
} else { } else {
label.removeClass('light-label').addClass('dark-label'); label.classList.remove('light-label');
label.classList.add('dark-label');
} }
} }