From afcedd44615d20423d58f4d9c9d8cfa3838a54d4 Mon Sep 17 00:00:00 2001 From: kaotisk Date: Fri, 29 Nov 2024 16:23:39 +0200 Subject: Major refactoring --- src/js/ui/footer.js | 81 ++++++----- src/js/ui/header.js | 29 ++-- src/js/ui/main.js | 121 ++++++++++++---- src/js/ui/mainLayout.js | 33 ++--- src/js/ui/menu.js | 260 +++++++++++++++++++--------------- src/js/ui/sections/radioSection.js | 3 +- src/js/ui/sections/settingsSection.js | 53 ++++--- src/js/ui/sections/welcomeSection.js | 70 +++++---- 8 files changed, 378 insertions(+), 272 deletions(-) (limited to 'src/js/ui') diff --git a/src/js/ui/footer.js b/src/js/ui/footer.js index a611b59..fbde422 100644 --- a/src/js/ui/footer.js +++ b/src/js/ui/footer.js @@ -1,43 +1,46 @@ import { makeElement } from "../arching-kaos-generator.js"; -var footer = { - element:"div", - id:"footer", - innerHTML:[ - { - element:"div", - innerHTML:[ - {element:"p", innerText:"Arching Kaos 2019-2024"}, - {element:"a", target:"_blank", href:"https://github.com/arching-kaos/arching-kaos-tools", innerText:"Tools"}, - {element:"a", target:"_blank", href:"https://arching-kaos.org", innerText:"Org"}, - {element:"a", target:"_blank", href:"https://arching-kaos.net", innerText:"Net"}, - ] - }, - { - element:"span", - innerText:"::" - }, +export function footerSpawn() +{ + var footer = { + element:"div", + id:"footer", + innerHTML:[ + { + element:"div", + innerHTML:[ + {element:"p", innerText:"Arching Kaos 2019-2024"}, + {element:"a", target:"_blank", href:"https://github.com/arching-kaos/arching-kaos-tools", innerText:"Tools"}, + {element:"a", target:"_blank", href:"https://arching-kaos.org", innerText:"Org"}, + {element:"a", target:"_blank", href:"https://arching-kaos.net", innerText:"Net"}, + ] + }, + { + element:"span", + innerText:"::" + }, - { - element:"div", - innerHTML:[ - {element:"a", target:"_blank", href:"https://github.com/arching-kaos/arching-kaos-web-ui/issues/new/choose", innerText:"Report an issue"}, - ] - }, - { - element:"span", - innerText:"::" - }, - { - element:"div", - innerHTML:[ - { - element:"p", - innerHTML:"Fra Kaotisk Hund med kjærlighet. Donate" - } - ] - } - ] -}; + { + element:"div", + innerHTML:[ + {element:"a", target:"_blank", href:"https://github.com/arching-kaos/arching-kaos-web-ui/issues/new/choose", innerText:"Report an issue"}, + ] + }, + { + element:"span", + innerText:"::" + }, + { + element:"div", + innerHTML:[ + { + element:"p", + innerHTML:"Fra Kaotisk Hund med kjærlighet. Donate" + } + ] + } + ] + }; -makeElement(footer, document.querySelector('.footer')); + makeElement(footer, document.querySelector('.footer')); +} diff --git a/src/js/ui/header.js b/src/js/ui/header.js index 18d8c2e..27c16ac 100644 --- a/src/js/ui/header.js +++ b/src/js/ui/header.js @@ -1,16 +1,19 @@ import { makeElement } from "../arching-kaos-generator.js"; -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"} - ], - onclick: 'menusel({id:"#/welcome-section"});' -} +export function headerSpawn() +{ + 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"} + ], + onclick: 'menusel({id:"#/welcome-section"});' + } -makeElement(header, document.querySelector('#logo-title-placeholder')); + makeElement(header, document.querySelector('#logo-title-placeholder')); +} diff --git a/src/js/ui/main.js b/src/js/ui/main.js index f57be59..623166f 100644 --- a/src/js/ui/main.js +++ b/src/js/ui/main.js @@ -1,34 +1,97 @@ import { makeElement } from "../arching-kaos-generator.js"; -var scripts = [ - { - element:"script", - type:"module", - src:"./js/ui/sections/welcomeSection.js" - }, - { - element:"script", - type:"module", - src:"./js/ui/sections/chatSection.js" - }, - { - element:"script", - type:"module", - src:"./js/ui/sections/notFoundSection.js" - }, - { - element:"script", - type:"module", - src:"./js/ui/sections/settingsSection.js" - }, +export function mainSpawn() +{ + var scripts = [ + { + element:"script", + type:"module", + src:"./js/ui/sections/aboutSection.js" + }, + { + element:"script", + type:"module", + src:"./js/ui/sections/akNodeInfoSection.js" + }, + { + element:"script", + type:"module", + src:"./js/ui/sections/chatSection.js" + }, + { + element:"script", + type:"module", + src:"./js/ui/sections/commentsSection.js" + }, + { + element:"script", + type:"module", + src:"./js/ui/sections/filesSection.js" + }, + { + element:"script", + type:"module", + src:"./js/ui/sections/mixtapesSection.js" + }, + { + element:"script", + type:"module", + src:"./js/ui/sections/myPageSection.js" + }, + { + element:"script", + type:"module", + src:"./js/ui/sections/newsSection.js" + }, + { + element:"script", + type:"module", + src:"./js/ui/sections/notFoundSection.js" + }, + { + element:"script", + type:"module", + src:"./js/ui/sections/radioSection.js" + }, + { + element:"script", + type:"module", + src:"./js/ui/sections/settingsSection.js" + }, + { + element:"script", + type:"module", + src:"./js/ui/sections/statsSection.js" + }, + { + element:"script", + type:"module", + src:"./js/ui/sections/stellarBalancesSection.js" + }, + { + element:"script", + type:"module", + src:"./js/ui/sections/stellarDataConfigSection.js" + }, + { + element:"script", + type:"module", + src:"./js/ui/sections/stellarSection.js" + }, + { + element:"script", + type:"module", + src:"./js/ui/sections/welcomeSection.js" + }, + { + element:"script", + type:"module", + src:"./js/ui/sections/zchainDataSection.js" + } + ]; + + for ( var i = 0; i < scripts.length; i++ ) { - element:"script", - type:"module", - src:"./js/ui/sections/radioSection.js" + makeElement(scripts[i], document.querySelector('body')); } -]; - -for ( var i = 0; i < scripts.length; i++ ) -{ - makeElement(scripts[i], document.querySelector('body')); } diff --git a/src/js/ui/mainLayout.js b/src/js/ui/mainLayout.js index 6201e2b..5c0e0bf 100644 --- a/src/js/ui/mainLayout.js +++ b/src/js/ui/mainLayout.js @@ -1,28 +1,13 @@ import { makeElement } from "../arching-kaos-generator.js"; +import { headerSpawn } from "./header.js"; +import { menuSpawn } from "./menu.js"; +import { mainSpawn } from "./main.js"; +import { footerSpawn } from "./footer.js"; -var scripts = [ - { - element:"script", - type: "module", - src:"./js/ui/header.js" - }, - { - element:"script", - type: "module", - src:"./js/ui/menu.js" - }, - { - element:"script", - type: "module", - src:"./js/ui/main.js" - }, - { - element:"script", - type: "module", - src:"./js/ui/footer.js" - } -] -for ( var i = 0; i < scripts.length; i++ ) +export function mainLayoutSpawn() { - makeElement(scripts[i], document.querySelector('body')); + headerSpawn(); + menuSpawn(); + mainSpawn(); + footerSpawn(); } diff --git a/src/js/ui/menu.js b/src/js/ui/menu.js index 5344966..1c4a8e3 100644 --- a/src/js/ui/menu.js +++ b/src/js/ui/menu.js @@ -6,77 +6,118 @@ * */ import { makeElement } from "../arching-kaos-generator.js"; +import { locationHashSetter } from "../arching-kaos-spa-router.js"; +import { mainContainer } from "../app.js"; -var menuButton = { - element: "button", - id:"mobile-menu", - innerText:"Show menu" -}; +export function doubleFloorMenu() +{ + return document.querySelector('#double-floor'); +} +export function upperFloor() +{ + return document.querySelector('.upper-floor'); +} -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"} - ] -}; +export function lowerFloor() +{ + return document.querySelector('.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"} - ] -}; +export function modulesSubmenu() +{ + return document.querySelector('#modules-submenu'); +} -makeElement(modulesSubmenuTemplate, document.querySelector('.lower-floor')); +export function exploreSubmenu() +{ + return document.querySelector('#explore-submenu'); +} -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"} - ] -}; +export function stellarSubmenu() +{ + return document.querySelector('#stellar-submenu'); +} + + +export function menuSpawn() +{ + 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, lowerFloor()); + + 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, lowerFloor()); + + 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, lowerFloor()); -makeElement(stellarSubmenuTemplate, document.querySelector('.lower-floor')); + upperFloor().style.display = 'flex'; + lowerFloor().style.display = 'none'; + modulesSubmenu().style.display = 'none'; + exploreSubmenu().style.display = 'none'; + stellarSubmenu().style.display = 'none'; +} /* * Menu bar management @@ -84,70 +125,61 @@ makeElement(stellarSubmenuTemplate, document.querySelector('.lower-floor')); * 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'; export 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'; + 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'; export 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'; + 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'; export 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'; + 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'; } /* * Array of all the menu-panes IDs */ -var menuids = [ - '#welcome-section', - '#about-section', - '#zchain-data-section', - '#news-section', - '#comments-section', - '#stats-section', - '#mixtapes-section', - '#chat-section', - '#radio-section', - '#mypage-section', - '#stellar-balances', - '#stellar-data-config', - '#arching-kaos-node-info', - '#files-section', - '#settings-section', - '#stellar-section', - '#not-found-section' -]; +export function menuids() +{ + return [ + '#welcome-section', + '#about-section', + '#zchain-data-section', + '#news-section', + '#comments-section', + '#stats-section', + '#mixtapes-section', + '#chat-section', + '#radio-section', + '#mypage-section', + '#stellar-balances', + '#stellar-data-config', + '#arching-kaos-node-info', + '#files-section', + '#settings-section', + '#stellar-section', + '#not-found-section' + ] +}; // Function to hide all the panes export function menuinit(){ - for ( var i = 0; i < menuids.length; i++ ){ - var sec = document.querySelector(menuids[i]); + for ( var i = 0; i < menuids().length; i++ ){ + var sec = document.querySelector(menuids()[i]); if ( sec !== null ) { sec.hidden = true; } else { - console.log(`menuinit: ${menuids[i]} was not found`); + console.log(`menuinit: ${menuids()[i]} was not found`); } } } @@ -160,16 +192,16 @@ export function menusel(m){ menuinit(); // document.querySelector(m.id.replace('/','')).hidden=false; locationHashSetter(m.id); - - mainContainer.style.display = 'block'; - if ( isMobile ) { - doubleFloorMenu.style.display = 'none'; + + mainContainer().style.display = 'block'; + if ( window.isMobile ) { + doubleFloorMenu().style.display = 'none'; } } export function toggleMenu(){ - mainContainer.style.display = 'none'; - doubleFloorMenu.style.display = 'flex'; + mainContainer().style.display = 'none'; + doubleFloorMenu().style.display = 'flex'; } // @license-end diff --git a/src/js/ui/sections/radioSection.js b/src/js/ui/sections/radioSection.js index 5aaacc3..9c98ac0 100644 --- a/src/js/ui/sections/radioSection.js +++ b/src/js/ui/sections/radioSection.js @@ -1,7 +1,8 @@ import { makeElement } from "../../arching-kaos-generator.js"; var radioSection = { - element: 'radio-section', + element: "div", + id: 'radio-section', hidden: true, style: 'height: 100%;', innerHTML: [ diff --git a/src/js/ui/sections/settingsSection.js b/src/js/ui/sections/settingsSection.js index febd094..6f26393 100644 --- a/src/js/ui/sections/settingsSection.js +++ b/src/js/ui/sections/settingsSection.js @@ -1,21 +1,30 @@ import { makeElement } from "../../arching-kaos-generator.js"; -import { settings } from "../../arching-kaos-web-ui-settings.js"; +import { getSettings, settings } from "../../arching-kaos-web-ui-settings.js"; + +// var settings = getSettings(); +console.log(settings); var settingsSection = { element: 'div', id: "settings-section", - innerHTML: ` -
- - > -

🔧 Settings

-
- ` -} + innerHTML: [ + {element: "div", + className:"where-am-i", + innerHTML:[ + {element: "img", src:"./img/logo.png", onclick: "menusel({id:'#/welcome-section'})"}, + {element: "span", innerText:">"}, + {element: "h2", innerText:"🔧 Settings"} + ] + } + ] +}; makeElement(settingsSection, document.querySelector('.main')); -var settingsPage = document.querySelector('#settings-section'); +export function settingsPage() +{ + return document.querySelector('#settings-section'); +} // var scripts = [ // { @@ -24,21 +33,21 @@ var settingsPage = document.querySelector('#settings-section'); // src:"./js/arching-kaos-web-ui-settings.js" // } // ]; -// +// // for ( var i = 0; i < scripts.length; i++ ) // { // makeElement(scripts[i], document.querySelector('body')); // } -var server = new StellarSdk.Server(settings.stellar.horizon.list[settings.stellar.horizon.active], {allowHttp:true}); - -if ( settings.stellar.scan ) -{ - scanStellarNetworkForPeers(); -} +// var server = new StellarSdk.Server(settings.stellar.horizon.list[settings.stellar.horizon.active], {allowHttp:true}); -if ( settings.ak.scan ) -{ - ringlocalbell(); - setInterval(ringlocalbell, 10*60*1000); -} +// if ( getSettings().stellar.scan ) +// { +// scanStellarNetworkForPeers(); +// } +// +// if ( getSettings().ak.scan ) +// { +// ringlocalbell(); +// setInterval(ringlocalbell, 10*60*1000); +// } diff --git a/src/js/ui/sections/welcomeSection.js b/src/js/ui/sections/welcomeSection.js index 7b4d6be..5636233 100644 --- a/src/js/ui/sections/welcomeSection.js +++ b/src/js/ui/sections/welcomeSection.js @@ -1,46 +1,56 @@ import { makeElement } from "../../arching-kaos-generator.js"; -var welcomeSection = { - element: "div", - id: "welcome-section", - innerHTML: [ - { - element : "div", - className:"where-am-i", - innerHTML: ` +var whereAmI = { + element : "div", + className:"where-am-i", + innerHTML: ` >

Home

` - }, - { - element: "p", - innerText: "Welcome to Arching Kaos project." - }, - { - element: "div", - id: "home-grid", - innerHTML: ` +}; + +var greeting = { + element: "p", + innerText: "Welcome to Arching Kaos project." +}; + +var homeGrid = { + element: "div", + id: "home-grid", + innerHTML: ` ` - }, - { - element : "h3", - innerText: "Render explicit zblock" - }, - { - element: "div", - style:"padding: 1vh 1vw; display: flex; flex-direction: row; align-items: center; gap: 10px;", - innerHTML: ` - - - ` - }, +}; + +var renderTitle = { + element : "h3", + innerText: "Render explicit zblock" +}; + +var renderForm = { + element: "div", + style:"padding: 1vh 1vw; display: flex; flex-direction: row; align-items: center; gap: 10px;", + innerHTML: ` + + + ` +}; + +var welcomeSection = { + element: "div", + id: "welcome-section", + innerHTML: [ + whereAmI, + greeting, + homeGrid, + renderTitle, + renderForm, { element: "div", className: "results-area", -- cgit v1.2.3