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

Merge pull request #21215 from Chocobo1/webui_event_param

Browse source 
WebUI: improve event handlers
This commit is contained in:
Chocobo1 2024-08-19 16:11:38 +08:00 • committed by GitHub
commit 9c370bf391
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 67 additions and 65 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -165,11 +165,11 @@ window.addEventListener("DOMContentLoaded", () => {
LocalPreferences.set("properties_height_rel", properties_height_rel); LocalPreferences.set("properties_height_rel", properties_height_rel);
}; };
window.addEventListener("resize", () => { window.addEventListener("resize", window.qBittorrent.Misc.createDebounceHandler(500, (e) => {
// only save sizes if the columns are visible // only save sizes if the columns are visible
if (!$("mainColumn").hasClass("invisible")) if (!$("mainColumn").hasClass("invisible"))
saveColumnSizes.delay(200); // Resizing might takes some time. saveColumnSizes();
}); }));
/* MochaUI.Desktop = new MochaUI.Desktop(); /* MochaUI.Desktop = new MochaUI.Desktop();
MochaUI.Desktop.desktop.style.background = "#fff"; MochaUI.Desktop.desktop.style.background = "#fff";
@ -181,7 +181,9 @@ window.addEventListener("DOMContentLoaded", () => {
new MochaUI.Column({ new MochaUI.Column({
id: "filtersColumn", id: "filtersColumn",
placement: "left", placement: "left",
onResize: saveColumnSizes, onResize: window.qBittorrent.Misc.createDebounceHandler(500, (e) => {
saveColumnSizes();
}),
width: filt_w, width: filt_w,
resizeLimit: [1, 300] resizeLimit: [1, 300]
}); });
@ -1059,8 +1061,8 @@ window.addEventListener("DOMContentLoaded", () => {
}).send(); }).send();
}); });
$("DlInfos").addEventListener("click", globalDownloadLimitFN); $("DlInfos").addEventListener("click", () => { globalDownloadLimitFN(); });
$("UpInfos").addEventListener("click", globalUploadLimitFN); $("UpInfos").addEventListener("click", () => { globalUploadLimitFN(); });
$("showTopToolbarLink").addEventListener("click", (e) => { $("showTopToolbarLink").addEventListener("click", (e) => {
showTopToolbar = !showTopToolbar; showTopToolbar = !showTopToolbar;
@ -1206,7 +1208,7 @@ window.addEventListener("DOMContentLoaded", () => {
$("mainWindowTabs").addClass("invisible"); $("mainWindowTabs").addClass("invisible");
}; };
$("StatisticsLink").addEventListener("click", StatisticsLinkFN); $("StatisticsLink").addEventListener("click", () => { StatisticsLinkFN(); });
// main window tabs // main window tabs
@ -1449,7 +1451,9 @@ window.addEventListener("DOMContentLoaded", () => {
updateMainData(); updateMainData();
}, },
column: "mainColumn", column: "mainColumn",
onResize: saveColumnSizes, onResize: window.qBittorrent.Misc.createDebounceHandler(500, (e) => {
saveColumnSizes();
}),
height: null height: null
}); });
let prop_h = LocalPreferences.get("properties_height_rel"); let prop_h = LocalPreferences.get("properties_height_rel");
@ -1567,10 +1571,10 @@ window.addEventListener("DOMContentLoaded", () => {
document.getElementById("torrentsFilterToolbar").addEventListener("change", (e) => { torrentsTable.updateTable(); }); document.getElementById("torrentsFilterToolbar").addEventListener("change", (e) => { torrentsTable.updateTable(); });
$("transfersTabLink").addEventListener("click", showTransfersTab); $("transfersTabLink").addEventListener("click", () => { showTransfersTab(); });
$("searchTabLink").addEventListener("click", showSearchTab); $("searchTabLink").addEventListener("click", () => { showSearchTab(); });
$("rssTabLink").addEventListener("click", showRssTab); $("rssTabLink").addEventListener("click", () => { showRssTab(); });
$("logTabLink").addEventListener("click", showLogTab); $("logTabLink").addEventListener("click", () => { showLogTab(); });
updateTabDisplay(); updateTabDisplay();
const registerDragAndDrop = () => { const registerDragAndDrop = () => {
@ -1614,9 +1618,9 @@ window.addEventListener("DOMContentLoaded", () => {
paddingHorizontal: 0, paddingHorizontal: 0,
width: loadWindowWidth(id, 500), width: loadWindowWidth(id, 500),
height: loadWindowHeight(id, 460), height: loadWindowHeight(id, 460),
onResize: () => { onResize: window.qBittorrent.Misc.createDebounceHandler(500, (e) => {
saveWindowSize(id); saveWindowSize(id);
}, }),
onContentLoaded: () => { onContentLoaded: () => {
const fileInput = $(`${id}_iframe`).contentDocument.getElementById("fileselect"); const fileInput = $(`${id}_iframe`).contentDocument.getElementById("fileselect");
fileInput.files = droppedFiles; fileInput.files = droppedFiles;
@ -1658,9 +1662,9 @@ window.addEventListener("DOMContentLoaded", () => {
paddingHorizontal: 0, paddingHorizontal: 0,
width: loadWindowWidth(id, 500), width: loadWindowWidth(id, 500),
height: loadWindowHeight(id, 600), height: loadWindowHeight(id, 600),
onResize: () => { onResize: window.qBittorrent.Misc.createDebounceHandler(500, (e) => {
saveWindowSize(id); saveWindowSize(id);
} })
}); });
} }
}); });

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

@ -156,7 +156,7 @@ window.qBittorrent.ContextMenu ??= (() => {
this.hide(); this.hide();
this.touchStartAt = performance.now(); this.touchStartAt = performance.now();
this.touchStartEvent = e; this.touchStartEvent = e;
}); }, { passive: true });
elem.addEventListener("touchend", (e) => { elem.addEventListener("touchend", (e) => {
const now = performance.now(); const now = performance.now();
const touchStartAt = this.touchStartAt; const touchStartAt = this.touchStartAt;
@ -168,7 +168,7 @@ window.qBittorrent.ContextMenu ??= (() => {
const isTargetUnchanged = (Math.abs(e.event.pageX - touchStartEvent.event.pageX) <= 10) && (Math.abs(e.event.pageY - touchStartEvent.event.pageY) <= 10); const isTargetUnchanged = (Math.abs(e.event.pageX - touchStartEvent.event.pageX) <= 10) && (Math.abs(e.event.pageY - touchStartEvent.event.pageY) <= 10);
if (((now - touchStartAt) >= this.options.touchTimer) && isTargetUnchanged) if (((now - touchStartAt) >= this.options.touchTimer) && isTargetUnchanged)
this.triggerMenu(touchStartEvent, elem); this.triggerMenu(touchStartEvent, elem);
}); }, { passive: true });
}, },
addTarget: function(t) { addTarget: function(t) {
@ -440,7 +440,7 @@ window.qBittorrent.ContextMenu ??= (() => {
const createMenuItem = (text, imgURL, clickFn) => { const createMenuItem = (text, imgURL, clickFn) => {
const anchor = document.createElement("a"); const anchor = document.createElement("a");
anchor.textContent = text; anchor.textContent = text;
anchor.addEventListener("click", clickFn); anchor.addEventListener("click", () => { clickFn(); });
const img = document.createElement("img"); const img = document.createElement("img");
img.src = imgURL; img.src = imgURL;
@ -495,7 +495,7 @@ window.qBittorrent.ContextMenu ??= (() => {
const createMenuItem = (text, imgURL, clickFn) => { const createMenuItem = (text, imgURL, clickFn) => {
const anchor = document.createElement("a"); const anchor = document.createElement("a");
anchor.textContent = text; anchor.textContent = text;
anchor.addEventListener("click", clickFn); anchor.addEventListener("click", () => { clickFn(); });
const img = document.createElement("img"); const img = document.createElement("img");
img.src = imgURL; img.src = imgURL;

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

@ -95,8 +95,9 @@ window.qBittorrent.DynamicTable ??= (() => {
const tableDiv = $(this.dynamicTableDivId); const tableDiv = $(this.dynamicTableDivId);
const tableFixedHeaderDiv = $(this.dynamicTableFixedHeaderDivId); const tableFixedHeaderDiv = $(this.dynamicTableFixedHeaderDivId);
const tableElement = tableFixedHeaderDiv.querySelector("table");
tableDiv.addEventListener("scroll", () => { tableDiv.addEventListener("scroll", () => {
tableFixedHeaderDiv.getElements("table")[0].style.left = `${-tableDiv.scrollLeft}px`; tableElement.style.left = `${-tableDiv.scrollLeft}px`;
}); });
// if the table exists within a panel // if the table exists within a panel
@ -118,14 +119,9 @@ window.qBittorrent.DynamicTable ??= (() => {
} }
}; };
this.resizeDebounceTimer = -1; const resizeDebouncer = window.qBittorrent.Misc.createDebounceHandler(100, (entries) => {
const resizeDebouncer = (entries) => { resizeFn(entries);
clearTimeout(this.resizeDebounceTimer); });
this.resizeDebounceTimer = setTimeout(() => {
resizeFn(entries);
this.resizeDebounceTimer = -1;
}, 100);
};
const resizeObserver = new ResizeObserver(resizeDebouncer); const resizeObserver = new ResizeObserver(resizeDebouncer);
resizeObserver.observe(parentPanel, { box: "border-box" }); resizeObserver.observe(parentPanel, { box: "border-box" });
@ -278,7 +274,7 @@ window.qBittorrent.DynamicTable ??= (() => {
const th = ths[i]; const th = ths[i];
th.addEventListener("mousemove", mouseMoveFn); th.addEventListener("mousemove", mouseMoveFn);
th.addEventListener("mouseout", mouseOutFn); th.addEventListener("mouseout", mouseOutFn);
th.addEventListener("touchend", onTouch); th.addEventListener("touchend", onTouch, { passive: true });
th.makeResizable({ th.makeResizable({
modifiers: { modifiers: {
x: "", x: "",
@ -766,7 +762,7 @@ window.qBittorrent.DynamicTable ??= (() => {
this._this.deselectAll(); this._this.deselectAll();
this._this.selectRow(this.rowId); this._this.selectRow(this.rowId);
} }
}); }, { passive: true });
tr.addEventListener("keydown", function(event) { tr.addEventListener("keydown", function(event) {
switch (event.key) { switch (event.key) {
case "up": case "up":
@ -2764,13 +2760,6 @@ window.qBittorrent.DynamicTable ??= (() => {
this.hiddenTableHeader.appendChild(new Element("th")); this.hiddenTableHeader.appendChild(new Element("th"));
this.fixedTableHeader.appendChild(new Element("th")); this.fixedTableHeader.appendChild(new Element("th"));
},
setupCommonEvents: function() {
const scrollFn = function() {
$(this.dynamicTableFixedHeaderDivId).getElements("table")[0].style.left = -$(this.dynamicTableDivId).scrollLeft + "px";
}.bind(this);
$(this.dynamicTableDivId).addEventListener("scroll", scrollFn);
} }
}); });
@ -2859,13 +2848,6 @@ window.qBittorrent.DynamicTable ??= (() => {
this.hiddenTableHeader.appendChild(new Element("th")); this.hiddenTableHeader.appendChild(new Element("th"));
this.fixedTableHeader.appendChild(new Element("th")); this.fixedTableHeader.appendChild(new Element("th"));
},
setupCommonEvents: function() {
const scrollFn = function() {
$(this.dynamicTableFixedHeaderDivId).getElements("table")[0].style.left = -$(this.dynamicTableDivId).scrollLeft + "px";
}.bind(this);
$(this.dynamicTableDivId).addEventListener("scroll", scrollFn);
} }
}); });

13
src/webui/www/private/scripts/misc.js
View file

@ -32,6 +32,7 @@ window.qBittorrent ??= {};
window.qBittorrent.Misc ??= (() => { window.qBittorrent.Misc ??= (() => {
const exports = () => { const exports = () => {
return { return {
createDebounceHandler: createDebounceHandler,
friendlyUnit: friendlyUnit, friendlyUnit: friendlyUnit,
friendlyDuration: friendlyDuration, friendlyDuration: friendlyDuration,
friendlyPercentage: friendlyPercentage, friendlyPercentage: friendlyPercentage,
@ -50,6 +51,18 @@ window.qBittorrent.Misc ??= (() => {
}; };
}; };
const createDebounceHandler = (delay, func) => {
let timer = -1;
return (...params) => {
clearTimeout(timer);
timer = setTimeout(() => {
func(...params);
timer = -1;
}, delay);
};
};
/* /*
* JS counterpart of the function in src/misc.cpp * JS counterpart of the function in src/misc.cpp
*/ */

