Skip to content

Commit

Permalink
WebUI: Replace Mootools class list manipulation methods
Browse files Browse the repository at this point in the history 
All `addClass()`, `removeClass()` and `hasClass()` instances were changed to use `classList` equivalent:
https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

PR #21946.

---------

Co-authored-by: Chocobo1 <Chocobo1@users.noreply.github.com>
  • Loading branch information
@skomerko @Chocobo1
skomerko and Chocobo1 authored Dec 8, 2024
1 parent 9f0fa4c commit 7080f85
Show file tree
Hide file tree
Showing 15 changed files with 143 additions and 167 deletions.
110 changes: 55 additions & 55 deletions src/webui/www/private/scripts/client.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -185,7 +185,7 @@ window.addEventListener("DOMContentLoaded", () => {

window.addEventListener("resize", window.qBittorrent.Misc.createDebounceHandler(500, (e) => {
// only save sizes if the columns are visible
if (!$("mainColumn").hasClass("invisible"))
if (!$("mainColumn").classList.contains("invisible"))
saveColumnSizes();
}));

Expand Down Expand Up @@ -218,7 +218,7 @@ window.addEventListener("DOMContentLoaded", () => {
});

// start off hidden
$("searchTabColumn").addClass("invisible");
$("searchTabColumn").classList.add("invisible");
};

const buildRssTab = () => {
Expand All @@ -229,7 +229,7 @@ window.addEventListener("DOMContentLoaded", () => {
});

// start off hidden
$("rssTabColumn").addClass("invisible");
$("rssTabColumn").classList.add("invisible");
};

const buildLogTab = () => {
Expand All @@ -240,7 +240,7 @@ window.addEventListener("DOMContentLoaded", () => {
});

// start off hidden
$("logTabColumn").addClass("invisible");
$("logTabColumn").classList.add("invisible");
};

buildTransfersTab();
Expand Down Expand Up @@ -340,22 +340,22 @@ window.addEventListener("DOMContentLoaded", () => {
let showTopToolbar = LocalPreferences.get("show_top_toolbar", "true") === "true";
if (!showTopToolbar) {
$("showTopToolbarLink").firstElementChild.style.opacity = "0";
$("mochaToolbar").addClass("invisible");
$("mochaToolbar").classList.add("invisible");
}

// Show Status Bar is enabled by default
let showStatusBar = LocalPreferences.get("show_status_bar", "true") === "true";
if (!showStatusBar) {
$("showStatusBarLink").firstElementChild.style.opacity = "0";
$("desktopFooterWrapper").addClass("invisible");
$("desktopFooterWrapper").classList.add("invisible");
}

// Show Filters Sidebar is enabled by default
let showFiltersSidebar = LocalPreferences.get("show_filters_sidebar", "true") === "true";
if (!showFiltersSidebar) {
$("showFiltersSidebarLink").firstElementChild.style.opacity = "0";
$("filtersColumn").addClass("invisible");
$("filtersColumn_handle").addClass("invisible");
$("filtersColumn").classList.add("invisible");
$("filtersColumn_handle").classList.add("invisible");
}

let speedInTitle = LocalPreferences.get("speed_in_browser_title_bar") === "true";
Expand Down Expand Up @@ -1054,20 +1054,20 @@ window.addEventListener("DOMContentLoaded", () => {
torrentsTable.columns["priority"].force_hide = !queueing_enabled;
torrentsTable.updateColumn("priority");
if (queueing_enabled) {
$("topQueuePosItem").removeClass("invisible");
$("increaseQueuePosItem").removeClass("invisible");
$("decreaseQueuePosItem").removeClass("invisible");
$("bottomQueuePosItem").removeClass("invisible");
$("queueingButtons").removeClass("invisible");
$("queueingMenuItems").removeClass("invisible");
$("topQueuePosItem").classList.remove("invisible");
$("increaseQueuePosItem").classList.remove("invisible");
$("decreaseQueuePosItem").classList.remove("invisible");
$("bottomQueuePosItem").classList.remove("invisible");
$("queueingButtons").classList.remove("invisible");
$("queueingMenuItems").classList.remove("invisible");
}
else {
$("topQueuePosItem").addClass("invisible");
$("increaseQueuePosItem").addClass("invisible");
$("decreaseQueuePosItem").addClass("invisible");
$("bottomQueuePosItem").addClass("invisible");
$("queueingButtons").addClass("invisible");
$("queueingMenuItems").addClass("invisible");
$("topQueuePosItem").classList.add("invisible");
$("increaseQueuePosItem").classList.add("invisible");
$("decreaseQueuePosItem").classList.add("invisible");
$("bottomQueuePosItem").classList.add("invisible");
$("queueingButtons").classList.add("invisible");
$("queueingMenuItems").classList.add("invisible");
}
}

Expand Down Expand Up @@ -1123,11 +1123,11 @@ window.addEventListener("DOMContentLoaded", () => {
LocalPreferences.set("show_top_toolbar", showTopToolbar.toString());
if (showTopToolbar) {
$("showTopToolbarLink").firstElementChild.style.opacity = "1";
$("mochaToolbar").removeClass("invisible");
$("mochaToolbar").classList.remove("invisible");
}
else {
$("showTopToolbarLink").firstElementChild.style.opacity = "0";
$("mochaToolbar").addClass("invisible");
$("mochaToolbar").classList.add("invisible");
}
MochaUI.Desktop.setDesktopSize();
});
Expand All @@ -1137,11 +1137,11 @@ window.addEventListener("DOMContentLoaded", () => {
LocalPreferences.set("show_status_bar", showStatusBar.toString());
if (showStatusBar) {
$("showStatusBarLink").firstElementChild.style.opacity = "1";
$("desktopFooterWrapper").removeClass("invisible");
$("desktopFooterWrapper").classList.remove("invisible");
}
else {
$("showStatusBarLink").firstElementChild.style.opacity = "0";
$("desktopFooterWrapper").addClass("invisible");
$("desktopFooterWrapper").classList.add("invisible");
}
MochaUI.Desktop.setDesktopSize();
});
Expand Down Expand Up @@ -1175,13 +1175,13 @@ window.addEventListener("DOMContentLoaded", () => {
LocalPreferences.set("show_filters_sidebar", showFiltersSidebar.toString());
if (showFiltersSidebar) {
$("showFiltersSidebarLink").firstElementChild.style.opacity = "1";
$("filtersColumn").removeClass("invisible");
$("filtersColumn_handle").removeClass("invisible");
$("filtersColumn").classList.remove("invisible");
$("filtersColumn_handle").classList.remove("invisible");
}
else {
$("showFiltersSidebarLink").firstElementChild.style.opacity = "0";
$("filtersColumn").addClass("invisible");
$("filtersColumn_handle").addClass("invisible");
$("filtersColumn").classList.add("invisible");
$("filtersColumn_handle").classList.add("invisible");
}
MochaUI.Desktop.setDesktopSize();
});
Expand Down Expand Up @@ -1217,49 +1217,49 @@ window.addEventListener("DOMContentLoaded", () => {
const updateTabDisplay = () => {
if (window.qBittorrent.Client.isShowRssReader()) {
$("showRssReaderLink").firstElementChild.style.opacity = "1";
$("mainWindowTabs").removeClass("invisible");
$("rssTabLink").removeClass("invisible");
$("mainWindowTabs").classList.remove("invisible");
$("rssTabLink").classList.remove("invisible");
if (!MochaUI.Panels.instances.RssPanel)
addRssPanel();
}
else {
$("showRssReaderLink").firstElementChild.style.opacity = "0";
$("rssTabLink").addClass("invisible");
if ($("rssTabLink").hasClass("selected"))
$("rssTabLink").classList.add("invisible");
if ($("rssTabLink").classList.contains("selected"))
$("transfersTabLink").click();
}

if (window.qBittorrent.Client.isShowSearchEngine()) {
$("showSearchEngineLink").firstElementChild.style.opacity = "1";
$("mainWindowTabs").removeClass("invisible");
$("searchTabLink").removeClass("invisible");
$("mainWindowTabs").classList.remove("invisible");
$("searchTabLink").classList.remove("invisible");
if (!MochaUI.Panels.instances.SearchPanel)
addSearchPanel();
}
else {
$("showSearchEngineLink").firstElementChild.style.opacity = "0";
$("searchTabLink").addClass("invisible");
if ($("searchTabLink").hasClass("selected"))
$("searchTabLink").classList.add("invisible");
if ($("searchTabLink").classList.contains("selected"))
$("transfersTabLink").click();
}

if (window.qBittorrent.Client.isShowLogViewer()) {
$("showLogViewerLink").firstElementChild.style.opacity = "1";
$("mainWindowTabs").removeClass("invisible");
$("logTabLink").removeClass("invisible");
$("mainWindowTabs").classList.remove("invisible");
$("logTabLink").classList.remove("invisible");
if (!MochaUI.Panels.instances.LogPanel)
addLogPanel();
}
else {
$("showLogViewerLink").firstElementChild.style.opacity = "0";
$("logTabLink").addClass("invisible");
if ($("logTabLink").hasClass("selected"))
$("logTabLink").classList.add("invisible");
if ($("logTabLink").classList.contains("selected"))
$("transfersTabLink").click();
}

// display no tabs
if (!window.qBittorrent.Client.isShowRssReader() && !window.qBittorrent.Client.isShowSearchEngine() && !window.qBittorrent.Client.isShowLogViewer())
$("mainWindowTabs").addClass("invisible");
$("mainWindowTabs").classList.add("invisible");
};

$("StatisticsLink").addEventListener("click", () => { StatisticsLinkFN(); });
Expand All @@ -1269,11 +1269,11 @@ window.addEventListener("DOMContentLoaded", () => {
const showTransfersTab = () => {
const showFiltersSidebar = LocalPreferences.get("show_filters_sidebar", "true") === "true";
if (showFiltersSidebar) {
$("filtersColumn").removeClass("invisible");
$("filtersColumn_handle").removeClass("invisible");
$("filtersColumn").classList.remove("invisible");
$("filtersColumn_handle").classList.remove("invisible");
}
$("mainColumn").removeClass("invisible");
$("torrentsFilterToolbar").removeClass("invisible");
$("mainColumn").classList.remove("invisible");
$("torrentsFilterToolbar").classList.remove("invisible");

customSyncMainDataInterval = null;
syncData(100);
Expand All @@ -1286,10 +1286,10 @@ window.addEventListener("DOMContentLoaded", () => {
};

const hideTransfersTab = () => {
$("filtersColumn").addClass("invisible");
$("filtersColumn_handle").addClass("invisible");
$("mainColumn").addClass("invisible");
$("torrentsFilterToolbar").addClass("invisible");
$("filtersColumn").classList.add("invisible");
$("filtersColumn_handle").classList.add("invisible");
$("mainColumn").classList.add("invisible");
$("torrentsFilterToolbar").classList.add("invisible");
MochaUI.Desktop.resizePanels();
};

Expand All @@ -1312,7 +1312,7 @@ window.addEventListener("DOMContentLoaded", () => {
searchTabInitialized = true;
}

$("searchTabColumn").removeClass("invisible");
$("searchTabColumn").classList.remove("invisible");
customSyncMainDataInterval = 30000;
hideTransfersTab();
hideRssTab();
Expand All @@ -1323,7 +1323,7 @@ window.addEventListener("DOMContentLoaded", () => {
})();

const hideSearchTab = () => {
$("searchTabColumn").addClass("invisible");
$("searchTabColumn").classList.add("invisible");
MochaUI.Desktop.resizePanels();
};

Expand All @@ -1349,7 +1349,7 @@ window.addEventListener("DOMContentLoaded", () => {
window.qBittorrent.Rss.load();
}

$("rssTabColumn").removeClass("invisible");
$("rssTabColumn").classList.remove("invisible");
customSyncMainDataInterval = 30000;
hideTransfersTab();
hideSearchTab();
Expand All @@ -1360,7 +1360,7 @@ window.addEventListener("DOMContentLoaded", () => {
})();

const hideRssTab = () => {
$("rssTabColumn").addClass("invisible");
$("rssTabColumn").classList.add("invisible");
window.qBittorrent.Rss && window.qBittorrent.Rss.unload();
MochaUI.Desktop.resizePanels();
};
Expand All @@ -1387,7 +1387,7 @@ window.addEventListener("DOMContentLoaded", () => {
window.qBittorrent.Log.load();
}

$("logTabColumn").removeClass("invisible");
$("logTabColumn").classList.remove("invisible");
customSyncMainDataInterval = 30000;
hideTransfersTab();
hideSearchTab();
Expand All @@ -1398,7 +1398,7 @@ window.addEventListener("DOMContentLoaded", () => {
})();

const hideLogTab = () => {
$("logTabColumn").addClass("invisible");
$("logTabColumn").classList.add("invisible");
MochaUI.Desktop.resizePanels();
window.qBittorrent.Log && window.qBittorrent.Log.unload();
};
Expand Down
25 changes: 11 additions & 14 deletions src/webui/www/private/scripts/contextmenu.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@ window.qBittorrent.ContextMenu ??= (() => {

const scrollableMenuMaxHeight = document.documentElement.clientHeight * 0.75;

if (this.menu.hasClass("scrollableMenu"))
if (this.menu.classList.contains("scrollableMenu"))
this.menu.style.maxHeight = `${scrollableMenuMaxHeight}px`;

// draw the menu off-screen to know the menu dimensions
Expand All @@ -119,7 +119,7 @@ window.qBittorrent.ContextMenu ??= (() => {
const uls = this.menu.getElementsByTagName("ul");
for (let i = 0; i < uls.length; ++i) {
const ul = uls[i];
if (ul.hasClass("scrollableMenu"))
if (ul.classList.contains("scrollableMenu"))
ul.style.maxHeight = `${scrollableMenuMaxHeight}px`;
const rectParent = ul.parentNode.getBoundingClientRect();
const xPosOrigin = rectParent.left;
Expand Down Expand Up @@ -257,13 +257,13 @@ window.qBittorrent.ContextMenu ??= (() => {

// hide an item
hideItem(item) {
this.menu.getElement("a[href$=" + item + "]").parentNode.addClass("invisible");
this.menu.getElement("a[href$=" + item + "]").parentNode.classList.add("invisible");
return this;
}

// show an item
showItem(item) {
this.menu.getElement("a[href$=" + item + "]").parentNode.removeClass("invisible");
this.menu.getElement("a[href$=" + item + "]").parentNode.classList.remove("invisible");
return this;
}

Expand Down Expand Up @@ -405,7 +405,7 @@ window.qBittorrent.ContextMenu ??= (() => {

if (all_are_downloaded) {
this.hideItem("downloadLimit");
this.menu.getElement("a[href$=uploadLimit]").parentNode.addClass("separator");
this.menu.getElement("a[href$=uploadLimit]").parentNode.classList.add("separator");
this.hideItem("sequentialDownload");
this.hideItem("firstLastPiecePrio");
this.showItem("superSeeding");
Expand All @@ -415,10 +415,7 @@ window.qBittorrent.ContextMenu ??= (() => {
const show_seq_dl = (all_are_seq_dl || !there_are_seq_dl);
const show_f_l_piece_prio = (all_are_f_l_piece_prio || !there_are_f_l_piece_prio);

if (!show_seq_dl && show_f_l_piece_prio)
this.menu.getElement("a[href$=firstLastPiecePrio]").parentNode.addClass("separator");
else
this.menu.getElement("a[href$=firstLastPiecePrio]").parentNode.removeClass("separator");
this.menu.getElement("a[href$=firstLastPiecePrio]").parentNode.classList.toggle("separator", (!show_seq_dl && show_f_l_piece_prio));

if (show_seq_dl)
this.showItem("sequentialDownload");
Expand All @@ -434,7 +431,7 @@ window.qBittorrent.ContextMenu ??= (() => {
this.setItemChecked("firstLastPiecePrio", all_are_f_l_piece_prio);

this.showItem("downloadLimit");
this.menu.getElement("a[href$=uploadLimit]").parentNode.removeClass("separator");
this.menu.getElement("a[href$=uploadLimit]").parentNode.classList.remove("separator");
this.hideItem("superSeeding");
}

Expand Down Expand Up @@ -525,7 +522,7 @@ window.qBittorrent.ContextMenu ??= (() => {
const setCategoryItem = document.createElement("li");
setCategoryItem.appendChild(anchor);
if (first) {
setCategoryItem.addClass("separator");
setCategoryItem.classList.add("separator");
first = false;
}

Expand Down Expand Up @@ -583,7 +580,7 @@ window.qBittorrent.ContextMenu ??= (() => {
const setTagItem = document.createElement("li");
setTagItem.appendChild(anchor);
if (i === 0)
setTagItem.addClass("separator");
setTagItem.classList.add("separator");

contextTagList.appendChild(setTagItem);
}
Expand Down Expand Up @@ -661,11 +658,11 @@ window.qBittorrent.ContextMenu ??= (() => {
class RssFeedContextMenu extends ContextMenu {
updateMenuItems() {
const selectedRows = window.qBittorrent.Rss.rssFeedTable.selectedRowsIds();
this.menu.getElement("a[href$=newSubscription]").parentNode.addClass("separator");
this.menu.getElement("a[href$=newSubscription]").parentNode.classList.add("separator");
switch (selectedRows.length) {
case 0:
// remove separator on top of newSubscription entry to avoid double line
this.menu.getElement("a[href$=newSubscription]").parentNode.removeClass("separator");
this.menu.getElement("a[href$=newSubscription]").parentNode.classList.remove("separator");
// menu when nothing selected
this.hideItem("update");
this.hideItem("markRead");
Expand Down
Loading

0 comments on commit 7080f85

Please sign in to comment.