From 4b01698e35c53ab7ed8744eb831a0ab98e3913c7 Mon Sep 17 00:00:00 2001
From: jahugg <jan@huggenberg.ch>
Date: Wed, 22 Feb 2023 15:22:56 +0100
Subject: [PATCH] adapted mouse controls
---
index.html | 6 ++--
src/main.js | 80 +++++++++++++++++++++++++-------------------
src/styles/main.css | 7 ++--
src/styles/main.less | 8 +++--
4 files changed, 60 insertions(+), 41 deletions(-)
diff --git a/index.html b/index.html
index a844098..3b6544e 100644
--- a/index.html
+++ b/index.html
@@ -5,12 +5,12 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>EXP Navigation</title>
- <link rel="manifest" href="./src/app.webmanifest" />
- <link rel="stylesheet" type="text/css" href="./src/styles/main.css" />
+ <link rel="manifest" href="/src/app.webmanifest" />
+ <link rel="stylesheet" type="text/css" href="/src/styles/main.css" />
</head>
<body>
<div id="app"></div>
<div id="log"></div>
- <script type="module" src="./src/main.js"></script>
+ <script type="module" src="/src/main.js"></script>
</body>
</html>
diff --git a/src/main.js b/src/main.js
index 0807dce..4d77150 100644
--- a/src/main.js
+++ b/src/main.js
@@ -5,39 +5,33 @@ const navigation = {
label: "Home",
path: "/",
command: "home",
- depth: 0,
submenu: {
menu: {
label: "Menu",
path: "/menu",
command: "menu",
- depth: 1,
submenu: {
call: {
label: "Call",
path: "/menu/call",
command: "call",
- depth: 2,
submenu: {
emergency: {
label: "Emergency",
command: "emergency",
path: "/menu/call/emergency",
- depth: 3,
message: "Calling Emergency",
},
contact1: {
label: "Flute Inc.",
command: "contact A",
path: "/menu/call/contact1",
- depth: 3,
message: "Calling Flute Inc.",
},
contact2: {
label: "Brays AG",
command: "contact B",
path: "/menu/call/contact2",
- depth: 3,
message: "Calling Brays AG",
},
},
@@ -46,27 +40,23 @@ const navigation = {
label: "Check",
path: "/menu/check",
command: "check",
- depth: 2,
submenu: {
daily: {
label: "Daily",
command: "daily",
path: "/menu/check/daily",
- depth: 3,
message: "Displaying Daily Checklist",
},
weekly: {
label: "Weekly",
command: "weekly",
path: "/menu/check/weekly",
- depth: 3,
message: "Displaying Weekly Checklist",
},
monthly: {
label: "Monthly",
command: "monthly",
path: "/menu/check/monthly",
- depth: 3,
message: "Displaying Monthly Checklist",
},
},
@@ -75,27 +65,23 @@ const navigation = {
label: "Apps",
path: "/menu/apps",
command: "apps",
- depth: 2,
submenu: {
record: {
label: "Record",
command: "record",
path: "/menu/apps/record",
- depth: 3,
message: "Opening Recording App",
},
breakout: {
label: "Breakout",
command: "breakout",
path: "/menu/apps/breakout",
- depth: 3,
message: "Opening Breakout App",
},
statistics: {
label: "Statistics",
command: "statistics",
path: "/menu/apps/statistics",
- depth: 3,
message: "Opening Statistics App",
},
},
@@ -116,7 +102,7 @@ function init() {
navigationEl.appendChild(listEl);
appEl.appendChild(navigationEl);
- // navigate to current path or home
+ // navigate to current path or root
const pathname = window.location.pathname;
if (pathname) navigateToPath(pathname);
else navigateToPath("/");
@@ -136,7 +122,7 @@ function init() {
addButtonControls();
}
-// update Navigation
+// update navigation
function updateNavigation(object) {
// update navigation
const listEl = document.createElement("ul");
@@ -149,21 +135,24 @@ function updateNavigation(object) {
}
// add "special back" button
- if (object.depth > 0) {
+ if (object.path !== "/") {
+ // determine depth of object
+ const segments = object.path.split("/");
+ const depth = segments.length - 1;
let backItemEl;
- if (object.depth === 1)
+ if (depth === 1)
backItemEl = buildNavigationItemEl({
label: "Close",
path: "/",
command: "close",
});
- else if (object.depth === 2)
+ else if (depth === 2)
backItemEl = buildNavigationItemEl({
label: "Back",
path: "/menu",
command: "back",
});
- else if (object.depth === 3)
+ else if (depth === 3)
backItemEl = buildNavigationItemEl({
label: "Exit",
path: "/",
@@ -200,8 +189,9 @@ function updateNavigation(object) {
}
}
-// General Navigation
+// general navigation
// ===================
+
// navigate to path
function navigateToPath(path, pushState = true) {
// find object with path
@@ -230,14 +220,14 @@ function navigateToSelected() {
}
// focus specific navigation item
-function focusNavigationItem(n) {
+function focusNavigationItem(index) {
// unselect all items
const navigationList = document.querySelectorAll("#navigation li");
for (let item of navigationList) delete item.dataset.selected;
// select requested element
const navigationItem = document.querySelector(
- `#navigation > ul > li:nth-child(${n})`
+ `#navigation > ul > li:nth-child(${index})`
);
navigationItem.dataset.selected = "";
}
@@ -252,6 +242,8 @@ function focusNextNavigationItem() {
delete currentItem.dataset.selected;
currentItem.nextSibling.dataset.selected = "";
} else focusNavigationItem(1);
+
+ printLogMsg("volume up");
}
// focus previous navigation item
@@ -285,14 +277,23 @@ function moveDownNavigationLevel() {
if (!isBackButton) navigateToSelected();
}
-// Add Mouse Click Controls
+// add mouse controls
// ==================
function addMouseControls() {
const appEl = document.getElementById("app");
- appEl.addEventListener("click", onMouseClick);
- // on menu item mouseclick
- function onMouseClick(event) {
+ // focus on mouseover
+ appEl.addEventListener("mouseover", (event) => {
+ const listItem = event.target.closest("li.link");
+ if (listItem) {
+ // get childnode index
+ let index = Array.from(listItem.parentNode.children).indexOf(listItem);
+ focusNavigationItem(index + 1);
+ }
+ });
+
+ // select on mouseclick
+ appEl.addEventListener("click", (event) => {
event.preventDefault();
const listItem = event.target.closest("li.link");
if (listItem) {
@@ -300,10 +301,10 @@ function addMouseControls() {
const path = link.getAttribute("href");
navigateToPath(path);
}
- }
+ });
}
-// Add Button Controls
+// add button controls
// ===================
function addButtonControls() {
// add two button controls for menu
@@ -332,14 +333,25 @@ function addButtonControls() {
moveUpNavigationLevel();
}
+ console.log(navigator.mediaSession);
+
// listening for hardware buttons
- // navigator.mediaSession.setActionHandler('volumeup', function() {
- // // Handle volume up event
- // });
+ navigator.mediaSession.setActionHandler("previoustrack", () => {
+ const logEl = document.getElementById("log");
+ logEl.innerHTML += "volumeup";
+ });
- // navigator.mediaSession.setActionHandler('volumedown', function() {
- // // Handle volume down event
+ // navigator.mediaSession.setActionHandler("volumedown", (event) => {
+ // const logEl = document.getElementById("log");
+ // logEl.innerHTML += "volumeup";
// });
}
+// printing messages on screen for debugging
+function printLogMsg(message) {
+ const logEl = document.getElementById("log");
+ logEl.innerHTML += `${message}<br>`;
+ logEl.scrollTop = logEl.scrollHeight;
+}
+
init();
diff --git a/src/styles/main.css b/src/styles/main.css
index e1cdecb..76589b1 100644
--- a/src/styles/main.css
+++ b/src/styles/main.css
@@ -29,14 +29,17 @@ a {
.link .command:after {
content: '"';
}
-.link:hover a,
.link[data-selected] a {
border-color: var(--color-white);
}
#log {
+ color: red;
+ text-align: right;
position: absolute;
top: 0;
right: 0;
- width: 400px;
+ max-height: 40vh;
z-index: 100;
+ padding: 1em;
+ overflow-y: scroll;
}
diff --git a/src/styles/main.less b/src/styles/main.less
index 40c5992..2dda1a9 100644
--- a/src/styles/main.less
+++ b/src/styles/main.less
@@ -21,6 +21,7 @@ a {
.link {
position: relative;
+
.command {
font-size: 0.5em;
line-height: 1em;
@@ -33,7 +34,6 @@ a {
}
}
- &:hover,
&[data-selected] {
a {
border-color: var(--color-white);
@@ -42,9 +42,13 @@ a {
}
#log {
+ color: red;
+ text-align: right;
position: absolute;
top: 0;
right: 0;
- width: 400px;
+ max-height: 40vh;
z-index: 100;
+ padding: 1em;
+ overflow-y: scroll;
}
--
GitLab