now multi lingual

js/index.js

@@ -1,10 +1,60 @@
+// bulma hamburger menu
+document.addEventListener('DOMContentLoaded', () => {
+  // Get all "navbar-burger" elements
+  const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
+  // Add a click event on each of them
+  $navbarBurgers.forEach(el => {
+    el.addEventListener('click', () => {
+      // Get the target from the "data-target" attribute
+      const target = el.dataset.target;
+      const $target = document.getElementById(target);
+      // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
+      el.classList.toggle('is-active');
+      $target.classList.toggle('is-active');
+    });
+  });
+});
+
+// language selector
+document.getElementById("current-language").addEventListener("click", (e) => {
+    e.preventDefault();
+    document.getElementById("language-dropdown").classList.toggle("is-active");
+});
+
+const i18n = JSON.parse(document.getElementById("i18n-data").textContent);
+const i18nSupported = Object.keys(i18n._flags)
+
+// build language selector
+const langSelector = document.getElementById("language-selector")
+for (const l of i18nSupported) {
+  const a = document.createElement("a");
+  a.classList.add("navbar-item");
+  a.innerHTML = `${i18n._flags[l]} ${l.toUpperCase()}`;
+  a.href = "#";
+  a.addEventListener("click", (e) => {
+    changeLanguage(e.target.textContent.slice(-2).toLowerCase());
+    document.getElementById("language-dropdown").classList.remove("is-active");
+  });
+  langSelector.appendChild(a);
+}
+
+changeLanguage = (l) => {
+  const lang = i18nSupported.includes(l) ? l : "en";
+  document.querySelectorAll("[data-i18n]").forEach(el => {
+    el.innerHTML = i18n[el.dataset.i18n][lang];
+  });
+  document.getElementById("current-language").innerHTML = `${i18n._flags[lang]} ${lang.toUpperCase()}`;
+  console.log(`Switching language to ${lang}`);
+};
+
 saveFormData = () => {
   localStorage.setItem("bezahlbrudiFormData", JSON.stringify({
     name: document.querySelector("#name input").value,
     iban: document.querySelector("#iban input").value.toUpperCase(),
     bic: document.querySelector("#bic input").value.toUpperCase(),
     amount: parseFloat(document.querySelector("#amount input").value).toFixed(2),
-    purpose: document.querySelector("#purpose input").value
+    purpose: document.querySelector("#purpose input").value,
+    lang: document.getElementById("current-language").textContent.slice(-2).toLowerCase()
   }));
 }
 
@@ -224,6 +274,18 @@ if (savedData) {
   document.querySelector("#amount input").value = formData["amount"];
   document.querySelector("#purpose input").value = formData["purpose"];
   document.querySelector("#rememberme").checked = true;
+  changeLanguage(formData["lang"]);
+} else {
+  // get browser language
+  let lang = "en"; // default fallback
+  for (const l of navigator.languages) {
+    const base = l.split("-")[0];
+    if (i18nSupported.includes(base)) {
+      lang = base;
+      break;
+    }
+  }
+  changeLanguage(lang);
 }
 
 // Validate all fields to set css properties