Save state of switches

This commit is contained in:
Joyce Chen
2020-08-04 00:46:13 -04:00
parent 8c69e51c23
commit ed5910d187
2 changed files with 60 additions and 22 deletions

View File

@@ -11,7 +11,7 @@
<div style="flex: 1; text-align: center;"> <div style="flex: 1; text-align: center;">
<label class="switch"> <label class="switch">
<input type="checkbox" onClick="toggleCompact()"> <input type="checkbox" id="originalCompact" onClick="toggleCompact(false)">
<span class="slider round"></span> <span class="slider round"></span>
</label> </label>
</div> </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 text = document.getElementsByClassName("text");
var symbol = document.getElementsByClassName("symbol"); var symbol = document.getElementsByClassName("symbol");
for (var i = 0; i < text.length; i++) { for (var i = 0; i < text.length; i++) {
if (text[i].style.display === "none") { if (checked) {
symbol[i].style.display = "none";
text[i].style.display = "block";
} else {
symbol[i].style.display = "block"; symbol[i].style.display = "block";
text[i].style.display = "none"; text[i].style.display = "none";
} else {
symbol[i].style.display = "none";
text[i].style.display = "block";
} }
} }
var extra = document.getElementsByClassName("extra"); var extra = document.getElementsByClassName("extra");
for (var i = 0; i < extra.length; i++) { for (var i = 0; i < extra.length; i++) {
if (extra[i].style.display === "none") { if (checked) {
extra[i].style.display = "inline";
} else {
extra[i].style.display = "none"; 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++) { for (var i = 0; i < target.length; i++) {
filterAddClass(target[i], "hidden"); filterAddClass(target[i], "hidden");
if (target[i].className.indexOf(shadow) > -1) { if (target[i].className.indexOf(shadow) > -1) {
console.log(target[i])
filterRemoveClass(target[i], "hidden"); 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> <td class='result'><div class='text'>-</div><div class='symbol'></div></td>
</tr> </tr>
</table> </table>
</div> </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>

View File

@@ -11,7 +11,7 @@
<div style="flex: 1; text-align: center;"> <div style="flex: 1; text-align: center;">
<label class="switch"> <label class="switch">
<input type="checkbox" onClick="toggleCompact()"> <input type="checkbox" id="royalCompact" onClick="toggleCompact(false)">
<span class="slider round"></span> <span class="slider round"></span>
</label> </label>
</div> </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 text = document.getElementsByClassName("text");
var symbol = document.getElementsByClassName("symbol"); var symbol = document.getElementsByClassName("symbol");
for (var i = 0; i < text.length; i++) { for (var i = 0; i < text.length; i++) {
if (text[i].style.display === "none") { if (checked) {
symbol[i].style.display = "none";
text[i].style.display = "block";
} else {
symbol[i].style.display = "block"; symbol[i].style.display = "block";
text[i].style.display = "none"; text[i].style.display = "none";
} else {
symbol[i].style.display = "none";
text[i].style.display = "block";
} }
} }
var extra = document.getElementsByClassName("extra"); var extra = document.getElementsByClassName("extra");
for (var i = 0; i < extra.length; i++) { for (var i = 0; i < extra.length; i++) {
if (extra[i].style.display === "none") { if (checked) {
extra[i].style.display = "inline";
} else {
extra[i].style.display = "none"; 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++) { for (var i = 0; i < target.length; i++) {
filterAddClass(target[i], "hidden"); filterAddClass(target[i], "hidden");
if (target[i].className.indexOf(shadow) > -1) { if (target[i].className.indexOf(shadow) > -1) {
console.log(target[i])
filterRemoveClass(target[i], "hidden"); 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> <td class='result unconfirmed'><div class='text'>BAD</div><div class='symbol'>💢</div></td>
</tr> </tr>
</table> </table>
</div> </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>