Update home.html

AmarMaksumic · web-flow · commit c7425af9f296 · 2016-07-24T14:54:56.000+02:00
diff --git a/home.html b/home.html
@@ -1,7 +1,7 @@
 <DOCTYPE html>
 <html>
     <head>
-        <title>Quad -OS</title>
+        <title>Quad-OS</title>
         <link rel="apple-touch-icon-precomposed" sizes="57x57" href="apple-touch-icon-57x57.png" />
 <link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114.png" />
 <link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72.png" />
@@ -118,15 +118,15 @@ <h1>Quad-OS</h1>
             <br>
             <h1>Allow Box</h1>
             <div class="onoffswitch">
-    <input type="checkbox" onclick="if(this.checked){boxAllowed()} else {boxNotAllowed()}"name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
+    <input type='checkbox' store="checkbox1" onclick="if(this.checked){boxAllowed()} else {boxNotAllowed()}"name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
     <label class="onoffswitch-label" for="myonoffswitch">
         <span class="onoffswitch-inner"></span>
         <span class="onoffswitch-switch"></span>
     </label>
 </div>
 <h1>Something</h1>
 <div class="onoffswitch">
-    <input type="checkbox" name="onoffswitch2" class="onoffswitch-checkbox" id="myonoffswitch2" checked>
+    <input type='checkbox' store="checkbox2" name="onoffswitch2" class="onoffswitch-checkbox" id="myonoffswitch2" checked>
     <label class="onoffswitch-label" for="myonoffswitch2">
         <span class="onoffswitch-inner"></span>
         <span class="onoffswitch-switch"></span>
@@ -140,43 +140,44 @@ <h1>Something</h1>
             } else {
                 document.getElementById("myonoffswitch").checked = false;
             }*/
-            $('.onoffswitch-checkbox').on('click', function() {
-var fav, favs = [];
-$('.onoffswitch-checkbox').each(function() { // run through each of the checkboxes
-fav = {id: $(this).attr('id'), value: $(this).prop('checked')};
-    favs.push(fav);
-  });
-  localStorage.setItem("favorites", JSON.stringify(favs));
-});
-
-$(document).ready(function() {
-  var favorites = JSON.parse(localStorage.getItem('favorites'));
-  if (!favorites.length) {return};
-  console.debug(favorites);
-
-  for (var i=0; i<favorites.length; i++) {
-    console.debug(favorites[i].value == 'on');
-    $('#' + favorites[i].id ).prop('checked', favorites[i].value);
-  }
-});
+            (function() {
+    var boxes = document.querySelectorAll("input[type='checkbox']");
+    for (var i = 0; i < boxes.length; i++) {
+        var box = boxes[i];
+        if (box.hasAttribute("store")) {
+            setupBox(box);
+        }
+    }
+    
+    function setupBox(box) {
+        var storageId = box.getAttribute("store");
+        var oldVal    = localStorage.getItem(storageId);
+        console.log(oldVal);
+        box.checked = oldVal === "true" ? true : false;
+        
+        box.addEventListener("change", function() {
+            localStorage.setItem(storageId, this.checked); 
+        });
+    }
+})();
             function boxNotAllowed() {
                 document.getElementById("boxButton").style.visibility = "hidden";
                 boxStatus = 0;
-                if (typeof(Storage) !== "undefined") {
+                /*if (typeof(Storage) !== "undefined") {
                     localStorage.setItem("isBoxAllowed", boxStatus);
                     document.getElementById("example").innerHTML = localStorage.getItem("isBoxAllowed");
                 } else {
                     document.getElementById("example").innerHTML = "Sorry, your browser does not support Web Storage...";
-                }
+                }*/
             function boxAllowed() {
                 document.getElementById("boxButton").style.visibility = "visible";
                 boxStatus = 1;
-                if (typeof(Storage) !== "undefined") {
+                /*if (typeof(Storage) !== "undefined") {
                     localStorage.setItem("isBoxAllowed", boxStatus);
                     document.getElementById("example").innerHTML = localStorage.getItem("isBoxAllowed");
                 } else {
                     document.getElementById("example").innerHTML = "Sorry, your browser does not support Web Storage...";
-                }
+                }*/
             }
             }
         </script>
