select with images

main
alexanderroese 2024-07-17 22:45:03 +02:00
parent 4149a28669
commit 078452474c
1 changed files with 6 additions and 21 deletions

View File

@ -604,28 +604,19 @@
// Remove the selected style from all items
document.querySelectorAll('.shx-custom-enhanced-dropdown-font-dropdown-content div').forEach(div => {
div.classList.remove('shx-custom-enhanced-dropdown-font-selected');
div.classList.remove('shx-custom-enhanced-dropdown-variant-selected');
});
// Add the selected style to the clicked item
event.currentTarget.classList.add('shx-custom-enhanced-dropdown-font-selected');
event.currentTarget.classList.add('shx-custom-enhanced-dropdown-variant-selected');
document.getElementById("shx-custom-enhanced-dropdown-font-dropdown-content").style.display = 'none';
// const currentTargetImage = event.currentTarget.querySelector("img")
// if (currentTargetImage !== null && currentTargetImage.src !== null) {
//document.getElementById("shx-custom-enhanced-dropdown-variant-selected-image").src = event.currentTarget.querySelector("img").src
// }
}
function loadCustomEnhancedDropdownSelectedValue() {
function loadCustomEnhancedDropdownDefaultSelectedValue() {
// timeout is needed because the other elements needs to be added to the dom
setTimeout(() => {
const selectElement = document.querySelector('.shx-custom-enhanced-dropdown-font-hide-dummy-select');
console.log("selectElement", selectElement, "span", document.getElementById("shx-custom-enhanced-dropdown-font-select-selected-value"))
document.getElementById("shx-custom-enhanced-dropdown-font-select-selected-value").innerText = selectElement.value
document.getElementById("shx-custom-enhanced-dropdown-font-select-selected-value").innerText = document.querySelector('.shx-custom-enhanced-dropdown-font-hide-dummy-select').value
}, 10)
};
@ -639,8 +630,6 @@
let isInputShxFont = inputID === "shx-font"
let customDropdownHtml = "";
console.log("isInputShxFont", isInputShxFont)
if (isInputShxFont) {
customDropdownHtml += `
<div class="shx-custom-enhanced-dropdown field custom">
@ -670,8 +659,6 @@
optionDisplayName = options[i];
}
console.log("optionValue", optionValue, "displ", optionDisplayName)
html += `<option value="${optionValue}" ${inputVal === optionValue ? 'selected' : ''}>${optionDisplayName}</option>`;
if (isInputShxFont) {
@ -690,9 +677,7 @@
html += customDropdownHtml
}
console.log("customDropdownHtml", customDropdownHtml)
loadCustomEnhancedDropdownSelectedValue()
loadCustomEnhancedDropdownDefaultSelectedValue()
return html;
}