WebUI: Replace getElements

This commit is contained in:
skomerko 2025-01-26 08:38:00 +01:00
commit 385f139cce
2 changed files with 42 additions and 47 deletions

View file

@ -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() {

View file

@ -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) => {