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 // Remove the selected style from all items
document.querySelectorAll('.shx-custom-enhanced-dropdown-font-dropdown-content div').forEach(div => { 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 // 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'; 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(() => { setTimeout(() => {
const selectElement = document.querySelector('.shx-custom-enhanced-dropdown-font-hide-dummy-select'); document.getElementById("shx-custom-enhanced-dropdown-font-select-selected-value").innerText = document.querySelector('.shx-custom-enhanced-dropdown-font-hide-dummy-select').value
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
}, 10) }, 10)
}; };
@ -639,8 +630,6 @@
let isInputShxFont = inputID === "shx-font" let isInputShxFont = inputID === "shx-font"
let customDropdownHtml = ""; let customDropdownHtml = "";
console.log("isInputShxFont", isInputShxFont)
if (isInputShxFont) { if (isInputShxFont) {
customDropdownHtml += ` customDropdownHtml += `
<div class="shx-custom-enhanced-dropdown field custom"> <div class="shx-custom-enhanced-dropdown field custom">
@ -670,8 +659,6 @@
optionDisplayName = options[i]; optionDisplayName = options[i];
} }
console.log("optionValue", optionValue, "displ", optionDisplayName)
html += `<option value="${optionValue}" ${inputVal === optionValue ? 'selected' : ''}>${optionDisplayName}</option>`; html += `<option value="${optionValue}" ${inputVal === optionValue ? 'selected' : ''}>${optionDisplayName}</option>`;
if (isInputShxFont) { if (isInputShxFont) {
@ -690,9 +677,7 @@
html += customDropdownHtml html += customDropdownHtml
} }
console.log("customDropdownHtml", customDropdownHtml) loadCustomEnhancedDropdownDefaultSelectedValue()
loadCustomEnhancedDropdownSelectedValue()
return html; return html;
} }