2e542f17a3
Get rid of one more jQuery dependant and have a nicer color picker as well. Now there is only a single global color picker init because that is all that's necessary because the elements are present on the page when the init code runs. The init is slightly weird because the module only takes a selector instead of DOM elements directly. The label modals now also perform form validation because previously it was possible to trigger a 500 error `Color cannot be empty.` by clearing out the color value on labels. <img width="867" alt="Screenshot 2024-03-25 at 00 21 05" src="https://github.com/go-gitea/gitea/assets/115237/71215c39-abb1-4881-b5c1-9954b4a89adb"> <img width="860" alt="Screenshot 2024-03-25 at 00 20 48" src="https://github.com/go-gitea/gitea/assets/115237/a12cb68f-c38b-4433-ba05-53bbb4b1023e"> (cherry picked from commit dd8dde2be89921b2b1497c6cc5eafdde213429cb)
96 lines
3.3 KiB
JavaScript
96 lines
3.3 KiB
JavaScript
import $ from 'jquery';
|
|
|
|
function isExclusiveScopeName(name) {
|
|
return /.*[^/]\/[^/].*/.test(name);
|
|
}
|
|
|
|
function updateExclusiveLabelEdit(form) {
|
|
const nameInput = document.querySelector(`${form} .label-name-input`);
|
|
const exclusiveField = document.querySelector(`${form} .label-exclusive-input-field`);
|
|
const exclusiveCheckbox = document.querySelector(`${form} .label-exclusive-input`);
|
|
const exclusiveWarning = document.querySelector(`${form} .label-exclusive-warning`);
|
|
|
|
if (isExclusiveScopeName(nameInput.value)) {
|
|
exclusiveField?.classList.remove('muted');
|
|
exclusiveField?.removeAttribute('aria-disabled');
|
|
if (exclusiveCheckbox.checked && exclusiveCheckbox.getAttribute('data-exclusive-warn')) {
|
|
exclusiveWarning?.classList.remove('tw-hidden');
|
|
} else {
|
|
exclusiveWarning?.classList.add('tw-hidden');
|
|
}
|
|
} else {
|
|
exclusiveField?.classList.add('muted');
|
|
exclusiveField?.setAttribute('aria-disabled', 'true');
|
|
exclusiveWarning?.classList.add('tw-hidden');
|
|
}
|
|
}
|
|
|
|
export function initCompLabelEdit(selector) {
|
|
if (!$(selector).length) return;
|
|
|
|
// Create label
|
|
$('.new-label.button').on('click', () => {
|
|
updateExclusiveLabelEdit('.new-label');
|
|
$('.new-label.modal').modal({
|
|
onApprove() {
|
|
const form = document.querySelector('.new-label.form');
|
|
if (!form.checkValidity()) {
|
|
form.reportValidity();
|
|
return false;
|
|
}
|
|
$('.new-label.form').trigger('submit');
|
|
},
|
|
}).modal('show');
|
|
return false;
|
|
});
|
|
|
|
// Edit label
|
|
$('.edit-label-button').on('click', function () {
|
|
$('#label-modal-id').val($(this).data('id'));
|
|
|
|
const $nameInput = $('.edit-label .label-name-input');
|
|
$nameInput.val($(this).data('title'));
|
|
|
|
const $isArchivedCheckbox = $('.edit-label .label-is-archived-input');
|
|
$isArchivedCheckbox[0].checked = this.hasAttribute('data-is-archived');
|
|
|
|
const $exclusiveCheckbox = $('.edit-label .label-exclusive-input');
|
|
$exclusiveCheckbox[0].checked = this.hasAttribute('data-exclusive');
|
|
// Warn when label was previously not exclusive and used in issues
|
|
$exclusiveCheckbox.data('exclusive-warn',
|
|
$(this).data('num-issues') > 0 &&
|
|
(!this.hasAttribute('data-exclusive') || !isExclusiveScopeName($nameInput.val())));
|
|
updateExclusiveLabelEdit('.edit-label');
|
|
|
|
$('.edit-label .label-desc-input').val(this.getAttribute('data-description'));
|
|
|
|
const colorInput = document.querySelector('.edit-label .js-color-picker-input input');
|
|
colorInput.value = this.getAttribute('data-color');
|
|
colorInput.dispatchEvent(new Event('input', {bubbles: true}));
|
|
|
|
$('.edit-label.modal').modal({
|
|
onApprove() {
|
|
const form = document.querySelector('.edit-label.form');
|
|
if (!form.checkValidity()) {
|
|
form.reportValidity();
|
|
return false;
|
|
}
|
|
$('.edit-label.form').trigger('submit');
|
|
},
|
|
}).modal('show');
|
|
return false;
|
|
});
|
|
|
|
$('.new-label .label-name-input').on('input', () => {
|
|
updateExclusiveLabelEdit('.new-label');
|
|
});
|
|
$('.new-label .label-exclusive-input').on('change', () => {
|
|
updateExclusiveLabelEdit('.new-label');
|
|
});
|
|
$('.edit-label .label-name-input').on('input', () => {
|
|
updateExclusiveLabelEdit('.edit-label');
|
|
});
|
|
$('.edit-label .label-exclusive-input').on('change', () => {
|
|
updateExclusiveLabelEdit('.edit-label');
|
|
});
|
|
}
|