aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/css/akn.css4
-rw-r--r--src/index.html50
-rw-r--r--src/js/app.js35
-rw-r--r--src/js/arching-kaos-generator.js1
-rw-r--r--src/js/arching-kaos-spa-router.js1
-rw-r--r--src/js/environment-setup.js1
-rw-r--r--src/js/menu-magic.js68
-rw-r--r--src/js/ui/header.js19
-rw-r--r--src/js/ui/main.js0
-rw-r--r--src/js/ui/mainLayout.js8
-rw-r--r--src/js/ui/menu.js148
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
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-23 14:35:39 +0000