config: Make 'open_new_tab' functional

README.md

@@ -12,7 +12,7 @@ This will be a dashboard hosted on my homeserver with self-hosted stuff. But, fo
 - [ ] Security screen on/off
 - [ ] CSS global color variables for easier theming
 - [ ] Fix blur flicker on showing/hiding pages
-- [ ] Open in new tab setting
+- [x] Open in new tab setting
 - [ ] Better icon colors in 'More' page
 - [ ] Minor code optimizations
 

css/main.css

@@ -353,7 +353,7 @@ a.box {
 	padding: 12px;
 	text-align: left;
 	cursor: pointer;
-	transition: background .2s, box-shadow .2s;
+	transition: background .2s, box-shadow .2s, color .2s;
 }
 .setting:hover {
 	background: #DDD8;
@@ -369,7 +369,6 @@ a.box {
 	color: #EEE;
 	background: #56F;
 	box-shadow: 2px 2px 8px #56F8;
-	transition: all .2s;
 }
 .hostedby {
 	font-size: 13px;

index.html

@@ -93,7 +93,7 @@
 					</div>
 					<div class="screen hidden">
 						<div class="settings">
-							<div class="setting checked" onclick="switch_theme()" id="setting-theme">
+							<div class="setting" onclick="switch_theme()" id="setting-theme">
 								<div class="icon">dark_mode</div>
 								<div class="text">
 									<div class="name">Dark mode</div>
@@ -101,7 +101,7 @@
 								</div>
 								<div class="value"></div>
 							</div>
-							<div class="setting">
+							<div class="setting" onclick="new_tab_toggle(this)">
 								<div class="icon">open_in_new</div>
 								<div class="text">
 									<div class="name">Open in new tab</div>

js/dom.js

@@ -35,8 +35,9 @@ function safe_text(text) {
 }
 
 function mk_entry(app) {
+	let new_tab = get_bool("open_new_tab") ? ` target="_blank"` : "";
 	return `
-		<a class="box" href="${safe_text(app["href"])}">
+		<a class="box" href="${safe_text(app["href"])}"${new_tab}>
 			<img src="${safe_text(app["icon"])}">
 			<div>
 				<div class="name">${safe_text(app["name"])}</div>

js/main.js

@@ -59,6 +59,14 @@ function load_apps() {
 	get("applist").innerHTML = final;
 }
 
+function new_tab_toggle(setting) {
+	let v = !get_bool("open_new_tab");
+	config("open_new_tab", v);
+	setting = setting.classList;
+	v ? setting.add("checked") : setting.remove("checked");
+	load_apps();
+}
+
 let S_TAP_LOCK;
 function open_screen(button) {
 	if (S_TAP_LOCK) return;