mirror of
https://github.com/qbittorrent/qBittorrent
synced 2025-08-22 22:33:34 -07:00
WebUI: Replace getElements
This commit is contained in:
parent
b76054beba
commit
385f139cce
2 changed files with 42 additions and 47 deletions
|
@ -74,9 +74,9 @@ window.qBittorrent.DynamicTable ??= (() => {
|
||||||
this.dynamicTableDivId = dynamicTableDivId;
|
this.dynamicTableDivId = dynamicTableDivId;
|
||||||
this.dynamicTableFixedHeaderDivId = dynamicTableFixedHeaderDivId;
|
this.dynamicTableFixedHeaderDivId = dynamicTableFixedHeaderDivId;
|
||||||
this.dynamicTableDiv = document.getElementById(dynamicTableDivId);
|
this.dynamicTableDiv = document.getElementById(dynamicTableDivId);
|
||||||
this.fixedTableHeader = $(dynamicTableFixedHeaderDivId).getElements("tr")[0];
|
this.fixedTableHeader = document.querySelector(`#${dynamicTableFixedHeaderDivId} thead tr`);
|
||||||
this.hiddenTableHeader = $(dynamicTableDivId).getElements("tr")[0];
|
this.hiddenTableHeader = this.dynamicTableDiv.querySelector(`thead tr`);
|
||||||
this.tableBody = $(dynamicTableDivId).getElements("tbody")[0];
|
this.tableBody = this.dynamicTableDiv.querySelector(`tbody`);
|
||||||
this.rows = new Map();
|
this.rows = new Map();
|
||||||
this.selectedRows = [];
|
this.selectedRows = [];
|
||||||
this.columns = [];
|
this.columns = [];
|
||||||
|
@ -330,10 +330,7 @@ window.qBittorrent.DynamicTable ??= (() => {
|
||||||
}
|
}
|
||||||
}.bind(this);
|
}.bind(this);
|
||||||
|
|
||||||
const ths = this.fixedTableHeader.getElements("th");
|
for (const th of this.getRowCells(this.fixedTableHeader)) {
|
||||||
|
|
||||||
for (let i = 0; i < ths.length; ++i) {
|
|
||||||
const th = ths[i];
|
|
||||||
th.addEventListener("mousemove", mouseMoveFn);
|
th.addEventListener("mousemove", mouseMoveFn);
|
||||||
th.addEventListener("mouseout", mouseOutFn);
|
th.addEventListener("mouseout", mouseOutFn);
|
||||||
th.addEventListener("touchend", onTouch, { passive: true });
|
th.addEventListener("touchend", onTouch, { passive: true });
|
||||||
|
@ -382,8 +379,8 @@ window.qBittorrent.DynamicTable ??= (() => {
|
||||||
context.font = window.getComputedStyle(bodyColumn, null).getPropertyValue("font");
|
context.font = window.getComputedStyle(bodyColumn, null).getPropertyValue("font");
|
||||||
|
|
||||||
const longestTd = { value: "", width: 0 };
|
const longestTd = { value: "", width: 0 };
|
||||||
for (const tr of this.tableBody.querySelectorAll("tr")) {
|
for (const tr of this.getTrs()) {
|
||||||
const tds = tr.querySelectorAll("td");
|
const tds = this.getRowCells(tr);
|
||||||
const td = tds[columnIndex];
|
const td = tds[columnIndex];
|
||||||
|
|
||||||
const buffer = column.calculateBuffer(tr.rowId);
|
const buffer = column.calculateBuffer(tr.rowId);
|
||||||
|
@ -606,8 +603,7 @@ window.qBittorrent.DynamicTable ??= (() => {
|
||||||
},
|
},
|
||||||
|
|
||||||
updateHeader: function(header) {
|
updateHeader: function(header) {
|
||||||
const ths = header.getElements("th");
|
const ths = this.getRowCells(header);
|
||||||
|
|
||||||
for (let i = 0; i < ths.length; ++i) {
|
for (let i = 0; i < ths.length; ++i) {
|
||||||
const th = ths[i];
|
const th = ths[i];
|
||||||
th._this = this;
|
th._this = this;
|
||||||
|
@ -708,10 +704,7 @@ window.qBittorrent.DynamicTable ??= (() => {
|
||||||
|
|
||||||
selectAll: function() {
|
selectAll: function() {
|
||||||
this.deselectAll();
|
this.deselectAll();
|
||||||
|
for (const tr of this.getTrs()) {
|
||||||
const trs = this.tableBody.getElements("tr");
|
|
||||||
for (let i = 0; i < trs.length; ++i) {
|
|
||||||
const tr = trs[i];
|
|
||||||
this.selectedRows.push(tr.rowId);
|
this.selectedRows.push(tr.rowId);
|
||||||
tr.classList.add("selected");
|
tr.classList.add("selected");
|
||||||
}
|
}
|
||||||
|
@ -741,16 +734,15 @@ window.qBittorrent.DynamicTable ??= (() => {
|
||||||
}
|
}
|
||||||
|
|
||||||
let select = false;
|
let select = false;
|
||||||
const that = this;
|
for (const tr of this.getTrs()) {
|
||||||
this.tableBody.getElements("tr").each((tr) => {
|
|
||||||
if ((tr.rowId === rowId1) || (tr.rowId === rowId2)) {
|
if ((tr.rowId === rowId1) || (tr.rowId === rowId2)) {
|
||||||
select = !select;
|
select = !select;
|
||||||
that.selectedRows.push(tr.rowId);
|
this.selectedRows.push(tr.rowId);
|
||||||
}
|
}
|
||||||
else if (select) {
|
else if (select) {
|
||||||
that.selectedRows.push(tr.rowId);
|
this.selectedRows.push(tr.rowId);
|
||||||
}
|
}
|
||||||
});
|
}
|
||||||
this.setRowClass();
|
this.setRowClass();
|
||||||
this.onSelectedRowChanged();
|
this.onSelectedRowChanged();
|
||||||
},
|
},
|
||||||
|
@ -758,14 +750,14 @@ window.qBittorrent.DynamicTable ??= (() => {
|
||||||
reselectRows: function(rowIds) {
|
reselectRows: function(rowIds) {
|
||||||
this.deselectAll();
|
this.deselectAll();
|
||||||
this.selectedRows = rowIds.slice();
|
this.selectedRows = rowIds.slice();
|
||||||
this.tableBody.getElements("tr").each((tr) => {
|
for (const tr of this.getTrs()) {
|
||||||
if (rowIds.includes(tr.rowId))
|
if (rowIds.includes(tr.rowId))
|
||||||
tr.classList.add("selected");
|
tr.classList.add("selected");
|
||||||
});
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
setRowClass: function() {
|
setRowClass: function() {
|
||||||
for (const tr of this.tableBody.querySelectorAll("tr"))
|
for (const tr of this.getTrs())
|
||||||
tr.classList.toggle("selected", this.isRowSelected(tr.rowId));
|
tr.classList.toggle("selected", this.isRowSelected(tr.rowId));
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -827,10 +819,9 @@ window.qBittorrent.DynamicTable ??= (() => {
|
||||||
},
|
},
|
||||||
|
|
||||||
getTrByRowId: function(rowId) {
|
getTrByRowId: function(rowId) {
|
||||||
const trs = this.tableBody.getElements("tr");
|
for (const tr of this.getTrs()) {
|
||||||
for (let i = 0; i < trs.length; ++i) {
|
if (tr.rowId === rowId)
|
||||||
if (trs[i].rowId === rowId)
|
return tr;
|
||||||
return trs[i];
|
|
||||||
}
|
}
|
||||||
return null;
|
return null;
|
||||||
},
|
},
|
||||||
|
@ -845,7 +836,7 @@ window.qBittorrent.DynamicTable ??= (() => {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const trs = this.tableBody.getElements("tr");
|
const trs = [...this.getTrs()];
|
||||||
|
|
||||||
for (let rowPos = 0; rowPos < rows.length; ++rowPos) {
|
for (let rowPos = 0; rowPos < rows.length; ++rowPos) {
|
||||||
const rowId = rows[rowPos]["rowId"];
|
const rowId = rows[rowPos]["rowId"];
|
||||||
|
@ -927,9 +918,8 @@ window.qBittorrent.DynamicTable ??= (() => {
|
||||||
clear: function() {
|
clear: function() {
|
||||||
this.deselectAll();
|
this.deselectAll();
|
||||||
this.rows.clear();
|
this.rows.clear();
|
||||||
const trs = this.tableBody.getElements("tr");
|
for (const tr of this.getTrs())
|
||||||
while (trs.length > 0)
|
tr.destroy();
|
||||||
trs.pop().destroy();
|
|
||||||
},
|
},
|
||||||
|
|
||||||
selectedRowsIds: function() {
|
selectedRowsIds: function() {
|
||||||
|
@ -953,7 +943,11 @@ window.qBittorrent.DynamicTable ??= (() => {
|
||||||
},
|
},
|
||||||
|
|
||||||
selectNextRow: function() {
|
selectNextRow: function() {
|
||||||
const visibleRows = $(this.dynamicTableDivId).getElements("tbody tr").filter(e => e.style.display !== "none");
|
const visibleRows = [];
|
||||||
|
for (const tr of this.getTrs()) {
|
||||||
|
if (!tr.classList.contains("invisible") && (tr.style.display !== "none"))
|
||||||
|
visibleRows.push(tr);
|
||||||
|
}
|
||||||
const selectedRowId = this.getSelectedRowId();
|
const selectedRowId = this.getSelectedRowId();
|
||||||
|
|
||||||
let selectedIndex = -1;
|
let selectedIndex = -1;
|
||||||
|
@ -975,7 +969,11 @@ window.qBittorrent.DynamicTable ??= (() => {
|
||||||
},
|
},
|
||||||
|
|
||||||
selectPreviousRow: function() {
|
selectPreviousRow: function() {
|
||||||
const visibleRows = $(this.dynamicTableDivId).getElements("tbody tr").filter(e => e.style.display !== "none");
|
const visibleRows = [];
|
||||||
|
for (const tr of this.getTrs()) {
|
||||||
|
if (!tr.classList.contains("invisible") && (tr.style.display !== "none"))
|
||||||
|
visibleRows.push(tr);
|
||||||
|
}
|
||||||
const selectedRowId = this.getSelectedRowId();
|
const selectedRowId = this.getSelectedRowId();
|
||||||
|
|
||||||
let selectedIndex = -1;
|
let selectedIndex = -1;
|
||||||
|
@ -1270,14 +1268,13 @@ window.qBittorrent.DynamicTable ??= (() => {
|
||||||
this.columns["progress"].staticWidth = 100;
|
this.columns["progress"].staticWidth = 100;
|
||||||
this.columns["progress"].onResize = function(columnName) {
|
this.columns["progress"].onResize = function(columnName) {
|
||||||
const pos = this.getColumnPos(columnName);
|
const pos = this.getColumnPos(columnName);
|
||||||
const trs = this.tableBody.getElements("tr");
|
|
||||||
progressColumnWidth = -1;
|
progressColumnWidth = -1;
|
||||||
for (let i = 0; i < trs.length; ++i) {
|
for (const tr of this.getTrs()) {
|
||||||
const td = trs[i].getElements("td")[pos];
|
const td = this.getRowCells(tr)[pos];
|
||||||
if (progressColumnWidth < 0)
|
if (progressColumnWidth < 0)
|
||||||
progressColumnWidth = td.offsetWidth;
|
progressColumnWidth = td.offsetWidth;
|
||||||
td.resized = true;
|
td.resized = true;
|
||||||
this.columns[columnName].updateTd(td, this.rows.get(trs[i].rowId));
|
this.columns[columnName].updateTd(td, this.getRow(tr.rowId));
|
||||||
}
|
}
|
||||||
}.bind(this);
|
}.bind(this);
|
||||||
|
|
||||||
|
@ -2312,11 +2309,10 @@ window.qBittorrent.DynamicTable ??= (() => {
|
||||||
},
|
},
|
||||||
|
|
||||||
reselectRows: function(rowIds) {
|
reselectRows: function(rowIds) {
|
||||||
const that = this;
|
|
||||||
this.deselectAll();
|
this.deselectAll();
|
||||||
this.tableBody.getElements("tr").each((tr) => {
|
for (const tr of this.getTrs()) {
|
||||||
if (rowIds.includes(tr.rowId)) {
|
if (rowIds.includes(tr.rowId)) {
|
||||||
const node = that.getNode(tr.rowId);
|
const node = this.getNode(tr.rowId);
|
||||||
node.checked = 0;
|
node.checked = 0;
|
||||||
node.full_data.checked = 0;
|
node.full_data.checked = 0;
|
||||||
|
|
||||||
|
@ -2325,8 +2321,7 @@ window.qBittorrent.DynamicTable ??= (() => {
|
||||||
checkbox.indeterminate = false;
|
checkbox.indeterminate = false;
|
||||||
checkbox.checked = true;
|
checkbox.checked = true;
|
||||||
}
|
}
|
||||||
});
|
}
|
||||||
|
|
||||||
this.updateGlobalCheckbox();
|
this.updateGlobalCheckbox();
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -2838,7 +2833,7 @@ window.qBittorrent.DynamicTable ??= (() => {
|
||||||
const row = this.rows.get(tr.rowId);
|
const row = this.rows.get(tr.rowId);
|
||||||
const data = row[fullUpdate ? "full_data" : "data"];
|
const data = row[fullUpdate ? "full_data" : "data"];
|
||||||
|
|
||||||
const tds = tr.getElements("td");
|
const tds = this.getRowCells(tr);
|
||||||
for (let i = 0; i < this.columns.length; ++i) {
|
for (let i = 0; i < this.columns.length; ++i) {
|
||||||
if (Object.hasOwn(data, this.columns[i].dataProperties[0]))
|
if (Object.hasOwn(data, this.columns[i].dataProperties[0]))
|
||||||
this.columns[i].updateTd(tds[i], row);
|
this.columns[i].updateTd(tds[i], row);
|
||||||
|
@ -2975,7 +2970,7 @@ window.qBittorrent.DynamicTable ??= (() => {
|
||||||
const data = row[fullUpdate ? "full_data" : "data"];
|
const data = row[fullUpdate ? "full_data" : "data"];
|
||||||
tr.classList.toggle("unreadArticle", !row.full_data.isRead);
|
tr.classList.toggle("unreadArticle", !row.full_data.isRead);
|
||||||
|
|
||||||
const tds = tr.getElements("td");
|
const tds = this.getRowCells(tr);
|
||||||
for (let i = 0; i < this.columns.length; ++i) {
|
for (let i = 0; i < this.columns.length; ++i) {
|
||||||
if (Object.hasOwn(data, this.columns[i].dataProperties[0]))
|
if (Object.hasOwn(data, this.columns[i].dataProperties[0]))
|
||||||
this.columns[i].updateTd(tds[i], row);
|
this.columns[i].updateTd(tds[i], row);
|
||||||
|
@ -3251,7 +3246,7 @@ window.qBittorrent.DynamicTable ??= (() => {
|
||||||
tr.classList.add("articleTableArticle");
|
tr.classList.add("articleTableArticle");
|
||||||
}
|
}
|
||||||
|
|
||||||
const tds = tr.getElements("td");
|
const tds = this.getRowCells(tr);
|
||||||
for (let i = 0; i < this.columns.length; ++i) {
|
for (let i = 0; i < this.columns.length; ++i) {
|
||||||
if (Object.hasOwn(data, this.columns[i].dataProperties[0]))
|
if (Object.hasOwn(data, this.columns[i].dataProperties[0]))
|
||||||
this.columns[i].updateTd(tds[i], row);
|
this.columns[i].updateTd(tds[i], row);
|
||||||
|
@ -3266,7 +3261,7 @@ window.qBittorrent.DynamicTable ??= (() => {
|
||||||
filterText: "",
|
filterText: "",
|
||||||
|
|
||||||
filteredLength: function() {
|
filteredLength: function() {
|
||||||
return this.tableBody.getElements("tr").length;
|
return this.tableBody.rows.length;
|
||||||
},
|
},
|
||||||
|
|
||||||
initColumns: function() {
|
initColumns: function() {
|
||||||
|
|
|
@ -166,7 +166,7 @@ window.qBittorrent.Search ??= (() => {
|
||||||
};
|
};
|
||||||
|
|
||||||
const numSearchTabs = () => {
|
const numSearchTabs = () => {
|
||||||
return $("searchTabs").getElements("li").length;
|
return document.querySelectorAll("#searchTabs li").length;
|
||||||
};
|
};
|
||||||
|
|
||||||
const getSearchIdFromTab = (tab) => {
|
const getSearchIdFromTab = (tab) => {
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue