Broken commit but moved TitleBar to seporate module.

src/elements/ListItem.ts

@@ -0,0 +1,8 @@
+import { makeElement } from "../htmlUtils";
+
+export function ListItem(children: Element[] | Element): HTMLElement {
+  return makeElement({
+    tag: "li",
+    children: children
+  });
+}

src/elements/TitleBar.ts

@@ -0,0 +1,61 @@
+import { ListItem } from "./ListItem";
+import { Page } from "../types/Page";
+import { changePage } from "../pageUtils";
+import { makeElement } from "../htmlUtils";
+import { pageState } from "../globalPageState";
+import i18next from "i18next";
+
+export function TitleBar(): HTMLElement {
+  return makeElement({
+    id: "titleBar",
+    tag: "nav",
+    class: ["uk-navbar", "uk-navbar-container"],
+    children: [
+      makeElement({
+        tag: "div",
+        class: "uk-navbar-left",
+        children: makeElement({
+          tag: "ul",
+          class: "uk-navbar-nav",
+          children: [
+            ListItem(makeElement({
+              tag: "a",
+              text: i18next.t("home_btn"),
+              onclick: () => { changePage("HOME"); }
+            })),
+            ListItem(makeElement({
+              tag: "a",
+              text: i18next.t("back_btn"),
+              onclick: () => { (pageState.currentPage as Page).goBack(); }
+            })),
+            ListItem(makeElement({
+              tag: "a",
+              text: i18next.t("refresh_btn"),
+              onclick: () => { changePage(pageState.currentPageString); }
+            })),
+          ]
+        })
+      }),
+      makeElement({
+        tag: "div",
+        class: "uk-navbar-right",
+        children: makeElement({
+          tag: "ul",
+          class: "uk-navbar-nav",
+          children: [
+            ListItem(makeElement({
+              tag: "a",
+              text: i18next.t("me_btn"),
+              onclick: () => { changePage("ME"); }
+            }))
+          ]
+        })
+      })
+    ]
+  })
+}
+
+export function reloadTitleBar(): void {
+  document.querySelector(".titleBar").replaceWith(TitleBar());
+}
+

src/main.ts

@@ -10,7 +10,9 @@ import Icons from 'uikit/dist/js/uikit-icons';
 UIkit.use(Icons);
 
 import Prism from "prismjs";
+// Don't Sort These!
 import "prismjs/components/prism-json";
+
 Prism.highlightAll();
 /* eslint-enable */
 
@@ -24,18 +26,11 @@ import { pageState } from "./globalPageState";
 import { playground } from "./playground";
 
 // Translations
-import { Page } from "./types/Page";
 import { formatDistance } from './formatDistance';
 import i18next from 'i18next';
 // @ts-ignore
-import translations from './translations/index.mjs'
+import { TitleBar } from "./elements/TitleBar";
-
+import translations from './translations/index.mjs';
-function ListItem(children: Element[] | Element): HTMLElement {
-  return makeElement({
-    tag: "li",
-    children: children
-  });
-}
 
 declare global {
   interface Window { pageContent: Element; }
@@ -44,52 +39,7 @@ declare global {
 
 function onLoad(): void {
   document.body.innerHTML = "";
-  document.body.appendChild(makeElement({
+  document.body.appendChild(TitleBar());
-    tag: "nav",
-    class: ["uk-navbar", "uk-navbar-container"],
-    children: [
-      makeElement({
-        tag: "div",
-        class: "uk-navbar-left",
-        children: makeElement({
-          tag: "ul",
-          class: "uk-navbar-nav",
-          children: [
-            ListItem(makeElement({
-              tag: "a",
-              text: i18next.t("home_btn"),
-              onclick: () => { changePage("HOME"); }
-            })),
-            ListItem(makeElement({
-              tag: "a",
-              text: i18next.t("back_btn"),
-              onclick: () => { (pageState.currentPage as Page).goBack(); }
-            })),
-            ListItem(makeElement({
-              tag: "a",
-              text: i18next.t("refresh_btn"),
-              onclick: () => { changePage(pageState.currentPageString); }
-            })),
-          ]
-        })
-      }),
-      makeElement({
-        tag: "div",
-        class: "uk-navbar-right",
-        children: makeElement({
-          tag: "ul",
-          class: "uk-navbar-nav",
-          children: [
-            ListItem(makeElement({
-              tag: "a",
-              text: i18next.t("me_btn"),
-              onclick: () => { changePage("ME"); }
-            }))
-          ]
-        })
-      })
-    ]
-  }));
   document.body.appendChild(makeElement({
     tag: "div",
     class: ["uk-container", "uk-container-medium", "uk-align-center"],

src/pages/SetLanguage.ts

@@ -5,6 +5,7 @@ import { makeElement } from "../htmlUtils";
 import { pageState } from "../globalPageState";
 import i18next from 'i18next';
 // @ts-ignore
+import { reloadTitleBar } from "../elements/TitleBar";
 import translations from "../translations/index.mjs";
 
 const languageIDs = Object.getOwnPropertyNames(translations);
@@ -56,9 +57,9 @@ export class SetLanguagePage extends Page {
       pageState.language = language;
       console.log(pageState.language);
       void i18next.changeLanguage(language).then((t) => {
-        changePage("HOME", false);
         pageState.pageDirection = t("language_direction");
-        location.reload();
+        reloadTitleBar();
+        changePage("HOME");
       });
     });
   }

src/pages/Unseal.ts

@@ -136,17 +136,16 @@ export class UnsealPage extends Page {
       ]
     }) as HTMLFormElement;
     this.unsealInputContent.appendChild(this.unsealKeyForm);
-    this.unsealKeyForm.addEventListener("submit", function (e: Event) {
+    this.unsealKeyForm.addEventListener("submit", (e: Event) => {
       e.preventDefault();
-      void (this as UnsealPage).handleKeySubmit();
+      void this.handleKeySubmit();
-    }.bind(this));
+    });
   }
 
   async makeQRInput(): Promise<void> {
-    this.qrScanner = await QRScanner(function (code: string) {
+    this.qrScanner = await QRScanner((code: string) => {
-      (this as UnsealPage).submitKey(code);
+      this.submitKey(code);
-      console.log('decoded qr code:', code)
+    });
-    }.bind(this));
     this.unsealInputContent.appendChild(this.qrScanner);
   }