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;
|
color: #8ebe43;
|
||||||
background-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
|
HERE
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,63 +1,278 @@
|
|||||||
document.addEventListener('DOMContentLoaded', () => {
|
document.addEventListener('DOMContentLoaded', () => {
|
||||||
const flagContainer = document.getElementById('flag-container');
|
const flagContainer = document.getElementById('flag-container');
|
||||||
|
|
||||||
// Function to get the browser's locale
|
async function getCountryName(countryCode) {
|
||||||
function getBrowserLocale() {
|
try {
|
||||||
return navigator.language || navigator.userLanguage;
|
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 getFlagEmoji(locale) {
|
||||||
function getCountryCodeFromLocale(locale) {
|
// Split the locale to get the language and country code
|
||||||
const localeParts = locale.split('-');
|
const parts = locale.split('-');
|
||||||
return localeParts.length > 1 ? localeParts[1] : localeParts[0];
|
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
|
// If country code is not found, set a fallback output
|
||||||
async function fetchCountryNames() {
|
if (!countryCode) {
|
||||||
const response = await fetch('https://restcountries.com/v3.1/all');
|
const fallback = `? ${locale.toUpperCase()}`; // Just a question mark and the full locale
|
||||||
const countries = await response.json();
|
return { flag: fallback, isUnknown: true, countryName: 'Unknown Country' };
|
||||||
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;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Function to create and display the flag icon
|
// Convert the country code to a flag emoji
|
||||||
function displayFlagIcon(countryCode, countryName) {
|
return {
|
||||||
const flagIcon = document.createElement('span');
|
flag: String.fromCodePoint(...[...countryCode.toUpperCase()].map(char => 0x1F1E6 + char.charCodeAt(0) - 'A'.charCodeAt(0))),
|
||||||
flagIcon.className = `flag-icon flag-icon-${countryCode.toLowerCase()}`;
|
isUnknown: false,
|
||||||
flagIcon.id = 'flag-icon';
|
countryCode: countryCode
|
||||||
flagIcon.title = countryName; // Set the title for the tooltip
|
};
|
||||||
|
|
||||||
// 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);
|
|
||||||
|
|
||||||
flagIcon.addEventListener('mouseenter', () => {
|
|
||||||
tooltip.style.display = 'block';
|
|
||||||
});
|
|
||||||
|
|
||||||
flagIcon.addEventListener('mouseleave', () => {
|
|
||||||
tooltip.style.display = 'none';
|
|
||||||
});
|
|
||||||
*/
|
|
||||||
|
|
||||||
flagContainer.appendChild(flagIcon);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Main logic
|
function getCountryCodeFromLanguage(language) {
|
||||||
(async () => {
|
// Map languages to countries (this is an example, extend as needed)
|
||||||
const locale = getBrowserLocale();
|
const languageToCountryMap = {
|
||||||
const countryCode = getCountryCodeFromLocale(locale);
|
// Add more mappings as needed
|
||||||
const countryNames = await fetchCountryNames(); // Fetch country names
|
"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"
|
||||||
|
|
||||||
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
|
%define name smeserver-manager
|
||||||
Name: %{name}
|
Name: %{name}
|
||||||
%define version 11.0.0
|
%define version 11.0.0
|
||||||
%define release 17
|
%define release 18
|
||||||
Version: %{version}
|
Version: %{version}
|
||||||
Release: %{release}%{?dist}
|
Release: %{release}%{?dist}
|
||||||
License: GPL
|
License: GPL
|
||||||
@ -108,6 +108,9 @@ true
|
|||||||
%defattr(-,root,root)
|
%defattr(-,root,root)
|
||||||
|
|
||||||
%changelog
|
%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
|
* Thu Aug 22 2024 Brian Read <brianr@koozali.org> 11.0.0-17.sme
|
||||||
- Left Align Software Install panels Submit button [SME: 12727]
|
- Left Align Software Install panels Submit button [SME: 12727]
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user