chaos/VaultUI
1
0
Fork 0
Code Issues Activity

Use tsx syntax in NavBar.

Browse source
This commit is contained in:
Kitteh 2021-05-22 14:26:02 +01:00
parent a7acb3bd23
commit 4d04070446
3 changed files with 65 additions and 77 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

74
src/elements/NavBar.ts
View file

@ -1,74 +0,0 @@
import { ListItem } from "./ListItem";
import { PageRouter } from "z-pagerouter";
import { makeElement } from "z-makeelement";
import i18next from "i18next";
export function NavBar(router: PageRouter): HTMLElement {
return makeElement({
id: "navBar",
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: async () => {
await router.changePage("HOME");
},
}),
),
ListItem(
makeElement({
tag: "a",
text: i18next.t("back_btn"),
onclick: async () => {
await router.goBack();
},
}),
),
ListItem(
makeElement({
tag: "a",
text: i18next.t("refresh_btn"),
onclick: async () => {
await router.refresh();
},
}),
),
],
}),
}),
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: async () => {
await router.changePage("ME");
},
}),
),
],
}),
}),
],
});
}
export function reloadNavBar(router: PageRouter): void {
document.querySelector("#navBar").replaceWith(NavBar(router));
}

62
src/elements/NavBar.tsx Normal file
View file

@ -0,0 +1,62 @@
import { JSX, render } from "preact";
import { PageRouter } from "z-pagerouter";
import i18next from "i18next";
export type NavBarProps = {
router: PageRouter;
};
export function NavBar(props: NavBarProps): JSX.Element {
return (
<nav class="uk-navbar uk-navbar-container">
<div class="uk-navbar-left">
<ul class="uk-navbar-nav">
<li>
<a
onClick={async () => {
await props.router.changePage("HOME");
}}
>
{i18next.t("home_btn")}
</a>
</li>
<li>
<a
onClick={async () => {
await props.router.goBack();
}}
>
{i18next.t("back_btn")}
</a>
</li>
<li>
<a
onClick={async () => {
await props.router.refresh();
}}
>
{i18next.t("refresh_btn")}
</a>
</li>
</ul>
</div>
<div class="uk-navbar-right">
<ul class="uk-navbar-nav">
<li>
<a
onClick={async () => {
await props.router.changePage("ME");
}}
>
{i18next.t("me_btn")}
</a>
</li>
</ul>
</div>
</nav>
);
}
export function reloadNavBar(router: PageRouter): void {
render(<NavBar router={router} />, document.querySelector("#navBarBox"));
}

6
src/main.ts
View file

@ -19,7 +19,6 @@ Prism.highlightAll();
// Actual Imports
import { NavBar } from "./elements/NavBar";
import { PageRouter } from "z-pagerouter";
import { formatDistance } from "./formatDistance";
import { getSealStatus } from "./api/sys/getSealStatus";
@ -27,6 +26,7 @@ import { makeElement } from "z-makeelement";
import { pageList } from "./allPages";
import { pageState } from "./globalPageState";
import { playground } from "./playground";
import { reloadNavBar } from "./elements/NavBar";
import i18next from "i18next";
// @ts-ignore
@ -34,7 +34,7 @@ import translations from "./translations/index.mjs";
async function onLoad(): Promise<void> {
document.body.innerHTML = "";
document.body.appendChild(makeElement({ tag: "div", id: "navBarReplace" }));
document.body.appendChild(makeElement({ tag: "div", id: "navBarBox" }));
document.body.appendChild(
makeElement({
tag: "div",
@ -65,7 +65,7 @@ async function onLoad(): Promise<void> {
document.getElementById("pageTitle"),
);
document.querySelector("#navBarReplace").replaceWith(NavBar(pageRouter));
reloadNavBar(pageRouter);
pageRouter.addEventListener("pageChanged", async function (_) {
pageState.currentPage = await pageRouter.getCurrentPageID();