mirrors/CyberChef
1
0
Fork 0
mirror of https://github.com/gchq/CyberChef.git synced 2025-05-08 15:25:01 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

[#181] handle the correct resetting of layouts in any maximised pane situation, i.e. window resizing while panels are maximised etc. Prevent mobile keyboard popup window resize events to trigger layout resetting when panes are maximised, use JS to calculate the innerHeight available for mobile devices as they are of variable / unreliable / inconsistent heights

Browse source
This commit is contained in:
Robin Scholtes 2023-05-09 14:56:44 +12:00
parent f80284cb36
commit ee9ea051d1
10 changed files with 151 additions and 126 deletions
Download patch file Download diff file Expand all files Collapse all files

39
src/web/waiters/WindowWaiter.mjs
View file

@ -15,28 +15,61 @@ class WindowWaiter {
* WindowWaiter constructor.
*
* @param {App} app - The main view object for CyberChef.
* @param {Manager} manager - The CyberChef event manager.
*/
constructor(app) {
constructor(app, manager) {
this.app = app;
this.manager = manager;
}
/**
* Handler for window resize events.
*
* Resets adjustable component sizes after 200ms (so that continuous resizing doesn't cause
* continuous resetting).
*/
windowResize() {
if ( window.innerWidth >= this.app.breakpoint ) {
this.app.setDesktopUI(false);
this.onResizeToDesktop();
} else {
this.app.setMobileUI();
this.onResizeToMobile();
}
// #output can be maximised on all screen sizes, so if it was open while resizing,
// it can be kept maximised until minimised manually
if ( document.getElementById("output").classList.contains("maximised-pane") ) {
this.manager.controls.setPaneMaximised( "output", true );
}
debounce(this.app.adjustComponentSizes, 200, "windowResize", this.app, [])();
}
onResizeToDesktop(){
this.app.setDesktopUI(false);
// if a window is resized past breakpoint while #recipe or #input is maximised,
// the maximised pane is set to its default ( non-maximised ) state
["recipe", "input"].forEach( paneId => this.manager.controls.setPaneMaximised(paneId, false));
// to prevent #recipe from keeping the height set in divideAvailableSpace
document.getElementById("recipe").style.height = "100%";
}
onResizeToMobile(){
this.app.setMobileUI();
// when mobile devices' keyboards pop up, it triggers a window resize event. Here
// we keep the maximised panes open until the minimise button is clicked / tapped
["recipe", "input", "output"]
.map( paneId => document.getElementById(paneId))
.filter( pane => pane.classList.contains("maximised-pane"))
.forEach( pane => this.manager.controls.setPaneMaximised(pane.id, true));
}
/**
* Handler for window blur events.
* Saves the current time so that we can calculate how long the window was unfocused for when