Refactored menu with ak-generator, fixed mobile viewHEADorigin/masterorigin/HEADmaster

9 files changed, 194 insertions, 87 deletions

diff --git a/src/js/app.js b/src/js/app.js
index 06ba891..b84be92 100644
--- a/src/js/app.js
+++ b/src/js/app.js
@@ -15,22 +15,19 @@ body.height = window.innerHeight;
 pageLayout.width = window.innerWidth;
 pageLayout.height = window.innerHeight;
 mainContainer.style.display = 'block';
-window.innerWidth <= 770 ? isMobile = true : isMobile = false;
-isMobile ? doubleFloorMenu.style.display = 'none':doubleFloorMenu.style.display = 'flex';
+window.innerWidth <= 850 ? isMobile = true : isMobile = false;
+
 function onWindowResize()
 {
     body.width = window.innerWidth;
     body.height = window.innerHeight;
     pageLayout.width = window.innerWidth;
     pageLayout.height = window.innerHeight;
-    window.innerWidth <= 770 ? isMobile = true : isMobile = false;
+    window.innerWidth <= 850 ? isMobile = true : isMobile = false;
     isMobile ? doubleFloorMenu.style.display = 'none':doubleFloorMenu.style.display = 'flex';
 }
 window.addEventListener('resize', onWindowResize, false);
 
-// And call
-menuinit();
-locationHashOnChange();
 
 progressPlaceholder.value = '0';
 
@@ -60,20 +57,22 @@ var scripts = [
     {
         element:"script",
         src:"./js/ui/mainLayout.js"
-    },
-    {
-        element:"script",
-        src:"./js/page-navigation.js"
-    },
-    {
-        element:"script",
-        src:"./js/page-projects.js"
-    },
-    {
-        element:"script",
-        src:"./js/menu.js"
     }
 ];
+//,
+//    {
+//        element:"script",
+//        src:"./js/page-navigation.js"
+//    },
+//    {
+//        element:"script",
+//        src:"./js/page-projects.js"
+//    },
+//    {
+//        element:"script",
+//        src:"./js/menu.js"
+//    }
+//];
 
 for ( var i = 0; i < scripts.length; i++ )
 {
diff --git a/src/js/arching-kaos-generator.js b/src/js/arching-kaos-generator.js
index 67ab351..9c80954 100644
--- a/src/js/arching-kaos-generator.js
+++ b/src/js/arching-kaos-generator.js
@@ -30,6 +30,7 @@ function makeElement(obj, attachTo)
     if ( obj.src !== undefined ) temp.src = obj.src;
     if ( obj.as !== undefined ) temp.as = obj.as;
     if ( obj.target !== undefined ) temp.target = obj.target;
+    if ( obj.onclick !== undefined ) temp.setAttribute("onclick", obj.onclick);
     if ( obj.alt !== undefined ) temp.alt = obj.alt;
     if ( obj.charset !== undefined ) temp.charset = obj.charset;
     if ( obj.value !== undefined ) temp.value = obj.value;
diff --git a/src/js/arching-kaos-spa-router.js b/src/js/arching-kaos-spa-router.js
index aa8ab31..1775d24 100644
--- a/src/js/arching-kaos-spa-router.js
+++ b/src/js/arching-kaos-spa-router.js
@@ -50,4 +50,5 @@ function locationHashOnChange(){
         document.querySelector('#not-found-section').hidden=false;
     }
 }
+
 // @license-end
diff --git a/src/js/environment-setup.js b/src/js/environment-setup.js
index d66465b..5daf7c7 100644
--- a/src/js/environment-setup.js
+++ b/src/js/environment-setup.js
@@ -26,7 +26,6 @@ var nodeInfo = new Array;
 var body = document.querySelector('body');
 var pageLayout = document.querySelector('.page-layout');
 var mainContainer = document.querySelector('.main');
-var doubleFloorMenu = document.querySelector('#double-floor'); 
 var isMobile = false;
 var aknet = document.querySelector('.aknet-network')
 var resultsArea = document.querySelector('.results-area')
