feat: Add an 'active' class to the active language in the language sw…

…itcher.
IMAGINARY · Aug 25, 2024 · 4bd50ea · 4bd50ea
1 parent 986ca4a
commit 4bd50ea
Show file tree

Hide file tree

Showing 8 changed files with 22 additions and 6 deletions.
diff --git a/assets/exhibit.094ff02a1e4de681e84f.js b/assets/exhibit.094ff02a1e4de681e84f.js
diff --git a/...hibit.7dae0aff2af31afd4249.js.LICENSE.txt → ...hibit.094ff02a1e4de681e84f.js.LICENSE.txt b/...hibit.7dae0aff2af31afd4249.js.LICENSE.txt → ...hibit.094ff02a1e4de681e84f.js.LICENSE.txt
diff --git a/assets/exhibit.094ff02a1e4de681e84f.js.map b/assets/exhibit.094ff02a1e4de681e84f.js.map
diff --git a/assets/exhibit.7dae0aff2af31afd4249.js b/assets/exhibit.7dae0aff2af31afd4249.js
diff --git a/assets/exhibit.7dae0aff2af31afd4249.js.map b/assets/exhibit.7dae0aff2af31afd4249.js.map
diff --git a/exhibit.html b/exhibit.html
@@ -1 +1 @@
-<!doctype html><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><head><link rel="stylesheet" href="vendor/bootstrap-4.6.0/css/bootstrap.min.css"><link rel="preconnect" href="https://fonts.gstatic.com"><link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;700&display=swap" rel="stylesheet"><script src="vendor/jquery-3.5.1/jquery-3.5.1.slim.min.js"></script><script src="vendor/popper-1.16.1/popper.min.js"></script><script src="vendor/bootstrap-4.6.0/js/bootstrap.min.js"></script><script src="vendor/pixijs-6.0.2/pixi.min.js"></script><script src="vendor/i18n4js-1.3.1/i18n4js-1.3.1.min.js"></script><title>Reinforcement Learning</title><script defer="defer" src="assets/exhibit.7dae0aff2af31afd4249.js"></script><link href="assets/exhibit.bb20d4167e91ddf0d89c.css" rel="stylesheet"></head><body><div class="rl2-exhibit" data-component="rl2-exhibit"><div id="pixi-app-container"></div><div id="panel-1" class="panel panel-title"><div class="panel-text" data-i18n-text="panel-1"></div></div><div id="panel-2" class="panel panel-sm"><div class="panel-text" data-i18n-text="panel-2"></div><div id="rewards-bar"></div><div id="rewards-ui"></div></div><div id="panel-3" class="panel panel-sm"><div class="panel-text" data-i18n-text="panel-3"></div><div id="explore-exploit-ui"></div></div><div id="panel-4" class="panel panel-lg"><div class="panel-text" data-i18n-text="panel-4"></div><div id="training-ui"></div></div><div id="lang-switcher-container"></div></div></body>
+<!doctype html><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><head><link rel="stylesheet" href="vendor/bootstrap-4.6.0/css/bootstrap.min.css"><link rel="preconnect" href="https://fonts.gstatic.com"><link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;700&display=swap" rel="stylesheet"><script src="vendor/jquery-3.5.1/jquery-3.5.1.slim.min.js"></script><script src="vendor/popper-1.16.1/popper.min.js"></script><script src="vendor/bootstrap-4.6.0/js/bootstrap.min.js"></script><script src="vendor/pixijs-6.0.2/pixi.min.js"></script><script src="vendor/i18n4js-1.3.1/i18n4js-1.3.1.min.js"></script><title>Reinforcement Learning</title><script defer="defer" src="assets/exhibit.094ff02a1e4de681e84f.js"></script><link href="assets/exhibit.bb20d4167e91ddf0d89c.css" rel="stylesheet"></head><body><div class="rl2-exhibit" data-component="rl2-exhibit"><div id="pixi-app-container"></div><div id="panel-1" class="panel panel-title"><div class="panel-text" data-i18n-text="panel-1"></div></div><div id="panel-2" class="panel panel-sm"><div class="panel-text" data-i18n-text="panel-2"></div><div id="rewards-bar"></div><div id="rewards-ui"></div></div><div id="panel-3" class="panel panel-sm"><div class="panel-text" data-i18n-text="panel-3"></div><div id="explore-exploit-ui"></div></div><div id="panel-4" class="panel panel-lg"><div class="panel-text" data-i18n-text="panel-4"></div><div id="training-ui"></div></div><div id="lang-switcher-container"></div></div></body>
diff --git a/src/js/run-exhibit.js b/src/js/run-exhibit.js
@@ -68,8 +68,12 @@ async function runExhibit(initCallback) {
       const langSwitcher = new LangSwitcher(
         container.find('#lang-switcher-container')[0],
         { languages: config.languages },
-        (code) => I18n.setLanguage(code)
+        (code) => {
+          I18n.setLanguage(code);
+          langSwitcher.setActiveLanguage(code);
+        }
       );
+      langSwitcher.setActiveLanguage(I18n.getLanguage());
     }
 
     disableContextMenuOnLongTouch();

diff --git a/src/js/view-html/lang-switcher.js b/src/js/view-html/lang-switcher.js
@@ -4,6 +4,7 @@ class LangSwitcher {
     this.container = container;
     this.config = config;
     this.langChangeCallback = langChangeCallback;
+    this.menuItems = {};
 
     this.render();
   }
@@ -37,6 +38,7 @@ class LangSwitcher {
       });
       item.appendChild(link);
       this.menu.appendChild(item);
+      this.menuItems[code] = item;
     });
 
     this.container.appendChild(this.element);
@@ -65,6 +67,16 @@ class LangSwitcher {
     this.menuVisible = false;
     this.menu.classList.remove('visible');
   }
+
+  setActiveLanguage(code) {
+    Object.entries(this.menuItems).forEach(([langCode, item]) => {
+      if (langCode === code) {
+        item.classList.add('active');
+      } else {
+        item.classList.remove('active');
+      }
+    });
+  }
 }
 
 module.exports = LangSwitcher;