mirrors/qBittorrent
1
0
Fork 0
mirror of https://github.com/qbittorrent/qBittorrent.git synced 2024-11-21 16:55:46 +03:00
Code Issues Projects Releases Packages Wiki Activity

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
Show stats 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);
};
window.addEventListener("resize", () => {
window.addEventListener("resize", window.qBittorrent.Misc.createDebounceHandler(500, (e) => {
// only save sizes if the columns are visible
if (!$("mainColumn").hasClass("invisible"))
saveColumnSizes.delay(200); // Resizing might takes some time.
});
saveColumnSizes();
}));
/* MochaUI.Desktop = new MochaUI.Desktop();
MochaUI.Desktop.desktop.style.background = "#fff";
@ -181,7 +181,9 @@ window.addEventListener("DOMContentLoaded", () => {
new MochaUI.Column({
id: "filtersColumn",
placement: "left",
onResize: saveColumnSizes,
onResize: window.qBittorrent.Misc.createDebounceHandler(500, (e) => {
saveColumnSizes();
}),
width: filt_w,
resizeLimit: [1, 300]
});
@ -1449,7 +1451,9 @@ window.addEventListener("DOMContentLoaded", () => {
updateMainData();
},
column: "mainColumn",
onResize: saveColumnSizes,
onResize: window.qBittorrent.Misc.createDebounceHandler(500, (e) => {
saveColumnSizes();
}),
height: null
});
let prop_h = LocalPreferences.get("properties_height_rel");
@ -1614,9 +1618,9 @@ window.addEventListener("DOMContentLoaded", () => {
paddingHorizontal: 0,
width: loadWindowWidth(id, 500),
height: loadWindowHeight(id, 460),
onResize: () => {
onResize: window.qBittorrent.Misc.createDebounceHandler(500, (e) => {
saveWindowSize(id);
},
}),
onContentLoaded: () => {
const fileInput = $(`${id}_iframe`).contentDocument.getElementById("fileselect");
fileInput.files = droppedFiles;
@ -1658,9 +1662,9 @@ window.addEventListener("DOMContentLoaded", () => {
paddingHorizontal: 0,
width: loadWindowWidth(id, 500),
height: loadWindowHeight(id, 600),
onResize: () => {
onResize: window.qBittorrent.Misc.createDebounceHandler(500, (e) => {
saveWindowSize(id);
}
})
});
}
});

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

@ -119,14 +119,9 @@ window.qBittorrent.DynamicTable ??= (() => {
}
};
this.resizeDebounceTimer = -1;
const resizeDebouncer = (entries) => {
clearTimeout(this.resizeDebounceTimer);
this.resizeDebounceTimer = setTimeout(() => {
resizeFn(entries);
this.resizeDebounceTimer = -1;
}, 100);
};
const resizeDebouncer = window.qBittorrent.Misc.createDebounceHandler(100, (entries) => {
resizeFn(entries);
});
const resizeObserver = new ResizeObserver(resizeDebouncer);
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 ??= (() => {
const exports = () => {
return {
createDebounceHandler: createDebounceHandler,
friendlyUnit: friendlyUnit,
friendlyDuration: friendlyDuration,
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
*/

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

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

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

@ -502,9 +502,9 @@ window.qBittorrent.Search ??= (() => {
paddingHorizontal: 0,
width: loadWindowWidth(id, 600),
height: loadWindowHeight(id, 360),
onResize: function() {
onResize: window.qBittorrent.Misc.createDebounceHandler(500, (e) => {
saveWindowSize(id);
},
}),
onBeforeBuild: function() {
loadSearchPlugins();
},

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

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