88 lines
3.5 KiB
JavaScript
88 lines
3.5 KiB
JavaScript
const dropdownData = [
|
|
{ label: 'Options', placeholder: 'Select an option', description: 'Choose one of the following items', items: ['Item 1', 'Item 2', 'Item 3'] },
|
|
{ placeholder: 'Select without label', items: ['Item A', 'Item B', 'Item C', 'Item D', 'Item E', 'Item F', 'Item G', 'Item H', 'Item I', 'Item J', 'Item K'] },
|
|
{ label: 'Options 2', placeholder: 'Choose an item', description: 'Additional description lorem ipsum', items: ['Option 1', 'Option 2', 'Option 3'] },
|
|
];
|
|
|
|
function createDropdownComponent({ label, placeholder, description, items }) {
|
|
const dropdownContainer = document.createElement('div');
|
|
dropdownContainer.className = 'dropdown-container mb-6';
|
|
|
|
if (label) {
|
|
const labelElement = document.createElement('label');
|
|
labelElement.className = 'dropdown-label block text-gray-700 text-sm font-bold mb-2';
|
|
labelElement.innerText = label;
|
|
dropdownContainer.appendChild(labelElement);
|
|
}
|
|
|
|
const buttonElement = document.createElement('div');
|
|
buttonElement.className = 'dropdown-button';
|
|
buttonElement.innerText = placeholder || 'Select an option';
|
|
dropdownContainer.appendChild(buttonElement);
|
|
|
|
const dropdownList = document.createElement('div');
|
|
dropdownList.className = 'dropdown-list';
|
|
dropdownList.style.display = 'none';
|
|
|
|
if (description) {
|
|
dropdownList.classList.add('dropdown-list-with-description');
|
|
} else {
|
|
dropdownList.classList.add('dropdown-list-no-description');
|
|
}
|
|
|
|
items.forEach(item => {
|
|
const itemElement = document.createElement('div');
|
|
itemElement.className = 'dropdown-item';
|
|
|
|
const itemText = document.createElement('span');
|
|
itemText.className = 'dropdown-item-text';
|
|
itemText.innerText = item;
|
|
|
|
itemElement.appendChild(itemText);
|
|
itemElement.addEventListener('click', () => {
|
|
buttonElement.innerHTML = '';
|
|
buttonElement.className = 'dropdown-button selected-dropdown-item';
|
|
|
|
const selectedItemText = document.createElement('span');
|
|
selectedItemText.className = 'selected-dropdown-item-text';
|
|
selectedItemText.innerText = item;
|
|
buttonElement.appendChild(selectedItemText);
|
|
|
|
dropdownList.style.display = 'none';
|
|
});
|
|
|
|
dropdownList.appendChild(itemElement);
|
|
});
|
|
|
|
buttonElement.addEventListener('click', (event) => {
|
|
event.stopPropagation();
|
|
dropdownList.style.display = dropdownList.style.display === 'none' ? 'flex' : 'none';
|
|
});
|
|
|
|
document.addEventListener('click', (event) => {
|
|
if (!dropdownContainer.contains(event.target)) {
|
|
dropdownList.style.display = 'none';
|
|
}
|
|
});
|
|
|
|
dropdownContainer.appendChild(dropdownList);
|
|
|
|
if (description) {
|
|
const descriptionElement = document.createElement('p');
|
|
descriptionElement.className = 'dropdown-description text-gray-600 text-xs italic mt-2';
|
|
descriptionElement.innerText = description;
|
|
dropdownContainer.appendChild(descriptionElement);
|
|
}
|
|
|
|
return dropdownContainer;
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
console.log("Document loaded, rendering dropdowns...");
|
|
const dropdownContainer = document.getElementById('dropdown-container');
|
|
dropdownData.forEach(dropdownConfig => {
|
|
const dropdownComponent = createDropdownComponent(dropdownConfig);
|
|
dropdownContainer.appendChild(dropdownComponent);
|
|
});
|
|
});
|