aboutsummaryrefslogtreecommitdiff
path: root/src/js
diff options
context:
space:
mode:
Diffstat (limited to 'src/js')
-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
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
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-23 19:16:28 +0000