81 lines
2.6 KiB
JavaScript
81 lines
2.6 KiB
JavaScript
const ComboBoxWidget = (() => {
|
|
let tempIdCounter = -1;
|
|
|
|
function initComboBox(ns) {
|
|
const input = document.querySelector(`#${ns}-input`);
|
|
const list = document.querySelector(`#${ns}-list`);
|
|
const addBtn = document.querySelector(`#${ns}-add`);
|
|
const removeBtn = document.querySelector(`#${ns}-remove`);
|
|
let currentlyEditing = null;
|
|
|
|
if (!input || !list || !addBtn || !removeBtn) {
|
|
console.warn(`ComboBoxWidget: Missing elements for namespace '${ns}'`);
|
|
return;
|
|
}
|
|
|
|
function updateAddButtonIcon() {
|
|
addBtn.innerHTML = currentlyEditing ? icons.edit : icons.add;
|
|
}
|
|
|
|
input.addEventListener('input', () => {
|
|
addBtn.disabled = input.value.trim() === '';
|
|
});
|
|
|
|
list.addEventListener('change', () => {
|
|
const selected = list.selectedOptions;
|
|
removeBtn.disabled = selected.length === 0;
|
|
|
|
if (selected.length === 1) {
|
|
// Load the text into input for editing
|
|
input.value = selected[0].textContent;
|
|
addBtn.disabled = input.value.trim() === '';
|
|
currentlyEditing = selected[0];
|
|
} else {
|
|
input.value = '';
|
|
currentlyEditing = null;
|
|
addBtn.disabled = true;
|
|
}
|
|
|
|
updateAddButtonIcon();
|
|
});
|
|
|
|
addBtn.addEventListener('click', () => {
|
|
const newItem = input.value.trim();
|
|
if (!newItem) return;
|
|
|
|
if (currentlyEditing) {
|
|
currentlyEditing.textContent = newItem;
|
|
currentlyEditing = null;
|
|
} else {
|
|
const option = document.createElement('option');
|
|
option.textContent = newItem;
|
|
option.value = tempIdCounter--;
|
|
list.appendChild(option);
|
|
}
|
|
|
|
input.value = '';
|
|
addBtn.disabled = true;
|
|
removeBtn.disabled = true;
|
|
sortOptions(list);
|
|
});
|
|
|
|
removeBtn.addEventListener('click', () => {
|
|
Array.from(list.selectedOptions).forEach(opt => opt.remove());
|
|
currentlyEditing = null;
|
|
removeBtn.disabled = true;
|
|
input.value = '';
|
|
addBtn.disabled = true;
|
|
});
|
|
}
|
|
|
|
function sortOptions(selectElement) {
|
|
const sorted = Array.from(selectElement.options)
|
|
.sort((a, b) => a.text.localeCompare(b.text));
|
|
selectElement.innerHTML = '';
|
|
sorted.forEach(option => selectElement.appendChild(option));
|
|
}
|
|
|
|
return {
|
|
initComboBox
|
|
};
|
|
})();
|