uniques: simplify logic and css, change HTML content, link capture and visit info

plugins/uniques.css

@@ -1,17 +1,13 @@
-#uniques-content-outer {
+#uniques-container {
-  display: table;
+  display: block;
-  width: 100%;
-  height: 26px;
   text-align: center;
-}
-
-#uniques-content-outer > div{
-  display: inline-block;
-  vertical-align: middle;
   margin: 6px 3px 1px 3px;
+  padding: 0 4px;
+}
+#uniques-container label {
+  margin: 0 0.5em;
+}
+#uniques-container input {
+  vertical-align: middle;
 }
 
-#uniques-label {
-  padding: 0 4px;
-  cursor: help;
-}

plugins/uniques.user.js

@@ -50,25 +50,32 @@ window.plugin.uniques.addToSidebar = function() {
 
 window.plugin.uniques.updateChecked = function() {
 	var guid = window.selectedPortal,
-		visited = (plugin.uniques.uniques[guid] && plugin.uniques.uniques[guid].visited) || false,
+		uniqueInfo = plugin.uniques.uniques[guid];
-		captured = (plugin.uniques.uniques[guid] && plugin.uniques.uniques[guid].captured) || false;
+		visited = (uniqueInfo && uniqueInfo.visited) || false,
+		captured = (uniqueInfo && uniqueInfo.captured) || false;
 	$('#visited').prop('checked', visited);
 	$('#captured').prop('checked', captured);
+	plugin.uniques.highlight({portal: portals[guid]});
 }
 
 window.plugin.uniques.updateVisited = function(visited) {
 	var guid = window.selectedPortal;
-	if (visited) {
+	var uniqueInfo = plugin.uniques.uniques[guid];
-		// add entry
+	if (!uniqueInfo) {
-		if (guid in plugin.uniques.uniques) { plugin.uniques.uniques[guid].visited = true; }
+		plugin.uniques.uniques[guid] = uniqueInfo = {
-		else { plugin.uniques.uniques[guid] = {visited: true}; }
+			visited: false,
-		if (guid in plugin.uniques.updateQueue) { plugin.uniques.updateQueue[guid].visited = true; }
+			captured: false
-		else { plugin.uniques.updateQueue[guid] = {visited: true}; }
+		};
-	} else if (guid in plugin.uniques.uniques) {
-		// remove entry
-		if (plugin.uniques.uniques[guid].captured === undefined) { delete plugin.uniques.uniques[guid]; }
-		else { delete plugin.uniques.uniques[guid].visited; }
 	}
+
+	if (visited) {
+		uniqueInfo.visited = true;
+	} else { // not visited --> not captured
+		uniqueInfo.visited = false;
+		uniqueInfo.captured = false;
+	}
+
+	plugin.uniques.updateChecked();
 	plugin.uniques.storeLocal(plugin.uniques.KEY);
 	plugin.uniques.storeLocal(plugin.uniques.UPDATE_QUEUE);
 	plugin.uniques.delaySync();
@@ -76,17 +83,22 @@ window.plugin.uniques.updateVisited = function(visited) {
 
 window.plugin.uniques.updateCaptured = function(captured) {
 	var guid = window.selectedPortal;
-	if (captured) {
+	var uniqueInfo = plugin.uniques.uniques[guid];
-		// add entry
+	if (!uniqueInfo) {
-		if (guid in plugin.uniques.uniques) { plugin.uniques.uniques[guid].captured = true; }
+		plugin.uniques.uniques[guid] = uniqueInfo = {
-		else { plugin.uniques.uniques[guid] = {captured: true}; }
+			visited: false,
-		if (guid in plugin.uniques.updateQueue) { plugin.uniques.updateQueue[guid].captured = true; }
+			captured: false
-		else { plugin.uniques.updateQueue[guid] = {captured: true}; }
+		};
-	} else if (guid in plugin.uniques.uniques) {
-		// remove entry
-		if (plugin.uniques.uniques[guid].captured === undefined) { delete plugin.uniques.uniques[guid]; }
-		else { delete plugin.uniques.uniques[guid].captured; }
 	}
+
+	if (captured) { // captured --> visited
+		uniqueInfo.captured = true;
+		uniqueInfo.visited = true;
+	} else {
+		uniqueInfo.captured = false;
+	}
+
+	plugin.uniques.updateChecked();
 	plugin.uniques.storeLocal(plugin.uniques.KEY);
 	plugin.uniques.storeLocal(plugin.uniques.UPDATE_QUEUE);
 	plugin.uniques.delaySync();
@@ -173,13 +185,18 @@ window.plugin.uniques.loadLocal = function(mapping) {
 /***************************************************************************************************************************************************************/
 window.plugin.uniques.highlight = function(data) {
 	var guid = data.portal.options.ent[0];
+	
+	var fillColor = '#F00'; // not visited
+	
 	if((uniqueInfo = window.plugin.uniques.uniques[guid]) !== undefined) {
-		if (!uniqueInfo.visited && !uniqueInfo.captured) { data.portal.setStyle({fillColor:'magenta', fillOpacity:1}); }
+		if(uniqueInfo.captured) {
-		else if (uniqueInfo.captured && !uniqueInfo.visited) { data.portal.setStyle({fillColor:'red', fillOpacity:.75}); }
+			fillColor = '#0F0';
-		else if (uniqueInfo.visited && !uniqueInfo.captured) { data.portal.setStyle({fillColor:'yellow', fillOpacity:.5}); }
+		} else if (uniqueInfo.visited) {
-	} else {
+			fillColor = '#FF0';
-		data.portal.setStyle({fillColor:'magenta', fillOpacity:1});
+		}
 	}
+
+	data.portal.setStyle({fillColor: fillColor, fillOpacity: 0.75});
 }
 
 window.plugin.uniques.setupCSS = function() {
@@ -190,12 +207,11 @@ window.plugin.uniques.setupCSS = function() {
 }
 
 window.plugin.uniques.setupContent = function() {
-	plugin.uniques.contentHTML = '<div id="uniques-content-outer">'
+	plugin.uniques.contentHTML = '<div id="uniques-container">'
-		+ '<div id="uniques-label">'
+		+ '<label><input type="checkbox" id="visited" onclick="window.plugin.uniques.updateVisited($(this).prop(\'checked\'))"> Visited</label>'
-		+ 'Visited <input type="checkbox" id="visited" style="vertical-align: middle;" onclick="window.plugin.uniques.updateVisited($(this).prop(\'checked\'))">'
+		+ '<label><input type="checkbox" id="captured" onclick="window.plugin.uniques.updateCaptured($(this).prop(\'checked\'))"> Captured</label>'
-		+ 'Captured <input type="checkbox" id="captured" style="vertical-align: middle;" onclick="window.plugin.uniques.updateCaptured($(this).prop(\'checked\'))">'
+		+ '</div>';
-		+ '</div></div>';
+	plugin.uniques.disabledMessage = '<div id="uniques-container" class="help" title="Your browser does not support localStorage">Plugin Uniques disabled</div>';
-	plugin.uniques.disabledMessage = '<div id="uniques-content-outer" title="Your browser does not support localStorage">Plugin Uniques disabled</div>';
 }
 
 var setup = function() {