d4708/qBittorrent
1
0
Fork 0
mirror of https://github.com/d47081/qBittorrent.git synced 2025-01-11 07:18:08 +00:00
Code Issues Projects Releases Wiki Activity

Support navigating Web UI tables with arrow keys

Browse Source 
This allows navigating rows via up/down arrow keys.
This commit is contained in:
Thomas Piccirello 2021-07-09 22:36:51 -07:00
parent 8b94642ab1
commit e76bac4131
1 changed files with 60 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
src/webui/www/private/scripts/dynamicTable.js
View File

@ -697,8 +697,13 @@ window.qBittorrent.DynamicTable = (function() {
this.updateRow(trs[rowPos], fullUpdate); this.updateRow(trs[rowPos], fullUpdate);
else { // else create a new row in the table else { // else create a new row in the table
const tr = new Element('tr'); const tr = new Element('tr');
// set tabindex so element receives keydown events
// more info: https://developer.mozilla.org/en-US/docs/Web/API/Element/keydown_event
tr.setProperty("tabindex", "-1");
tr['rowId'] = rows[rowPos]['rowId']; const rowId = rows[rowPos]['rowId'];
tr.setProperty("data-row-id", rowId);
tr['rowId'] = rowId;
tr._this = this; tr._this = this;
tr.addEvent('contextmenu', function(e) { tr.addEvent('contextmenu', function(e) {
@ -735,6 +740,16 @@ window.qBittorrent.DynamicTable = (function() {
} }
return false; return false;
}); });
tr.addEvent('keydown', function(event) {
switch (event.key) {
case "up":
this._this.selectPreviousRow();
return false;
case "down":
this._this.selectNextRow();
return false;
}
});
this.setupTr(tr); this.setupTr(tr);
@ -813,6 +828,50 @@ window.qBittorrent.DynamicTable = (function() {
getRowIds: function() { getRowIds: function() {
return this.rows.getKeys(); return this.rows.getKeys();
}, },
selectNextRow: function() {
const visibleRows = $(this.dynamicTableDivId).getElements("tbody tr").filter(e => e.getStyle("display") !== "none");
const selectedRowId = this.getSelectedRowId();
let selectedIndex = -1;
for (let i = 0; i < visibleRows.length; ++i) {
const row = visibleRows[i];
if (row.getProperty("data-row-id") === selectedRowId) {
selectedIndex = i;
break;
}
}
const isLastRowSelected = (selectedIndex >= (visibleRows.length - 1));
if (!isLastRowSelected) {
this.deselectAll();
const newRow = visibleRows[selectedIndex + 1];
this.selectRow(newRow.getProperty("data-row-id"));
}
},
selectPreviousRow: function() {
const visibleRows = $(this.dynamicTableDivId).getElements("tbody tr").filter(e => e.getStyle("display") !== "none");
const selectedRowId = this.getSelectedRowId();
let selectedIndex = -1;
for (let i = 0; i < visibleRows.length; ++i) {
const row = visibleRows[i];
if (row.getProperty("data-row-id") === selectedRowId) {
selectedIndex = i;
break;
}
}
const isFirstRowSelected = selectedIndex <= 0;
if (!isFirstRowSelected) {
this.deselectAll();
const newRow = visibleRows[selectedIndex - 1];
this.selectRow(newRow.getProperty("data-row-id"));
}
},
}); });
const TorrentsTable = new Class({ const TorrentsTable = new Class({