select with images
parent
4149a28669
commit
078452474c
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue