diff options
Diffstat (limited to 'src/js/ui/menu.js')
| -rw-r--r-- | src/js/ui/menu.js | 260 |
1 files changed, 146 insertions, 114 deletions
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 |