diff --git a/src/js/menu-magic.js b/src/js/menu-magic.js
deleted file mode 100644
index 58a51dd..0000000
--- a/src/js/menu-magic.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/* Arching Kaos Menu Magic
- *
- * Kaotisk Hund - 2024
- *
- * @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL v3.0
- *
- */
-/*
- * Menu bar management
- *
- * We change the visible floor according to menu selection.
- *
- */
-var upperFloor = document.querySelector('.upper-floor');
-var lowerFloor = document.querySelector('.lower-floor');
-upperFloor.style.display = 'flex';
-lowerFloor.style.display = 'none';
-
-var modulesSubmenu = document.querySelector('#modules-submenu');
-modulesSubmenu.style.display = 'none';
-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';
-}
-
-var exploreSubmenu = document.querySelector('#explore-submenu');
-exploreSubmenu.style.display = 'none';
-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';
-}
-
-var stellarSubmenu = document.querySelector('#stellar-submenu');
-stellarSubmenu.style.display = 'none';
-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';
-}
-
-// Function to hide all the panes
-function menuinit(){
-    menuids.forEach(m=>document.querySelector(m).hidden=true);
-}
-
-/*
- * Function called on clicks on the menu bar
- * Unhides the pane connected to the clicked menu entry
- */
-function menusel(m){
-    menuinit();
-    // document.querySelector(m.id.replace('/','')).hidden=false;
-    locationHashSetter(m.id);
-    
-    mainContainer.style.display = 'block';
-    if ( isMobile ) {
-        doubleFloorMenu.style.display = 'none';
-    }
-}
-
-//var doubleFloorMenuDisplay = doubleFloorMenu.style.display;
-function toggleMenu(m){
-    mainContainer.style.display = 'none';
-    doubleFloorMenu.style.display = 'flex';
-}
-// @license-end
diff --git a/src/js/ui/header.js b/src/js/ui/header.js
new file mode 100644
index 0000000..51d48f6
--- /dev/null
+++ b/src/js/ui/header.js
@@ -0,0 +1,19 @@
+var header = {
+    element: "div",
+    id: 'header',
+    className: 'header',
+    innerHTML: [
+        { element: "a", id:"logo-button", innerHTML:[
+            {element: "img", src:"./img/header-logo.png" }
+        ]},
+        { element: "h1", style:"text-align: center;", innerText: "Arching Kaos"}
+    ]
+}
+
+function goHomeAction()
+{
+    menusel({id:"#/welcome-section"});
+}
+makeElement(header, document.querySelector('#logo-title-placeholder'));
+
+document.querySelector('#logo-button').addEventListener("click", goHomeAction);
diff --git a/src/js/ui/main.js b/src/js/ui/main.js
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/js/ui/main.js
diff --git a/src/js/ui/mainLayout.js b/src/js/ui/mainLayout.js
index f7adeae..2c76177 100644
--- a/src/js/ui/mainLayout.js
+++ b/src/js/ui/mainLayout.js
@@ -5,6 +5,14 @@ var scripts = [
     },
     {
         element:"script",
+        src:"./js/ui/menu.js"
+    },
+    {
+        element:"script",
+        src:"./js/ui/main.js"
+    },
+    {
+        element:"script",
         src:"./js/ui/footer.js"
     }
 ]
diff --git a/src/js/ui/menu.js b/src/js/ui/menu.js
new file mode 100644
index 0000000..b9cafaa
--- /dev/null
+++ b/src/js/ui/menu.js
@@ -0,0 +1,148 @@
+/* Arching Kaos Menu
+ *
+ * Kaotisk Hund - 2024
+ *
+ * @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL v3.0
+ *
+ */
+
+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, document.querySelector('.lower-floor'));
+
+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, document.querySelector('.lower-floor'));
+
+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, document.querySelector('.lower-floor'));
+
+
+/*
+ * Menu bar management
+ *
+ * We change the visible floor according to menu selection.
+ *
+ */
+var upperFloor = document.querySelector('.upper-floor');
+var lowerFloor = document.querySelector('.lower-floor');
+var doubleFloorMenu = document.querySelector('#double-floor'); 
+
+upperFloor.style.display = 'flex';
+lowerFloor.style.display = 'none';
+
+var modulesSubmenu = document.querySelector('#modules-submenu');
+modulesSubmenu.style.display = 'none';
+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';
+}
+
+var exploreSubmenu = document.querySelector('#explore-submenu');
+exploreSubmenu.style.display = 'none';
+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';
+}
+
+var stellarSubmenu = document.querySelector('#stellar-submenu');
+stellarSubmenu.style.display = 'none';
+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';
+}
+
+// Function to hide all the panes
+function menuinit(){
+    menuids.forEach(m=>document.querySelector(m).hidden=true);
+}
+
+/*
+ * Function called on clicks on the menu bar
+ * Unhides the pane connected to the clicked menu entry
+ */
+function menusel(m){
+    menuinit();
+    // document.querySelector(m.id.replace('/','')).hidden=false;
+    locationHashSetter(m.id);
+    
+    mainContainer.style.display = 'block';
+    if ( isMobile ) {
+        doubleFloorMenu.style.display = 'none';
+    }
+}
+
+function toggleMenu(){
+    mainContainer.style.display = 'none';
+    doubleFloorMenu.style.display = 'flex';
+}
+
+// And call
+menuinit();
+locationHashOnChange();
+
+isMobile ? doubleFloorMenu.style.display = 'none':doubleFloorMenu.style.display = 'flex';
+// @license-end