chaos/VaultUI
1
0
Fork 0
Code Issues Activity

Make the main UI with makeElement.

Browse source
This commit is contained in:
Kitteh 2021-04-17 10:56:44 +01:00
parent 6baec10b45
commit 1f6ed6d31e
1 changed files with 59 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

78
src/main.js
View file

@ -15,6 +15,7 @@ import {
renderPage, renderPage,
} from "./pageUtils.js"; } from "./pageUtils.js";
import { PageState } from "./PageState.js"; import { PageState } from "./PageState.js";
import { makeElement } from "./htmlUtils.js";
import { import {
HomePage, HomePage,
@ -61,28 +62,67 @@ const pages = {
var pageState = new PageState(); var pageState = new PageState();
window.pageState = pageState; window.pageState = pageState;
window.pages = pages; window.pages = pages;
// when making static html, make changePage global so it can be used with onclick
window.changePage = changePage; window.changePage = changePage;
function ListItem(children) {
return makeElement({
tag: "li",
children: children
});
}
document.addEventListener('DOMContentLoaded', function () { document.addEventListener('DOMContentLoaded', function () {
document.body.innerHTML += ` document.body.innerHTML = "";
<nav class="uk-navbar uk-navbar-container"> document.body.appendChild(makeElement({
<div class="uk-navbar-left"> tag: "nav",
<ul class="uk-navbar-nav"> class: ["uk-navbar", "uk-navbar-container"],
<li><a onclick="changePage(pages.HOME);">Home</a></li> children: makeElement({
<li><a onclick="pageState.currentPage.goBack();">Back</a></li> tag: "div",
<li class="uk-active"><a onclick="changePage(pageState.currentPage)">Refresh</a></li> class: "uk-navbar-left",
</ul> children: makeElement({
</div> tag: "ul",
</nav> class: "uk-navbar-nav",
<div class="uk-container uk-container-medium uk-align-center"> children: [
<div class="uk-card uk-card-body"> ListItem(makeElement({
<h3 class="uk-card-title" id="pageTitle">Title</h3> tag: "a",
<div id="pageContent"> text: "Home",
</div> onclick: _ => { changePage(pages.HOME); }
</div> })),
</div> ListItem(makeElement({
`; tag: "a",
text: "Back",
onclick: _ => { pageState.currentPage.goBack(); }
})),
ListItem(makeElement({
tag: "a",
text: "Refresh",
onclick: _ => { changePage(pageState.currentPage); }
})),
]
})
})
}));
document.body.appendChild(makeElement({
tag: "div",
class: ["uk-container", "uk-container-medium", "uk-align-center"],
children: makeElement({
tag: "div",
class: ["uk-card", "uk-card-body"],
children: [
makeElement({
tag: "h3",
class: "uk-card-title",
id: "pageTitle",
text: "Title"
}),
makeElement({
tag: "div",
id: "pageContent"
})
]
})
}));
window.pageContent = document.querySelector("#pageContent"); window.pageContent = document.querySelector("#pageContent");
renderPage(); renderPage();