Support pressing Up/Down in teambuilder lists

It should now be a bit easier to select pokemon/moves/etc with the
keyboard.
This commit is contained in:
Guangcong Luo 2015-12-25 10:44:35 -06:00
parent c0676957a9
commit a9ab52c9c8
2 changed files with 39 additions and 10 deletions

View File

@ -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('');

View File

@ -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 {