github/qBittorrent
1
0
Fork 0
mirror of https://github.com/qbittorrent/qBittorrent synced 2025-08-20 13:23:34 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

WebUI: Replace getElements & getChildren

Browse source 
This PR further reduces Mootools usage.
PR #22220.
This commit is contained in:
skomerko 2025-02-04 10:08:18 +01:00 • committed by GitHub
commit 9c2e698514
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 53 additions and 65 deletions
Download patch file Download diff file Expand all files Collapse all files

7
src/webui/www/private/scripts/client.js
View file

@ -490,7 +490,8 @@ window.addEventListener("DOMContentLoaded", () => {
const categoryList = document.getElementById("categoryFilterList");
if (!categoryList)
return;
categoryList.getChildren().each(c => c.destroy());
[...categoryList.children].forEach((el) => { el.destroy(); });
const categoryItemTemplate = document.getElementById("categoryFilterItem");
@ -611,7 +612,7 @@ window.addEventListener("DOMContentLoaded", () => {
if (tagFilterList === null)
return;
tagFilterList.getChildren().each(c => c.destroy());
[...tagFilterList.children].forEach((el) => { el.destroy(); });
const tagItemTemplate = document.getElementById("tagFilterItem");
@ -664,7 +665,7 @@ window.addEventListener("DOMContentLoaded", () => {
if (trackerFilterList === null)
return;
trackerFilterList.getChildren().each(c => c.destroy());
[...trackerFilterList.children].forEach((el) => { el.destroy(); });
const trackerItemTemplate = document.getElementById("trackerFilterItem");

11
src/webui/www/private/scripts/contextmenu.js
View file

@ -478,7 +478,7 @@ window.qBittorrent.ContextMenu ??= (() => {
updateCategoriesSubMenu(categories) {
const contextCategoryList = $("contextCategoryList");
contextCategoryList.getChildren().each(c => c.destroy());
[...contextCategoryList.children].forEach((el) => { el.destroy(); });
const createMenuItem = (text, imgURL, clickFn) => {
const anchor = document.createElement("a");
@ -633,15 +633,12 @@ window.qBittorrent.ContextMenu ??= (() => {
class SearchPluginsTableContextMenu extends ContextMenu {
updateMenuItems() {
const enabledColumnIndex = (text) => {
const columns = $("searchPluginsTableFixedHeaderRow").getChildren("th");
for (let i = 0; i < columns.length; ++i) {
if (columns[i].textContent === "Enabled")
return i;
}
const columns = document.querySelectorAll("#searchPluginsTableFixedHeaderRow th");
return Array.prototype.findIndex.call(columns, (column => column.textContent === "Enabled"));
};
this.showItem("Enabled");
this.setItemChecked("Enabled", (this.options.element.getChildren("td")[enabledColumnIndex()].textContent === "Yes"));
this.setItemChecked("Enabled", (this.options.element.children[enabledColumnIndex()].textContent === "Yes"));
this.showItem("Uninstall");
}

83
src/webui/www/private/scripts/dynamicTable.js
View file

@ -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,12 +819,7 @@ 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];
}
return null;
return Array.prototype.find.call(this.getTrs(), (tr => tr.rowId === rowId));
},
updateTable: function(fullUpdate = false) {
@ -845,7 +832,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 +914,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 +939,7 @@ window.qBittorrent.DynamicTable ??= (() => {
},
selectNextRow: function() {
const visibleRows = $(this.dynamicTableDivId).getElements("tbody tr").filter(e => e.style.display !== "none");
const visibleRows = Array.prototype.filter.call(this.getTrs(), (tr => !tr.classList.contains("invisible") && (tr.style.display !== "none")));
const selectedRowId = this.getSelectedRowId();
let selectedIndex = -1;
@ -975,7 +961,7 @@ window.qBittorrent.DynamicTable ??= (() => {
},
selectPreviousRow: function() {
const visibleRows = $(this.dynamicTableDivId).getElements("tbody tr").filter(e => e.style.display !== "none");
const visibleRows = Array.prototype.filter.call(this.getTrs(), (tr => !tr.classList.contains("invisible") && (tr.style.display !== "none")));
const selectedRowId = this.getSelectedRowId();
let selectedIndex = -1;
@ -1249,8 +1235,8 @@ window.qBittorrent.DynamicTable ??= (() => {
if ((progressFormatted === 100.0) && (progress !== 1.0))
progressFormatted = 99.9;
if (td.getChildren("div").length > 0) {
const div = td.getChildren("div")[0];
const div = td.firstElementChild;
if (div !== null) {
if (td.resized) {
td.resized = false;
div.setWidth(progressColumnWidth - 5);
@ -1270,14 +1256,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 +2297,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 +2309,7 @@ window.qBittorrent.DynamicTable ??= (() => {
checkbox.indeterminate = false;
checkbox.checked = true;
}
});
}
this.updateGlobalCheckbox();
},
@ -2838,7 +2821,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 +2958,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 +3234,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 +3249,7 @@ window.qBittorrent.DynamicTable ??= (() => {
filterText: "",
filteredLength: function() {
return this.tableBody.getElements("tr").length;
return this.tableBody.rows.length;
},
initColumns: function() {

2
src/webui/www/private/scripts/search.js
View file

@ -166,7 +166,7 @@ window.qBittorrent.Search ??= (() => {
};
const numSearchTabs = () => {
return $("searchTabs").getElements("li").length;
return document.querySelectorAll("#searchTabs li").length;
};
const getSearchIdFromTab = (tab) => {

6
src/webui/www/private/views/preferences.html
View file

@ -2102,7 +2102,8 @@ Use ';' to split multiple entries. Can use wildcard '*'.)QBT_TR[CONTEXT=OptionsD
// Advanced Tab
const updateNetworkInterfaces = (default_iface, default_iface_name) => {
$("networkInterface").getChildren().each(c => c.destroy());
[...document.getElementById("networkInterface").children].forEach((el) => { el.destroy(); });
fetch("api/v2/app/networkInterfaceList", {
method: "GET",
cache: "no-store"
@ -2130,7 +2131,8 @@ Use ';' to split multiple entries. Can use wildcard '*'.)QBT_TR[CONTEXT=OptionsD
};
const updateInterfaceAddresses = (iface, default_addr) => {
$("optionalIPAddressToBind").getChildren().each(c => c.destroy());
[...document.getElementById("optionalIPAddressToBind").children].forEach((el) => { el.destroy(); });
const url = new URL("api/v2/app/networkInterfaceAddressList", window.location);
url.search = new URLSearchParams({
iface: iface

9
src/webui/www/private/views/rss.html
View file

@ -417,13 +417,18 @@
});
});
$("rssDetailsView").getChildren().each(c => c.destroy());
clearDetails();
rssArticleTable.updateTable(false);
};
const clearDetails = () => {
[...document.getElementById("rssDetailsView").children].forEach((el) => { el.destroy(); });
};
const showDetails = (feedUid, articleID) => {
markArticleAsRead(pathByFeedId.get(feedUid), articleID);
$("rssDetailsView").getChildren().each(c => c.destroy());
clearDetails();
const article = feedData[feedUid].filter((article) => article.id === articleID)[0];
if (article) {
$("rssDetailsView").append((() => {