NMS: Add live highlight to search

Original search only worked with exact matches. Added a simple highlight
interface to nms-map.js to enable live highlights while typing.

3 files changed, 38 insertions, 25 deletions

diff --git a/web/nms.gathering.org/index.html b/web/nms.gathering.org/index.html
index 3452b9a..e70c9e3 100644
--- a/web/nms.gathering.org/index.html
+++ b/web/nms.gathering.org/index.html
@@ -89,7 +89,7 @@
 		<button class="btn btn-default btn-sm" id="legend-5"></button>
 	      </div>
 	      <div class="input-group input-group-sm">
-		<input id="searchbox" type="text" class="form-control" placeholder="Search" oninput="nmsInfoBox._search()" />
+		<input id="searchbox" type="text" class="form-control" placeholder="Filter" oninput="nmsInfoBox._search()" />
 		  <span class="input-group-btn">
 		  <button class="btn btn-default" type="button" onclick="nmsInfoBox.show(document.getElementById('searchbox').value);">Go!</button>
 		</span>
diff --git a/web/nms.gathering.org/js/nms-info-box.js b/web/nms.gathering.org/js/nms-info-box.js
index b559ba2..6b13498 100644
--- a/web/nms.gathering.org/js/nms-info-box.js
+++ b/web/nms.gathering.org/js/nms-info-box.js
@@ -147,30 +147,21 @@ nmsInfoBox._makeCommentTable = function(content) {
 nmsInfoBox._search = function() {
 	var el = document.getElementById("searchbox");
 	var id = false;
+	var hits = 0;
 	if (el) {
 		id = el.value;
 	}
-	if (id && nmsData.switches.switches[id] != undefined) {
-		nmsMap.setSwitchColor(id, "red");
-		window.setTimeout(function(){
-			nmsMap.setSwitchColor(id, "pink");
-			window.setTimeout(function(){
-				nmsMap.setSwitchColor(id, "red");
-				window.setTimeout(function(){
-					nmsMap.setSwitchColor(id, "pink");
-					window.setTimeout(function(){
-						nmsMap.setSwitchColor(id, "red");
-						window.setTimeout(function(){
-							nmsMap.setSwitchColor(id, "pink");
-						},300);
-					},300);
-				},300);
-			},300);
-		},300);
-		el.parentElement.classList.remove("has-error");
-		el.parentElement.classList.add("has-success");
+	if(id) {
+		for(var sw in nmsData.switches.switches) {
+			if(sw.indexOf(id) > -1) {
+				hits++;
+				nmsMap.setSwitchHighlight(sw,true);
+			} else {
+				nmsMap.setSwitchHighlight(sw,false);
+			}
+		}
 	} else {
-		el.parentElement.classList.add("has-error");
+		nmsMap.removeAllSwitchHighlights();
 	}
 }
 
diff --git a/web/nms.gathering.org/js/nms-map.js b/web/nms.gathering.org/js/nms-map.js
index d855320..9bba1bf 100644
--- a/web/nms.gathering.org/js/nms-map.js
+++ b/web/nms.gathering.org/js/nms-map.js
@@ -9,20 +9,23 @@
  * nmsMap.init() - start things up
  * nmsMap.setSwitchColor(switch,color)
  * nmsMap.setSwitchInfo(switch,info)
+ * nmsMap.setSwitchHighlight(switch,true/false)
+ * nmsMap.removeAllSwitchHighlights()
  */
 
 
 var nmsMap = nmsMap || {
 	_moveInProgress: false,
 	stats: {
-		earlyDrawAll:0,
 		colorChange:0,
 		colorSame:0,
+		earlyDrawAll:0,
+		nowDups:0,
+		nows:0,
 		resizeEvents:0,
-		switchInfoUpdate:0,
 		switchInfoSame:0,
-		nowDups:0,
-		nows:0
+		switchInfoUpdate:0,
+		highlightChange:0
 	},
 	contexts: ["bg","link","blur","switch","text","textInfo","top","input","hidden"],
 	_info: {},
@@ -43,6 +46,7 @@ var nmsMap = nmsMap || {
 	},
 
 	_color: { },
+	_highlight: { },
 	_c: {}
 }
 
@@ -68,6 +72,21 @@ nmsMap.setSwitchColor = function(sw, color) {
 	}
 }
 
+nmsMap.setSwitchHighlight = function(sw, highlight) {
+	if(highlight)
+		highlight == true;
+	if (this._highlight[sw] != highlight) {
+		this._highlight[sw] = highlight;
+		this._drawSwitch(sw);
+		this.stats.highlightChange++;
+	}
+}
+
+nmsMap.removeAllSwitchHighlights = function() {
+	for(var sw in this._highlight)
+		this.setSwitchHighlight(sw,false);
+}
+
 nmsMap.reset = function() {
 	for (var sw in this._color) {
 		nmsMap.setSwitchColor(sw, undefined);
@@ -226,6 +245,9 @@ nmsMap._drawSwitch = function(sw)
 		return;
 	var box = this._getBox(sw);
 	var color = nmsMap._color[sw];
+	if(nmsMap._highlight[sw]) {
+		color = red;
+	}
 	if (color == undefined) {
 		color = blue;
 	}