Rebrand Settings to More

js/UI/More/More.js

@@ -0,0 +1,40 @@
+import App from "../../App";
+import Privacy from "./Privacy/Privacy";
+import Settings from "./Settings/Settings";
+
+
+export default class More {
+	constructor() {
+		this.app = new App()
+		this.config = this.app.config
+		this.privacy = new Privacy()
+		this.settings = new Settings()
+		this.init()
+	}
+
+	init() {
+		this.privacy.init()
+		this.settings.init()
+		this.initPager()
+	}
+
+	initPager() {
+		let switcher = document.getElementById("switch")
+		let buttons = switcher.children
+		let subsettings = document.getElementById("subsettings")
+
+		for (let i = 0; i < buttons.length; i++) {
+			let button = buttons[i]
+			subsettings.children[i].setAttribute("style", `--n: ${i}`)
+
+			button.addEventListener("click", () => {
+				let calculatedHeight = subsettings.children[i].offsetHeight
+				subsettings.style.height = `${calculatedHeight}px`
+				subsettings.parentNode.setAttribute("style", `--id: ${i}`)
+				switcher.setAttribute("style", `--switches: ${buttons.length}`)
+			})
+		}
+
+		buttons[0].click()
+	}
+}

js/UI/More/Privacy/Privacy.js

@@ -0,0 +1,102 @@
+import App from "../../../App";
+import { analyzeService } from "./analyzer";
+import { privacyBox } from "./tiles";
+
+
+export default class Privacy {
+	constructor() {
+		this.app = new App()
+		this.config = this.app.config
+	}
+
+	init() {
+		this.initPrivacyPanel()
+	}
+
+	initPrivacyPanel() {
+		let stats = {
+			total: 0,
+			secure: 0,
+			thirdParties: 0
+		}
+		for (let service of this.config.getServices()) {
+			let analysis = analyzeService(service.href)
+			stats.total++
+			stats.secure += analysis.isSecure
+			stats.thirdParties += analysis.isThirdParty
+		}
+
+		let secure_pp = 100 * stats.secure / stats.total
+		let indepencence_pp = 100 * (stats.total - stats.thirdParties) / stats.total
+		let https_importance = this.config.get("https_importance")
+		let privacy_score = secure_pp * https_importance + indepencence_pp * (1 - https_importance)
+
+		let privacy_report;
+		if (privacy_score == 100) {
+			privacy_report = "Data is sent securely and no third-party services are involved."
+		}
+		else if (privacy_score >= 85) {
+			privacy_report = "Great privacy overall, but at some point it could be better."
+		}
+		else if (privacy_score >= 40) {
+			privacy_report = "Decent privacy. You should pay attention what you're doing."
+		}
+		else privacy_report = "Transferring data is insecure and vulnerable to various threats."
+
+		document.getElementById("report-score").innerText = Math.round(privacy_score)
+		document.getElementById("report").innerText = privacy_report
+
+		const phrase = " of the listed services are using secure connections"
+		privacyBox(secure_pp, "icon-https", [
+			{
+				"from": 0,
+				"name": "No encryption",
+				"desc": "None" + phrase
+			},
+			{
+				"from": 0.1,
+				"name": "Poor encryption",
+				"desc": "Only some" + phrase
+			},
+			{
+				"from": 60,
+				"name": "Fair encryption",
+				"desc": "Most" + phrase
+			},
+			{
+				"from": 90,
+				"name": "Good encryption",
+				"desc": "Nearly all" + phrase
+			},
+			{
+				"from": 100,
+				"name": "Full encryption",
+				"desc": "All" + phrase
+			}
+		])
+
+		privacyBox(indepencence_pp, "icon-rocket", [
+			{
+				"from": 0,
+				"name": "Not independent",
+				"desc": "This server lists a lot of 3rd party services"
+			},
+			{
+				"from": 40,
+				"name": "Partially independent",
+				"desc": "This server lists many 3rd party services"
+			},
+			{
+				"from": 65,
+				"name": "Mostly independent",
+				"desc": "This server still lists some 3rd party services"
+			},
+			{
+				"from": 100,
+				"name": "Fully independent",
+				"desc": "This server is free of 3rd party services"
+			}
+		])
+	}
+
+}

