initial work on settings page

This only has the actual UI for the settings page in place, no actual
functionality has been implemented yet. I made several changes not
directly related to the settings page, such as changes the CSS color
variables to use RGB, as to easily add an alpha channel to colors. I
also changed the way the Browser is toggled in some respects and many
other changes that makes it easy to re-use the browser code to create
the settings UI

1 files changed, 46 insertions, 0 deletions

diff --git a/src/app/settings.js b/src/app/settings.js
new file mode 100644
index 0000000..c9e43ae
--- /dev/null
+++ b/src/app/settings.js
@@ -0,0 +1,46 @@
+var Settings = {
+	toggle: (state) => {
+		if (state) {
+			options.scrollTo(0, 0);
+			overlay.classList.add("shown")
+			options.classList.add("shown")
+
+			return
+		} else if (! state) {
+			if (state != undefined) {
+				overlay.classList.remove("shown")
+				options.classList.remove("shown")
+				return
+			}
+		}
+
+		options.scrollTo(0, 0);
+		overlay.classList.toggle("shown")
+		options.classList.toggle("shown")
+	},
+	apply: () => {},
+	reloadSwitches: () => {
+		let switches = document.querySelectorAll(".switch");
+
+		for (let i = 0; i < switches.length; i++) {
+			switches[i].setAttribute("onclick", `Settings.switch(${i})`); 
+		}
+	},
+	switch: (element) => {
+		let switches = document.querySelectorAll(".switch");
+		element = switches[element];
+
+		if (element.classList.contains("on")) {
+			element.classList.add("off");
+			element.classList.remove("on");
+		} else {
+			element.classList.add("on");
+			element.classList.remove("off");
+		}
+
+		Settings.reloadSwitches();
+	}
+}
+
+Settings.reloadSwitches();
+