From b9f6392c1d187641c6dbc2c6ada298fa3a157d8f Mon Sep 17 00:00:00 2001 From: Brian Read Date: Sun, 25 Aug 2024 11:34:57 +0100 Subject: [PATCH] Update flag to use emojii and fix singleton locale --- .../public/css/sme_core.css/90contribs | 16 + .../default/public/js/flag-by-locale.js | 315 +++++++++++++++--- smeserver-manager.spec | 5 +- 3 files changed, 285 insertions(+), 51 deletions(-) diff --git a/root/etc/e-smith/templates/usr/share/smanager/themes/default/public/css/sme_core.css/90contribs b/root/etc/e-smith/templates/usr/share/smanager/themes/default/public/css/sme_core.css/90contribs index f77795d..8023333 100644 --- a/root/etc/e-smith/templates/usr/share/smanager/themes/default/public/css/sme_core.css/90contribs +++ b/root/etc/e-smith/templates/usr/share/smanager/themes/default/public/css/sme_core.css/90contribs @@ -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 } diff --git a/root/usr/share/smanager/themes/default/public/js/flag-by-locale.js b/root/usr/share/smanager/themes/default/public/js/flag-by-locale.js index ca4cd16..32e8df8 100644 --- a/root/usr/share/smanager/themes/default/public/js/flag-by-locale.js +++ b/root/usr/share/smanager/themes/default/public/js/flag-by-locale.js @@ -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; - // 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; - } + // 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 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 + // 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' }; + } - // 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); + // 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 + }; + } - flagIcon.addEventListener('mouseenter', () => { - tooltip.style.display = 'block'; - }); + 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('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 + return languageToCountryMap[language] || null; + } - const countryName = countryNames[countryCode.toLowerCase()] || 'Unknown Country'; // Get the country name - displayFlagIcon(countryCode, countryName); // Display the flag with country name - })(); + 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(); }); diff --git a/smeserver-manager.spec b/smeserver-manager.spec index 45fa702..89f0245 100644 --- a/smeserver-manager.spec +++ b/smeserver-manager.spec @@ -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 11.0.0-18.sme +- Move flag to emojii from downloaded jpg. Fix singleton locale issue[SME: 12706] + * Thu Aug 22 2024 Brian Read 11.0.0-17.sme - Left Align Software Install panels Submit button [SME: 12727]