gerlofvanek
8 months ago
parent
926f6e1a76
commit
e6c79a6743
15 changed files with 1625 additions and 6237 deletions
@ -1,70 +1,68 @@ |
|||||||
// Define a cache object to store selected option data
|
document.addEventListener('DOMContentLoaded', () => { |
||||||
const selectCache = {}; |
|
||||||
|
|
||||||
// Function to update the cache with the selected option data for a given select element
|
const selectCache = {}; |
||||||
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 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 setSelectData(select) { |
||||||
|
const selectedOption = select.options[select.selectedIndex]; |
||||||
|
const image = selectedOption.getAttribute('data-image') || ''; |
||||||
|
const name = selectedOption.textContent.trim(); |
||||||
|
select.style.backgroundImage = image ? `url(${image}?${new Date().getTime()})` : ''; |
||||||
|
|
||||||
|
const selectImage = select.nextElementSibling.querySelector('.select-image'); |
||||||
|
if (selectImage) { |
||||||
|
selectImage.src = image; |
||||||
|
} |
||||||
|
|
||||||
function setSelectData(select) { |
const selectNameElement = select.nextElementSibling.querySelector('.select-name'); |
||||||
const selectedOption = select.options[select.selectedIndex]; |
if (selectNameElement) { |
||||||
const image = selectedOption.getAttribute('data-image') || '/static/images/other/coin.png'; // set a default image URL
|
selectNameElement.textContent = name; |
||||||
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); |
|
||||||
} |
|
||||||
|
|
||||||
|
updateSelectCache(select); |
||||||
|
} |
||||||
|
|
||||||
// Function to get the selected option data from cache for a given select element
|
const selectIcons = document.querySelectorAll('.custom-select .select-icon'); |
||||||
function getSelectData(select) { |
const selectImages = document.querySelectorAll('.custom-select .select-image'); |
||||||
return selectCache[select.id] || {}; |
const selectNames = document.querySelectorAll('.custom-select .select-name'); |
||||||
} |
|
||||||
|
|
||||||
// Update all custom select elements on the page
|
selectIcons.forEach(icon => icon.style.display = 'none'); |
||||||
const selects = document.querySelectorAll('.custom-select .select'); |
selectImages.forEach(image => image.style.display = 'none'); |
||||||
selects.forEach((select) => { |
selectNames.forEach(name => name.style.display = 'none'); |
||||||
// 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
|
function setupCustomSelect(select) { |
||||||
select.addEventListener('change', () => { |
const options = select.querySelectorAll('option'); |
||||||
setSelectData(select); |
const selectIcon = select.parentElement.querySelector('.select-icon'); |
||||||
}); |
const selectImage = select.parentElement.querySelector('.select-image'); |
||||||
}); |
|
||||||
|
|
||||||
// Hide the select image and name on page load
|
options.forEach(option => { |
||||||
const selectIcons = document.querySelectorAll('.custom-select .select-icon'); |
const image = option.getAttribute('data-image'); |
||||||
const selectImages = document.querySelectorAll('.custom-select .select-image'); |
if (image) { |
||||||
const selectNames = document.querySelectorAll('.custom-select .select-name'); |
option.style.backgroundImage = `url(${image})`; |
||||||
selectIcons.forEach((icon) => { |
} |
||||||
icon.style.display = 'none'; |
}); |
||||||
}); |
|
||||||
selectImages.forEach((image) => { |
const storedValue = localStorage.getItem(select.name); |
||||||
image.style.display = 'none'; |
if (storedValue && select.value == '-1') { |
||||||
}); |
select.value = storedValue; |
||||||
selectNames.forEach((name) => { |
} |
||||||
name.style.display = 'none'; |
|
||||||
}); |
select.addEventListener('change', () => { |
||||||
|
setSelectData(select); |
||||||
|
localStorage.setItem(select.name, select.value); |
||||||
|
}); |
||||||
|
|
||||||
|
setSelectData(select); |
||||||
|
selectIcon.style.display = 'none'; |
||||||
|
selectImage.style.display = 'none'; |
||||||
|
} |
||||||
|
|
||||||
|
const customSelects = document.querySelectorAll('.custom-select select'); |
||||||
|
customSelects.forEach(setupCustomSelect); |
||||||
|
}); |
||||||
@ -1,60 +0,0 @@ |
|||||||
// Define the function for setting up the custom select element
|
|
||||||
function setupCustomSelect(select) { |
|
||||||
const options = select.querySelectorAll('option'); |
|
||||||
const selectIcon = select.parentElement.querySelector('.select-icon'); |
|
||||||
const selectImage = select.parentElement.querySelector('.select-image'); |
|
||||||
|
|
||||||
// Set the background image for each option that has a data-image attribute
|
|
||||||
options.forEach(option => { |
|
||||||
const image = option.getAttribute('data-image'); |
|
||||||
if (image) { |
|
||||||
option.style.backgroundImage = `url(${image})`; |
|
||||||
} |
|
||||||
}); |
|
||||||
|
|
||||||
if (select.value == '-1') { |
|
||||||
// Set the selected option based on the stored value
|
|
||||||
const storedValue = localStorage.getItem(select.name); |
|
||||||
if (storedValue) { |
|
||||||
select.value = storedValue; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
// Set the selected option image based on the selected value
|
|
||||||
const selectedOption = select.querySelector(`option[value="${select.value}"]`); |
|
||||||
if (selectedOption) { |
|
||||||
const image = selectedOption.getAttribute('data-image'); |
|
||||||
if (image) { |
|
||||||
select.style.backgroundImage = `url(${image})`; |
|
||||||
selectImage.src = image; |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
// Update the select element and image when the user makes a selection
|
|
||||||
select.addEventListener('change', () => { |
|
||||||
const selectedOption = select.options[select.selectedIndex]; |
|
||||||
const image = selectedOption.getAttribute('data-image'); |
|
||||||
if (image) { |
|
||||||
select.style.backgroundImage = `url(${image})`; |
|
||||||
selectImage.src = image; |
|
||||||
} else { |
|
||||||
select.style.backgroundImage = ''; |
|
||||||
selectImage.src = ''; |
|
||||||
} |
|
||||||
|
|
||||||
// Save the selected value to localStorage
|
|
||||||
localStorage.setItem(select.name, select.value); |
|
||||||
}); |
|
||||||
|
|
||||||
// Hide the select icon and image on page load
|
|
||||||
selectIcon.style.display = 'none'; |
|
||||||
selectImage.style.display = 'none'; |
|
||||||
} |
|
||||||
|
|
||||||
// Call the setupCustomSelect function for each custom select element
|
|
||||||
const customSelects = document.querySelectorAll('.custom-select select'); |
|
||||||
customSelects.forEach(select => { |
|
||||||
setupCustomSelect(select); |
|
||||||
}); |
|
||||||
|
|
||||||
|
|
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
Loading…
Reference in new issue