Preview #1 - Preview #2
Use the version below for v1 boards; use this version for v2 and above.
Create a new custom profile field:
Admin CP → Users & Groups → Profile Fields → Add field
Handle: flags
Label: Country
Show in mini profile: Enable
Admin CP → Themes → Board Templates → Below the board
<script>
const countryN = ['None', 'Afghanistan', 'Algeria', 'Argentina', 'Australia', 'Austria', 'Belgium', 'Brazil', 'Canada', 'Chile', 'China', 'Colombia', 'Denmark', 'Egypt', 'Ethiopia', 'France', 'Germany', 'Ghana', 'Greece', 'Hong Kong', 'India', 'Indonesia', 'Iran', 'Iraq', 'Ireland', 'Italy', 'Jamaica', 'Japan', 'Korea', 'Lebanon', 'Malaysia', 'Mexico', 'Morocco', 'Mozambique', 'Nepal', 'Netherlands', 'New Zealand', 'Nigeria', 'Norway', 'Pakistan', 'Peru', 'Philippines', 'Poland', 'Portugal', 'Russia', 'Saudi Arabia', 'South Africa', 'Spain', 'Sudan', 'Sweden', 'Switzerland', 'Taiwan', 'Thailand', 'Turkey', 'Uganda', 'Ukraine', 'United Kingdom', 'United States', 'Venezuela', 'Vietnam', 'Yemen'];
const countryI = ['https://files.jcink.net/uploads/cory//None.png', 'https://files.jcink.net/uploads/cory//Afghanistan.png', 'https://files.jcink.net/uploads/cory//Algeria.png', 'https://files.jcink.net/uploads/cory//Argentina_Flag_32.png', 'https://files.jcink.net/uploads/cory//Australia_Flag_32.png', 'https://files.jcink.net/uploads/cory//Austria_Flag_32.png', 'https://files.jcink.net/uploads/cory//Belgium_Flag_32.png', 'https://files.jcink.net/uploads/cory//Brazil_Flag_32.png', 'https://files.jcink.net/uploads/cory//Canada_Flag_32.png', 'https://files.jcink.net/uploads/cory//Chile_Flag_32.png', 'https://files.jcink.net/uploads/cory//China_Flag_32.png', 'https://files.jcink.net/uploads/cory//Colombia.png', 'https://files.jcink.net/uploads/cory//Denmark_Flag_32.png', 'https://files.jcink.net/uploads/cory//Egypt.png', 'https://files.jcink.net/uploads/cory//Ethiopia.png', 'https://files.jcink.net/uploads/cory//France_Flag_32.png', 'https://files.jcink.net/uploads/cory//Germany_Flag_32.png', 'https://files.jcink.net/uploads/cory//Ghana.png', 'https://files.jcink.net/uploads/cory//Greece_Flag_32.png', 'https://files.jcink.net/uploads/cory//Hong_Kong_Flag_32.png', 'https://files.jcink.net/uploads/cory//India_Flag_32.png', 'https://files.jcink.net/uploads/cory//Indonesia.png', 'https://files.jcink.net/uploads/cory//Iran.png', 'https://files.jcink.net/uploads/cory//Iraq.png', 'https://files.jcink.net/uploads/cory//Ireland_Flag_32.png', 'https://files.jcink.net/uploads/cory//Italy_Flag_32.png', 'https://files.jcink.net/uploads/cory//Jamaica_Flag_32.png', 'https://files.jcink.net/uploads/cory//Japan_Flag_32.png', 'https://files.jcink.net/uploads/cory//Korea_Flag_32.png', 'https://files.jcink.net/uploads/cory//Lebanon_Flag_32.png', 'https://files.jcink.net/uploads/cory//Malaysia_Flag_32.png', 'https://files.jcink.net/uploads/cory//Mexico_Flag_32.png', 'https://files.jcink.net/uploads/cory//Morocco.png', 'https://files.jcink.net/uploads/cory//Mozambique.png', 'https://files.jcink.net/uploads/cory//Nepal.png', 'https://files.jcink.net/uploads/cory//Netherlands_Flag_32.png', 'https://files.jcink.net/uploads/cory//New_Zealand_Flag_32.png', 'https://files.jcink.net/uploads/cory//Nigeria.png', 'https://files.jcink.net/uploads/cory//Norway_Flag_32.png', 'https://files.jcink.net/uploads/cory//Pakistan.png', 'https://files.jcink.net/uploads/cory//Peru.png', 'https://files.jcink.net/uploads/cory//Philippines_Flag_32.png', 'https://files.jcink.net/uploads/cory//Poland_Flag_32.png', 'https://files.jcink.net/uploads/cory//Portugal_Flag_32.png', 'https://files.jcink.net/uploads/cory//Russia_Flag_32.png', 'https://files.jcink.net/uploads/cory//Saudi_Arabia.png', 'https://files.jcink.net/uploads/cory//South_Africa.png', 'https://files.jcink.net/uploads/cory//Spain_Flag_32.png', 'https://files.jcink.net/uploads/cory//Sudan.png', 'https://files.jcink.net/uploads/cory//Sweden_Flag_32.png', 'https://files.jcink.net/uploads/cory//Switzerland_Flag_32.png', 'https://files.jcink.net/uploads/cory//Taiwan_Flag_32.png', 'https://files.jcink.net/uploads/cory//Thailand_Flag_32.png', 'https://files.jcink.net/uploads/cory//Turkey_Flag_32.png', 'https://files.jcink.net/uploads/cory//Uganda.png', 'https://files.jcink.net/uploads/cory//Ukraine.png', 'https://files.jcink.net/uploads/cory//United_Kingdom_flag_32.png', 'https://files.jcink.net/uploads/cory//United_States.png', 'https://files.jcink.net/uploads/cory//Venezuela_Flag_32.png', 'https://files.jcink.net/uploads/cory//Vietnam_Flag_32.png', 'https://files.jcink.net/uploads/cory//Yemen.png'];
const label = document.querySelectorAll('label.input-label');
let value;
label.forEach(element => {
if (element && element.innerText.includes('Country')) {
element.parentElement.nextElementSibling.querySelector('input').style.display = 'none';
const div = document.createElement('div');
div.style.display = 'flex';
div.style.flexWrap = 'wrap';
div.style.gap = '10px';
for (let i = 0; i < countryN.length; i++) {
const img = document.createElement('img');
img.src = countryI[i];
img.alt = countryN[i];
img.title = countryN[i];
img.className = 'country-flag';
img.width = '32';
img.height = '32';
img.style.cursor = 'pointer';
img.style.opacity = '0.5';
element.parentElement.nextElementSibling.appendChild(div);
div.appendChild(img);
}
value = element.parentElement.nextElementSibling.querySelector('input').value;
}
});
const flag = document.querySelectorAll('img.country-flag');
flag.forEach(element => {
if (element.title === value) {
element.style.opacity = '1';
}
element.addEventListener('click', function() {
flag.forEach(allElements => {
allElements.style.opacity = '0.5';
});
const title = element.title;
element.parentElement.parentElement.querySelector('input').value = title;
element.style.opacity = '1';
});
});
const about = document.querySelectorAll('div.profile-about__item');
about.forEach(element => {
if (element.querySelector('dt').innerText === 'Country') {
const myCountry = element.querySelector('dd').innerText;
for (let i = 0; i < countryN.length; i++) {
if (myCountry === countryN[i]) {
element.querySelector('dd').innerHTML = `<img src="${countryI[i]}" title="${countryN[i]}" alt="${countryN[i]}">`;
}
}
}
});
const mini = document.querySelectorAll('div.mini-profile--custom dt');
mini.forEach(element => {
if (element.innerText === 'Country') {
const myCountry = element.nextElementSibling.innerText;
for (let i = 0; i < countryN.length; i++) {
if (myCountry === countryN[i]) {
element.nextElementSibling.innerHTML = `<img src="${countryI[i]}" title="${countryN[i]}" alt="${countryN[i]}">`;
}
}
}
});
</script>Last edited by Cory
Reacted with 'Like':
empire
👍
1
