Full rebase

js/App.js

@@ -0,0 +1,28 @@
+import Drawer from "./UI/Drawer/Drawer"
+import Home from "./UI/Home/Home"
+import Main from "./UI/Main/Main"
+import Settings from "./UI/Settings/Settings"
+import Config from "./Utils/Config"
+import { showPage } from "./Utils/DOMUtils"
+
+
+export default class App {
+	static instance
+
+	constructor(config) {
+		if (App.instance) return App.instance
+		App.instance = this
+		document.body.classList.remove("init")
+		this.config = new Config(config)
+		this.init()
+	}
+
+	init() {
+		this.main = new Main()
+		this.home = new Home()
+		this.drawer = new Drawer()
+		this.settings = new Settings()
+
+		showPage("home")
+	}
+}

js/UI/Drawer/Drawer.js

@@ -0,0 +1,27 @@
+import App from "../../App";
+
+export default class Drawer {
+	constructor(name) {
+		this.app = new App()
+		this.config = this.app.config
+		this.init()
+	}
+
+	init() {
+		this.importApps()
+	}
+	
+	importApps() {
+		let apps = this.config.getServices()
+		let applist = document.getElementById("app-list");
+		for (let app of apps) {
+			applist.innerHTML += `<a class="box" href="${app.href}">
+				<img src="${app.icon}">
+				<div>
+					<div class="name">${app.name}</div>
+					<div class="desc">${app.desc}</div>
+				</div>
+			</a>`
+		}
+	}
+}

js/UI/Home/Home.js

@@ -0,0 +1,45 @@
+import App from "../../App"
+import { showPage } from "../../Utils/DOMUtils"
+
+
+export default class Home {
+	constructor() {
+		this.app = new App()
+		this.config = this.app.config
+		this.init()
+		this.initHomeUI()
+		this.initBackButtons()
+	}
+
+	init() {
+		let buttons = document.getElementsByClassName("buttons")[0].children
+		for (let button of buttons) {
+			let target = button.getAttribute("t")
+			if (target) {
+				button.addEventListener("click", () => {
+					showPage(target)
+				})
+			}
+		}
+	}
+
+	initBackButtons() {
+		let backButtons = document.getElementsByClassName("back")
+		for (let button of backButtons) {
+			button.addEventListener("click", () => {
+				showPage("home")
+			})
+		}
+	}
+
+	initHomeUI() {
+		let logo = document.getElementById("app-icon")
+		logo.src = this.config.get("icon")
+
+		let name = document.getElementById("app-name")
+		name.innerText = this.config.get("name")
+
+		let desc = document.getElementById("app-desc")
+		desc.innerText = this.config.get("desc")
+	}
+}

js/UI/Main/Main.js

@@ -0,0 +1,26 @@
+import App from "../../App"
+
+export default class Main {
+	constructor() {
+		this.app = new App()
+		this.config = this.app.config
+		this.init()
+	}
+
+	init() {
+		document.title = this.config.get("name")
+		this.initBackgrounds()
+	}
+
+	initBackgrounds() {
+		this.backgrounds = document.getElementById("background")
+		for (let i = 0; i < 2; i++) {
+			let img = document.createElement("img")
+			this.backgrounds.appendChild(img)
+		}
+
+		this.backgrounds = this.backgrounds.children
+		this.backgrounds[0].src = this.config.get("wallpaper")
+		this.backgrounds[1].src = this.config.get("wallpaper_dark")
+	}
+}

js/UI/Settings/Settings.js

