mirrors/qBittorrent
1
0
Fork 0
mirror of https://github.com/qbittorrent/qBittorrent.git synced 2025-01-07 07:37:24 +03:00
Code Issues Projects Releases Packages Wiki Activity

WebUI: Use vanilla JS to create elements

Browse source 
All elements are now created using createElement() method:
https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement

PR #21975.

---------

Co-authored-by: Chocobo1 <Chocobo1@users.noreply.github.com>
This commit is contained in:
skomerko 2024-12-14 20:31:44 +01:00 committed by GitHub
parent 4c6dd8e68d
commit 14684c8c83
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 167 additions and 190 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/webui/www/private/rename_files.html
View file

@ -46,7 +46,7 @@
// Inject checkbox into the first column of the table header // Inject checkbox into the first column of the table header
const tableHeaders = $$("#bulkRenameFilesTableFixedHeaderDiv .dynamicTableHeader th"); const tableHeaders = $$("#bulkRenameFilesTableFixedHeaderDiv .dynamicTableHeader th");
if (tableHeaders.length > 0) { if (tableHeaders.length > 0) {
const checkboxHeader = new Element("input"); const checkboxHeader = document.createElement("input");
checkboxHeader.type = "checkbox"; checkboxHeader.type = "checkbox";
checkboxHeader.id = "rootMultiRename_cb"; checkboxHeader.id = "rootMultiRename_cb";
checkboxHeader.addEventListener("click", (e) => { checkboxHeader.addEventListener("click", (e) => {
@ -56,7 +56,7 @@
}); });
const checkboxTH = tableHeaders[0]; const checkboxTH = tableHeaders[0];
checkboxHeader.injectInside(checkboxTH); checkboxTH.append(checkboxHeader);
} }
// Register keyboard events to modal window // Register keyboard events to modal window

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

