Refactored menu with ak-generator, fixed mobile viewHEAD origin/master origin/HEAD master

author: kaotisk <kaotisk@arching-kaos.org> 2024-11-23 09:37:00 +0200
committer: kaotisk <kaotisk@arching-kaos.org> 2024-11-23 09:37:00 +0200
commit: c5c3505cbeaae832c0bc42c0583d77fc2bff8b37 (patch)
tree: 6c790b0508b10d8651babc027cdc02f8df8fad80
parent: 7a1f09d3236b74357c92ec18da69c3828c1a6db5 (diff)
download: arching-kaos-web-ui-c5c3505cbeaae832c0bc42c0583d77fc2bff8b37.tar.gz
arching-kaos-web-ui-c5c3505cbeaae832c0bc42c0583d77fc2bff8b37.tar.bz2
arching-kaos-web-ui-c5c3505cbeaae832c0bc42c0583d77fc2bff8b37.zip
11 files changed, 199 insertions, 136 deletions
diff --git a/src/css/akn.css b/src/css/akn.css
index 6298fbd..d879a0e 100644
--- a/src/css/akn.css
+++ b/src/css/akn.css
@@ -285,7 +285,7 @@ h1 {
     padding: 2px;
     overflow-y: auto;
     display: flex;
-    align-items: end;
+    /* align-items: end; */
     background: #cacaca;
     width: 100%;
     color:rgb(51, 200, 234);
@@ -342,7 +342,7 @@ button:hover {
 
 #double-floor {
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
 }
 
 .upper-floor {
diff --git a/src/index.html b/src/index.html
index 913d160..62e12d3 100644
--- a/src/index.html
+++ b/src/index.html
@@ -20,52 +20,9 @@
     </head>
     <body>
         <div class="page-layout">
-            <div class="topbar">
-                <div class="header">
-                    <a href="#/welcome-section" id="#/welcome-section" onclick="menusel(this)"><img src="./img/header-logo.png"></a>
-                    <h1 style="text-align: center;">Arching Kaos</h1>
-                </div>
-                <button class="menu-clickable" id="mobile-menu" onclick="toggleMenu(this)">Show menu</button>
-                <nav id="double-floor" class="">
-                    <div id="menu" class="upper-floor">
-                        <button class="menu-clickable" id="#/welcome-section" onclick="menusel(this)">🏡 Home</button>
-                        <button class="has-dropdown menu-clickable" id="modules-submenu-link" onclick="modulesSubToggle(this)">🔌 Modules</button>
-                        <button class="has-dropdown menu-clickable" id="explore-submenu-link" onclick="exploreSubToggle(this)">🥽 Explore</button>
-                        <button class="menu-clickable" id="#/chat-section" onclick="menusel(this)">✍️ Chat</button>
-                        <button class="menu-clickable" id="#/radio-section" onclick="menusel(this)">Radio</button>
-                        <button class="menu-clickable" id="#/settings-section" onclick="menusel(this)">🔧 Settings</button>
-                        <button class="has-dropdown menu-clickable" id="#/stellar-section" onclick="stellarSubToggle(this)">
-                            <img style="width: 13px; height: 13px;" src="./img/stellar.svg"/>&nbsp;
-                            Stellar</button>
-                        <button class="menu-clickable" id="#/about-section" onclick="menusel(this)">About</button>
-                    </div>
-                    <div id="menu" class="lower-floor">
-                        <div class="dropdown" id="modules-submenu">
-                            <button class="menu-clickable" onclick="modulesSubToggle(this)">..</button>
-                            <button class="menu-clickable" id="#/mixtapes-section" onclick="menusel(this)">Mixtapes</button>
-                            <button class="menu-clickable" id="#/news-section" onclick="menusel(this)">News</button>
-                            <button class="menu-clickable" id="#/comments-section" onclick="menusel(this)">Comments</button>
-                            <button class="menu-clickable" id="#/files-section" onclick="menusel(this)">Files</button>
-                        </div>
-                        <div class="dropdown" id="explore-submenu">
-                            <button class="menu-clickable" onclick="exploreSubToggle(this)">..</button>
-                            <button class="menu-clickable" id="#/zchain-data-section" onclick="menusel(this)">zchain</button>
-                            <button class="menu-clickable" id="#/stats-section" onclick="menusel(this)">Stats</button>
-                        </div>
-                        <div class="dropdown" id="stellar-submenu">
-                            <button class="menu-clickable" onclick="stellarSubToggle(this)">..</button>
-                            <button class="menu-clickable" id="#/mypage-section" onclick="menusel(this)">My page</button>
-                            <button class="menu-clickable" id="#/stellar-balances" onclick="menusel(this)">Balances</button>
-                            <button class="menu-clickable" id="#/stellar-data-config" onclick="menusel(this)">Data</button>
-                            <button class="menu-clickable" id="#/arching-kaos-node-info" onclick="menusel(this)">Node Info</button>
-                        </div>
-                    </div>
-                </nav>
-                <!-- <audio id="radio-player" controls autoplay hidden></audio> -->
-                <div hidden>
-                    <span>Radio</span>
-                    <button id="radio-button-controller" class="menu-clickable" onclick="radioToggle();">Loading...</button>
-                </div>
+            <div id="topbar" class="topbar">
+                <div id="logo-title-placeholder"></div>
+                <div id="menu-placeholder"></div>
             </div>
             <div class="main">
                 <div id="welcome-section">
@@ -232,7 +189,6 @@
         <script src="./js/url-generators.js"></script>
         <script src="./js/arching-kaos-fetch.js"></script>
         <script src="./js/arching-kaos-log.js"></script>
-        <script src="./js/menu-magic.js"></script>
         <script src="./js/arching-kaos-spa-router.js"></script>
         <script src="./js/arching-kaos-modules-files.js"></script>
         <script src="./js/arching-kaos-modules-news.js"></script>
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
author	kaotisk <kaotisk@arching-kaos.org>	2024-11-23 09:37:00 +0200
committer	kaotisk <kaotisk@arching-kaos.org>	2024-11-23 09:37:00 +0200
commit	c5c3505cbeaae832c0bc42c0583d77fc2bff8b37 (patch)
tree	6c790b0508b10d8651babc027cdc02f8df8fad80
parent	7a1f09d3236b74357c92ec18da69c3828c1a6db5 (diff)
download	arching-kaos-web-ui-c5c3505cbeaae832c0bc42c0583d77fc2bff8b37.tar.gz arching-kaos-web-ui-c5c3505cbeaae832c0bc42c0583d77fc2bff8b37.tar.bz2 arching-kaos-web-ui-c5c3505cbeaae832c0bc42c0583d77fc2bff8b37.zip