mirror/qBittorrent
2
0
Fork 0
mirror of https://github.com/qbittorrent/qBittorrent.git synced 2024-12-21 08:09:35 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #15186 from Piccirello/webui-table-keyboard-nav

Browse Source 
Support navigating Web UI tables with arrow keys
This commit is contained in:
Chocobo1 2021-07-13 11:26:50 +08:00 committed by GitHub
commit d923c03d52
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 92 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -617,7 +617,8 @@ window.qBittorrent.DynamicTable = (function() {
onSelectedRowChanged: function() {},
updateRowData: function(data) {
const rowId = data['rowId'];
// ensure rowId is a string
const rowId = `${data['rowId']}`;
let row;
if (!this.rows.has(rowId)) {
@ -696,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) {
@ -734,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);
@ -812,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({
@ -2006,6 +2066,19 @@ window.qBittorrent.DynamicTable = (function() {
row.full_data.remaining = 0;
else
row.full_data.remaining = (row.full_data.size * (1.0 - (row.full_data.progress / 100)));
},
setupTr: function(tr) {
tr.addEvent('keydown', function(event) {
switch (event.key) {
case "left":
qBittorrent.PropFiles.collapseFolder(this._this.getSelectedRowId());
return false;
case "right":
qBittorrent.PropFiles.expandFolder(this._this.getSelectedRowId());
return false;
}
});
}
});

18
src/webui/www/private/scripts/prop-files.js
View File

@ -43,7 +43,9 @@ window.qBittorrent.PropFiles = (function() {
createPriorityCombo: createPriorityCombo,
updatePriorityCombo: updatePriorityCombo,
updateData: updateData,
collapseIconClicked: collapseIconClicked
collapseIconClicked: collapseIconClicked,
expandFolder: expandFolder,
collapseFolder: collapseFolder
};
};
@ -495,6 +497,20 @@ window.qBittorrent.PropFiles = (function() {
collapseNode(node);
};
const expandFolder = function(id) {
const node = torrentFilesTable.getNode(id);
if (node.isFolder) {
expandNode(node);
}
};
const collapseFolder = function(id) {
const node = torrentFilesTable.getNode(id);
if (node.isFolder) {
collapseNode(node);
}
};
const filesPriorityMenuClicked = function(priority) {
const selectedRows = torrentFilesTable.selectedRowsIds();
if (selectedRows.length === 0) return;