Options Page UI options are saved and set properly

Former-commit-id: 3ef5b93

Author: Dbz

options.html

@@ -39,15 +39,15 @@ <h3 class="title">WebCache Options</h3>
   <div class="settings-wrapper">
     <div class="setting">
       <ul id="sortable">
-        <li class="list-item" id="Google Cache">
+        <li class="list-item" id="google-cache-sortable">
           <p>Google Cache</p>
           <span class="ui-icon ui-icon-grip-dotted-horizontal icon"></span>
         </li>
-        <li class="list-item" id="Wayback Machine">
+        <li class="list-item" id="wayback-machine-sortable">
           <p>Wayback Machine</p>
           <span class="ui-icon ui-icon-grip-dotted-horizontal icon"></span>
         </li>
-        <li class="list-item" id="Coral CDN">
+        <li class="list-item" id="coral-cdn-sortable">
           <p>Coral CDN</p>
           <span class="ui-icon ui-icon-grip-dotted-horizontal icon"></span>
         </li>

options.js

@@ -1,48 +1,62 @@
-var CACHES = ["WayBack Machine", "Coral CDN", "Google Cache"];
-var HTML = ["Google Cache", "WayBack Machine", "Coral CDN"];
 var order = [];
 
-//order = CACHES;
-
 $("#sortable").sortable({
-    stop: function(event, ui) {
-    	//console.log("Old Position: " + order.indexOf(ui.item.attr('id')));
-        //console.log("New position: " + ui.item.index());
-        
-        order.splice(order.indexOf(ui.item.attr('id')), 1);
-        order.splice(ui.item.index(), 0, ui.item.attr('id'));
-
-        chrome.storage.sync.set({'cacheOrder': order}, function() {
-        	console.log("Saved Settings: " + order.split(":"));
-        });
+    stop: function(event, ui) { // Save settings after change
+      // console.log("Old Position: " + order.indexOf(ui.item.attr('id')));
+      // console.log("New position: " + ui.item.index());
+
+      order.splice(order.indexOf(ui.item.attr('id')), 1);
+      order.splice(ui.item.index(), 0, ui.item.attr('id'));
+
+      var saveObj = {};
+      saveObj['cacheOrder4'] = order;
+      chrome.storage.local.set(saveObj, function() {
+        console.log("Saved Cache Ordering Preferences");
+      });
     },
-    create: function(event, ui) { // Set up sortable and also radio buttons
-        chrome.storage.sync.get('cacheOrder', function(result) {
-        	order = result.cacheOrder;
-
-	        var ul = $('#sortable');
-	        var li = ul.children('li').get();
-    	    li.sort(function(a,b) {
-    		    return order.indexOf($(a).attr('id')) - order.indexOf($(b).attr('id'))
-		    });
-		    ul.append(li);
+    create: function(event, ui) { // Set up sortable, checkboxes, & toggle
+      // Set up sortable
+      chrome.storage.local.get('cacheOrder4', function(result) {
+        order = result['cacheOrder4'] || ['google-cache-sortable', 'wayback-machine-sortable', 'coral-cdn-sortable'];
+
+        var ul = $('#sortable');
+        var li = ul.children('li').get();
+        li.sort(function(a, b) {
+          return order.indexOf($(a).attr('id')) - order.indexOf($(b).attr('id'));
         });
-        // Set up radio buttons
-        chrome.storage.sync.get('auto-detect', function(result) {
-        	if(result['auto-detect'] == 'on') {
-        		$('#on').prop('checked', true);
-        	} else {
-        		$('#off').prop('checked', true);
-        	}
+        ul.append(li);
+      });
+
+      // Set up auto-detect toggle
+      chrome.storage.local.get('auto-detect', function(result) {
+        toggle = $('#myonoffswitch');
+        toggle.prop('checked', result['auto-detect']);
+      });
+
+      // Set up context menu caches
+      chrome.storage.local.get(['google-cache', 'wayback-machine', 'coral-cdn'], function(results) {
+        Object.keys(results).forEach(function(key) {
+          $('#' + key).prop('checked', results[key]);
         });
+      });
     }
 });
 
-$("#myonoffswitch").click(function(button) { // Save auto-detect settings
-  chrome.storage.sync.set({'auto-detect': button.target.id}, function() {
+$("#myonoffswitch").click(function(event) { // Save auto-detect settings
+  chrome.storage.local.set({'auto-detect': $("#myonoffswitch").is(':checked')}, function() {
     console.log("Saved Auto-Detect Preferences");
   });
 });
+
+$(".context-menu-label").click(function(event) { // Add/Remove context menu caches
+  var id = $(event.target).attr('for');
+  var checkbox = $('#' + id);
+  var saveObj = {};
+  saveObj[id] = !checkbox.is(':checked');
+
+  chrome.storage.local.set(saveObj, function() {
+    console.log("Saved context menu preferences for " + id);
+  });
 });
 
 $("#sortable").disableSelection();