20
src/webui/www/private/scripts/mocha-init.js
View file

@ -142,9 +142,9 @@ const initializeWindows = function() {
paddingHorizontal: 0, paddingHorizontal: 0,
width: loadWindowWidth(id, 500), width: loadWindowWidth(id, 500),
height: loadWindowHeight(id, 600), height: loadWindowHeight(id, 600),
onResize: function() { onResize: window.qBittorrent.Misc.createDebounceHandler(500, (e) => {
saveWindowSize(id); saveWindowSize(id);
} })
}); });
updateMainData(); updateMainData();
}; };
@ -171,9 +171,9 @@ const initializeWindows = function() {
paddingHorizontal: 0, paddingHorizontal: 0,
width: loadWindowWidth(id, 700), width: loadWindowWidth(id, 700),
height: loadWindowHeight(id, 600), height: loadWindowHeight(id, 600),
onResize: function() { onResize: window.qBittorrent.Misc.createDebounceHandler(500, (e) => {
saveWindowSize(id); saveWindowSize(id);
} })
}); });
}); });
@ -195,9 +195,9 @@ const initializeWindows = function() {
paddingHorizontal: 0, paddingHorizontal: 0,
width: loadWindowWidth(id, 500), width: loadWindowWidth(id, 500),
height: loadWindowHeight(id, 460), height: loadWindowHeight(id, 460),
onResize: function() { onResize: window.qBittorrent.Misc.createDebounceHandler(500, (e) => {
saveWindowSize(id); saveWindowSize(id);
} })
}); });
updateMainData(); updateMainData();
}); });
@ -367,9 +367,9 @@ const initializeWindows = function() {
padding: 10, padding: 10,
width: loadWindowWidth(id, 275), width: loadWindowWidth(id, 275),
height: loadWindowHeight(id, 370), height: loadWindowHeight(id, 370),
onResize: function() { onResize: window.qBittorrent.Misc.createDebounceHandler(500, (e) => {
saveWindowSize(id); saveWindowSize(id);
} })
}); });
}; };
@ -1191,9 +1191,9 @@ const initializeWindows = function() {
padding: 10, padding: 10,
width: loadWindowWidth(id, 550), width: loadWindowWidth(id, 550),
height: loadWindowHeight(id, 360), height: loadWindowHeight(id, 360),
onResize: function() { onResize: window.qBittorrent.Misc.createDebounceHandler(500, (e) => {
saveWindowSize(id); saveWindowSize(id);
} })
}); });
}); });

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

