From a9ab52c9c8668257f36d55d7ff9e42239ef2d719 Mon Sep 17 00:00:00 2001
From: Guangcong Luo <guangcongluo@gmail.com>
Date: Fri, 25 Dec 2015 10:44:35 -0600
Subject: [PATCH] Support pressing Up/Down in teambuilder lists

It should now be a bit easier to select pokemon/moves/etc with the
keyboard.
---
 js/client-teambuilder.js | 41 ++++++++++++++++++++++++++++++++--------
 style/client.css         |  8 ++++++--
 2 files changed, 39 insertions(+), 10 deletions(-)

diff --git a/js/client-teambuilder.js b/js/client-teambuilder.js
index 532e28465..5c8cbc11b 100644
--- a/js/client-teambuilder.js
+++ b/js/client-teambuilder.js
@@ -1565,13 +1565,15 @@
 				this.qInitial = q;
 				this.search.qName = this.curChartName;
 				if (wasIncomplete) {
-					this.search.find(q);
-					if (this.search.q) this.$chart.find('a').first().addClass('hover');
+					if (this.search.find(q)) {
+						if (this.search.q) this.$chart.find('a').first().addClass('hover');
+					}
 				}
 			} else if (q !== this.qInitial) {
 				this.qInitial = undefined;
-				this.search.find(q);
-				if (this.search.q) this.$chart.find('a').first().addClass('hover');
+				if (this.search.find(q)) {
+					if (this.search.q) this.$chart.find('a').first().addClass('hover');
+				}
 			}
 		},
 		selectPokemon: function (i) {
@@ -2112,14 +2114,13 @@
 		},
 		chartKeydown: function (e) {
 			var modifier = (e.shiftKey || e.ctrlKey || e.altKey || e.metaKey || e.cmdKey);
-			if (e.keyCode === 13 || (e.keyCode === 9 && !modifier)) {
+			if (e.keyCode === 13 || (e.keyCode === 9 && !modifier)) { // enter/tab
 				if (!(this.curChartType in this.searchChartTypes)) return;
+				var $firstResult = this.$chart.find('a.hover');
+				if (!$firstResult.length) return;
 				e.stopPropagation();
 				e.preventDefault();
 
-				this.search.find(e.currentTarget.value);
-				if (!this.search.q) return;
-				var $firstResult = this.$chart.find('a').first();
 				if (this.search.addFilter($firstResult[0])) {
 					$(e.currentTarget).val('').select();
 					this.search.find('');
@@ -2128,6 +2129,30 @@
 				var val = $firstResult.data('entry').split(':')[1];
 				this.chartSet(val, true);
 				return;
+			} else if (e.keyCode === 38) { // up
+				e.preventDefault();
+				e.stopPropagation();
+				var $active = this.$chart.find('a.hover');
+				if (!$active.length) return this.$chart.find('a').first().addClass('hover');
+				var $li = $active.parent().prev();
+				while ($li[0] && $li[0].firstChild.tagName !== 'A') $li = $li.prev();
+				if ($li[0] && $li.children()[0]) {
+					$active.removeClass('hover');
+					$active = $li.children();
+					$active.addClass('hover');
+				}
+			} else if (e.keyCode === 40) { // down
+				e.preventDefault();
+				e.stopPropagation();
+				var $active = this.$chart.find('a.hover');
+				if (!$active.length) return this.$chart.find('a').first().addClass('hover');
+				var $li = $active.parent().next();
+				while ($li[0] && $li[0].firstChild.tagName !== 'A') $li = $li.next();
+				if ($li[0] && $li.children()[0]) {
+					$active.removeClass('hover');
+					$active = $li.children();
+					$active.addClass('hover');
+				}
 			} else if (e.keyCode === 27 || e.keyCode === 8) { // esc, backspace
 				if (!e.currentTarget.value && this.search.removeFilter()) {
 					this.search.find('');
diff --git a/style/client.css b/style/client.css
index cd47f5eaa..8edae769c 100644
--- a/style/client.css
+++ b/style/client.css
@@ -2756,6 +2756,10 @@ a.ilink.yours {
 	border-radius: 4px;
 	cursor: pointer;
 }
+.teambuilder-results .result a.cur {
+	border-color: #555555;
+	background: rgba(248, 248, 248, 0.4);
+}
 .teambuilder-results .result a:hover,
 .teambuilder-results .result a.hover {
 	border-color: #D8D8D8;
@@ -2763,8 +2767,8 @@ a.ilink.yours {
 }
 .teambuilder-results .result a.cur:hover,
 .teambuilder-results .result a.cur.hover {
-	border-color: #CCCCCC;
-	background: #F2F2F2;
+	border-color: #555555;
+	background: #F8F8F8;
 }
 
 .teambuilder-results .resultheader h3 {