js/UI/More/Privacy/analyzer.js

@@ -0,0 +1,32 @@
+export function analyzeService(url) {
+	let isSiteSecure = (
+		window.location.protocol == "https:" ||
+		window.location.hostname == "localhost"
+	)
+
+	let domain_base = window.location.hostname
+	let isSecure = false
+	let isThirdParty = true
+
+	if (url.startsWith("https://")) {
+		isSecure = true
+	}
+	else if (!["http", "https"].includes(url.split("://")[0])) {
+		isSecure = isSiteSecure
+	}
+
+	if (isThirdParty) {
+		let domain = url.split("://")
+		if (domain.length > 1) {
+			domain = domain[1]
+			domain = domain.split("/")[0]
+			domain = domain.split(":")[0]
+			isThirdParty = !domain.includes(domain_base)
+		}
+		else {
+			isThirdParty = false
+		}
+	}
+
+	return {isSecure, isThirdParty}
+}

js/UI/More/Privacy/tiles.js

@@ -0,0 +1,27 @@
+export function privacyBox(privacyScore, icon_class, levels) {
+	let name, desc
+	levels = levels.reverse()
+
+	for (let i in levels) {
+		let item = levels[i]
+		if (item.from <= privacyScore) {
+			name = levels[i].name
+			desc = levels[i].desc
+			break
+		}
+	}
+
+	let item = document.createElement("div")
+	item.innerHTML = `<i class="${icon_class}"></i>
+		<div>
+			<div class="title">${name}</div>
+			<div class="subtitle">${desc}</div>
+		</div>`
+
+	if (privacyScore < 30) item.classList.add("error")
+	else if (privacyScore < 90) item.classList.add("warn")
+	else if (privacyScore < 100) item.classList.add("prewarn")
+
+	document.getElementById("report-boxes").appendChild(item)
+	return item
+}

js/UI/More/Settings/Settings.js

@@ -0,0 +1,51 @@
+import App from "../../../App";
+import { addOnOffTile } from "./tiles";
+import * as EVENTS from "./events"
+
+
+export default class Settings {
+	constructor() {
+		this.app = new App()
+		this.config = this.app.config
+	}
+
+	init() {
+		this.checkLocalStorage()
+		this.initSettings()
+	}
+
+	initSettings() {
+		let darkMode = addOnOffTile(this.config,
+			"dark_mode", "Dark mode",
+			"Make the colors more appropriate for low-light environments",
+			"dark_mode", EVENTS.onThemeChange
+		)
+
+		addOnOffTile(this.config,
+			"open_in_new", "Open in new tab",
+			"Clicking on application will open it in a new browser tab",
+			"open_new_tab", EVENTS.onNewTabChange
+		)
+
+		addOnOffTile(this.config,
+			"blur_on", "Enable blur",
+			"Improves UI sweetness but may have a huge impact on performance",
+			"blur", EVENTS.onBlurChange
+		)
+
+		addOnOffTile(this.config,
+			"animation", "Animations",
+			"Show nice and fancy page transitions for improved experience",
+			"animations", EVENTS.onAnimationChange
+		)
+
+		document.getElementById("theme-switcher").addEventListener("click", () => {
+			darkMode.click()
+		})
+	}
+
+	checkLocalStorage() {
+		let warn = document.getElementById("no-cookies").classList
+		if (this.config.storageAvailable) warn.add("hidden")
+	}
+}

js/UI/More/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/UI/More/Settings/tiles.js

@@ -0,0 +1,33 @@
+export function addOnOffTile(conf, icon, name, desc, key, func) {
+	let item = document.createElement("div")
+	item.classList.add("setting")
+	item.innerHTML = `
+		<i>${icon}</i>
+		<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 (conf.get(key)) c.add("checked")
+		else c.remove("checked")
+	}
+
+	let write = () => {
+		let target_value = !conf.get(key)
+		conf.set(key, target_value)
+	}
+
+	let f = () => {func(conf)}
+
+	item.addEventListener("click", write)
+	item.addEventListener("click", handleState)
+	if (func) item.addEventListener("click", f)
+
+	handleState()
+	if (func && conf.changed(key)) f()
+	document.getElementById("settings").appendChild(item)
+	return item
+}