From 385f139cce6193fe33f8992b0c99165bc53b1902 Mon Sep 17 00:00:00 2001 From: skomerko <168652295+skomerko@users.noreply.github.com> Date: Sun, 26 Jan 2025 08:38:00 +0100 Subject: [PATCH] WebUI: Replace getElements --- src/webui/www/private/scripts/dynamicTable.js | 87 +++++++++---------- src/webui/www/private/scripts/search.js | 2 +- 2 files changed, 42 insertions(+), 47 deletions(-) diff --git a/src/webui/www/private/scripts/dynamicTable.js b/src/webui/www/private/scripts/dynamicTable.js index 91fb42e38..fd9c47204 100644 --- a/src/webui/www/private/scripts/dynamicTable.js +++ b/src/webui/www/private/scripts/dynamicTable.js @@ -74,9 +74,9 @@ window.qBittorrent.DynamicTable ??= (() => { this.dynamicTableDivId = dynamicTableDivId; this.dynamicTableFixedHeaderDivId = dynamicTableFixedHeaderDivId; this.dynamicTableDiv = document.getElementById(dynamicTableDivId); - this.fixedTableHeader = $(dynamicTableFixedHeaderDivId).getElements("tr")[0]; - this.hiddenTableHeader = $(dynamicTableDivId).getElements("tr")[0]; - this.tableBody = $(dynamicTableDivId).getElements("tbody")[0]; + this.fixedTableHeader = document.querySelector(`#${dynamicTableFixedHeaderDivId} thead tr`); + this.hiddenTableHeader = this.dynamicTableDiv.querySelector(`thead tr`); + this.tableBody = this.dynamicTableDiv.querySelector(`tbody`); this.rows = new Map(); this.selectedRows = []; this.columns = []; @@ -330,10 +330,7 @@ window.qBittorrent.DynamicTable ??= (() => { } }.bind(this); - const ths = this.fixedTableHeader.getElements("th"); - - for (let i = 0; i < ths.length; ++i) { - const th = ths[i]; + for (const th of this.getRowCells(this.fixedTableHeader)) { th.addEventListener("mousemove", mouseMoveFn); th.addEventListener("mouseout", mouseOutFn); th.addEventListener("touchend", onTouch, { passive: true }); @@ -382,8 +379,8 @@ window.qBittorrent.DynamicTable ??= (() => { context.font = window.getComputedStyle(bodyColumn, null).getPropertyValue("font"); const longestTd = { value: "", width: 0 }; - for (const tr of this.tableBody.querySelectorAll("tr")) { - const tds = tr.querySelectorAll("td"); + for (const tr of this.getTrs()) { + const tds = this.getRowCells(tr); const td = tds[columnIndex]; const buffer = column.calculateBuffer(tr.rowId); @@ -606,8 +603,7 @@ window.qBittorrent.DynamicTable ??= (() => { }, updateHeader: function(header) { - const ths = header.getElements("th"); - + const ths = this.getRowCells(header); for (let i = 0; i < ths.length; ++i) { const th = ths[i]; th._this = this; @@ -708,10 +704,7 @@ window.qBittorrent.DynamicTable ??= (() => { selectAll: function() { this.deselectAll(); - - const trs = this.tableBody.getElements("tr"); - for (let i = 0; i < trs.length; ++i) { - const tr = trs[i]; + for (const tr of this.getTrs()) { this.selectedRows.push(tr.rowId); tr.classList.add("selected"); } @@ -741,16 +734,15 @@ window.qBittorrent.DynamicTable ??= (() => { } let select = false; - const that = this; - this.tableBody.getElements("tr").each((tr) => { + for (const tr of this.getTrs()) { if ((tr.rowId === rowId1) || (tr.rowId === rowId2)) { select = !select; - that.selectedRows.push(tr.rowId); + this.selectedRows.push(tr.rowId); } else if (select) { - that.selectedRows.push(tr.rowId); + this.selectedRows.push(tr.rowId); } - }); + } this.setRowClass(); this.onSelectedRowChanged(); }, @@ -758,14 +750,14 @@ window.qBittorrent.DynamicTable ??= (() => { reselectRows: function(rowIds) { this.deselectAll(); this.selectedRows = rowIds.slice(); - this.tableBody.getElements("tr").each((tr) => { + for (const tr of this.getTrs()) { if (rowIds.includes(tr.rowId)) tr.classList.add("selected"); - }); + } }, setRowClass: function() { - for (const tr of this.tableBody.querySelectorAll("tr")) + for (const tr of this.getTrs()) tr.classList.toggle("selected", this.isRowSelected(tr.rowId)); }, @@ -827,10 +819,9 @@ window.qBittorrent.DynamicTable ??= (() => { }, getTrByRowId: function(rowId) { - const trs = this.tableBody.getElements("tr"); - for (let i = 0; i < trs.length; ++i) { - if (trs[i].rowId === rowId) - return trs[i]; + for (const tr of this.getTrs()) { + if (tr.rowId === rowId) + return tr; } 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) { const rowId = rows[rowPos]["rowId"]; @@ -927,9 +918,8 @@ window.qBittorrent.DynamicTable ??= (() => { clear: function() { this.deselectAll(); this.rows.clear(); - const trs = this.tableBody.getElements("tr"); - while (trs.length > 0) - trs.pop().destroy(); + for (const tr of this.getTrs()) + tr.destroy(); }, selectedRowsIds: function() { @@ -953,7 +943,11 @@ window.qBittorrent.DynamicTable ??= (() => { }, 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(); let selectedIndex = -1; @@ -975,7 +969,11 @@ window.qBittorrent.DynamicTable ??= (() => { }, 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(); let selectedIndex = -1; @@ -1270,14 +1268,13 @@ window.qBittorrent.DynamicTable ??= (() => { this.columns["progress"].staticWidth = 100; this.columns["progress"].onResize = function(columnName) { const pos = this.getColumnPos(columnName); - const trs = this.tableBody.getElements("tr"); progressColumnWidth = -1; - for (let i = 0; i < trs.length; ++i) { - const td = trs[i].getElements("td")[pos]; + for (const tr of this.getTrs()) { + const td = this.getRowCells(tr)[pos]; if (progressColumnWidth < 0) progressColumnWidth = td.offsetWidth; 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); @@ -2312,11 +2309,10 @@ window.qBittorrent.DynamicTable ??= (() => { }, reselectRows: function(rowIds) { - const that = this; this.deselectAll(); - this.tableBody.getElements("tr").each((tr) => { + for (const tr of this.getTrs()) { if (rowIds.includes(tr.rowId)) { - const node = that.getNode(tr.rowId); + const node = this.getNode(tr.rowId); node.checked = 0; node.full_data.checked = 0; @@ -2325,8 +2321,7 @@ window.qBittorrent.DynamicTable ??= (() => { checkbox.indeterminate = false; checkbox.checked = true; } - }); - + } this.updateGlobalCheckbox(); }, @@ -2838,7 +2833,7 @@ window.qBittorrent.DynamicTable ??= (() => { const row = this.rows.get(tr.rowId); 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) { if (Object.hasOwn(data, this.columns[i].dataProperties[0])) this.columns[i].updateTd(tds[i], row); @@ -2975,7 +2970,7 @@ window.qBittorrent.DynamicTable ??= (() => { const data = row[fullUpdate ? "full_data" : "data"]; 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) { if (Object.hasOwn(data, this.columns[i].dataProperties[0])) this.columns[i].updateTd(tds[i], row); @@ -3251,7 +3246,7 @@ window.qBittorrent.DynamicTable ??= (() => { tr.classList.add("articleTableArticle"); } - const tds = tr.getElements("td"); + const tds = this.getRowCells(tr); for (let i = 0; i < this.columns.length; ++i) { if (Object.hasOwn(data, this.columns[i].dataProperties[0])) this.columns[i].updateTd(tds[i], row); @@ -3266,7 +3261,7 @@ window.qBittorrent.DynamicTable ??= (() => { filterText: "", filteredLength: function() { - return this.tableBody.getElements("tr").length; + return this.tableBody.rows.length; }, initColumns: function() { diff --git a/src/webui/www/private/scripts/search.js b/src/webui/www/private/scripts/search.js index 600fdcbf7..cd97bde5d 100644 --- a/src/webui/www/private/scripts/search.js +++ b/src/webui/www/private/scripts/search.js @@ -166,7 +166,7 @@ window.qBittorrent.Search ??= (() => { }; const numSearchTabs = () => { - return $("searchTabs").getElements("li").length; + return document.querySelectorAll("#searchTabs li").length; }; const getSearchIdFromTab = (tab) => {