From ed5910d187125be64391bb3ed04924333696939d Mon Sep 17 00:00:00 2001
From: Joyce Chen <joycechen.jyc@gmail.com>
Date: Tue, 4 Aug 2020 00:46:13 -0400
Subject: [PATCH] Save state of switches

---
 index.md | 41 ++++++++++++++++++++++++++++++-----------
 royal.md | 41 ++++++++++++++++++++++++++++++-----------
 2 files changed, 60 insertions(+), 22 deletions(-)

diff --git a/index.md b/index.md
index 6a78f2a..a6f5b1c 100644
--- a/index.md
+++ b/index.md
@@ -11,7 +11,7 @@
 
 	<div style="flex: 1; text-align: center;">
 		<label class="switch">
-			<input type="checkbox" onClick="toggleCompact()">
+			<input type="checkbox" id="originalCompact" onClick="toggleCompact(false)">
 			<span class="slider round"></span>
 		</label>
 	</div>
@@ -151,25 +151,31 @@ function filterQuestions() {
     }
 }
 
-function toggleCompact() {
+function toggleCompact(loading) {
+	var compactSwitch = document.getElementById("originalCompact");
+	if (!loading) {
+		localStorage.setItem(compactSwitch.id, compactSwitch.checked);
+	}
+	var checked = JSON.parse(localStorage.getItem(compactSwitch.id));
+
 	var text = document.getElementsByClassName("text");
 	var symbol = document.getElementsByClassName("symbol");
 	for (var i = 0; i < text.length; i++) {
-		if (text[i].style.display === "none") {
-			symbol[i].style.display = "none";
-			text[i].style.display = "block";
-		} else {
+		if (checked) {
 			symbol[i].style.display = "block";
 			text[i].style.display = "none";
+		} else {
+			symbol[i].style.display = "none";
+			text[i].style.display = "block";
 		}
 	}
 
 	var extra = document.getElementsByClassName("extra");
 	for (var i = 0; i < extra.length; i++) {
-		if (extra[i].style.display === "none") {
-			extra[i].style.display = "inline";
-		} else {
+		if (checked) {
 			extra[i].style.display = "none";
+		} else {
+			extra[i].style.display = "inline";
 		}
 	}
 }
@@ -180,7 +186,6 @@ function filterByShadows(shadow) {
 	for (var i = 0; i < target.length; i++) {
 		filterAddClass(target[i], "hidden");
 		if (target[i].className.indexOf(shadow) > -1) {
-			console.log(target[i])
 			filterRemoveClass(target[i], "hidden");
 		}
 	}
@@ -8370,4 +8375,18 @@ for (var i = 0; i < btns.length; i++) {
 		<td class='result'><div class='text'>-</div><div class='symbol'></div></td>
 	</tr>
 </table>
-</div>
\ No newline at end of file
+</div>
+
+<!-- LOCAL STORAGE OF SWITCH STATE -->
+<script>
+window.onload = onPageLoad();
+
+function onPageLoad() {
+	var switchState = JSON.parse(localStorage["originalCompact"] || false);
+	var compactSwitch = document.getElementById("originalCompact");
+	if (switchState) {
+		compactSwitch.checked = true;
+		toggleCompact(true);
+	}
+}
+</script>
\ No newline at end of file
diff --git a/royal.md b/royal.md
index 6d3a61f..8fb74d3 100644
--- a/royal.md
+++ b/royal.md
@@ -11,7 +11,7 @@
 
 	<div style="flex: 1; text-align: center;">
 		<label class="switch">
-			<input type="checkbox" onClick="toggleCompact()">
+			<input type="checkbox" id="royalCompact" onClick="toggleCompact(false)">
 			<span class="slider round"></span>
 		</label>
 	</div>
@@ -161,25 +161,31 @@ function filterQuestions() {
     }
 }
 
-function toggleCompact() {
+function toggleCompact(loading) {
+	var compactSwitch = document.getElementById("royalCompact");
+	if (!loading) {
+		localStorage.setItem(compactSwitch.id, compactSwitch.checked);
+	}
+	var checked = JSON.parse(localStorage.getItem(compactSwitch.id));
+
 	var text = document.getElementsByClassName("text");
 	var symbol = document.getElementsByClassName("symbol");
 	for (var i = 0; i < text.length; i++) {
-		if (text[i].style.display === "none") {
-			symbol[i].style.display = "none";
-			text[i].style.display = "block";
-		} else {
+		if (checked) {
 			symbol[i].style.display = "block";
 			text[i].style.display = "none";
+		} else {
+			symbol[i].style.display = "none";
+			text[i].style.display = "block";
 		}
 	}
 
 	var extra = document.getElementsByClassName("extra");
 	for (var i = 0; i < extra.length; i++) {
-		if (extra[i].style.display === "none") {
-			extra[i].style.display = "inline";
-		} else {
+		if (checked) {
 			extra[i].style.display = "none";
+		} else {
+			extra[i].style.display = "inline";
 		}
 	}
 }
@@ -190,7 +196,6 @@ function filterByShadows(shadow) {
 	for (var i = 0; i < target.length; i++) {
 		filterAddClass(target[i], "hidden");
 		if (target[i].className.indexOf(shadow) > -1) {
-			console.log(target[i])
 			filterRemoveClass(target[i], "hidden");
 		}
 	}
@@ -9041,4 +9046,18 @@ for (var i = 0; i < btns.length; i++) {
 		<td class='result unconfirmed'><div class='text'>BAD</div><div class='symbol'>💢</div></td>
 	</tr>
 </table>
-</div>
\ No newline at end of file
+</div>
+
+<!-- LOCAL STORAGE OF SWITCH STATE -->
+<script>
+window.onload = onPageLoad();
+
+function onPageLoad() {
+	var switchState = JSON.parse(localStorage["royalCompact"] || false);
+	var compactSwitch = document.getElementById("royalCompact");
+	if (switchState) {
+		compactSwitch.checked = true;
+		toggleCompact(true);
+	}
+}
+</script>
\ No newline at end of file