Host-customized fork of https://github.com/tecnovert/basicswap/
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

71 lines
2.6 KiB

// Define a cache object to store selected option data
const selectCache = {};
// Function to update the cache with the selected option data for a given select element
function updateSelectCache(select) {
const selectedOption = select.options[select.selectedIndex];
const image = selectedOption.getAttribute('data-image');
const name = selectedOption.textContent.trim();
selectCache[select.id] = { image, name };
}
// Function to set the selected option and associated image and name for a given select element
function setSelectData(select) {
const selectedOption = select.options[select.selectedIndex];
const image = selectedOption.getAttribute('data-image') || 'https://dummyimage.com/20x20/000/fff'; // set a default image URL
const name = selectedOption.textContent.trim();
if (image) {
select.style.backgroundImage = `url(${image})`;
select.nextElementSibling.querySelector('.select-image').src = image;
} else {
select.style.backgroundImage = '';
select.nextElementSibling.querySelector('.select-image').src = '';
}
select.nextElementSibling.querySelector('.select-name').textContent = name;
updateSelectCache(select);
}
// Function to get the selected option data from cache for a given select element
function getSelectData(select) {
return selectCache[select.id] || {};
}
// Update all custom select elements on the page
const selects = document.querySelectorAll('.custom-select .select');
selects.forEach((select) => {
// Set the initial select data based on the cached data (if available) or the selected option (if any)
const cachedData = getSelectData(select);
if (cachedData.image) {
select.style.backgroundImage = `url(${cachedData.image})`;
select.nextElementSibling.querySelector('.select-image').src = cachedData.image;
}
if (cachedData.name) {
select.nextElementSibling.querySelector('.select-name').textContent = cachedData.name;
}
if (select.selectedIndex >= 0) {
setSelectData(select);
}
// Add event listener to update select data when an option is selected
select.addEventListener('change', () => {
setSelectData(select);
});
});
// Hide the select image and name on page load
const selectIcons = document.querySelectorAll('.custom-select .select-icon');
const selectImages = document.querySelectorAll('.custom-select .select-image');
const selectNames = document.querySelectorAll('.custom-select .select-name');
selectIcons.forEach((icon) => {
icon.style.display = 'none';
});
selectImages.forEach((image) => {
image.style.display = 'none';
});
selectNames.forEach((name) => {
name.style.display = 'none';
});