From 0f6014588981e822247798f928e200e1a1787e29 Mon Sep 17 00:00:00 2001
From: jahugg <jan@huggenberg.ch>
Date: Wed, 22 Feb 2023 16:52:10 +0100
Subject: [PATCH] added config controls
---
index.html | 1 +
src/main.js | 44 ++++++++++++++++++++++++++++++++------------
src/styles/main.css | 7 ++++++-
src/styles/main.less | 8 +++++++-
4 files changed, 46 insertions(+), 14 deletions(-)
diff --git a/index.html b/index.html
index 3b6544e..24d9ca3 100644
--- a/index.html
+++ b/index.html
@@ -11,6 +11,7 @@
<body>
<div id="app"></div>
<div id="log"></div>
+ <button type="button" id="reload" onclick="window.location.reload()">Reload</button>
<script type="module" src="/src/main.js"></script>
</body>
</html>
diff --git a/src/main.js b/src/main.js
index 16d8742..5983a4e 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,5 +1,13 @@
import * as helpers from "./modules/helpers.js";
+const config = {
+ controls: {
+ mouse: true,
+ button: true,
+ voice: true,
+ },
+};
+
const navigation = {
home: {
label: "Home",
@@ -118,8 +126,9 @@ function init() {
});
// adding controls
- addMouseControls();
- addButtonControls();
+ if (config.controls.mouse) addMouseControls();
+ if (config.controls.button) addButtonControls();
+ if (config.controls.voice) addVoiceControls();
}
// update navigation
@@ -183,8 +192,6 @@ function buildPageContents(object) {
const navigationEl = document.getElementById("navigation");
navigationEl.replaceChildren(listEl);
- focusNavigationItem(1);
-
// build navigation item
function buildNavigationItemEl(item) {
const itemEl = document.createElement("li");
@@ -253,15 +260,15 @@ function focusNavigationItem(index) {
// focus next navigation item
function focusNextNavigationItem() {
// get currently selected element
- const currentItem = document.querySelector(
+ let currentItem = document.querySelector(
"#navigation > ul > li[data-selected]"
);
- if (currentItem.nextSibling) {
+
+ if (!currentItem) focusNavigationItem(1);
+ else if (currentItem.nextSibling) {
delete currentItem.dataset.selected;
currentItem.nextSibling.dataset.selected = "";
} else focusNavigationItem(1);
-
- printLogMsg("volume up");
}
// focus previous navigation item
@@ -270,7 +277,9 @@ function focusPreviousNavigationItem() {
let currentItem = document.querySelector(
"#navigation > ul > li[data-selected]"
);
- if (currentItem.previousSibling) {
+
+ if (!currentItem) focusNavigationItem(1);
+ else if (currentItem.previousSibling) {
delete currentItem.dataset.selected;
currentItem.previousSibling.dataset.selected = "";
} else {
@@ -279,7 +288,7 @@ function focusPreviousNavigationItem() {
}
}
-// moving down navigation tree
+// moving up navigation tree
function moveUpNavigationLevel() {
const path = window.location.pathname;
let parentPath = path.slice(0, path.lastIndexOf("/"));
@@ -291,8 +300,10 @@ function moveDownNavigationLevel() {
const currentItem = document.querySelector(
"#navigation > ul > li[data-selected]"
);
- const isBackButton = currentItem.classList.contains("back-btn");
- if (!isBackButton) navigateToSelected();
+ if (currentItem) {
+ const isBackButton = currentItem.classList.contains("back-btn");
+ if (!isBackButton) navigateToSelected();
+ }
}
// add mouse controls
@@ -330,6 +341,9 @@ function addButtonControls() {
// on keydown event
function onKeyDown(event) {
+
+ printLogMsg(event.code);
+
// prevent defaults
if (
event.code === "Tab" ||
@@ -365,11 +379,17 @@ function addButtonControls() {
// });
}
+// add voice controls
+// ===================
+function addVoiceControls() {
+}
+
// printing messages on screen for debugging
function printLogMsg(message) {
const logEl = document.getElementById("log");
logEl.innerHTML += `${message}<br>`;
logEl.scrollTop = logEl.scrollHeight;
+ console.debug(message);
}
init();
diff --git a/src/styles/main.css b/src/styles/main.css
index 76589b1..71b885c 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -32,13 +32,18 @@ a {
.link[data-selected] a {
border-color: var(--color-white);
}
+#reload {
+ position: absolute;
+ top: 0;
+ left: 0;
+}
#log {
color: red;
text-align: right;
position: absolute;
top: 0;
right: 0;
- max-height: 40vh;
+ max-height: 20vh;
z-index: 100;
padding: 1em;
overflow-y: scroll;
diff --git a/src/styles/main.less b/src/styles/main.less
index 2dda1a9..527be6e 100644
--- a/src/styles/main.less
+++ b/src/styles/main.less
@@ -41,13 +41,19 @@ a {
}
}
+#reload {
+ position: absolute;
+ top: 0;
+ left: 0;
+}
+
#log {
color: red;
text-align: right;
position: absolute;
top: 0;
right: 0;
- max-height: 40vh;
+ max-height: 20vh;
z-index: 100;
padding: 1em;
overflow-y: scroll;
--
GitLab