Configuration moved from HTML to JS

This commit is contained in:
Daniel 2023-01-14 14:13:46 +01:00
parent c1b3ecee96
commit d100e582b9
3 changed files with 77 additions and 55 deletions

View File

@ -46,57 +46,7 @@
<div class="icon">apps</div>
<div class="text">Services</div>
</div>
<div class="boxes">
<a class="box" href="caldav">
<img src="img/preview/caldav.png">
<div>
<div class="name">CalDav</div>
<div class="desc">Simple CalDav server for calendar sync between various devices.</div>
</div>
</a>
<a class="box" href="files">
<img src="img/preview/files.png">
<div>
<div class="name">Files</div>
<div class="desc">Fancy file manager for the web.</div>
</div>
</a>
<a class="box" href="gallery">
<img src="img/preview/gallery.png">
<div>
<div class="name">Gallery</div>
<div class="desc">Photo & video gallery syncable with multiple Android devices.</div>
</div>
</a>
<a class="box" href="git">
<img src="img/preview/git.png">
<div>
<div class="name">Git</div>
<div class="desc">Self-hosted, painless, secure place for your repositories.</div>
</div>
</a>
<a class="box" href="mail">
<img src="img/preview/mail.png">
<div>
<div class="name">E-Mail</div>
<div class="desc">Feature-rich, decentralized and secure E-Mail server.</div>
</div>
</a>
<a class="box" href="music">
<img src="img/preview/music.png">
<div>
<div class="name">Music</div>
<div class="desc">Beautiful, moody music streaming app.</div>
</div>
</a>
<a class="box" href="notes">
<img src="img/preview/notes.png">
<div>
<div class="name">Notes</div>
<div class="desc">Sweet & lightweight app for taking notes.</div>
</div>
</a>
</div>
<div class="boxes" id="applist"></div>
</div>
</div>
<div class="page hidden" id="page-about">

View File

@ -13,4 +13,20 @@ function load_img(img) {
function get_background() {
let bg = get("background");
return bg.children[1-bg.classList.contains("dark")];
}
function safe_text(text) {
text = text.replaceAll("<", "&lt;");
text = text.replaceAll(">", "&gt;");
text = text.replaceAll("&", "&amp;");
return text;
}
function mk_entry(app) {
return `
<a class="box" href="${safe_text(app["href"])}">
<img src="${safe_text(app["icon"])}">
<div>
<div class="name">${safe_text(app["name"])}</div>
<div class="desc">${safe_text(app["desc"])}</div>
</div>
</a>`;
}

View File

@ -1,14 +1,60 @@
var CONFIG = {
var UI = {
"dark_mode": false
}
var SERVICES = [
{
"name": "CalDav",
"desc": "Simple CalDav server for calendar sync between various devices.",
"href": "caldav",
"icon": "img/preview/caldav.png"
},
{
"name": "Files",
"desc": "Fancy file manager for the web.",
"href": "files",
"icon": "img/preview/files.png"
},
{
"name": "Gallery",
"desc": "Photo & video gallery syncable with multiple Android devices.",
"href": "gallery",
"icon": "img/preview/gallery.png"
},
{
"name": "Git",
"desc": "Self-hosted, painless, secure place for your repositories.",
"href": "git",
"icon": "img/preview/git.png"
},
{
"name": "E-Mail",
"desc": "Feature-rich, decentralized and secure E-Mail server.",
"href": "mail",
"icon": "img/preview/mail.png"
},
{
"name": "Music",
"desc": "Beautiful, moody music streaming app.",
"href": "music",
"icon": "img/preview/music.png"
},
{
"name": "Notes",
"desc": "Sweet & lightweight app for taking notes.",
"href": "notes",
"icon": "img/preview/notes.png"
}
]
function config(key, value) {
let def = UI[key];
let val = localStorage.getItem(key);
if (def == value && !val) return;
if (value !== undefined) {
localStorage.setItem(key, value);
return value;
return;
}
let val = localStorage.getItem(key);
if (val === null) val = CONFIG.dark_mode;
if (!val) val = UI[key].toString();
return val;
}
@ -17,6 +63,7 @@ function onload() {
btn.onclick = back;
});
switch_theme(config("dark_mode") == "true");
load_apps();
setTimeout(() => {
back();
document.body.classList.remove("init");
@ -54,4 +101,13 @@ function switch_theme(value) {
bg_box.remove("dark");
get_background().src = "img/background.jpg";
}
}
function load_apps() {
let final = "";
for (let i = 0; i < SERVICES.length; i++) {
let app = mk_entry(SERVICES[i]);
final += app;
}
get("applist").innerHTML = final;
}