@ -48,7 +48,7 @@ window.qBittorrent.Download ??= (() => {
continue; continue;
const category = data[i]; const category = data[i];
const option = new Element("option"); const option = document.createElement("option");
option.value = category.name; option.value = category.name;
option.textContent = category.name; option.textContent = category.name;
$("categorySelect").appendChild(option); $("categorySelect").appendChild(option);

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

@ -433,10 +433,12 @@ window.qBittorrent.DynamicTable ??= (() => {
const menuId = this.dynamicTableDivId + "_headerMenu"; const menuId = this.dynamicTableDivId + "_headerMenu";
// reuse menu if already exists // reuse menu if already exists
const ul = $(menuId) ?? new Element("ul", { let ul = document.getElementById(menuId);
id: menuId, if (ul === null) {
class: "contextMenu scrollableMenu" ul = document.createElement("ul");
}); ul.id = menuId;
ul.className = "contextMenu scrollableMenu";
}
const createLi = (columnName, text) => { const createLi = (columnName, text) => {
const anchor = document.createElement("a"); const anchor = document.createElement("a");
@ -499,7 +501,7 @@ window.qBittorrent.DynamicTable ??= (() => {
ul.firstElementChild.classList.add("separator"); ul.firstElementChild.classList.add("separator");
ul.insertBefore(autoResizeAllElement, ul.firstElementChild); ul.insertBefore(autoResizeAllElement, ul.firstElementChild);
ul.insertBefore(autoResizeElement, ul.firstElementChild); ul.insertBefore(autoResizeElement, ul.firstElementChild);
ul.inject(document.body); document.body.append(ul);
this.headerContextMenu = new DynamicTableHeaderContextMenuClass({ this.headerContextMenu = new DynamicTableHeaderContextMenuClass({
targets: "#" + this.dynamicTableFixedHeaderDivId + " tr th", targets: "#" + this.dynamicTableFixedHeaderDivId + " tr th",
@ -549,8 +551,8 @@ window.qBittorrent.DynamicTable ??= (() => {
this.columns.push(column); this.columns.push(column);
this.columns[name] = column; this.columns[name] = column;
this.hiddenTableHeader.appendChild(new Element("th")); this.hiddenTableHeader.append(document.createElement("th"));
this.fixedTableHeader.appendChild(new Element("th")); this.fixedTableHeader.append(document.createElement("th"));
}, },
loadColumnsOrder: function() { loadColumnsOrder: function() {
@ -850,7 +852,7 @@ window.qBittorrent.DynamicTable ??= (() => {
this.updateRow(trs[rowPos], fullUpdate); this.updateRow(trs[rowPos], fullUpdate);
} }
else { // else create a new row in the table else { // else create a new row in the table
const tr = new Element("tr"); const tr = document.createElement("tr");
// set tabindex so element receives keydown events // set tabindex so element receives keydown events
// more info: https://developer.mozilla.org/en-US/docs/Web/API/Element/keydown_event // more info: https://developer.mozilla.org/en-US/docs/Web/API/Element/keydown_event
tr.tabIndex = -1; tr.tabIndex = -1;
@ -860,10 +862,10 @@ window.qBittorrent.DynamicTable ??= (() => {
tr["rowId"] = rowId; tr["rowId"] = rowId;
for (let k = 0; k < this.columns.length; ++k) { for (let k = 0; k < this.columns.length; ++k) {
const td = new Element("td"); const td = document.createElement("td");
if ((this.columns[k].visible === "0") || this.columns[k].force_hide) if ((this.columns[k].visible === "0") || this.columns[k].force_hide)
td.classList.add("invisible"); td.classList.add("invisible");
td.injectInside(tr); tr.append(td);
} }
// Insert // Insert
@ -1104,11 +1106,11 @@ window.qBittorrent.DynamicTable ??= (() => {
} }
} }
else { else {
td.adopt(new Element("img", { const img = document.createElement("img");
"src": img_path, img.src = img_path;
"class": "stateIcon", img.className = "stateIcon";
"title": state img.title = state;
})); td.append(img);
} }
}; };
@ -1237,7 +1239,7 @@ window.qBittorrent.DynamicTable ??= (() => {
else { else {
if (ProgressColumnWidth < 0) if (ProgressColumnWidth < 0)
ProgressColumnWidth = td.offsetWidth; ProgressColumnWidth = td.offsetWidth;
td.adopt(new window.qBittorrent.ProgressBar.ProgressBar(progressFormatted.toFloat(), { td.append(new window.qBittorrent.ProgressBar.ProgressBar(progressFormatted.toFloat(), {
"width": ProgressColumnWidth - 5 "width": ProgressColumnWidth - 5
})); }));
td.resized = false; td.resized = false;
@ -2213,13 +2215,11 @@ window.qBittorrent.DynamicTable ??= (() => {
const id = row.rowId; const id = row.rowId;
const value = this.getRowValue(row); const value = this.getRowValue(row);
const treeImg = new Element("img", { const treeImg = document.createElement("img");
src: "images/L.gif", treeImg.src = "images/L.gif";
styles: { treeImg.style.marginBottom = "-2px";
"margin-bottom": -2
} const checkbox = document.createElement("input");
});
const checkbox = new Element("input");
checkbox.type = "checkbox"; checkbox.type = "checkbox";
checkbox.id = "cbRename" + id; checkbox.id = "cbRename" + id;
checkbox.setAttribute("data-id", id); checkbox.setAttribute("data-id", id);
@ -2235,7 +2235,7 @@ window.qBittorrent.DynamicTable ??= (() => {
checkbox.checked = (value === 0); checkbox.checked = (value === 0);
checkbox.state = checkbox.checked ? "checked" : "unchecked"; checkbox.state = checkbox.checked ? "checked" : "unchecked";
checkbox.indeterminate = false; checkbox.indeterminate = false;
td.adopt(treeImg, checkbox); td.replaceChildren(treeImg, checkbox);
}; };
this.columns["checked"].staticWidth = 50; this.columns["checked"].staticWidth = 50;
@ -2253,32 +2253,26 @@ window.qBittorrent.DynamicTable ??= (() => {
$(fileNameId).textContent = value; $(fileNameId).textContent = value;
} }
else { else {
const span = new Element("span", { const span = document.createElement("span");
text: value, span.textContent = value;
id: fileNameId span.id = fileNameId;
});
const dirImg = new Element("img", { const dirImg = document.createElement("img");
src: "images/directory.svg", dirImg.src = "images/directory.svg";
styles: { dirImg.style.width = "20px";
"width": 20, dirImg.style.paddingRight = "5px";
"padding-right": 5, dirImg.style.marginBottom = "-3px";
"margin-bottom": -3, dirImg.style.marginLeft = `${node.depth * 20}px`;
"margin-left": (node.depth * 20) dirImg.id = dirImgId;
},
id: dirImgId
});
td.replaceChildren(dirImg, span); td.replaceChildren(dirImg, span);
} }
} }
else { // is file else { // is file
const value = this.getRowValue(row); const value = this.getRowValue(row);
const span = new Element("span", { const span = document.createElement("span");
text: value, span.textContent = value;
id: fileNameId, span.id = fileNameId;
styles: { span.style.marginLeft = `${(node.depth + 1) * 20}px`;
"margin-left": ((node.depth + 1) * 20)
}
});
td.replaceChildren(span); td.replaceChildren(span);
} }
}; };
@ -2289,10 +2283,9 @@ window.qBittorrent.DynamicTable ??= (() => {
const fileNameRenamedId = "filesTablefileRenamed" + id; const fileNameRenamedId = "filesTablefileRenamed" + id;
const value = this.getRowValue(row); const value = this.getRowValue(row);
const span = new Element("span", { const span = document.createElement("span");
text: value, span.textContent = value;
id: fileNameRenamedId, span.id = fileNameRenamedId;
});
td.replaceChildren(span); td.replaceChildren(span);
}; };
}, },
@ -2540,13 +2533,10 @@ window.qBittorrent.DynamicTable ??= (() => {
window.qBittorrent.PropFiles.updateDownloadCheckbox(id, value); window.qBittorrent.PropFiles.updateDownloadCheckbox(id, value);
} }
else { else {
const treeImg = new Element("img", { const treeImg = document.createElement("img");
src: "images/L.gif", treeImg.src = "images/L.gif";
styles: { treeImg.style.marginBottom = "-2px";
"margin-bottom": -2 td.append(treeImg, window.qBittorrent.PropFiles.createDownloadCheckbox(id, row.full_data.fileId, value));
}
});
td.adopt(treeImg, window.qBittorrent.PropFiles.createDownloadCheckbox(id, row.full_data.fileId, value));
} }
}; };
this.columns["checked"].staticWidth = 50; this.columns["checked"].staticWidth = 50;
@ -2566,41 +2556,34 @@ window.qBittorrent.DynamicTable ??= (() => {
$(fileNameId).textContent = value; $(fileNameId).textContent = value;
} }
else { else {
const collapseIcon = new Element("img", { const collapseIcon = document.createElement("img");
src: "images/go-down.svg", collapseIcon.src = "images/go-down.svg";
styles: { collapseIcon.style.marginLeft = `${node.depth * 20}px`;
"margin-left": (node.depth * 20) collapseIcon.className = "filesTableCollapseIcon";
}, collapseIcon.id = collapseIconId;
class: "filesTableCollapseIcon", collapseIcon.setAttribute("data-id", id);
id: collapseIconId, collapseIcon.addEventListener("click", function(e) { qBittorrent.PropFiles.collapseIconClicked(this); });
"data-id": id,
onclick: "qBittorrent.PropFiles.collapseIconClicked(this)" const span = document.createElement("span");
}); span.textContent = value;
const span = new Element("span", { span.id = fileNameId;
text: value,
id: fileNameId const dirImg = document.createElement("img");
}); dirImg.src = "images/directory.svg";
const dirImg = new Element("img", { dirImg.style.width = "20px";
src: "images/directory.svg", dirImg.style.paddingRight = "5px";
styles: { dirImg.style.marginBottom = "-3px";
"width": 20, dirImg.id = dirImgId;
"padding-right": 5,
"margin-bottom": -3
},
id: dirImgId
});
td.replaceChildren(collapseIcon, dirImg, span); td.replaceChildren(collapseIcon, dirImg, span);
} }
} }
else { else {
const value = this.getRowValue(row); const value = this.getRowValue(row);
const span = new Element("span", { const span = document.createElement("span");
text: value, span.textContent = value;
id: fileNameId, span.id = fileNameId;
styles: { span.style.marginLeft = `${(node.depth + 1) * 20}px`;
"margin-left": ((node.depth + 1) * 20)
}
});
td.replaceChildren(span); td.replaceChildren(span);
} }
}; };
@ -2621,7 +2604,7 @@ window.qBittorrent.DynamicTable ??= (() => {
const progressBar = $("pbf_" + id); const progressBar = $("pbf_" + id);
if (progressBar === null) { if (progressBar === null) {
td.adopt(new window.qBittorrent.ProgressBar.ProgressBar(value.toFloat(), { td.append(new window.qBittorrent.ProgressBar.ProgressBar(value.toFloat(), {
id: "pbf_" + id, id: "pbf_" + id,
width: 80 width: 80
})); }));
@ -2640,7 +2623,7 @@ window.qBittorrent.DynamicTable ??= (() => {
if (window.qBittorrent.PropFiles.isPriorityComboExists(id)) if (window.qBittorrent.PropFiles.isPriorityComboExists(id))
window.qBittorrent.PropFiles.updatePriorityCombo(id, value); window.qBittorrent.PropFiles.updatePriorityCombo(id, value);
else else
td.adopt(window.qBittorrent.PropFiles.createPriorityCombo(id, row.full_data.fileId, value)); td.append(window.qBittorrent.PropFiles.createPriorityCombo(id, row.full_data.fileId, value));
}; };
this.columns["priority"].staticWidth = 140; this.columns["priority"].staticWidth = 140;
@ -2887,12 +2870,12 @@ window.qBittorrent.DynamicTable ??= (() => {
} }
} }
else { else {
td.adopt(new Element("img", { const img = document.createElement("img");
"src": img_path, img.src = img_path;
"class": "stateIcon", img.className = "stateIcon";
"height": "22px", img.width = "22";
"width": "22px" img.height = "22";
})); td.append(img);
} }
}; };
}, },
@ -2929,8 +2912,8 @@ window.qBittorrent.DynamicTable ??= (() => {
this.columns.push(column); this.columns.push(column);
this.columns[name] = column; this.columns[name] = column;
this.hiddenTableHeader.appendChild(new Element("th")); this.hiddenTableHeader.append(document.createElement("th"));
this.fixedTableHeader.appendChild(new Element("th")); this.fixedTableHeader.append(document.createElement("th"));
} }
}); });
@ -3017,8 +3000,8 @@ window.qBittorrent.DynamicTable ??= (() => {
this.columns.push(column); this.columns.push(column);
this.columns[name] = column; this.columns[name] = column;
this.hiddenTableHeader.appendChild(new Element("th")); this.hiddenTableHeader.append(document.createElement("th"));
this.fixedTableHeader.appendChild(new Element("th")); this.fixedTableHeader.append(document.createElement("th"));
} }
}); });
@ -3030,7 +3013,7 @@ window.qBittorrent.DynamicTable ??= (() => {
this.columns["checked"].updateTd = function(td, row) { this.columns["checked"].updateTd = function(td, row) {
if ($("cbRssDlRule" + row.rowId) === null) { if ($("cbRssDlRule" + row.rowId) === null) {
const checkbox = new Element("input"); const checkbox = document.createElement("input");
checkbox.type = "checkbox"; checkbox.type = "checkbox";
checkbox.id = "cbRssDlRule" + row.rowId; checkbox.id = "cbRssDlRule" + row.rowId;
checkbox.checked = row.full_data.checked; checkbox.checked = row.full_data.checked;
@ -3101,8 +3084,8 @@ window.qBittorrent.DynamicTable ??= (() => {
this.columns.push(column); this.columns.push(column);
this.columns[name] = column; this.columns[name] = column;
this.hiddenTableHeader.appendChild(new Element("th")); this.hiddenTableHeader.append(document.createElement("th"));
this.fixedTableHeader.appendChild(new Element("th")); this.fixedTableHeader.append(document.createElement("th"));
}, },
selectRow: function(rowId) { selectRow: function(rowId) {
this.selectedRows.push(rowId); this.selectedRows.push(rowId);
@ -3128,7 +3111,7 @@ window.qBittorrent.DynamicTable ??= (() => {
this.columns["checked"].updateTd = function(td, row) { this.columns["checked"].updateTd = function(td, row) {
if ($("cbRssDlFeed" + row.rowId) === null) { if ($("cbRssDlFeed" + row.rowId) === null) {
const checkbox = new Element("input"); const checkbox = document.createElement("input");
checkbox.type = "checkbox"; checkbox.type = "checkbox";
checkbox.id = "cbRssDlFeed" + row.rowId; checkbox.id = "cbRssDlFeed" + row.rowId;
checkbox.checked = row.full_data.checked; checkbox.checked = row.full_data.checked;
@ -3187,8 +3170,8 @@ window.qBittorrent.DynamicTable ??= (() => {
this.columns.push(column); this.columns.push(column);
this.columns[name] = column; this.columns[name] = column;
this.hiddenTableHeader.appendChild(new Element("th")); this.hiddenTableHeader.append(document.createElement("th"));
this.fixedTableHeader.appendChild(new Element("th")); this.fixedTableHeader.append(document.createElement("th"));
}, },
selectRow: () => {} selectRow: () => {}
}); });
@ -3236,8 +3219,8 @@ window.qBittorrent.DynamicTable ??= (() => {
this.columns.push(column); this.columns.push(column);
this.columns[name] = column; this.columns[name] = column;
this.hiddenTableHeader.appendChild(new Element("th")); this.hiddenTableHeader.append(document.createElement("th"));
this.fixedTableHeader.appendChild(new Element("th")); this.fixedTableHeader.append(document.createElement("th"));
}, },
selectRow: () => {}, selectRow: () => {},
updateRow: function(tr, fullUpdate) { updateRow: function(tr, fullUpdate) {

25
src/webui/www/private/scripts/piecesbar.js
View file

@ -61,23 +61,20 @@ window.qBittorrent.PiecesBar ??= (() => {
Object.append(vals, parameters); Object.append(vals, parameters);
vals.height = Math.max(vals.height, 12); vals.height = Math.max(vals.height, 12);
const obj = new Element("div", { const obj = document.createElement("div");
"id": vals.id, obj.id = vals.id;
"class": "piecesbarWrapper", obj.className = "piecesbarWrapper";
"styles": { obj.style.border = `${vals.borderSize}px solid ${vals.borderColor}`;
"border": vals.borderSize.toString() + "px solid " + vals.borderColor, obj.style.height = `${vals.height}px`;
"height": vals.height.toString() + "px",
}
});
obj.vals = vals; obj.vals = vals;
obj.vals.pieces = [pieces, []].pick(); obj.vals.pieces = [pieces, []].pick();
obj.vals.canvas = new Element("canvas", { const canvas = document.createElement("canvas");
"id": vals.id + "_canvas", canvas.id = `${vals.id}_canvas`;
"class": "piecesbarCanvas", canvas.className = "piecesbarCanvas";
"width": (vals.width - (2 * vals.borderSize)).toString(), canvas.width = `${vals.width - (2 * vals.borderSize)}`;
"height": "1" // will stretch vertically to take up the height of the parent canvas.height = "1"; // will stretch vertically to take up the height of the parent
}); obj.vals.canvas = canvas;
obj.appendChild(obj.vals.canvas); obj.appendChild(obj.vals.canvas);
obj.setPieces = setPieces; obj.setPieces = setPieces;

87
src/webui/www/private/scripts/progressbar.js
View file

@ -53,52 +53,51 @@ window.qBittorrent.ProgressBar ??= (() => {
Object.append(vals, parameters); Object.append(vals, parameters);
if (vals.height < 12) if (vals.height < 12)
vals.height = 12; vals.height = 12;
const obj = new Element("div", {
"id": vals.id, const obj = document.createElement("div");
"class": "progressbar_wrapper", obj.id = vals.id;
"styles": { obj.className = "progressbar_wrapper";
"border": "1px solid var(--color-border-default)", obj.style.border = "1px solid var(--color-border-default)";
"box-sizing": "content-box", obj.style.boxSizing = "content-box";
"width": vals.width, obj.style.width = `${vals.width}px`;
"height": vals.height, obj.style.height = `${vals.height}px`;
"position": "relative", obj.style.position = "relative";
"margin": "0 auto" obj.style.margin = "0 auto";
}
});
obj.vals = vals; obj.vals = vals;
obj.vals.value = [value, 0].pick(); obj.vals.value = [value, 0].pick();
obj.vals.dark = new Element("div", {
"id": vals.id + "_dark", const dark = document.createElement("div");
"class": "progressbar_dark", dark.id = `${vals.id}_dark`;
"styles": { dark.className = "progressbar_dark";
"width": vals.width, dark.style.width = `${vals.width}px`;
"height": vals.height, dark.style.height = `${vals.height}px`;
"background": vals.darkbg, dark.style.background = vals.darkbg;
"box-sizing": "content-box", dark.style.boxSizing = "content-box";
"color": vals.darkfg, dark.style.color = vals.darkfg;
"position": "absolute", dark.style.position = "absolute";
"text-align": "center", dark.style.textAlign = "center";
"left": 0, dark.style.left = "0";
"top": 0, dark.style.top = "0";
"line-height": vals.height dark.style.lineHeight = `${vals.height}px`;
}
}); obj.vals.dark = dark;
obj.vals.light = new Element("div", {
"id": vals.id + "_light", const light = document.createElement("div");
"class": "progressbar_light", light.id = `${vals.id}_light`;
"styles": { light.className = "progressbar_light";
"width": vals.width, light.style.width = `${vals.width}px`;
"height": vals.height, light.style.height = `${vals.height}px`;
"background": vals.lightbg, light.style.background = vals.lightbg;
"box-sizing": "content-box", light.style.boxSizing = "content-box";
"color": vals.lightfg, light.style.color = vals.lightfg;
"position": "absolute", light.style.position = "absolute";
"text-align": "center", light.style.textAlign = "center";
"left": 0, light.style.left = "0";
"top": 0, light.style.top = "0";
"line-height": vals.height light.style.lineHeight = `${vals.height}px`;
}
}); obj.vals.light = light;
obj.appendChild(obj.vals.dark); obj.appendChild(obj.vals.dark);
obj.appendChild(obj.vals.light); obj.appendChild(obj.vals.light);
obj.getValue = ProgressBar_getValue; obj.getValue = ProgressBar_getValue;

6
src/webui/www/private/scripts/prop-files.js
View file

@ -131,7 +131,7 @@ window.qBittorrent.PropFiles ??= (() => {
}; };
const createDownloadCheckbox = (id, fileId, checked) => { const createDownloadCheckbox = (id, fileId, checked) => {
const checkbox = new Element("input"); const checkbox = document.createElement("input");
checkbox.type = "checkbox"; checkbox.type = "checkbox";
checkbox.id = "cbPrio" + id; checkbox.id = "cbPrio" + id;
checkbox.setAttribute("data-id", id); checkbox.setAttribute("data-id", id);
@ -623,13 +623,13 @@ window.qBittorrent.PropFiles ??= (() => {
// inject checkbox into table header // inject checkbox into table header
const tableHeaders = $$("#torrentFilesTableFixedHeaderDiv .dynamicTableHeader th"); const tableHeaders = $$("#torrentFilesTableFixedHeaderDiv .dynamicTableHeader th");
if (tableHeaders.length > 0) { if (tableHeaders.length > 0) {
const checkbox = new Element("input"); const checkbox = document.createElement("input");
checkbox.type = "checkbox"; checkbox.type = "checkbox";
checkbox.id = "tristate_cb"; checkbox.id = "tristate_cb";
checkbox.addEventListener("click", switchCheckboxState); checkbox.addEventListener("click", switchCheckboxState);
const checkboxTH = tableHeaders[0]; const checkboxTH = tableHeaders[0];
checkbox.injectInside(checkboxTH); checkboxTH.append(checkbox);
} }
// default sort by name column // default sort by name column

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

@ -175,20 +175,18 @@ window.qBittorrent.Search ??= (() => {
const createSearchTab = (searchId, pattern) => { const createSearchTab = (searchId, pattern) => {
const newTabId = `${searchTabIdPrefix}${searchId}`; const newTabId = `${searchTabIdPrefix}${searchId}`;
const tabElem = new Element("a", { const tabElem = document.createElement("a");
text: pattern, tabElem.textContent = pattern;
});
const closeTabElem = new Element("img", { const closeTabElem = document.createElement("img");
alt: "QBT_TR(Close tab)QBT_TR[CONTEXT=SearchWidget]", closeTabElem.alt = "QBT_TR(Close tab)QBT_TR[CONTEXT=SearchWidget]";
title: "QBT_TR(Close tab)QBT_TR[CONTEXT=SearchWidget]", closeTabElem.title = "QBT_TR(Close tab)QBT_TR[CONTEXT=SearchWidget]";
src: "images/application-exit.svg", closeTabElem.src = "images/application-exit.svg";
width: "10", closeTabElem.width = "10";
height: "10", closeTabElem.height = "10";
onclick: "qBittorrent.Search.closeSearchTab(this);", closeTabElem.addEventListener("click", function(e) { qBittorrent.Search.closeSearchTab(this); });
});
closeTabElem.inject(tabElem, "top");
tabElem.prepend(closeTabElem);
tabElem.appendChild(getStatusIconElement("QBT_TR(Searching...)QBT_TR[CONTEXT=SearchJobWidget]", "images/queued.svg")); tabElem.appendChild(getStatusIconElement("QBT_TR(Searching...)QBT_TR[CONTEXT=SearchJobWidget]", "images/queued.svg"));
const listItem = document.createElement("li"); const listItem = document.createElement("li");
@ -375,14 +373,14 @@ window.qBittorrent.Search ??= (() => {
}; };
const getStatusIconElement = (text, image) => { const getStatusIconElement = (text, image) => {
return new Element("img", { const statusIcon = document.createElement("img");
alt: text, statusIcon.alt = text;
title: text, statusIcon.title = text;
src: image, statusIcon.src = image;
class: "statusIcon", statusIcon.className = "statusIcon";
width: "12", statusIcon.width = "12";
height: "12", statusIcon.height = "12";
}); return statusIcon;
}; };
const updateStatusIconElement = (searchId, text, image) => { const updateStatusIconElement = (searchId, text, image) => {