Skip to content

Commit

Permalink
WebUI: Replace getElements & getChildren
Browse files Browse the repository at this point in the history 
This PR further reduces Mootools usage.
PR #22220.
  • Loading branch information
@skomerko
skomerko authored Feb 4, 2025
1 parent 463700b commit 9c2e698
Show file tree
Hide file tree
Showing 6 changed files with 53 additions and 65 deletions.
7 changes: 4 additions & 3 deletions src/webui/www/private/scripts/client.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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");

Expand Down Expand Up @@ -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");

Expand Down Expand Up @@ -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");

Expand Down
11 changes: 4 additions & 7 deletions src/webui/www/private/scripts/contextmenu.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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");
Expand Down Expand Up @@ -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");
}
Expand Down
83 changes: 33 additions & 50 deletions src/webui/www/private/scripts/dynamicTable.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = [];
Expand Down Expand Up @@ -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 });
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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");
}
Expand Down Expand Up @@ -741,31 +734,30 @@ 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();
},

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));
},

Expand Down Expand Up @@ -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) {
Expand All @@ -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"];
Expand Down Expand Up @@ -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() {
Expand All @@ -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;
Expand All @@ -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;
Expand Down Expand Up @@ -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);
Expand All @@ -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);

Expand Down Expand Up @@ -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;

Expand All @@ -2325,8 +2309,7 @@ window.qBittorrent.DynamicTable ??= (() => {
checkbox.indeterminate = false;
checkbox.checked = true;
}
});

}
this.updateGlobalCheckbox();
},

Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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);
Expand All @@ -3266,7 +3249,7 @@ window.qBittorrent.DynamicTable ??= (() => {
filterText: "",

filteredLength: function() {
return this.tableBody.getElements("tr").length;
return this.tableBody.rows.length;
},

initColumns: function() {
Expand Down
2 changes: 1 addition & 1 deletion src/webui/www/private/scripts/search.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -166,7 +166,7 @@ window.qBittorrent.Search ??= (() => {
};

const numSearchTabs = () => {
return $("searchTabs").getElements("li").length;
return document.querySelectorAll("#searchTabs li").length;
};

const getSearchIdFromTab = (tab) => {
Expand Down
6 changes: 4 additions & 2 deletions src/webui/www/private/views/preferences.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2102,7 +2102,8 @@

// 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"
Expand Down Expand Up @@ -2130,7 +2131,8 @@
};

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
Expand Down
9 changes: 7 additions & 2 deletions src/webui/www/private/views/rss.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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((() => {
Expand Down

0 comments on commit 9c2e698

Please sign in to comment.