1 files changed, 208 insertions, 0 deletions
diff --git a/src/js/ui/menu.js b/src/js/ui/menu.js
new file mode 100644
index 0000000..6d2efd6
--- /dev/null
+++ b/src/js/ui/menu.js
@@ -0,0 +1,208 @@
+// Arching Kaos Menu
+//
+// Kaotisk Hund - 2024
+//
+// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL v3.0
+//
+
+import { makeElement } from "../arching-kaos-generator.js";
+import { locationHashSetter } from "../arching-kaos-spa-router.js";
+import { mainContainer } from "../app.js";
+import { debugLog } from "../utils.js";
+
+export function doubleFloorMenu()
+{
+    return document.querySelector('#double-floor');
+}
+export function upperFloor()
+{
+    return document.querySelector('.upper-floor');
+}
+
+export function lowerFloor()
+{
+    return document.querySelector('.lower-floor');
+}
+
+export function modulesSubmenu()
+{
+    return document.querySelector('#modules-submenu');
+}
+
+export function exploreSubmenu()
+{
+    return document.querySelector('#explore-submenu');
+}
+
+export function stellarSubmenu()
+{
+    return document.querySelector('#stellar-submenu');
+}
+
+
+export function menuSpawn()
+{
+    var menuButton = {
+        element: "button",
+        id:"mobile-menu",
+        innerText:"Show menu"
+    };
+
+    makeElement(menuButton, document.querySelector('#menu-placeholder'));
+
+    document.querySelector('#mobile-menu').addEventListener("click", toggleMenu);
+
+    var menuLayout = {
+        element: 'nav', id:"double-floor", innerHTML:[
+            { element: "div", id:"menu", className:"upper-floor", innerHTML: [
+                { element: "button", onclick:'menusel({id:"#/welcome-section"})', innerText:"Home"},
+                { element: "button", onclick:'modulesSubToggle()', innerText:"Modules"},
+                { element: "button", onclick:'exploreSubToggle()', innerText:"Explore"},
+                { element: "button", onclick:'menusel({id:"#/chat-section"})', innerText:"Chat"},
+                { element: "button", onclick:'menusel({id:"#/radio-section"})', innerText:"Radio"},
+                { element: "button", onclick:'menusel({id:"#/settings-section"})', innerText:"Settings"},
+                { element: "button", onclick:'stellarSubToggle()', innerText:"Stellar"},
+                { element: "button", onclick:'menusel({id:"#/about-section"})', innerText:"About"}
+            ]
+            },
+            { element: "div", id:"menu", className:"lower-floor"}
+        ]
+    };
+
+    makeElement(menuLayout, document.querySelector('#menu-placeholder'));
+
+    var modulesSubmenuTemplate = {
+        element: 'div',
+        className:"dropdown",
+        id:"modules-submenu",
+        innerHTML: [
+            { element:'button', onclick:"modulesSubToggle()", innerText:".."},
+            { element:'button', onclick:'menusel({id:"#/mixtapes-section"})', innerText:"Mixtapes"},
+            { element:'button', onclick:'menusel({id:"#/news-section"})', innerText:"News"},
+            { element:'button', onclick:'menusel({id:"#/comments-section"})', innerText:"Comments"},
+            { element:'button', onclick:'menusel({id:"#/files-section"})', innerText:"Files"}
+        ]
+    };
+
+    makeElement(modulesSubmenuTemplate, lowerFloor());
+
+    var exploreSubmenuTemplate = {
+        element: 'div',
+        className:"dropdown",
+        id:"explore-submenu",
+        innerHTML: [
+            { element:'button', onclick:"exploreSubToggle()", innerText:".."},
+            { element:'button', onclick:'menusel({id:"#/zchain-data-section"})', innerText:"zchain"},
+            { element:'button', onclick:'menusel({id:"#/stats-section"})', innerText:"Stats"}
+        ]
+    };
+    makeElement(exploreSubmenuTemplate, lowerFloor());
+
+    var stellarSubmenuTemplate = {
+        element: 'div',
+        className:"dropdown",
+        id:"stellar-submenu",
+        innerHTML: [
+            { element:'button', onclick:"stellarSubToggle()", innerText:".."},
+            { element:'button', onclick:'menusel({id:"#/mypage-section"})', innerText:"My page"},
+            { element:'button', onclick:'menusel({id:"#/stellar-balances"})', innerText:"Balances"},
+            { element:'button', onclick:'menusel({id:"#/stellar-data-config"})', innerText:"Data"},
+            { element:'button', onclick:'menusel({id:"#/arching-kaos-node-info"})', innerText:"Node Info"}
+        ]
+    };
+
+    makeElement(stellarSubmenuTemplate, lowerFloor());
+
+    upperFloor().style.display = 'flex';
+    lowerFloor().style.display = 'none';
+    modulesSubmenu().style.display = 'none';
+    exploreSubmenu().style.display = 'none';
+    stellarSubmenu().style.display = 'none';
+}
+
+/*
+ * Menu bar management
+ *
+ * We change the visible floor according to menu selection.
+ *
+ */
+
+export function modulesSubToggle(){
+    modulesSubmenu().style.display = modulesSubmenu().style.display === 'none' ? 'flex' : 'none';
+    upperFloor().style.display = upperFloor().style.display === 'none' ? 'flex' : 'none';
+    lowerFloor().style.display = lowerFloor().style.display === 'none' ? 'flex' : 'none';
+}
+
+export function exploreSubToggle(){
+    exploreSubmenu().style.display = exploreSubmenu().style.display === 'none' ? 'flex' : 'none';
+    upperFloor().style.display = upperFloor().style.display === 'none' ? 'flex' : 'none';
+    lowerFloor().style.display = lowerFloor().style.display === 'none' ? 'flex' : 'none';
+}
+
+export function stellarSubToggle(){
+    stellarSubmenu().style.display = stellarSubmenu().style.display === 'none' ? 'flex' : 'none';
+    upperFloor().style.display = upperFloor().style.display === 'none' ? 'flex' : 'none';
+    lowerFloor().style.display = lowerFloor().style.display === 'none' ? 'flex' : 'none';
+}
+/*
+ * Array of all the menu-panes IDs
+ */
+export function menuids()
+{
+    return [
+        '#welcome-section',
+        '#about-section',
+        '#zchain-data-section',
+        '#news-section',
+        '#comments-section',
+        '#stats-section',
+        '#mixtapes-section',
+        '#chat-section',
+        '#radio-section',
+        '#mypage-section',
+        '#stellar-balances',
+        '#stellar-data-config',
+        '#arching-kaos-node-info',
+        '#files-section',
+        '#settings-section',
+        '#stellar-section',
+        '#not-found-section'
+    ]
+};
+
+// Function to hide all the panes
+export function menuinit(){
+    for ( var i = 0; i < menuids().length; i++ ){
+        var sec = document.querySelector(menuids()[i]);
+        if ( sec !== null )
+        {
+            sec.hidden = true;
+        }
+        else
+        {
+            debugLog(`menuinit: ${menuids()[i]} was not found`);
+        }
+    }
+}
+
+/*
+ * Function called on clicks on the menu bar
+ * Unhides the pane connected to the clicked menu entry
+ */
+export function menusel(m){
+    menuinit();
+    // document.querySelector(m.id.replace('/','')).hidden=false;
+    locationHashSetter(m.id);
+
+    mainContainer().style.display = 'block';
+    if ( window.isMobile ) {
+        doubleFloorMenu().style.display = 'none';
+    }
+}
+
+export function toggleMenu(){
+    mainContainer().style.display = 'none';
+    doubleFloorMenu().style.display = 'flex';
+}
+
+// @license-end