@@ -0,0 +1,78 @@
+import App from "../../App";
+import * as EVENTS from "./events";
+
+export default class Settings {
+	constructor() {
+		this.app = new App()
+		this.config = this.app.config
+		this.init()
+	}
+
+	init() {
+		this.checkLocalStorage()
+
+		let darkMode = this.addOnOffTile(
+			"dark_mode", "Dark mode",
+			"Make the colors more appropriate for low-light environments",
+			"dark_mode", EVENTS.onThemeChange
+		)
+		document.getElementById("theme-switcher").addEventListener("click", () => {
+			darkMode.click()
+		})
+
+		this.addOnOffTile(
+			"open_in_new", "Open in new tab",
+			"Clicking on application will open it in a new browser tab",
+			"open_new_tab", EVENTS.onNewTabChange
+		)
+
+		this.addOnOffTile(
+			"blur_on", "Enable blur",
+			"Improves UI sweetness but may have a huge impact on performance",
+			"blur", EVENTS.onBlurChange
+		)
+
+		this.addOnOffTile(
+			"animation", "Animations",
+			"Show nice and fancy page transitions for improved experience",
+			"animations", EVENTS.onAnimationChange
+		)
+	}
+
+	addOnOffTile(icon, name, desc, key, func) {
+		let item = document.createElement("div")
+		item.classList.add("setting")
+		item.innerHTML = `
+			<div class="icon">${icon}</div>
+			<div class="text">
+				<div class="name">${name}</div>
+				<div class="desc">${desc}</div>
+			</div>
+			<div class="switch"></div>`
+
+		let handleState = () => {
+			let c = item.classList
+			if (this.config.get(key)) c.add("checked")
+			else c.remove("checked")
+		}
+		let write = () => {
+			let target_value = !this.config.get(key)
+			this.config.set(key, target_value)
+		}
+		let f = () => {func(this.config)}
+
+		item.addEventListener("click", write)
+		item.addEventListener("click", handleState)
+		if (func) item.addEventListener("click", f)
+
+		handleState()
+		if (func && this.config.changed(key)) f()
+		document.getElementById("settings").appendChild(item)
+		return item
+	}
+
+	checkLocalStorage() {
+		let warn = document.getElementById("no-cookies").classList
+		if (this.config.storageAvailable) warn.add("hidden")
+	}
+}

js/UI/Settings/events.js

@@ -0,0 +1,26 @@
+const CL = document.body.classList
+
+export function onThemeChange(config) {
+	let isDark = config.get("dark_mode")
+	isDark ? CL.add("dark") : CL.remove("dark")
+}
+
+export function onNewTabChange(config) {
+	let openNewTab = config.get("open_new_tab")
+	let appList = document.getElementById("app-list").children
+
+	for (let app of appList) {
+		if (openNewTab) app.setAttribute("target", "_blank")
+		else app.removeAttribute("target") 
+	}
+}
+
+export function onBlurChange(config) {
+	let blur = config.get("blur")
+	blur ? CL.remove("noblur") : CL.add("noblur")
+}
+
+export function onAnimationChange(config) {
+	let animations = config.get("animations")
+	animations ? CL.remove("noanim") : CL.add("noanim")
+}

js/Utils/Config.js

@@ -0,0 +1,47 @@
+export default class Config {
+	constructor(config) {
+		this.config = config
+
+		// localStorage availability check
+		try {
+			window.localStorage
+			this.storageAvailable = true
+		}
+		catch (e) {
+			this.storageAvailable = false
+		}
+	}
+
+	get(key) {
+		let value = this.config["ui"][key]
+		
+		if (this.storageAvailable) {
+			let type = typeof(value)
+			let stored_value = window.localStorage.getItem(key)
+
+			if (stored_value != null) {
+				value = stored_value
+				if (type == "number") value = Number(value)
+				else if (type == "boolean") value = value == "true"
+			}
+		}
+
+		return value
+	}
+
+	set(key, value) {
+		this.config["ui"][key] = value
+
+		if (this.storageAvailable) {
+			window.localStorage.setItem(key, value)
+		}
+	}
+
+	changed(key) {
+		return this.get(key) != this.config["ui"][key]
+	}
+
+	getServices() {
+		return this.config["services"]
+	}
+}

js/Utils/DOMUtils.js

@@ -0,0 +1,12 @@
+export function showPage(target) {
+	let bg = document.getElementById("background").classList
+	if (target == "home") bg.add("scaled")
+	else bg.remove("scaled")
+
+	let pages = document.getElementsByClassName("page")
+	for (let page of pages) {
+		let p = page.getAttribute("p")
+		if (p == target) page.classList.add("current")
+		else page.classList.remove("current")
+	}
+}

js/main.js

@@ -0,0 +1,11 @@
+import App from "./App"
+
+window.addEventListener("DOMContentLoaded", () => {
+	let xhr = new XMLHttpRequest()
+	xhr.open("GET", "config/config.json")
+	xhr.onload = function() {
+		let config = JSON.parse(this.responseText)
+		window.app = new App(config)
+	}
+	xhr.send()
+})