Language toggle.

LibraryOfCongress · Jun 21, 2024 · fdf2d1f · fdf2d1f
1 parent 4d75c14
commit fdf2d1f
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 1 deletion.
diff --git a/index.html b/index.html
@@ -44,6 +44,18 @@
   </head>
 
   <body lang="en">
+  <div class="language">
+    <form>
+    <label for="lang-switch">
+        <span lang="es">idioma</span>
+        <span lang="en">language</span>
+    </label>
+    <select id="lang-switch">
+        <option id="select_en" value="en" selected>English</option>
+        <option id="select_es" value="es">Espanol</option>
+    </select>
+</form>
+  </div>
   <div class="content">
     <div class= "article">
       <!-- This is the start of content for our page -->

diff --git a/script.js b/script.js
@@ -52,6 +52,9 @@ window.onload = function(){
   let qlang = urlParams.get('lang');
   if (qlang) lang = qlang;
 
+    document.querySelector("#select_en").selected = (lang =="en");
+    document.querySelector("#select_es").selected = (lang !="en");
+
   document.body.setAttribute("lang", lang);
 
   let qstatic = urlParams.get('static');
@@ -65,6 +68,15 @@ function preload() {
   qSheet = loadJSON("qSheet.json");
 }
 
+document.querySelector("#lang-switch").onchange = function(){
+  switchLang(this.value);
+};
+
+
+function switchLang(_lang) {
+  document.body.setAttribute("lang", _lang);
+  lang = _lang
+}
 
 function setup() {
 
@@ -194,7 +206,6 @@ function doScaleAll() {
 }
 
 function doScale(_cw) {
-  console.log(_cw);
   if (_cw.getAttribute("lang") == lang) {
     let fw = _cw.getBoundingClientRect().width;
     let sc = fw/1920 * illiFactor * 1.25;

diff --git a/style.css b/style.css
@@ -665,3 +665,18 @@ footer {
     margin: 0 6px;
 }
 
+.language {
+  display: block;
+  position: relative;
+  font-size: 14px;
+  color: #588292;
+  margin-left:80vw;
+  margin-top:20px;
+}
+
+select {
+  color: #588292;
+  border-color: #588292;;
+}
+
+