Improvements in the JQuery I18n

NMSCD · May 3, 2024 · c651692 · c651692
1 parent f9f49a5
commit c651692
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 10 deletions.
diff --git a/JS/glyphgeneratorV3.js b/JS/glyphgeneratorV3.js
@@ -51,13 +51,29 @@ export const displayRandomGlyphs = () => {
 window.displayRandomGlyphs = displayRandomGlyphs;
 
 // Function to change language
-window.changeLanguage = function() {
-  var lang = document.getElementById('lang').value;
+window.changeLanguage = () => {
+  const lang = document.getElementById('lang').value;
   i18next.changeLanguage(lang);
   localStorage.setItem('i18nextLng', lang);
   $('body').localize();
 }
 
+// Function to populate the language options
+const populateLanguageOptions = () => {
+  const select = document.getElementById('lang');
+  const languageNames = {
+    en: 'English',
+    es: 'Español'
+    // You can add more languages here
+  };
+  Object.keys(i18next.options.resources).forEach((lang) => {
+    const option = document.createElement('option');
+    option.value = lang;
+    option.text = languageNames[lang];
+    select.add(option);
+  });
+}
+
 // Initialize i18next
 i18next.init({
   lng: localStorage.getItem('i18nextLng') || navigator.language || 'en',
@@ -76,11 +92,18 @@ i18next.init({
         button: "Generar Glifos"
       }
     }
-    // Puedes añadir más idiomas aquí
+    // You can add more languages here
   }
-}, function(err, t) {
-  // Inicializa la biblioteca jquery-i18next
+}, (err, t) => {
+  // Initialize the jquery-i18next library
   jqueryI18next.init(i18next, $);
-  // Traduce todo el body
+  // Translate the entire body
   $('body').localize();
+
+  // This selects the correct language option in the select
+  const lang = i18next.language;
+  document.getElementById('lang').value = lang;
+
+  // This autopopulates the language options in the select
+  populateLanguageOptions();
 });
diff --git a/index.html b/index.html
@@ -14,9 +14,7 @@
 
 <body>
     <select id="lang" onchange="changeLanguage()">
-        <option value="en">English</option>
-        <option value="es">Español</option>
-        <!-- Añade más opciones de idioma aquí -->
+        <!-- Options will be added here with JavaScript -->
     </select>
     <h1 data-i18n="header">Generador de Glifos NMS</h1>
     <button id="generateButton" onclick="displayRandomGlyphs()" data-i18n="button">Generar Glifos</button>

diff --git a/styles/generator.css b/styles/generator.css
@@ -19,7 +19,7 @@ body {
 
 @media (max-width: 600px) {
   .glyph {
-    font-size: 1em;
+    font-size: 1.5em;
   }
 }