WebUI: use native function for selecting elements

PR #22179.

src/webui/www/private/rename_files.html

@@ -44,7 +44,7 @@
             bulkRenameFilesTable.setup("bulkRenameFilesTableDiv", "bulkRenameFilesTableFixedHeaderDiv", bulkRenameFilesContextMenu);
 
             // Inject checkbox into the first column of the table header
-            const tableHeaders = $$("#bulkRenameFilesTableFixedHeaderDiv .dynamicTableHeader th");
+            const tableHeaders = document.querySelectorAll("#bulkRenameFilesTableFixedHeaderDiv .dynamicTableHeader th");
             if (tableHeaders.length > 0) {
                 const checkboxHeader = document.createElement("input");
                 checkboxHeader.type = "checkbox";

src/webui/www/private/scripts/contextmenu.js

@@ -67,7 +67,9 @@ window.qBittorrent.ContextMenu ??= (() => {
 
             // option diffs menu
             this.menu = $(this.options.menu);
-            this.targets = $$(this.options.targets);
+            this.targets = (this.options.targets.length > 0)
+                ? Array.from(document.querySelectorAll(this.options.targets))
+                : [];
 
             // fx
             this.fx = new Fx.Tween(this.menu, {
@@ -197,9 +199,8 @@ window.qBittorrent.ContextMenu ??= (() => {
         // get things started
         startListener() {
             /* all elements */
-            this.targets.each((el) => {
+            for (const el of this.targets)
                 this.setupEventListeners(el);
-            }, this);
 
             /* menu items */
             this.menu.addEventListener("click", (e) => {

src/webui/www/private/scripts/dynamicTable.js

@@ -666,7 +666,7 @@ window.qBittorrent.DynamicTable ??= (() => {
 
         setSortedColumnIcon: function(newColumn, oldColumn, isReverse) {
             const getCol = (headerDivId, colName) => {
-                const colElem = $$(`#${headerDivId} .column_${colName}`);
+                const colElem = document.querySelectorAll(`#${headerDivId} .column_${colName}`);
                 if (colElem.length === 1)
                     return colElem[0];
                 return null;
@@ -2140,7 +2140,7 @@ window.qBittorrent.DynamicTable ??= (() => {
          */
         toggleGlobalCheckbox: function() {
             const checkbox = $("rootMultiRename_cb");
-            const checkboxes = $$("input.RenamingCB");
+            const checkboxes = document.querySelectorAll("input.RenamingCB");
 
             for (let i = 0; i < checkboxes.length; ++i) {
                 const node = this.getNode(i);
@@ -2180,22 +2180,10 @@ window.qBittorrent.DynamicTable ??= (() => {
 
         updateGlobalCheckbox: () => {
             const checkbox = $("rootMultiRename_cb");
-            const checkboxes = $$("input.RenamingCB");
+            const checkboxes = document.querySelectorAll("input.RenamingCB");
-            const isAllChecked = () => {
+            const isAllChecked = Array.prototype.every.call(checkboxes, (checkbox => checkbox.checked));
-                for (let i = 0; i < checkboxes.length; ++i) {
+            const isAllUnchecked = (() => Array.prototype.every.call(checkboxes, (checkbox => !checkbox.checked)));
-                    if (!checkboxes[i].checked)
+            if (isAllChecked) {
-                        return false;
-                }
-                return true;
-            };
-            const isAllUnchecked = () => {
-                for (let i = 0; i < checkboxes.length; ++i) {
-                    if (checkboxes[i].checked)
-                        return false;
-                }
-                return true;
-            };
-            if (isAllChecked()) {
                 checkbox.state = "checked";
                 checkbox.indeterminate = false;
                 checkbox.checked = true;

src/webui/www/private/scripts/mocha-init.js

@@ -1313,10 +1313,10 @@ const initializeWindows = () => {
     });
 
     // Deactivate menu header links
-    $$("a.returnFalse").each((el) => {
+    for (const el of document.querySelectorAll("a.returnFalse")) {
         el.addEventListener("click", (e) => {
             e.preventDefault();
             e.stopPropagation();
         });
-    });
+    }
 };

src/webui/www/private/scripts/prop-files.js

@@ -283,23 +283,9 @@ window.qBittorrent.PropFiles ??= (() => {
         checkbox.indeterminate = true;
     };
 
-    const isAllCheckboxesChecked = () => {
+    const isAllCheckboxesChecked = () => Array.prototype.every.call(document.querySelectorAll("input.DownloadedCB"), (checkbox => checkbox.checked));
-        const checkboxes = $$("input.DownloadedCB");
-        for (let i = 0; i < checkboxes.length; ++i) {
-            if (!checkboxes[i].checked)
-                return false;
-        }
-        return true;
-    };
 
-    const isAllCheckboxesUnchecked = () => {
+    const isAllCheckboxesUnchecked = () => Array.prototype.every.call(document.querySelectorAll("input.DownloadedCB"), (checkbox => !checkbox.checked));
-        const checkboxes = $$("input.DownloadedCB");
-        for (let i = 0; i < checkboxes.length; ++i) {
-            if (checkboxes[i].checked)
-                return false;
-        }
-        return true;
-    };
 
     const setFilePriority = (ids, fileIds, priority) => {
         if (current_hash === "")
@@ -630,7 +616,7 @@ window.qBittorrent.PropFiles ??= (() => {
 
     torrentFilesTable.setup("torrentFilesTableDiv", "torrentFilesTableFixedHeaderDiv", torrentFilesContextMenu);
     // inject checkbox into table header
-    const tableHeaders = $$("#torrentFilesTableFixedHeaderDiv .dynamicTableHeader th");
+    const tableHeaders = document.querySelectorAll("#torrentFilesTableFixedHeaderDiv .dynamicTableHeader th");
     if (tableHeaders.length > 0) {
         const checkbox = document.createElement("input");
         checkbox.type = "checkbox";

src/webui/www/private/views/aboutToolbar.html

@@ -17,32 +17,32 @@
         MochaUI.initializeTabs("aboutTabs");
 
         $("aboutAboutLink").addEventListener("click", () => {
-            $$(".aboutTabContent").forEach(tab => { tab.classList.add("invisible"); });
+            Array.prototype.forEach.call(document.querySelectorAll(".aboutTabContent"), (tab => tab.classList.add("invisible")));
             $("aboutAboutContent").classList.remove("invisible");
         });
 
         $("aboutAuthorLink").addEventListener("click", () => {
-            $$(".aboutTabContent").forEach(tab => { tab.classList.add("invisible"); });
+            Array.prototype.forEach.call(document.querySelectorAll(".aboutTabContent"), (tab => tab.classList.add("invisible")));
             $("aboutAuthorContent").classList.remove("invisible");
         });
 
         $("aboutSpecialThanksLink").addEventListener("click", () => {
-            $$(".aboutTabContent").forEach(tab => { tab.classList.add("invisible"); });
+            Array.prototype.forEach.call(document.querySelectorAll(".aboutTabContent"), (tab => tab.classList.add("invisible")));
             $("aboutSpecialThanksContent").classList.remove("invisible");
         });
 
         $("aboutTranslatorsLink").addEventListener("click", () => {
-            $$(".aboutTabContent").forEach(tab => { tab.classList.add("invisible"); });
+            Array.prototype.forEach.call(document.querySelectorAll(".aboutTabContent"), (tab => tab.classList.add("invisible")));
             $("aboutTranslatorsContent").classList.remove("invisible");
         });
 
         $("aboutLicenseLink").addEventListener("click", () => {
-            $$(".aboutTabContent").forEach(tab => { tab.classList.add("invisible"); });
+            Array.prototype.forEach.call(document.querySelectorAll(".aboutTabContent"), (tab => tab.classList.add("invisible")));
             $("aboutLicenseContent").classList.remove("invisible");
         });
 
         $("aboutSoftwareUsedLink").addEventListener("click", () => {
-            $$(".aboutTabContent").forEach(tab => { tab.classList.add("invisible"); });
+            Array.prototype.forEach.call(document.querySelectorAll(".aboutTabContent"), (tab => tab.classList.add("invisible")));
             $("aboutSoftwareUsedContent").classList.remove("invisible");
         });
     })();

src/webui/www/private/views/preferencesToolbar.html

@@ -37,35 +37,35 @@
         MochaUI.initializeTabs("preferencesTabs");
 
         $("PrefBehaviorLink").addEventListener("click", (e) => {
-            $$(".PrefTab").forEach(tab => { tab.classList.add("invisible"); });
+            Array.prototype.forEach.call(document.querySelectorAll(".PrefTab"), (tab => tab.classList.add("invisible")));
             $("BehaviorTab").classList.remove("invisible");
         });
         $("PrefDownloadsLink").addEventListener("click", (e) => {
-            $$(".PrefTab").forEach(tab => { tab.classList.add("invisible"); });
+            Array.prototype.forEach.call(document.querySelectorAll(".PrefTab"), (tab => tab.classList.add("invisible")));
             $("DownloadsTab").classList.remove("invisible");
         });
         $("PrefConnectionLink").addEventListener("click", (e) => {
-            $$(".PrefTab").forEach(tab => { tab.classList.add("invisible"); });
+            Array.prototype.forEach.call(document.querySelectorAll(".PrefTab"), (tab => tab.classList.add("invisible")));
             $("ConnectionTab").classList.remove("invisible");
         });
         $("PrefSpeedLink").addEventListener("click", (e) => {
-            $$(".PrefTab").forEach(tab => { tab.classList.add("invisible"); });
+            Array.prototype.forEach.call(document.querySelectorAll(".PrefTab"), (tab => tab.classList.add("invisible")));
             $("SpeedTab").classList.remove("invisible");
         });
         $("PrefBittorrentLink").addEventListener("click", (e) => {
-            $$(".PrefTab").forEach(tab => { tab.classList.add("invisible"); });
+            Array.prototype.forEach.call(document.querySelectorAll(".PrefTab"), (tab => tab.classList.add("invisible")));
             $("BittorrentTab").classList.remove("invisible");
         });
         $("PrefRSSLink").addEventListener("click", (e) => {
-            $$(".PrefTab").forEach(tab => { tab.classList.add("invisible"); });
+            Array.prototype.forEach.call(document.querySelectorAll(".PrefTab"), (tab => tab.classList.add("invisible")));
             $("RSSTab").classList.remove("invisible");
         });
         $("PrefWebUILink").addEventListener("click", (e) => {
-            $$(".PrefTab").forEach(tab => { tab.classList.add("invisible"); });
+            Array.prototype.forEach.call(document.querySelectorAll(".PrefTab"), (tab => tab.classList.add("invisible")));
             $("WebUITab").classList.remove("invisible");
         });
         $("PrefAdvancedLink").addEventListener("click", (e) => {
-            $$(".PrefTab").forEach(tab => { tab.classList.add("invisible"); });
+            Array.prototype.forEach.call(document.querySelectorAll(".PrefTab"), (tab => tab.classList.add("invisible")));
             $("AdvancedTab").classList.remove("invisible");
         });
     })();