Add navigation class to manage menu

Author: krestenlaust

components/tenfoot_layout.pug

@@ -36,5 +36,5 @@ html(lang="en")
                 p.frit-fit #fritfit (for real)
 
         +scripts
-            script(type="module" src="/scripts/tenfoot/menu.ts")
+            script(type="module" src="/scripts/tenfoot/tenfoot-navigation.ts")
             block scripts

scripts/tenfoot/menu.ts

@@ -1,23 +1,28 @@
 // Keyboard navigation for 10-foot interface
-
 interface ServiceSelected {
     service: string;
 }
 
-class TenFootMenuNavigator {
+export interface GotoPage {
+    navigateTo(page: string): Promise<void>;
+}
+
+export class TenFootMenu {
     private cards: NodeListOf<HTMLElement>;
+    private navigator: GotoPage;
     private currentIndex: number;
 
-    constructor(cardContainer: Element) {
+    constructor(navigator: GotoPage, cardContainer: Element) {
+        this.navigator = navigator;
         this.cards = cardContainer.querySelectorAll<HTMLElement>('.menu10foot-card');
         this.currentIndex = 0;
         this.init();
     }
 
     private init(): void {
+        console.log("Initialized Tenfoot Menu");
         this.setupKeyboardNavigation();
         this.setupClickHandlers();
-        this.handleLoading();
 
         // Focus first card on load
         if (this.cards.length > 0) {
@@ -69,7 +74,7 @@ class TenFootMenuNavigator {
                 document.dispatchEvent(event);
 
                 // Add your navigation logic here
-                // Example: window.location.href = `/service/${service}`;
+                // navigator.navigateTo("links").then(r => console.log(r));
             });
 
             card.addEventListener('focus', () => {
@@ -83,42 +88,4 @@ class TenFootMenuNavigator {
             });
         });
     }
-
-    private handleLoading(): void {
-        const loadingIndicator = document.getElementById('loading-indicator');
-
-        if (loadingIndicator) {
-            window.addEventListener('load', () => {
-                setTimeout(() => {
-                    loadingIndicator.style.display = 'none';
-                }, 1500);
-            });
-        }
-    }
-
-    public async LoadPage(path: string) {
-        const app = document.getElementsByTagName('section')[0]
-
-        try {
-            const response = await fetch(`/${path}.html`);
-            const html = await response.text();
-            app.innerHTML = html;
-        } catch (error) {
-            app.innerHTML = '<p>Page not found</p>';
-        }
-    }
 }
-
-const initMenu = () => {
-    const menuContainer = document.getElementsByClassName('menu10foot')[0];
-    let nav = new TenFootMenuNavigator(menuContainer);
-};
-
-if (document.readyState === 'loading') {
-    document.addEventListener('DOMContentLoaded', initMenu);
-} else {
-    initMenu();
-}
-
-// nav.LoadPage("links").then(r => console.log(r));
-export default TenFootMenuNavigator;

scripts/tenfoot/tenfoot-navigation.ts

@@ -0,0 +1,101 @@
+// Keyboard navigation for 10-foot interface
+
+import {TenFootMenu, GotoPage} from "./menu";
+
+class TenFootNavigator implements GotoPage {
+    private currentPage: string;
+
+    constructor() {
+        this.init();
+    }
+
+    private init(): void {
+        console.log("Loaded Tenfoot-navigation");
+
+        this.inputOverride();
+        this.handleLoading();
+        this.TryInstantiateMenu();
+    }
+
+    private inputOverride(): void {
+        document.addEventListener('keydown', (e: KeyboardEvent) => {
+            switch(e.key) {
+                case 'Enter':
+                    break;
+                case 'Escape':
+                case 'BrowserBack':
+                    e.preventDefault();
+                    break;
+                case 'MediaPlayPause':
+                    break;
+                case 'MediaPlay':
+                    break;
+                case 'MediaPause':
+                    break;
+                case 'MediaStop':
+                    break;
+                case 'MediaTrackNext':
+                    break;
+                case 'MediaTrackPrevious':
+                    break;
+            }
+        });
+    }
+
+    private handleLoading(): void {
+        const loadingIndicator = document.getElementById('loading-indicator');
+
+        if (loadingIndicator) {
+            window.addEventListener('load', () => {
+                setTimeout(() => {
+                    loadingIndicator.style.display = 'none';
+                }, 1500);
+            });
+        }
+    }
+
+    async navigateTo(page: string): Promise<void> {
+        await this.LoadPage(page);
+    }
+
+    async LoadPage(path: string) {
+        const app = document.getElementsByTagName('section')[0]
+
+        try {
+            const response = await fetch(`/${path}.html`);
+            const html = await response.text();
+            app.innerHTML = html;
+
+            this.TryInstantiateMenu();
+        } catch (error) {
+            app.innerHTML = '<p>Page not found</p>';
+        }
+    }
+
+    TryInstantiateMenu(){
+        // Try load 10foot-menu handler
+        const initMenu = () => {
+            const menuContainer = document.getElementsByClassName('menu10foot')[0];
+            let nav = new TenFootMenu(this, menuContainer);
+        };
+
+        // TODO: mby doesn't work for loading subpages
+        if (document.readyState === 'loading') {
+            document.addEventListener('DOMContentLoaded', initMenu);
+        } else {
+            initMenu();
+        }
+    }
+}
+
+const initNavigation = () => {
+    let nav = new TenFootNavigator();
+};
+
+if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initNavigation);
+} else {
+    initNavigation();
+}
+
+export default TenFootNavigator;