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/app.js | 142 ++++++++++------ src/js/arching-kaos-fetch.js | 52 +++--- src/js/arching-kaos-generator.js | 4 +- src/js/arching-kaos-log.js | 8 +- src/js/arching-kaos-modules-comments.js | 39 +++-- src/js/arching-kaos-modules-files.js | 5 +- src/js/arching-kaos-modules-mixtapes.js | 13 +- src/js/arching-kaos-modules-news.js | 37 ++++- src/js/arching-kaos-modules-references.js | 20 ++- src/js/arching-kaos-spa-router.js | 28 +++- src/js/arching-kaos-stellar-network.js | 68 ++++---- src/js/arching-kaos-tools.js | 180 +++++++++++---------- src/js/arching-kaos-web-ui-settings.js | 22 ++- src/js/environment-setup.js | 177 +++++++++++++++----- 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 ++++---- src/js/url-generators.js | 19 ++- 23 files changed, 920 insertions(+), 544 deletions(-) (limited to 'src/js') diff --git a/src/js/app.js b/src/js/app.js index b84be92..fd92c87 100644 --- a/src/js/app.js +++ b/src/js/app.js @@ -10,40 +10,96 @@ * TODO: Figure out why it doesn't work in fullscreen App mode (android) * */ -body.width = window.innerWidth; -body.height = window.innerHeight; -pageLayout.width = window.innerWidth; -pageLayout.height = window.innerHeight; -mainContainer.style.display = 'block'; -window.innerWidth <= 850 ? isMobile = true : isMobile = false; +import { makeElement } from "./arching-kaos-generator.js"; +import { locationHashOnChange } from "./arching-kaos-spa-router.js"; +import { doubleFloorMenu, menuinit, menusel, stellarSubToggle, modulesSubToggle, exploreSubToggle } from './ui/menu.js'; +import { mainLayoutSpawn } from "./ui/mainLayout.js"; +import { scanStellarNetworkForPeers } from "./arching-kaos-stellar-network.js"; -function onWindowResize() +window.menusel = menusel; +window.locationHashOnChange = locationHashOnChange; +window.stellarSubToggle = stellarSubToggle; +window.modulesSubToggle = modulesSubToggle; +window.exploreSubToggle = exploreSubToggle; +window.scanStellarNetworkForPeers = scanStellarNetworkForPeers; + +export function body() { - body.width = window.innerWidth; - body.height = window.innerHeight; - pageLayout.width = window.innerWidth; - pageLayout.height = window.innerHeight; - window.innerWidth <= 850 ? isMobile = true : isMobile = false; - isMobile ? doubleFloorMenu.style.display = 'none':doubleFloorMenu.style.display = 'flex'; + return document.querySelector('body'); +} + +export function pageLayout() +{ + return document.querySelector('.page-layout'); } -window.addEventListener('resize', onWindowResize, false); +export function mainContainer() +{ + return document.querySelector('.main'); +} -progressPlaceholder.value = '0'; +window.isMobile = false; -progressPlaceholder.max++; +export function aknet() +{ + return document.querySelector('.aknet-network') +} + +export function resultsArea() +{ + return document.querySelector('.results-area') +} + +export function progressPlaceholder() +{ + return document.querySelector('#total-progress'); +} + +export function httpProgressPlaceholder() +{ + return document.querySelector('#http-progress'); +} -if ( settings.stellar.scan ) +export function currentLogMessageElement() { - scanStellarNetworkForPeers(); + return document.querySelector('#current-log-message'); } -if ( settings.ak.scan ) +export function logsAreaElement() { - ringlocalbell(); - setInterval(ringlocalbell, 10*60*1000); + return document.querySelector("#logs-area-element"); } +export function radio() +{ + return document.querySelector("#radio-player"); +} + +export function radioButton() +{ + return document.querySelector("#radio-button-controller"); +} + + +body().width = window.innerWidth; +body().height = window.innerHeight; +pageLayout().width = window.innerWidth; +pageLayout().height = window.innerHeight; +mainContainer().style.display = 'block'; +window.innerWidth <= 850 ? window.isMobile = true : window.isMobile = false; + +function onWindowResize() +{ + body.width = window.innerWidth; + body.height = window.innerHeight; + pageLayout.width = window.innerWidth; + pageLayout.height = window.innerHeight; + window.innerWidth <= 850 ? window.isMobile = true : window.isMobile = false; + window.isMobile ? doubleFloorMenu().style.display = 'none': doubleFloorMenu().style.display = 'flex'; +} +window.addEventListener('resize', onWindowResize, false); + + //scanStellarNetworkForPeers(); // setInterval(scanStellarNetworkForPeers, 60000); @@ -53,30 +109,24 @@ var root = { html: document.querySelector('html') }; -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" -// } -//]; - -for ( var i = 0; i < scripts.length; i++ ) -{ - makeElement(scripts[i], root.body); -} +// var scripts = [ +// { +// element:"script", +// type: "module", +// src:"./js/ui/mainLayout.js" +// } +// ]; +// +// for ( var i = 0; i < scripts.length; i++ ) +// { +// makeElement(scripts[i], root.body); +// } + +mainLayoutSpawn(); +// And call +menuinit(); +locationHashOnChange(); + +window.isMobile ? doubleFloorMenu().style.display = 'none': doubleFloorMenu().style.display = 'flex'; // vim: tabstop=4 shiftwidth=4 expandtab softtabstop=4 // @license-end diff --git a/src/js/arching-kaos-fetch.js b/src/js/arching-kaos-fetch.js index 523baff..15394b2 100644 --- a/src/js/arching-kaos-fetch.js +++ b/src/js/arching-kaos-fetch.js @@ -5,7 +5,10 @@ * @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL v3.0 * */ -function archingKaosFetchJSON( url, callback, params ){ +import { archingKaosLog } from "./arching-kaos-log.js"; +import { httpProgressPlaceholder, progressPlaceholder } from "./app.js"; + +export function archingKaosFetchJSON( url, callback, params ){ const request = new XMLHttpRequest(); request.addEventListener("load", ()=>{ var json = JSON.parse(request.response); @@ -16,38 +19,49 @@ function archingKaosFetchJSON( url, callback, params ){ } }); request.addEventListener("error", ()=>{ - console.log("An error occured."); + // console.log("An error occured."); }); request.addEventListener("progress", (event)=>{ - if (event.lengthComputable && progressPlaceholder){ - httpProgressPlaceholder.value = (event.loaded / event.total) * 100; + if (event.lengthComputable && progressPlaceholder()){ + httpProgressPlaceholder().value = (event.loaded / event.total) * 100; } else { - httpProgressPlaceholder.value = 0; - console.log("Supposingly zeroed progressPlaceholder"); + httpProgressPlaceholder().value = 0; + // console.log("Supposingly zeroed progressPlaceholder"); } }); request.addEventListener("abort", ()=>{ - console.log("Request aborted."); + // console.log("Request aborted."); }); request.open("GET", url); request.send(); } -async function archingKaosFetchText( url, callback ){ - return fetch(url, { - method:'GET', - headers:{ - Accept: 'application/json' +export async function archingKaosFetchText( url, callback, params ){ + const request = new XMLHttpRequest(); + request.addEventListener("load", ()=>{ + var text = request.response; + if(request.status !== 404){ + callback(text, params); + } else { + archingKaosLog(`ERROR ${request.status} while loading ${url}`); } - }).then(response=>{ - if(response.ok){ - response.text().then(text=>{ - return callback(text); - }) + }); + request.addEventListener("error", ()=>{ + // console.log("An error occured."); + }); + request.addEventListener("progress", (event)=>{ + if (event.lengthComputable && progressPlaceholder()){ + httpProgressPlaceholder().value = (event.loaded / event.total) * 100; } else { - console.log(e); + httpProgressPlaceholder.value = 0; + // console.log("Supposingly zeroed progressPlaceholder"); } - }) + }); + request.addEventListener("abort", ()=>{ + // console.log("Request aborted."); + }); + request.open("GET", url); + request.send(); } // @license-end diff --git a/src/js/arching-kaos-generator.js b/src/js/arching-kaos-generator.js index 9c80954..9a0398d 100644 --- a/src/js/arching-kaos-generator.js +++ b/src/js/arching-kaos-generator.js @@ -5,7 +5,7 @@ * @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL v3.0 * */ -function makeElement(obj, attachTo) +export function makeElement(obj, attachTo) { if (obj.element !== 'head' && obj.element !== 'body' ) { @@ -50,7 +50,7 @@ function makeElement(obj, attachTo) attachTo.appendChild(temp); } -function makeUpSite(tree, root){ +export function makeUpSite(tree, root){ if ( tree !== undefined && Array.isArray(tree) ) { for (var i = 0; i < tree.length; i++) diff --git a/src/js/arching-kaos-log.js b/src/js/arching-kaos-log.js index 1f79994..e348ee6 100644 --- a/src/js/arching-kaos-log.js +++ b/src/js/arching-kaos-log.js @@ -5,14 +5,16 @@ * @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL v3.0 * */ +import { currentLogMessageElement, logsAreaElement } from "./app.js"; +import { makeElement } from "./arching-kaos-generator.js"; -function archingKaosLog(message){ +export function archingKaosLog(message){ var lts = new Date(Date.now()); var sta = { element:"div", innerText: lts.toISOString() + " " + message }; - currentLogMessageElement.innerText = sta.innerText; - makeElement(sta, logsAreaElement); + currentLogMessageElement().innerText = sta.innerText; + makeElement(sta, logsAreaElement()); } // @license-end diff --git a/src/js/arching-kaos-modules-comments.js b/src/js/arching-kaos-modules-comments.js index aad581f..8db1b57 100644 --- a/src/js/arching-kaos-modules-comments.js +++ b/src/js/arching-kaos-modules-comments.js @@ -5,32 +5,37 @@ * @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL v3.0 * */ -function akModuleComments(zblockIPFSHash, blockObject, json){ +import { makeElement } from "./arching-kaos-generator.js"; +import { + getFullText, + getNicknameAssossiatedWithGPG +} from "./arching-kaos-tools.js"; +import { archingKaosFetchText } from "./arching-kaos-fetch.js"; +import { getIPFSURL } from "./url-generators.js"; + +export function akModuleComments(zblockIPFSHash, blockObject, json){ if (!document.querySelector('#comment-'+zblockIPFSHash)){ var divs = document.querySelector('#comments-section'); var art = { element:"article", - id: 'comment-'+zblockIPFSHash + id: `comment-${zblockIPFSHash}`, + innerHTML: [ + { + element:"p", + innerText:"Published: " + new Date(json.datetime*1000) + }, + { + element:"p", + innerText:"Contributor: " + getNicknameAssossiatedWithGPG(blockObject.gpg) + } + ] }; makeElement(art, divs); - art = document.querySelector('#comment-'+zblockIPFSHash); - if(json.datetime){ - var small = { - element:"p", - innerText:"Published: " + new Date(json.datetime*1000) - }; - makeElement(small, art); - } - var small = { - element:"p", - innerText:"Contributor: " + getNicknameAssossiatedWithGPG(blockObject.gpg) - }; - makeElement(small, art); if(json.ipfs){ - getipfstext(json.ipfs,art.id); + archingKaosFetchText(getIPFSURL(json.ipfs), getFullText, [`#comment-${zblockIPFSHash}`]); } if (document.querySelector("#comments-sec-not-found")) document.querySelector("#comments-sec-not-found").hidden=true; - makeElement(document.createElement("hr"), divs); + makeElement({element:"hr"}, divs); } } // @license-end diff --git a/src/js/arching-kaos-modules-files.js b/src/js/arching-kaos-modules-files.js index b566226..fb325aa 100644 --- a/src/js/arching-kaos-modules-files.js +++ b/src/js/arching-kaos-modules-files.js @@ -5,7 +5,10 @@ * @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL v3.0 * */ -function akModuleFiles(zblockIPFSHash, blockObject, json){ +import { getNicknameAssossiatedWithGPG } from "./arching-kaos-tools.js"; +import { makeElement } from "./arching-kaos-generator.js"; + +export function akModuleFiles(zblockIPFSHash, blockObject, json){ if (!document.querySelector('#file-'+zblockIPFSHash)){ var divs = document.querySelector('#files-section'); var art = { diff --git a/src/js/arching-kaos-modules-mixtapes.js b/src/js/arching-kaos-modules-mixtapes.js index ac23ed4..bf11d9d 100644 --- a/src/js/arching-kaos-modules-mixtapes.js +++ b/src/js/arching-kaos-modules-mixtapes.js @@ -5,8 +5,11 @@ * @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL v3.0 * */ +import { makeElement } from "./arching-kaos-generator.js"; +import { getIPFSURL } from "./url-generators.js"; +import { addMixtapeID, setMixtape, getMixtapes } from "./environment-setup.js"; -function akModuleMixtapes(zblockIPFSHash, zblockObject, blockObject, json){ +export function akModuleMixtapes(zblockIPFSHash, zblockObject, blockObject, json){ if(!document.querySelector('#mixtape-'+zblockIPFSHash)){ var divs = document.querySelector('#mixtapes-section'); var art = { @@ -37,10 +40,10 @@ function akModuleMixtapes(zblockIPFSHash, zblockObject, blockObject, json){ makeElement(art, divs); var audio = document.querySelector('#mixtape-player-'+zblockIPFSHash); audio.setAttribute('controls',''); - mixtapeIds.push('mixtape-player-'+zblockIPFSHash); + addMixtapeID(zblockIPFSHash); audio.addEventListener( "loadedmetadata", ()=>{ - if ( mixtapes[zblockIPFSHash] === undefined ){ - mixtapes[zblockIPFSHash]={ + if ( getMixtapes()[zblockIPFSHash] === undefined ){ + setMixtape(zblockIPFSHash, { zblock:zblockIPFSHash, block:zblockObject.block, block_signature:zblockObject.block_signature, @@ -52,7 +55,7 @@ function akModuleMixtapes(zblockIPFSHash, zblockObject, blockObject, json){ gpg:blockObject.gpg, timestamp:blockObject.timestamp, audioDuration:audio.duration - }; + }); } /* console.log( zblockIPFSHash+"'s duration is: "+ diff --git a/src/js/arching-kaos-modules-news.js b/src/js/arching-kaos-modules-news.js index d1ebc23..49dfb0a 100644 --- a/src/js/arching-kaos-modules-news.js +++ b/src/js/arching-kaos-modules-news.js @@ -5,8 +5,16 @@ * @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL v3.0 * */ +import { makeElement } from "./arching-kaos-generator.js"; +import { archingKaosFetchText } from "./arching-kaos-fetch.js"; +import { + getNicknameAssossiatedWithGPG, + getFullText, + getPreviewText +} from "./arching-kaos-tools.js"; +import { getIPFSURL } from "./url-generators.js"; -function akModuleNews(zblockIPFSHash, zblockObject, blockObject, json){ +export function akModuleNews(zblockIPFSHash, zblockObject, blockObject, json){ if (!document.querySelector('#news-'+zblockIPFSHash)){ var newsSectionDivElement = document.querySelector('#news-section'); var articleContainerElement = { @@ -14,7 +22,9 @@ function akModuleNews(zblockIPFSHash, zblockObject, blockObject, json){ id:`news-${zblockIPFSHash}`, innerHTML: [ { element:"a", innerText : json.title, href : '#news-'+zblockIPFSHash }, + { element:"span", innerText : ' '}, { element:"a", innerText:'[permalink]', target: '_blank', href:'https://news.arching-kaos.net/?from_zblock='+zblockIPFSHash }, + { element:"p", innerText:`zblock: ${zblockIPFSHash}` }, { element:"p", innerText:"Published: " + new Date(blockObject.timestamp*1000) }, { element:"p", innerText:"Contributor: " + getNicknameAssossiatedWithGPG(blockObject.gpg) }, { element:"hr" } @@ -24,15 +34,28 @@ function akModuleNews(zblockIPFSHash, zblockObject, blockObject, json){ if(json.ipfs){ archingKaosFetchText(getIPFSURL(json.ipfs), getFullText,[`#news-${zblockIPFSHash}`]); } + if (document.querySelector("#news-sec-not-found")) document.querySelector("#news-sec-not-found").hidden=true; + makeElement({ element:"hr"}, newsSectionDivElement); + } + if (!document.querySelector('#news-preview-'+zblockIPFSHash)){ + var newsSectionDivElement = document.querySelector('.preview'); + var articleContainerElement = { + element:"article", + id:`news-preview-${zblockIPFSHash}`, + innerHTML: [ + { element:"a", innerText : json.title, href : '#news-'+zblockIPFSHash }, + { element:"span", innerText : ' '}, + { element:"a", innerText:'[permalink]', target: '_blank', href:'https://news.arching-kaos.net/?from_zblock='+zblockIPFSHash }, + { element:"p", innerText:"Published: " + new Date(blockObject.timestamp*1000) }, + { element:"p", innerText:"Contributor: " + getNicknameAssossiatedWithGPG(blockObject.gpg) }, + { element:"hr" } + ] }; - makeElement(small, articleContainerElement); - var hr = { element:"hr" }; - makeElement(hr, articleContainerElement); + makeElement(articleContainerElement, newsSectionDivElement); if(json.ipfs){ - getipfstext(json.ipfs,articleContainerElement.id); + archingKaosFetchText(getIPFSURL(json.ipfs), getPreviewText, [`#news-preview-${zblockIPFSHash}`]); } - if (document.querySelector("#news-sec-not-found")) document.querySelector("#news-sec-not-found").hidden=true; - makeElement(hr, newsSectionDivElement); + makeElement({ element:"hr"}, newsSectionDivElement); } } // @license-end diff --git a/src/js/arching-kaos-modules-references.js b/src/js/arching-kaos-modules-references.js index f609d3a..c6aca8a 100644 --- a/src/js/arching-kaos-modules-references.js +++ b/src/js/arching-kaos-modules-references.js @@ -5,17 +5,25 @@ * @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL v3.0 * */ -function resolveReferences(references){ - for( entry in references ){ +import { + getReferences, + setReference, + getReference +} from "./environment-setup.js"; + +export function resolveReferences(){ + console.log(getReferences()); + const references = getReferences(); + for( var entry = 0; entry < references.length; entry++ ){ var comment = document.querySelector('#comment-'+references[entry].dataExpansion.reference); var article = document.querySelector('#news-'+references[entry].dataExpansion.refer_to); article.appendChild(comment); } } -function storeReference(zblockIPFSHash, zblockObject, blockObject, json, references){ - if ( references[zblockIPFSHash] === undefined ){ - references[zblockIPFSHash]={ +export function storeReference(zblockIPFSHash, zblockObject, blockObject, json, references){ + if ( getReference(zblockIPFSHash) === undefined ){ + setReference(zblockIPFSHash, { zblock:zblockIPFSHash, block:zblockObject.block, block_signature:zblockObject.block_signature, @@ -26,7 +34,7 @@ function storeReference(zblockIPFSHash, zblockObject, blockObject, json, referen detach:blockObject.detach, gpg:blockObject.gpg, timestamp:blockObject.timestamp - }; + }); } } // @license-end diff --git a/src/js/arching-kaos-spa-router.js b/src/js/arching-kaos-spa-router.js index 1775d24..162a316 100644 --- a/src/js/arching-kaos-spa-router.js +++ b/src/js/arching-kaos-spa-router.js @@ -17,17 +17,31 @@ * the "route" we got from `location.search`. * */ +import { menuinit, menuids } from "./ui/menu.js"; -function locationHashSetter(value){ +export function locationHashSetter(value) +{ window.location.hash = value; locationHashOnChange(); } -function locationHashGetter(){ +export function locationHashGetter() +{ return window.location.hash; } -function locationHashOnChange(){ +export function getWelcomeSection() +{ + return document.querySelector('#welcome-section'); +} + +export function getSoftError() +{ + return document.querySelector('#not-found-section'); +} + +export function locationHashOnChange() +{ var route = new Object; route.full = locationHashGetter(); route.args = route.full.split('/'); @@ -35,19 +49,19 @@ function locationHashOnChange(){ route.subcommand = route.args[2]; menuinit(); if ( (locationHashGetter() !== 'undefined') && (locationHashGetter() === '') ){ - document.querySelector('#welcome-section').hidden=false; + getWelcomeSection.hidden=false; } else if ( route.args[1] == "route" ) { - document.querySelector('#welcome-section').hidden=false; + getWelcomeSection.hidden=false; if ( route.args.length === 4 ) { if ( route.args[2] === "zblock" ) { seekZblock(route.args[3], ['search', false]); } } - } else if ( (locationHashGetter() !== 'undefined') && ( menuids.includes(route.menuid))){ + } else if ( (locationHashGetter() !== 'undefined') && ( menuids().includes(route.menuid))){ document.querySelector(route.menuid).hidden=false; } else { - document.querySelector('#not-found-section').hidden=false; + getSoftError().hidden=false; } } diff --git a/src/js/arching-kaos-stellar-network.js b/src/js/arching-kaos-stellar-network.js index ca4d586..a08147e 100644 --- a/src/js/arching-kaos-stellar-network.js +++ b/src/js/arching-kaos-stellar-network.js @@ -5,21 +5,39 @@ * @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL v3.0 * */ +import { archingKaosLog } from "./arching-kaos-log.js"; +import { archingKaosFetchJSON } from "./arching-kaos-fetch.js"; +import { + getStellarConfigurationVariableURL, + getTrustlinesURL, + getHoldersOfActiveAssetURL +} from "./url-generators.js"; + +import { progressPlaceholder } from "./app.js"; + +import { + increaseStellarNetworkConfiguredAddresses, + addToFoundHolders, + setStellarParticipants, + setStellarParticipantsScanned +} from "./environment-setup.js"; + +import { makeElement } from "./arching-kaos-generator.js"; +import { getConfiguration } from "./arching-kaos-tools.js"; + +var lastPage = ''; function getNumberOfTrustlinesAndRenderThem(json){ var number = json._embedded.records[0].accounts.authorized; var stats = document.querySelector('.stellar-network').querySelector('summary'); if(!document.querySelector("#stellar-participants-sum")){ - var small = document.createElement("span"); - small.id = 'stellar-participants-sum'; - stats.appendChild(small); + makeElement({element: "span", id: 'stellar-participants-sum', innerText: `( ${number} )`}, stats); } - document.querySelector("#stellar-participants-sum").innerText = ' (' + number + ')'; archingKaosLog("Loading trustlines... Found "+number+"!"); - progressPlaceholder.value++; - stellarParticipants=number; - stellarParticipantsScanned=number; + progressPlaceholder().value++; + setStellarParticipants(number); + setStellarParticipantsScanned(number); } function renderStellarAddress(stellarAddress){ @@ -38,11 +56,11 @@ function renderStellarAddress(stellarAddress){ function renderStellarAddressesAndProceed(json){ var records = json._embedded.records; - for ( index in records ){ - holders.push(records[index].account_id); - progressPlaceholder.max++; - renderStellarAddress(records[index].account_id); - checkAddressForConfigurationVariable(records[index].account_id); + for ( var i = 0; i < records.length; i++ ){ + addToFoundHolders(records[i].account_id); + progressPlaceholder().max++; + renderStellarAddress(records[i].account_id); + checkAddressForConfigurationVariable(records[i].account_id); } if (json._links.next) getHolders(json._links.next.href); } @@ -50,7 +68,7 @@ function renderStellarAddressesAndProceed(json){ function renderConfigurationIPNSLinkAndProceed(json, stellarAddress){ renderStellarAddress(stellarAddress); document.querySelector('#'+stellarAddress).style="color: #3dbb3d;" - stellarNetworkConfiguredAddresses += 1; + increaseStellarNetworkConfiguredAddresses(); console.log(atob(json.value)); console.log(stellarAddress); getConfiguration(atob(json.value),stellarAddress); @@ -80,27 +98,17 @@ function getHolders(a=0){ } lastPage=url; if (doIt) { - archingKaosFetchJSON(url, renderStellarAddressesAndProceed); + archingKaosFetchJSON(url, renderStellarAddressesAndProceed, null); } archingKaosLog("Searching holders... Done!"); } -function getStellarConfigurationVariableURL(stellarAddress){ - return settings.stellar.horizon.list[settings.stellar.horizon.active]+ - 'accounts/'+ - stellarAddress+ - '/data/'+ - settings.stellar.variableNames.list[settings.stellar.variableNames.active]; -} - function checkAddressForConfigurationVariable(stellarAddress) { archingKaosLog("Checking configuration for "+ stellarAddress+ "..."); archingKaosFetchJSON(getStellarConfigurationVariableURL(stellarAddress), renderConfigurationIPNSLinkAndProceed, stellarAddress); - progressPlaceholder.value++; + progressPlaceholder().value++; } -var server = new StellarSdk.Server(settings.stellar.horizon.list[settings.stellar.horizon.active], {allowHttp:true}); - function steptwo(i){ var ta=document.querySelector("#stellar-balances-table"); for (b in i.balances) { @@ -113,8 +121,8 @@ function steptwo(i){ ] } makeElement(amount, ta); - progressPlaceholder.max++; - progressPlaceholder.value++; + progressPlaceholder().max++; + progressPlaceholder().value++; if(document.querySelector("#stellar-balances-not-found")) document.querySelector("#stellar-balances-not-found").hidden = true; } } @@ -144,8 +152,8 @@ async function fetchNodeInfoFromClientWallet(stellarAddress){ innerText:atob(json.value) }; makeElement(cnf, document.querySelector('#stellar-data-config')); - progressPlaceholder.max++; - progressPlaceholder.value++; + progressPlaceholder().max++; + progressPlaceholder().value++; getConfiguration(atob(json.value),stellarAddress); }); } @@ -186,7 +194,7 @@ function connect(){ // } } -function scanStellarNetworkForPeers(){ +export function scanStellarNetworkForPeers(){ getTrustlines(); getHolders(); } diff --git a/src/js/arching-kaos-tools.js b/src/js/arching-kaos-tools.js index 0f62fd5..1ebda52 100644 --- a/src/js/arching-kaos-tools.js +++ b/src/js/arching-kaos-tools.js @@ -5,6 +5,28 @@ * @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL v3.0 * */ +import { archingKaosLog } from "./arching-kaos-log.js"; +import { makeElement } from "./arching-kaos-generator.js"; +import { progressPlaceholder } from "./app.js"; +import { archingKaosFetchJSON } from "./arching-kaos-fetch.js"; +import { getIPFSURL, getIPNSURL } from "./url-generators.js"; +import { + stellarParticipantInfo, + getStellarParticipantsScanned, + getStellarNetworkConfiguredAddresses, + setFullZblock, + setZblock, + setData, + getParticipants, + setZchainLoadingStatus, + getZchainLoadingStatuses +} from "./environment-setup.js"; +import { akModuleComments } from "./arching-kaos-modules-comments.js"; +import { akModuleFiles } from "./arching-kaos-modules-files.js"; +import { akModuleMixtapes } from "./arching-kaos-modules-mixtapes.js"; +import { akModuleNews } from "./arching-kaos-modules-news.js"; +import { storeReference, resolveReferences } from "./arching-kaos-modules-references.js"; + function getArrayLength(array){ var length = 0; for ( e in array ) { @@ -52,28 +74,33 @@ function renderStellarAddressPlaceholder(stellarAddress){ function nodeInfoRender(json, stellarAddress){ var divs = renderStellarAddressPlaceholder(stellarAddress); - for( key in Object.keys(json) ){ - if ( typeof(json[Object.keys(json)[key]]) === "string" ) { - if(!document.querySelector('#'+Object.keys(json)[key]+'-'+stellarAddress)){ - var p = document.createElement("p"); - p.id = Object.keys(json)[key]+'-'+stellarAddress; - p.innerText = Object.keys(json)[key] + ": " +json[Object.keys(json)[key]]; - divs.appendChild(p); + console.log(json); + const keys = Object.keys(json); + for( var i = 0; i < keys.length; i++ ) + { + if ( typeof(json[keys[i]]) === "string" ) { + if(!document.querySelector('#'+keys[i]+'-'+stellarAddress)){ + var p = { + element:"p", + id: `${keys[i]}-${stellarAddress}`, + innerText: `${keys[i]}: ${json[keys[i]]}` + }; + makeElement(p, divs); } } - else if ( typeof(json[Object.keys(json)[key]]) === "Object"||"Array" ) { - nodeInfoRender(json[Object.keys(json)[key]], stellarAddress); + else if ( typeof(json[keys[i]]) === "Object"||"Array" ) { + nodeInfoRender(json[keys[i]], stellarAddress); } } } function nodeInfoRenderAndProceed(json, stellarAddress){ nodeInfoRender(json, stellarAddress); - participants[stellarAddress]=json; - if ( stellarParticipantsScanned === 0 ) { + stellarParticipantInfo(stellarAddress, json); + if ( getStellarParticipantsScanned() === 0 ) { archingKaosLog('Scanned all Stellar participants'); } - progressPlaceholder.value++; + progressPlaceholder().value++; if (json.zlatest) { seekZblock(json.zlatest, [json.gpg, json]); } @@ -100,8 +127,8 @@ function renderZblockAndProceed(json, params){ }; makeElement(p, zblockElement); } - progressPlaceholder.max++; - progressPlaceholder.value++; + progressPlaceholder().max++; + progressPlaceholder().value++; //if (recursive) seekBlock(json.block,zblockIPFSHash,group,json); seekBlock(json.block,zblockIPFSHash,group,json,recursive); } @@ -167,44 +194,34 @@ function blockRenderAndProceed(json, params){ }; if(detailsPlace!== null) makeElement(p, detailsPlace); } - progressPlaceholder.value++; + progressPlaceholder().value++; exe(json.action,json.data,json,zblockIPFSHash,group,zblockObject,recursive); if ( checkIfGenesis(json.previous) ){ archingKaosLog("Done loading " + group + " zchain!") - progressPlaceholder.value++; - zchainLoadingStatus[group] = {loading: "completed"}; - if ( getArrayLength(zchainLoadingStatus) === stellarNetworkConfiguredAddresses){ + progressPlaceholder().value++; + setZchainLoadingStatus(group, {loading: "completed"}); + if ( getZchainLoadingStatuses().length === getStellarNetworkConfiguredAddresses()){ var x=0; - for ( element in zchainLoadingStatus ) { - if ( zchainLoadingStatus[element].loading === "completed" ){ + for ( element in getZchainLoadingStatuses() ) { + if ( getZchainLoadingStatuses()[element].loading === "completed" ){ x++; } } - if ( x === getArrayLength(zchainLoadingStatus) ){ + if ( x === getZchainLoadingStatuses().length ){ archingKaosLog("Everything is completed!"); sortedMixtapes = mixtapes.sort(mixtapeSorting); } } - resolveReferences(references); - radioLoad(); + resolveReferences(); + //radioLoad(); } else { console.log("deep in :" +group); if (recursive) seekZblock(json.previous, [group]); } } -function getNicknameAssossiatedWithGPG(gpgIPFSHash){ - for (let i in participants){ - if ( participants[i].gpg === gpgIPFSHash ){ - if (participants[i].profile.nickname){ - return participants[i].profile.nickname; - } - } - } -} - -function getConfiguration(nodeInfoIPNSLink,stellarAddress){ - progressPlaceholder.max++; +export function getConfiguration(nodeInfoIPNSLink,stellarAddress){ + progressPlaceholder().max++; archingKaosLog("Parsing the configuration...") archingKaosFetchJSON(getIPNSURL(nodeInfoIPNSLink), nodeInfoRenderAndProceed, stellarAddress) } @@ -250,7 +267,7 @@ function seekBlock(blockIPFSHash, zblockIPFSHash, group, zblockObject, recursive console.log(recursive); archingKaosLog("Seeking block "+blockIPFSHash+"..."); // detailsPlace = document.querySelector('#zb-'+zblockIPFSHash); - progressPlaceholder.max++; + progressPlaceholder().max++; archingKaosFetchJSON( getIPFSURL(blockIPFSHash), blockRenderAndProceed, @@ -258,12 +275,18 @@ function seekBlock(blockIPFSHash, zblockIPFSHash, group, zblockObject, recursive ); } -function getNicknameAssossiatedWithGPG(gpgIPFSHash){ - for (let i in participants){ - if ( participants[i].gpg === gpgIPFSHash ){ - if (participants[i].profile.nickname !== 'undefined'){ +export function getNicknameAssossiatedWithGPG(gpgIPFSHash){ + const participants = getParticipants(); + for (var i = 0; i < participants.length; i++) + { + if ( participants[i].gpg === gpgIPFSHash ) + { + if (participants[i].profile.nickname !== 'undefined') + { return participants[i].profile.nickname; - } else { + } + else + { return gpgIPFSHash; } } @@ -319,12 +342,6 @@ function seekZblock(zblockIPFSHash, params){ archingKaosFetchJSON(getIPFSURL(zblockIPFSHash), renderZblockAndProceed, [zblockIPFSHash, group, recursive]); } -function getConfiguration(nodeInfoIPNSLink,stellarAddress){ - progressPlaceholder.max++; - archingKaosLog("Parsing the configuration...") - archingKaosFetchJSON(getIPNSURL(nodeInfoIPNSLink), nodeInfoRenderAndProceed, stellarAddress) -} - function renderZblockAsModule(json, params){ const [action, group, zblockIPFSHash, zblockObject, blockObject, references, recursive] = params; if (action == "files/add") { @@ -358,7 +375,7 @@ function renderZblockAsModule(json, params){ function saveDataAndFullZblocks(json,params){ const [action, group, zblockIPFSHash, zblockObject, blockObject, references, recursive] = params; - fullZblocks[zblockIPFSHash]={ + setFullZblock(zblockIPFSHash, { zblock:zblockIPFSHash, block:zblockObject.block, block_signature:zblockObject.block_signature, @@ -369,16 +386,15 @@ function saveDataAndFullZblocks(json,params){ detach:blockObject.detach, gpg:blockObject.gpg, timestamp:blockObject.timestamp - }; - zblocks[group] = new Array; - zblocks[group].push(zblockIPFSHash); - data[blockObject.data]=json; - progressPlaceholder.max++; - progressPlaceholder.value++; + }); + setZblock(group, zblockIPFSHash); + setData(blockObject.data, json); + progressPlaceholder().max++; + progressPlaceholder().value++; } function doStuffWithFetchedDataBlock(json, params){ - saveDataAndFullZblocks(json,params); + saveDataAndFullZblocks(json, params); renderZblockAsModule(json, params); } @@ -387,35 +403,37 @@ function exe(action,dataIPFSHash,blockObject,zblockIPFSHash,group,zblockObject,r archingKaosFetchJSON( getIPFSURL(dataIPFSHash), doStuffWithFetchedDataBlock, - [action, group, zblockIPFSHash, zblockObject, blockObject, references, recursive] + [action, group, zblockIPFSHash, zblockObject, blockObject, null, recursive] ); } -function getipfstext(ipfsHash, articleid){ - fetch(getIPFSURL(ipfsHash), { - method:'GET', - headers:{ - Accept: 'text/plain' - } - }).then(response=>{ - if(response.ok){ - response.text().then(text=>{ - var divs = document.querySelector('#'+articleid); - if(text){ - var lines = text.split('\n'); - // remove one line, starting at the first position - // lines.splice(0,1); - var newtext = lines.join('\n'); - var pre = { - element:"div", - className:"news-text", - innerHTML:DOMPurify.sanitize(marked.parse(newtext)) - }; - makeElement(pre, divs); - } - }) - } - }) +export function getPreviewText(text, params) +{ + var [ articleid ] = params; + var divs = document.querySelector(articleid); + if(text){ + var newtext = text.substring(0, 500); + var pre = { + element:"div", + className:"news-text", + innerHTML:DOMPurify.sanitize(marked.parse(newtext)) + }; + makeElement(pre, divs); + } +} + +export function getFullText(text, params) +{ + var [ articleid ] = params; + var divs = document.querySelector(articleid); + if(text){ + var pre = { + element:"div", + className:"news-text", + innerHTML:DOMPurify.sanitize(marked.parse(text)) + }; + makeElement(pre, divs); + } } function checkIfZchainAndProceed(json, params){ diff --git a/src/js/arching-kaos-web-ui-settings.js b/src/js/arching-kaos-web-ui-settings.js index e170f4e..c6a5399 100644 --- a/src/js/arching-kaos-web-ui-settings.js +++ b/src/js/arching-kaos-web-ui-settings.js @@ -22,6 +22,9 @@ * kays or other more personal stuff. Need to encrypt these with a password too! * */ +import { makeElement } from "./arching-kaos-generator.js"; +import { settingsPage } from "./ui/sections/settingsSection.js"; + var default_settings = { ipfs: { gateway: { @@ -78,7 +81,7 @@ var default_settings = { }, scan: false } -} +}; // TODO: Make up a settings configuration page to set this up initially rather // than forcing visitors to just save them into their local storage. @@ -93,7 +96,12 @@ var default_settings = { // // All comments above are replaced by temporary initializing without saving // anything in the localStorage -var settings = default_settings; +export function getSettings() +{ + return default_settings; +} + +export var settings = default_settings; // Also, remove any settings stored from previous runs window.localStorage.removeItem("ak-settings"); @@ -112,8 +120,6 @@ if (( location.origin === "http://z.kaotisk-hund.com") || settings.ipfs.gateway.active = 0; } -var settingsPage = document.querySelector('#settings-section'); - var settingsKeys = Object.keys(settings); function renderCheck(container, value){ @@ -127,7 +133,7 @@ function renderCheck(container, value){ function renderList(container, value){ var selectOptions = document.createElement('select'); - for ( i = 0 ; i < value.list.length; i++ ){ + for ( var i = 0 ; i < value.list.length; i++ ){ var option = document.createElement("option"); if ( i === value.active ) { option.selected = true; @@ -141,7 +147,7 @@ function renderList(container, value){ function renderAssets(container, value){ var selectOptions = document.createElement('select'); - for ( i = 0 ; i < value.list.length; i++ ){ + for ( var i = 0 ; i < value.list.length; i++ ){ var option = document.createElement("option"); if ( i === value.active ) { option.selected = true; @@ -200,7 +206,7 @@ function settingPlaceToDOM(key, value){ console.log(`Settings value: ${value}, type: ${typeof(value)}`); // container.innerText = value; } - settingsPage.appendChild(container); + settingsPage().appendChild(container); } settingsKeys.forEach( @@ -212,7 +218,7 @@ settingsKeys.forEach( /* Small dump as pre text */ var predump = document.createElement('pre'); predump.innerText = JSON.stringify(settings, null, 2); -settingsPage.appendChild(predump); +settingsPage().appendChild(predump); /* END of: Small dump as pre text */ // console.log(settings.ipfsGatewayAddress[settings.ipfsSelectedGatewayAddress]); diff --git a/src/js/environment-setup.js b/src/js/environment-setup.js index 5daf7c7..b1eede8 100644 --- a/src/js/environment-setup.js +++ b/src/js/environment-setup.js @@ -6,53 +6,164 @@ * */ var mixtapeIds = new Array; +export function addMixtapeID(zblockIPFSHash) +{ + mixtapeIds.push('mixtape-player-'+zblockIPFSHash); +} + var mixtapes = new Array; +export function setMixtape(zblockIPFSHash, json) +{ + mixtapes[zblockIPFSHash] = json; +} +export function getMixtapes() +{ + return mixtapes; +} + var sortedMixtapes = new Array; var zchainsFound = 0; -var holders = new Array; +var foundHolders = new Array; var gpglist = new Array; -var participants = new Array; var stellarNetworkConfiguredAddresses = 0; var stellarParticipants = 0; + +var participants = new Array; +export function getParticipants() +{ + return participants; +} + +export function stellarParticipantInfo(participant, info) +{ + participants[participant] = info; +} + +export function getStellarNetworkConfiguredAddresses() +{ + return stellarNetworkConfiguredAddresses; +} + +export function increaseStellarNetworkConfiguredAddresses() +{ + stellarNetworkConfiguredAddresses += 1; +} + +export function getFoundHolders() +{ + return foundHolders; +} + +export function addToFoundHolders(holder) +{ + foundHolders.push(holder); +} + +export function getStellarParticipants() +{ + return stellarParticipants; +} + +export function setStellarParticipants(i) +{ + stellarParticipants = i; +} + +export function increaseStellarParticipants() +{ + stellarParticipants++; +} + var stellarParticipantsScanned = 0; + +export function getStellarParticipantsScanned() +{ + return stellarParticipantsScanned; +} +export function setStellarParticipantsScanned(i) +{ + stellarParticipantsScanned = i; +} + var zchainLoadingStatus = new Array; +export function setZchainLoadingStatus(zchain, status) +{ + zchainLoadingStatus[zchain] = status; +} +export function getZchainLoadingStatus(zchain) +{ + return zchainLoadingStatus[zchain]; +} +export function getZchainLoadingStatuses() +{ + return zchainLoadingStatus; +} + var zchains = new Array; var references = new Array; +export function getReferences() +{ + return references; +} + +export function getReference(zblock) +{ + return references[zblock]; +} + +export function setReference(zblock, data) +{ + references[zblock] = data; +} + var fullZblocks = new Array; +export function getFullZblock(zblockIPFSHash) +{ + return fullZblocks[zblockIPFSHash]; +} + +export function getFullZblocks() +{ + return fullZblocks; +} + +export function setFullZblock(zblockIPFSHash, data) +{ + fullZblocks[zblockIPFSHash] = data; +} + var zblocks = new Array; +export function getZblocks() +{ + return zblocks; +} + +export function getZblock(group) +{ + return zblocks[group]; +} + +export function setZblock(group, zblockIPFSHash) +{ + if ( zblocks[group] === undefined ) + { + zblocks[group] = new Array; + } + zblocks[group].push(zblockIPFSHash); +} + var blocks = new Array; var data = new Array; + +export function setData(hash, json) +{ + data[hash] = json; +} + var nodeInfo = new Array; -var body = document.querySelector('body'); -var pageLayout = document.querySelector('.page-layout'); -var mainContainer = document.querySelector('.main'); -var isMobile = false; -var aknet = document.querySelector('.aknet-network') -var resultsArea = document.querySelector('.results-area') -/* - * 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' -]; + /* * We select our basic placeholders. @@ -61,12 +172,6 @@ var menuids = [ * to append data on specific places in the page. * */ -var progressPlaceholder = document.querySelector('#total-progress'); -var httpProgressPlaceholder = document.querySelector('#http-progress'); -var currentLogMessageElement = document.querySelector('#current-log-message'); -var logsAreaElement = document.querySelector("#logs-area-element"); -var radio = document.querySelector("#radio-player"); -var radioButton = document.querySelector("#radio-button-controller"); /* * Get addresses that trust the asset 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.displ