added feature key navigation user suite

web/resources/js/tab-anchor.ts

@@ -3,27 +3,33 @@ import {Tab} from 'bootstrap';
 
 function navigateToAnchorTab() {
     const hash = window.location.hash;
+    if (!hash) return;
 
-    if (hash) {
-        const element: Element | null = document.querySelector(`ul.nav a[href="${hash}"]`);
-        if (element === null) return;
-        new Tab(element).show();
-    }
+    const selector = `ul.nav [href="${hash}"], ul.nav [data-bs-target="${hash}"]`;
+    const element = document.querySelector<HTMLElement>(selector);
+    if (element === null) return;
+    new Tab(element).show();
 }
 
-function updateLocationHash(this: HTMLAnchorElement, ev: MouseEvent){
-    if (this.hash === null) {
-        console.warn('Selected tab does not have an id. Cannot update')
-        return null;
-    }
+function updateLocationHash(this: HTMLElement, _: MouseEvent){
+    if (this instanceof HTMLAnchorElement) {
+        if (this.hash === null) {
+         // console.warn('Selected tab does not have an id. Cannot update')
+            return null;
+        }
 
-    window.location.hash = this.hash;
+        window.location.hash = this.hash;
+    } else {
+        const bsTarget = this.dataset.bsTarget || null;
+        if (bsTarget === null) return;
+        window.location.href = bsTarget;
+    }
 }
 
 document.addEventListener('DOMContentLoaded', () => {
     navigateToAnchorTab();
 
-    for (const el of document.querySelectorAll<HTMLAnchorElement>('.nav-tabs a')) {
+    for (const el of document.querySelectorAll<HTMLElement>('.nav-tabs [role="tab"]')) {
         // `new Tab(element)` already implicitly happens due to the respective
         // `data-` attributes being present
         el.addEventListener('click', updateLocationHash, false)

web/resources/js/user-suite.ts

@@ -0,0 +1,36 @@
+/*
+ * 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 handleKeyPress(event: KeyboardEvent) {
+    // checks rather the input was triggered in a text area then it is dismissed
+    if(event.target instanceof HTMLInputElement || event.target instanceof HTMLTextAreaElement) return;
+
+    if (event.key === "ArrowRight" ){
+        const navLinks = [...document.querySelectorAll<HTMLElement>(".user-nav-link")].filter(x => !x.classList.contains("disabled"));
+        for (let i= 0; i < navLinks.length; i++){
+            if(navLinks[i].classList.contains("active")) {
+                let index = (i + 1) % navLinks.length;
+                navLinks[index].click();
+                break;
+            }
+        }
+    }
+
+    if (event.key === "ArrowLeft" ){
+        const navLinks = [...document.querySelectorAll<HTMLElement>(".user-nav-link")].filter(x => !x.classList.contains("disabled"));
+        for (let i= 0; i < navLinks.length; i++){
+            if(navLinks[i].classList.contains("active")) {
+                let index = i - 1;
+                if (index < 0) index += (navLinks.length); // Ich hasse JS noch nicht mal mod kann das ordentlich
+                navLinks[index].click();
+                break;
+            }
+        }
+    }
+}
+
+document.addEventListener('keydown', handleKeyPress);
+

web/templates/user/user_show.html

@@ -24,11 +24,11 @@
       <ul class="nav nav-tabs">
         {% for tab in tabs %}
           <li class="nav-item">
-            <a class="nav-link {{ "active" if tab.id == 'hosts' else "" }}
+            <button class="nav-link user-nav-link {{ "active" if tab.id == 'hosts' else "" }}
                {{ "disabled" if 'disabled' in tab and tab.disabled else "" }}"
                {{ 'aria-current="page"' if tab.id == 'hosts' else "" }}
                {{ 'aria-disabled="true"' if 'disabled' in tab and tab.disabled else "" }}
-               id="tab-{{ tab.id }}" href="#{{ tab.id }}"
+               id="tab-{{ tab.id }}" data-bs-target="#{{ tab.id }}"
                data-bs-toggle="tab" data-bs-target="#{{ tab.id }}">
               {% if tab.icon %}<i class="fas {{ tab.icon }}"></i> {% endif -%}
               {{ tab.name }}
@@ -59,4 +59,5 @@
 
 {% block page_script %}
     {{ resources.link_script_file('tab-anchor.js' | require) }}
+  {{ resources.link_script_file('user-suite.js' | require) }}
 {% endblock %}

webpack.config.babel.js

@@ -76,6 +76,10 @@ export default {
             import: './js/tab-anchor.ts',
             dependOn: 'main',
         },
+        'user-suite': {
+            import: './js/user-suite.ts',
+            dependOn: 'main',
+        },
         'rooms-table': {
             import: './js/rooms-table.ts',
             dependOn: 'main',