diff --git a/src/webui/www/private/scripts/dynamicTable.js b/src/webui/www/private/scripts/dynamicTable.js index 12be836b4..46d8a7b1f 100644 --- a/src/webui/www/private/scripts/dynamicTable.js +++ b/src/webui/www/private/scripts/dynamicTable.js @@ -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() { } 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() { 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({