@ -502,9 +502,9 @@ window.qBittorrent.Search ??= (() => {
paddingHorizontal: 0, paddingHorizontal: 0,
width: loadWindowWidth(id, 600), width: loadWindowWidth(id, 600),
height: loadWindowHeight(id, 360), height: loadWindowHeight(id, 360),
onResize: function() { onResize: window.qBittorrent.Misc.createDebounceHandler(500, (e) => {
saveWindowSize(id); saveWindowSize(id);
}, }),
onBeforeBuild: function() { onBeforeBuild: function() {
loadSearchPlugins(); loadSearchPlugins();
}, },
@ -753,14 +753,15 @@ window.qBittorrent.Search ??= (() => {
}; };
const setupSearchTableEvents = function(enable) { const setupSearchTableEvents = function(enable) {
const clickHandler = (e) => { downloadSearchTorrent(); };
if (enable) { if (enable) {
$$(".searchTableRow").each((target) => { $$(".searchTableRow").each((target) => {
target.addEventListener("dblclick", downloadSearchTorrent, false); target.addEventListener("dblclick", clickHandler);
}); });
} }
else { else {
$$(".searchTableRow").each((target) => { $$(".searchTableRow").each((target) => {
target.removeEventListener("dblclick", downloadSearchTorrent, false); target.removeEventListener("dblclick", clickHandler);
}); });
} }
}; };

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

@ -837,9 +837,9 @@
maximizable: false, maximizable: false,
width: loadWindowWidth(id, 800), width: loadWindowWidth(id, 800),
height: loadWindowHeight(id, 650), height: loadWindowHeight(id, 650),
onResize: () => { onResize: window.qBittorrent.Misc.createDebounceHandler(500, (e) => {
saveWindowSize(id); saveWindowSize(id);
}, }),
resizeLimit: { resizeLimit: {
"x": [800, 2500], "x": [800, 2500],
"y": [500, 2000] "y": [500, 2000]

10
src/webui/www/private/views/searchplugins.html
View file

@ -182,16 +182,18 @@
}; };
const setupSearchPluginTableEvents = function(enable) { const setupSearchPluginTableEvents = function(enable) {
const clickHandler = (e) => { enablePlugin(); };
const menuHandler = (e) => { updateSearchPluginsTableContextMenuOffset(); };
if (enable) { if (enable) {
$$(".searchPluginsTableRow").each((target) => { $$(".searchPluginsTableRow").each((target) => {
target.addEventListener("dblclick", enablePlugin, false); target.addEventListener("dblclick", clickHandler);
target.addEventListener("contextmenu", updateSearchPluginsTableContextMenuOffset, true); target.addEventListener("contextmenu", menuHandler, true);
}); });
} }
else { else {
$$(".searchPluginsTableRow").each((target) => { $$(".searchPluginsTableRow").each((target) => {
target.removeEventListener("dblclick", enablePlugin, false); target.removeEventListener("dblclick", clickHandler);
target.removeEventListener("contextmenu", updateSearchPluginsTableContextMenuOffset, true); target.removeEventListener("contextmenu", menuHandler, true);
}); });
} }
}; };