Update flag to use emojii and fix singleton locale
This commit is contained in:
parent
659f060eb6
commit
b9f6392c1d
@ -67,5 +67,21 @@ hr.sme-copyrightbar {
|
||||
color: #8ebe43;
|
||||
background-color: #8ebe43;
|
||||
}
|
||||
|
||||
/* flag container no flag */
|
||||
#flag-container span {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.fallback-box {
|
||||
display: inline-block; /* Make it inline-block to fit around the content */
|
||||
border: 2px solid gray; /* Change the border color as desired */
|
||||
padding: 10px; /* Add some padding */
|
||||
border-radius: 10px; /* Round the corners of the box */
|
||||
font-size: 60px; /* Adjust size if needed */
|
||||
margin-top: 10px; /* Add some margin */
|
||||
text-align: center; /* Center text inside the box */
|
||||
}
|
||||
|
||||
HERE
|
||||
}
|
||||
|
||||
@ -1,63 +1,278 @@
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const flagContainer = document.getElementById('flag-container');
|
||||
|
||||
// Function to get the browser's locale
|
||||
function getBrowserLocale() {
|
||||
return navigator.language || navigator.userLanguage;
|
||||
async function getCountryName(countryCode) {
|
||||
try {
|
||||
const response = await fetch(`https://restcountries.com/v3.1/alpha/${countryCode}`);
|
||||
if (!response.ok) throw new Error('Country not found');
|
||||
const data = await response.json();
|
||||
// Return the name in the native language
|
||||
return data[0].name.common;
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
return 'Unknown Country';
|
||||
}
|
||||
}
|
||||
|
||||
// Function to map locale to country code
|
||||
function getCountryCodeFromLocale(locale) {
|
||||
const localeParts = locale.split('-');
|
||||
return localeParts.length > 1 ? localeParts[1] : localeParts[0];
|
||||
function getFlagEmoji(locale) {
|
||||
// Split the locale to get the language and country code
|
||||
const parts = locale.split('-');
|
||||
let countryCode;
|
||||
|
||||
// Handle single subtag (language only) or double subtag (language-country)
|
||||
if (parts.length === 1) {
|
||||
countryCode = getCountryCodeFromLanguage(parts[0]);
|
||||
} else if (parts.length === 2) {
|
||||
countryCode = parts[1].toLowerCase(); // Use the country code
|
||||
}
|
||||
|
||||
// Function to fetch country names from a CDN
|
||||
async function fetchCountryNames() {
|
||||
const response = await fetch('https://restcountries.com/v3.1/all');
|
||||
const countries = await response.json();
|
||||
const countryNames = {};
|
||||
for (const country of countries) {
|
||||
const code = country.cca2.toLowerCase(); // Country code (ISO 3166-1 alpha-2)
|
||||
const name = country.name.common; // Common name of the country
|
||||
countryNames[code] = name;
|
||||
}
|
||||
return countryNames;
|
||||
// If country code is not found, set a fallback output
|
||||
if (!countryCode) {
|
||||
const fallback = `? ${locale.toUpperCase()}`; // Just a question mark and the full locale
|
||||
return { flag: fallback, isUnknown: true, countryName: 'Unknown Country' };
|
||||
}
|
||||
|
||||
// Function to create and display the flag icon
|
||||
function displayFlagIcon(countryCode, countryName) {
|
||||
const flagIcon = document.createElement('span');
|
||||
flagIcon.className = `flag-icon flag-icon-${countryCode.toLowerCase()}`;
|
||||
flagIcon.id = 'flag-icon';
|
||||
flagIcon.title = countryName; // Set the title for the tooltip
|
||||
// Convert the country code to a flag emoji
|
||||
return {
|
||||
flag: String.fromCodePoint(...[...countryCode.toUpperCase()].map(char => 0x1F1E6 + char.charCodeAt(0) - 'A'.charCodeAt(0))),
|
||||
isUnknown: false,
|
||||
countryCode: countryCode
|
||||
};
|
||||
}
|
||||
|
||||
// If you want a custom tooltip instead (uncomment the lines below):
|
||||
/*
|
||||
const tooltip = document.createElement('span');
|
||||
tooltip.className = 'tooltip';
|
||||
tooltip.innerText = countryName;
|
||||
flagIcon.appendChild(tooltip);
|
||||
function getCountryCodeFromLanguage(language) {
|
||||
// Map languages to countries (this is an example, extend as needed)
|
||||
const languageToCountryMap = {
|
||||
// Add more mappings as needed
|
||||
"af": "NA",
|
||||
"agq": "CM",
|
||||
"ak": "GH",
|
||||
"am": "ET",
|
||||
"ar": "01",
|
||||
"as": "IN",
|
||||
"asa": "TZ",
|
||||
"ast": "ES",
|
||||
"az": "rl",
|
||||
"bas": "CM",
|
||||
"be": "BY",
|
||||
"bem": "ZM",
|
||||
"bez": "TZ",
|
||||
"bg": "BG",
|
||||
"bm": "ML",
|
||||
"bn": "BD",
|
||||
"bo": "CN",
|
||||
"br": "FR",
|
||||
"brx": "IN",
|
||||
"bs": "rl",
|
||||
"ca": "AD",
|
||||
"ccp": "BD",
|
||||
"ce": "RU",
|
||||
"cgg": "UG",
|
||||
"chr": "US",
|
||||
"ckb": "IQ",
|
||||
"cs": "CZ",
|
||||
"cy": "GB",
|
||||
"da": "DK",
|
||||
"dav": "KE",
|
||||
"de": "DE",
|
||||
"dje": "NE",
|
||||
"dsb": "DE",
|
||||
"dua": "CM",
|
||||
"dyo": "SN",
|
||||
"dz": "BT",
|
||||
"ebu": "KE",
|
||||
"ee": "GH",
|
||||
"el": "CY",
|
||||
"en": "01",
|
||||
"es": "ES",
|
||||
"et": "EE",
|
||||
"eu": "ES",
|
||||
"ewo": "CM",
|
||||
"fa": "AF",
|
||||
"ff": "CM",
|
||||
"fi": "FI",
|
||||
"fil": "PH",
|
||||
"fo": "FO",
|
||||
"fr": "FR",
|
||||
"fur": "IT",
|
||||
"fy": "NL",
|
||||
"ga": "IE",
|
||||
"gd": "GB",
|
||||
"gl": "ES",
|
||||
"gsw": "CH",
|
||||
"gu": "IN",
|
||||
"guz": "KE",
|
||||
"gv": "IM",
|
||||
"ha": "GH",
|
||||
"haw": "US",
|
||||
"he": "IL",
|
||||
"hi": "IN",
|
||||
"hr": "HR",
|
||||
"hsb": "DE",
|
||||
"hu": "HU",
|
||||
"hy": "AM",
|
||||
"id": "ID",
|
||||
"ig": "NG",
|
||||
"ii": "CN",
|
||||
"is": "IS",
|
||||
"it": "IT",
|
||||
"ja": "JP",
|
||||
"jgo": "CM",
|
||||
"jmc": "TZ",
|
||||
"ka": "GE",
|
||||
"kab": "DZ",
|
||||
"kam": "KE",
|
||||
"kde": "TZ",
|
||||
"kea": "CV",
|
||||
"khq": "ML",
|
||||
"ki": "KE",
|
||||
"kk": "KZ",
|
||||
"kkj": "CM",
|
||||
"kl": "GL",
|
||||
"kln": "KE",
|
||||
"km": "KH",
|
||||
"kn": "IN",
|
||||
"ko": "KP",
|
||||
"kok": "IN",
|
||||
"ks": "IN",
|
||||
"ksb": "TZ",
|
||||
"ksf": "CM",
|
||||
"ksh": "DE",
|
||||
"kw": "GB",
|
||||
"ky": "KG",
|
||||
"lag": "TZ",
|
||||
"lb": "LU",
|
||||
"lg": "UG",
|
||||
"lkt": "US",
|
||||
"ln": "AO",
|
||||
"lo": "LA",
|
||||
"lrc": "IQ",
|
||||
"lt": "LT",
|
||||
"lu": "CD",
|
||||
"luo": "KE",
|
||||
"Luo": "KE",
|
||||
"luy": "KE",
|
||||
"lv": "LV",
|
||||
"mas": "KE",
|
||||
"mer": "KE",
|
||||
"mfe": "MU",
|
||||
"mg": "MG",
|
||||
"mgh": "MZ",
|
||||
"mgo": "CM",
|
||||
"mk": "MK",
|
||||
"ml": "IN",
|
||||
"mn": "MN",
|
||||
"mr": "IN",
|
||||
"ms": "BN",
|
||||
"mt": "MT",
|
||||
"mua": "CM",
|
||||
"my": "MM",
|
||||
"mzn": "IR",
|
||||
"naq": "NA",
|
||||
"nb": "NO",
|
||||
"nd": "ZW",
|
||||
"nds": "DE",
|
||||
"ne": "IN",
|
||||
"nl": "NL",
|
||||
"nmg": "CM",
|
||||
"nn": "NO",
|
||||
"nnh": "CM",
|
||||
"nus": "SS",
|
||||
"nyn": "UG",
|
||||
"om": "ET",
|
||||
"or": "IN",
|
||||
"os": "GE",
|
||||
"pa": "ab",
|
||||
"pl": "PL",
|
||||
"ps": "AF",
|
||||
"pt": "PT",
|
||||
"qu": "BO",
|
||||
"rm": "CH",
|
||||
"rn": "BI",
|
||||
"ro": "RO",
|
||||
"rof": "TZ",
|
||||
"ru": "RU",
|
||||
"rw": "RW",
|
||||
"rwk": "TZ",
|
||||
"sah": "RU",
|
||||
"saq": "KE",
|
||||
"sbp": "TZ",
|
||||
"se": "SE",
|
||||
"seh": "MZ",
|
||||
"ses": "ML",
|
||||
"sg": "CF",
|
||||
"shi": "tn",
|
||||
"si": "LK",
|
||||
"sk": "SK",
|
||||
"sl": "SI",
|
||||
"smn": "FI",
|
||||
"sn": "ZW",
|
||||
"so": "SO",
|
||||
"sq": "AL",
|
||||
"sr": "rl",
|
||||
"sv": "AX",
|
||||
"sw": "CD",
|
||||
"ta": "IN",
|
||||
"te": "IN",
|
||||
"teo": "KE",
|
||||
"tg": "TJ",
|
||||
"th": "TH",
|
||||
"ti": "ER",
|
||||
"to": "TO",
|
||||
"tr": "TR",
|
||||
"tt": "RU",
|
||||
"twq": "NE",
|
||||
"tzm": "MA",
|
||||
"ug": "CN",
|
||||
"uk": "UA",
|
||||
"ur": "IN",
|
||||
"uz": "ab",
|
||||
"vai": "tn",
|
||||
"Vai": "tn",
|
||||
"vi": "VN",
|
||||
"vun": "TZ",
|
||||
"wae": "CH",
|
||||
"wo": "SN",
|
||||
"xog": "UG",
|
||||
"yav": "CM",
|
||||
"yi": "01",
|
||||
"yo": "BJ",
|
||||
"yue": "ns",
|
||||
"zgh": "MA",
|
||||
"zh": "ns",
|
||||
"zu": "ZA"
|
||||
|
||||
flagIcon.addEventListener('mouseenter', () => {
|
||||
tooltip.style.display = 'block';
|
||||
});
|
||||
|
||||
flagIcon.addEventListener('mouseleave', () => {
|
||||
tooltip.style.display = 'none';
|
||||
});
|
||||
*/
|
||||
|
||||
flagContainer.appendChild(flagIcon);
|
||||
}
|
||||
|
||||
// Main logic
|
||||
(async () => {
|
||||
const locale = getBrowserLocale();
|
||||
const countryCode = getCountryCodeFromLocale(locale);
|
||||
const countryNames = await fetchCountryNames(); // Fetch country names
|
||||
|
||||
const countryName = countryNames[countryCode.toLowerCase()] || 'Unknown Country'; // Get the country name
|
||||
displayFlagIcon(countryCode, countryName); // Display the flag with country name
|
||||
})();
|
||||
|
||||
};
|
||||
|
||||
return languageToCountryMap[language] || null;
|
||||
}
|
||||
|
||||
async function displayLocaleAndFlag() {
|
||||
// Get the browser locale
|
||||
const userLocale = navigator.language || navigator.userLanguage;
|
||||
const { flag, isUnknown, countryCode } = getFlagEmoji(userLocale);
|
||||
|
||||
// Display the locale and the corresponding flag (or fallback)
|
||||
//document.getElementById('locale').textContent = `Your Locale: ${userLocale}`;
|
||||
|
||||
if (isUnknown) {
|
||||
const fallbackDiv = document.createElement('div');
|
||||
fallbackDiv.className = 'fallback-box';
|
||||
fallbackDiv.textContent = `? ${userLocale.toUpperCase()}`; // Only show ? and locale code inside the box
|
||||
//document.getElementById('flag-container').textContent = "Flag: ";
|
||||
document.getElementById('flag-container').appendChild(fallbackDiv);
|
||||
// Tooltip for fallback
|
||||
fallbackDiv.title = "Unknown Country"; // Tooltip for fallback
|
||||
} else {
|
||||
const countryName = await getCountryName(countryCode);
|
||||
const flagSpan = document.createElement('span');
|
||||
flagSpan.textContent = flag; // Use flag emoji
|
||||
flagSpan.title = countryName; // Tooltip for the flag in country language
|
||||
//document.getElementById('flag-container').textContent = "Flag: ";
|
||||
document.getElementById('flag-container').appendChild(flagSpan);
|
||||
}
|
||||
}
|
||||
|
||||
displayLocaleAndFlag();
|
||||
});
|
||||
|
||||
@ -2,7 +2,7 @@ Summary: Sme server navigation module : manager 2
|
||||
%define name smeserver-manager
|
||||
Name: %{name}
|
||||
%define version 11.0.0
|
||||
%define release 17
|
||||
%define release 18
|
||||
Version: %{version}
|
||||
Release: %{release}%{?dist}
|
||||
License: GPL
|
||||
@ -108,6 +108,9 @@ true
|
||||
%defattr(-,root,root)
|
||||
|
||||
%changelog
|
||||
* Sun Aug 25 2024 Brian Read <brianr@koozali.org> 11.0.0-18.sme
|
||||
- Move flag to emojii from downloaded jpg. Fix singleton locale issue[SME: 12706]
|
||||
|
||||
* Thu Aug 22 2024 Brian Read <brianr@koozali.org> 11.0.0-17.sme
|
||||
- Left Align Software Install panels Submit button [SME: 12727]
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user