diff --git a/src/elements/ListItem.ts b/src/elements/ListItem.ts new file mode 100644 index 0000000..129055f --- /dev/null +++ b/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 + }); +} diff --git a/src/elements/TitleBar.ts b/src/elements/TitleBar.ts new file mode 100644 index 0000000..27a1ae5 --- /dev/null +++ b/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()); +} + diff --git a/src/main.ts b/src/main.ts index 87fa24c..b088aa2 100644 --- a/src/main.ts +++ b/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' - -function ListItem(children: Element[] | Element): HTMLElement { - return makeElement({ - tag: "li", - children: children - }); -} +import { TitleBar } from "./elements/TitleBar"; +import translations from './translations/index.mjs'; declare global { interface Window { pageContent: Element; } @@ -44,52 +39,7 @@ declare global { function onLoad(): void { document.body.innerHTML = ""; - document.body.appendChild(makeElement({ - 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(TitleBar()); document.body.appendChild(makeElement({ tag: "div", class: ["uk-container", "uk-container-medium", "uk-align-center"], diff --git a/src/pages/SetLanguage.ts b/src/pages/SetLanguage.ts index 8f7084e..cc4419b 100644 --- a/src/pages/SetLanguage.ts +++ b/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"); }); }); } diff --git a/src/pages/Unseal.ts b/src/pages/Unseal.ts index 2c85380..cefe481 100644 --- a/src/pages/Unseal.ts +++ b/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(); - }.bind(this)); + void this.handleKeySubmit(); + }); } async makeQRInput(): Promise { - this.qrScanner = await QRScanner(function (code: string) { - (this as UnsealPage).submitKey(code); - console.log('decoded qr code:', code) - }.bind(this)); + this.qrScanner = await QRScanner((code: string) => { + this.submitKey(code); + }); this.unsealInputContent.appendChild(this.qrScanner); }