From f1c4f253c31478ae721b162f9a3cd218493558ce Mon Sep 17 00:00:00 2001
From: jahugg <jan@huggenberg.ch>
Date: Wed, 22 Feb 2023 15:37:24 +0100
Subject: [PATCH] added content handling
---
src/main.js | 136 +++++++++++++++++++++++++++++-----------------------
1 file changed, 77 insertions(+), 59 deletions(-)
diff --git a/src/main.js b/src/main.js
index 4d77150..16d8742 100644
--- a/src/main.js
+++ b/src/main.js
@@ -123,69 +123,87 @@ function init() {
}
// update navigation
-function updateNavigation(object) {
- // update navigation
- const listEl = document.createElement("ul");
-
- // add navigation items
- for (let key in object.submenu) {
- let itemEl = buildNavigationItemEl(object.submenu[key]);
- itemEl.classList.add("forward-btn");
- listEl.appendChild(itemEl);
+function buildPageContents(object) {
+ // handle message content
+ if (object.hasOwnProperty("message")) {
+ // create content element
+ const appEl = document.getElementById("app");
+ const contentEl = document.createElement("div");
+ contentEl.id = "content";
+ contentEl.innerHTML = object.message;
+ appEl.prepend(contentEl);
+ } else {
+ // remove content element
+ const contentEl = document.getElementById("content");
+ if (contentEl) contentEl.remove();
}
- // add "special back" button
- if (object.path !== "/") {
- // determine depth of object
- const segments = object.path.split("/");
- const depth = segments.length - 1;
- let backItemEl;
- if (depth === 1)
- backItemEl = buildNavigationItemEl({
- label: "Close",
- path: "/",
- command: "close",
- });
- else if (depth === 2)
- backItemEl = buildNavigationItemEl({
- label: "Back",
- path: "/menu",
- command: "back",
- });
- else if (depth === 3)
- backItemEl = buildNavigationItemEl({
- label: "Exit",
- path: "/",
- command: "exit",
- });
-
- backItemEl.classList.add("back-btn");
- listEl.appendChild(backItemEl);
- }
+ updateNavigation();
- const navigationEl = document.getElementById("navigation");
- navigationEl.replaceChildren(listEl);
-
- focusNavigationItem(1);
-
- // build navigation item
- function buildNavigationItemEl(item) {
- const itemEl = document.createElement("li");
- itemEl.className = "link";
- const linkEl = document.createElement("a");
- linkEl.href = item.path;
- linkEl.innerHTML = item.label;
- linkEl.dataset.command = item.command;
- itemEl.appendChild(linkEl);
-
- if (item.label.toLowerCase() !== item.command.toLowerCase()) {
- const commandEl = document.createElement("div");
- commandEl.className = "command";
- commandEl.innerHTML = item.command;
- itemEl.appendChild(commandEl);
+ // update navigation
+ function updateNavigation() {
+ const listEl = document.createElement("ul");
+
+ // add navigation items
+ for (let key in object.submenu) {
+ let itemEl = buildNavigationItemEl(object.submenu[key]);
+ itemEl.classList.add("forward-btn");
+ listEl.appendChild(itemEl);
}
- return itemEl;
+ // add "special back" button
+ if (object.path !== "/") {
+ // determine depth of object
+ const segments = object.path.split("/");
+ const depth = segments.length - 1;
+ let backItemEl;
+ if (depth === 1)
+ backItemEl = buildNavigationItemEl({
+ label: "Close",
+ path: "/",
+ command: "close",
+ });
+ else if (depth === 2)
+ backItemEl = buildNavigationItemEl({
+ label: "Back",
+ path: "/menu",
+ command: "back",
+ });
+ else if (depth === 3)
+ backItemEl = buildNavigationItemEl({
+ label: "Exit",
+ path: "/",
+ command: "exit",
+ });
+
+ backItemEl.classList.add("back-btn");
+ listEl.appendChild(backItemEl);
+ }
+
+ const navigationEl = document.getElementById("navigation");
+ navigationEl.replaceChildren(listEl);
+
+ focusNavigationItem(1);
+
+ // build navigation item
+ function buildNavigationItemEl(item) {
+ const itemEl = document.createElement("li");
+ itemEl.className = "link";
+ const linkEl = document.createElement("a");
+ linkEl.href = item.path;
+ linkEl.innerHTML = item.label;
+ linkEl.dataset.command = item.command;
+ itemEl.appendChild(linkEl);
+
+ if (item.label.toLowerCase() !== item.command.toLowerCase()) {
+ const commandEl = document.createElement("div");
+ commandEl.className = "command";
+ commandEl.innerHTML = item.command;
+ itemEl.appendChild(commandEl);
+ }
+
+ return itemEl;
+ }
}
}
@@ -197,7 +215,7 @@ function navigateToPath(path, pushState = true) {
// find object with path
let navObj = helpers.findNestedObject(navigation, "path", path);
if (!navObj) navObj = navigation.home; // fallback to home
- updateNavigation(navObj);
+ buildPageContents(navObj);
// State Object
var stateObj = {
--
GitLab