Jannex
/
SHX-Theme
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

select with images

main
alexanderroese 2024-07-18 07:24:44 +02:00
parent 75ba2814e2
commit 2007f270ef
1 changed files with 16 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
snippets/shx-3d-render-input.liquid
View File

@ -581,6 +581,16 @@
`;
}
function getCustomEnhancedDropdownItemFontAssetUrl(fontName) {
const fontAssetName = `shx-texte-font-${fontName.toLowerCase().split(" ").join("-")}.svg`
// we use shx-texte-font-arial.svg as dummy to get the asset url and then replace it with the right font asset name
const assetBaseUrl = "{{ 'shx-texte-font-arial.svg' | asset_url }}";
const imgSrc = `${assetBaseUrl.replace("shx-texte-font-arial.svg", fontAssetName)}`;
return imgSrc
}
function toggleCustomEnhancedDropdownFont() {
const dropdownContent = document.querySelector("#shx-custom-enhanced-dropdown-font-dropdown-content")
@ -614,7 +624,10 @@
function loadCustomEnhancedDropdownDefaultSelectedValue() {
// timeout is needed because the other elements needs to be added to the dom
setTimeout(() => {
document.getElementById("shx-custom-enhanced-dropdown-font-select-selected-value").innerText = document.querySelector('.shx-custom-enhanced-dropdown-font-hide-dummy-select').value
const customSelectedValue = document.getElementById('shx-custom-enhanced-dropdown-font-select-selected-value')
const selectElement = document.querySelector('.shx-custom-enhanced-dropdown-font-hide-dummy-select');
customSelectedValue.src = getCustomEnhancedDropdownItemFontAssetUrl(selectElement.value)
}, 10)
};
@ -635,7 +648,7 @@
<button class="shx-custom-enhanced-dropdown-button" onclick="toggleCustomEnhancedDropdownFont()">
<div style="display: flex; justify-content: space-between; align-items: center; pointer-events: none">
<div style="top: 2px; width: 35px; display: flex; justify-content: center; align-items: center; position: relative;">
<span id="shx-custom-enhanced-dropdown-font-select-selected-value">lade...</span>
<img id="shx-custom-enhanced-dropdown-font-select-selected-value" alt="lade..."></img>
</div>
<div style="display: flex; align-items: center; gap: 8px">
@ -663,18 +676,9 @@
html += `<option value="${optionValue}" ${inputVal === optionValue ? 'selected' : ''}>${optionDisplayName}</option>`;
if (isInputShxFont) {
const fontAssetName = `shx-texte-font-${optionValue.toLowerCase().split(" ").join("-")}.svg`
const assetBaseUrl = "{{ 'shx-texte-font-arial.svg' | asset_url }}";
const imgSrc = `${assetBaseUrl.replace("shx-texte-font-arial.svg", fontAssetName)}`;
console.log("fontAssetName", assetBaseUrl, fontAssetName, imgSrc)
customDropdownHtml += `
<div data-value="${optionValue}" class="${inputVal === optionValue ? 'shx-custom-enhanced-dropdown-variant-selected' : ''}" onclick="onFontDropdownItemClick(event)" style="height: 60px">
<span>${optionDisplayName}</span>
<img src="${imgSrc}" alt="${optionDisplayName}" style="height: 100%" />
<img src="${getCustomEnhancedDropdownItemFontAssetUrl(optionValue)}" alt="${optionDisplayName}" style="height: 100%" />
</div>
`
}