From add9e85dbb78bfa923f9a88c521ffc371813d8a7 Mon Sep 17 00:00:00 2001 From: agmes4 Date: Fri, 26 Jan 2024 21:37:57 +0100 Subject: [PATCH 1/6] added feature key navigation user suite added a key navigation on the user suite solves #683 --- web/resources/js/user-suite.ts | 50 +++++++++++++++++++++++++++++++ web/templates/user/user_show.html | 3 +- webpack.config.babel.js | 4 +++ 3 files changed, 56 insertions(+), 1 deletion(-) create mode 100644 web/resources/js/user-suite.ts diff --git a/web/resources/js/user-suite.ts b/web/resources/js/user-suite.ts new file mode 100644 index 000000000..e8474c054 --- /dev/null +++ b/web/resources/js/user-suite.ts @@ -0,0 +1,50 @@ +/* + * Copyright (c) 2024. The Pycroft Authors. See the AUTHORS file. + * This file is part of the Pycroft project and licensed under the terms of + * the Apache License, Version 2.0. See the LICENSE file for details + */ + +function waitForKeyPress(callback: (event: KeyboardEvent) => void): void { + const handleKeyPress = (event: KeyboardEvent) => { + // Call the callback function with the event when a key is pressed + callback(event); + + // Remove the event listener after the first key press (if you want it to happen only once) + // document.removeEventListener('keydown', handleKeyPress); + }; + + // Add the event listener to the document + document.addEventListener('keydown', handleKeyPress); +} + +// Example of using the function +waitForKeyPress((event) => { + console.log(`Key pressed: ${event.key}`); + // Add your logic here based on the key press + if (event.key === "ArrowRight" ){ + const navLinks = document.getElementsByClassName("user-nav-link"); + for (let i= 0; i < navLinks.length; i++){ + const link = navLinks[i] as HTMLLinkElement; + if(link.classList.contains("active")) { + let index = (i + 1)%navLinks.length; + const link2 = navLinks[index] as HTMLLinkElement; + link2.click(); + break; + } + } + } + if (event.key === "ArrowLeft" ){ + const navLinks = document.getElementsByClassName("user-nav-link"); + let next = false; + console.log(navLinks.length) + for (let i= 0; i < navLinks.length; i++){ + const link = navLinks[i] as HTMLLinkElement; + if(link.classList.contains("active")) { + let index = (i - 1) % navLinks.length; + const link2 = navLinks[index] as HTMLLinkElement; + link2.click(); + break; + } + } + } +}); diff --git a/web/templates/user/user_show.html b/web/templates/user/user_show.html index d3bc1e82e..e37ef0073 100644 --- a/web/templates/user/user_show.html +++ b/web/templates/user/user_show.html @@ -24,7 +24,7 @@