101 lines
4.5 KiB
JavaScript
101 lines
4.5 KiB
JavaScript
|
document.addEventListener("DOMContentLoaded", function() {
|
||
|
|
var processForm = function(container) {
|
||
|
|
if (container.dataset.processed === 'true') return;
|
||
|
|
container.dataset.processed = 'true';
|
||
|
|
|
||
|
|
// 1. Hide red stars aggressively
|
||
|
|
container.querySelectorAll('.form-required').forEach(function(ast) {
|
||
|
|
ast.remove();
|
||
|
|
});
|
||
|
|
|
||
|
|
// 2. Convert Labels to Placeholders
|
||
|
|
var labels = container.querySelectorAll('label');
|
||
|
|
labels.forEach(function(label) {
|
||
|
|
if (label.closest('.accordion-section') || label.closest('details') || label.closest('.checkbox-group')) return;
|
||
|
|
|
||
|
|
var id = label.getAttribute('for');
|
||
|
|
var input = id ? document.getElementById(id) : null;
|
||
|
|
if (!input) {
|
||
|
|
input = label.nextElementSibling;
|
||
|
|
if (input && input.tagName === 'DIV') input = input.querySelector('input, select, textarea');
|
||
|
|
}
|
||
|
|
|
||
|
|
if (input) {
|
||
|
|
var cleanText = label.innerText.replace(/\*/g, '').replace(/:/g, '').trim();
|
||
|
|
var placeholderText = cleanText;
|
||
|
|
|
||
|
|
if (input.tagName === 'INPUT' || input.tagName === 'TEXTAREA') {
|
||
|
|
if (!(input.type === 'hidden' && input.classList.contains('tag-autocomplete'))) {
|
||
|
|
input.placeholder = placeholderText;
|
||
|
|
} else {
|
||
|
|
input.setAttribute('data-placeholder', placeholderText);
|
||
|
|
}
|
||
|
|
} else if (input.tagName === 'SELECT') {
|
||
|
|
if (input.multiple) {
|
||
|
|
input.setAttribute('data-placeholder', placeholderText);
|
||
|
|
} else {
|
||
|
|
var firstOption = input.options[0];
|
||
|
|
if (firstOption && firstOption.value === "") {
|
||
|
|
firstOption.text = placeholderText;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Hide the label after setting placeholder
|
||
|
|
label.style.display = 'none';
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// 3. Move "Assign to me" (游离的我) inside the Assignee selector
|
||
|
|
var assignMe = container.querySelector('.assign-me');
|
||
|
|
if (assignMe) {
|
||
|
|
var ownerSelect = document.getElementById('form-owner_id');
|
||
|
|
if (ownerSelect && ownerSelect.parentElement) {
|
||
|
|
var wrapper = document.createElement('div');
|
||
|
|
wrapper.className = 'assign-me-wrapper';
|
||
|
|
wrapper.style.position = 'relative';
|
||
|
|
wrapper.style.display = 'block';
|
||
|
|
wrapper.style.width = '100%';
|
||
|
|
|
||
|
|
ownerSelect.parentNode.insertBefore(wrapper, ownerSelect);
|
||
|
|
wrapper.appendChild(ownerSelect);
|
||
|
|
|
||
|
|
// Style the 'me' button
|
||
|
|
assignMe.innerText = 'me';
|
||
|
|
assignMe.style.position = 'absolute';
|
||
|
|
assignMe.style.right = '32px'; // Position it inside the select box, before the dropdown arrow
|
||
|
|
assignMe.style.top = '50%';
|
||
|
|
assignMe.style.transform = 'translateY(-50%)';
|
||
|
|
assignMe.style.zIndex = '10';
|
||
|
|
assignMe.style.margin = '0';
|
||
|
|
assignMe.style.background = '#e6f4ea';
|
||
|
|
assignMe.style.color = '#1e8e3e';
|
||
|
|
assignMe.style.padding = '2px 6px';
|
||
|
|
assignMe.style.borderRadius = '4px';
|
||
|
|
assignMe.style.fontSize = '12px';
|
||
|
|
assignMe.style.fontWeight = 'bold';
|
||
|
|
assignMe.style.textDecoration = 'none';
|
||
|
|
|
||
|
|
wrapper.appendChild(assignMe);
|
||
|
|
|
||
|
|
// Hide the extra "Assign to me" text node if any
|
||
|
|
var small = assignMe.closest('small');
|
||
|
|
if (small && small !== wrapper) {
|
||
|
|
small.childNodes.forEach(function(node) {
|
||
|
|
if (node.nodeType === 3) node.textContent = ''; // Clear text nodes
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
// Initialize already present containers
|
||
|
|
document.querySelectorAll('.custom-task-form-container').forEach(processForm);
|
||
|
|
|
||
|
|
// Watch for newly added containers (e.g. AJAX modals)
|
||
|
|
var observer = new MutationObserver(function(mutations) {
|
||
|
|
document.querySelectorAll('.custom-task-form-container').forEach(processForm);
|
||
|
|
});
|
||
|
|
|
||
|
|
observer.observe(document.body, { childList: true, subtree: true });
|
||
|
|
});
|