From 4be8a1411f65d747e221ac5fb36eb4ad9585e76b Mon Sep 17 00:00:00 2001
From: Brian Read <brianr@koozali.org>
Date: Sat, 27 Jul 2024 22:28:01 +0100
Subject: [PATCH] Update js code for flag icon

---
 .../default/public/js/flag-by-locale.js       | 63 +++++++++++++++++++
 1 file changed, 63 insertions(+)
 create mode 100644 root/usr/share/smanager/themes/default/public/js/flag-by-locale.js

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
new file mode 100644
index 0000000..ca4cd16
--- /dev/null
+++ b/root/usr/share/smanager/themes/default/public/js/flag-by-locale.js
@@ -0,0 +1,63 @@
+document.addEventListener('DOMContentLoaded', () => {
+  const flagContainer = document.getElementById('flag-container');
+
+  // Function to get the browser's locale
+  function getBrowserLocale() {
+    return navigator.language || navigator.userLanguage;
+  }
+
+  // Function to map locale to country code
+  function getCountryCodeFromLocale(locale) {
+    const localeParts = locale.split('-');
+    return localeParts.length > 1 ? localeParts[1] : localeParts[0];
+  }
+
+  // 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;
+  }
+
+  // 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 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
+  (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
+  })();
+});