@@ -232,7 +189,6 @@ - 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 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 @@ -3,6 +3,14 @@ var scripts = [ element:"script", src:"./js/ui/header.js" }, + { + 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 -- cgit v1.2.3