Browse Source

Support navigating Web UI tables with arrow keys

This allows navigating rows via up/down arrow keys.
adaptive-webui-19844
Thomas Piccirello 3 years ago
parent
commit
e76bac4131
  1. 61
      src/webui/www/private/scripts/dynamicTable.js

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

@ -697,8 +697,13 @@ window.qBittorrent.DynamicTable = (function() { @@ -697,8 +697,13 @@ window.qBittorrent.DynamicTable = (function() {
this.updateRow(trs[rowPos], fullUpdate);
else { // else create a new row in the table
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.addEvent('contextmenu', function(e) {
@ -735,6 +740,16 @@ window.qBittorrent.DynamicTable = (function() { @@ -735,6 +740,16 @@ window.qBittorrent.DynamicTable = (function() {
}
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);
@ -813,6 +828,50 @@ window.qBittorrent.DynamicTable = (function() { @@ -813,6 +828,50 @@ window.qBittorrent.DynamicTable = (function() {
getRowIds: function() {
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({

Loading…
Cancel
Save