github/qBittorrent
1
0
Fork 0
mirror of https://github.com/qbittorrent/qBittorrent synced 2025-07-16 02:03:07 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

WebUI: implement debounce behavior for resize events

Browse source
This commit is contained in:
Chocobo1 2024-08-09 17:48:03 +08:00
parent 0c580c3174
commit 29379232aa
No known key found for this signature in database
GPG key ID: 210D9C873253A68C
6 changed files with 43 additions and 31 deletions
Download patch file Download diff file Expand all files Collapse all files

22
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]
}); });
@ -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");
@ -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);
} })
}); });
} }
}); });

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

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

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

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

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]