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

[#181] add maximiser icons to recipe, input and output, and handle maximising of targets accordingly. Desktop view remains as normal, where only output can be maximised

Browse source
This commit is contained in:
Robin Scholtes 2023-05-02 16:58:20 +12:00
parent 093a3c4b77
commit 4c2c934cd4
13 changed files with 164 additions and 51 deletions
Download patch file Download diff file Expand all files Collapse all files

86
src/web/waiters/ControlsWaiter.mjs
View file

@ -418,6 +418,92 @@ ${navigator.userAgent}
bakeButton.classList.add("btn-success");
}
}
/**
* Handle the maximising and resetting to default state of
* panels.
*
* On mobile UI, #recipe, #input and #output can be maximised,
* on desktop UI it's available only for #output
*
* @param {Event} e
*/
handlePaneMaximising(e){
// the event target btn can be one of ( currently ) 3 'maximiser' buttons
const btn = e.target.classList.contains("btn-maximise") ? e.target : e.target.parentNode;
// find the parent ( target ) pane to be maximised that belongs to the btn
const pane = this.resolveMaximiserParentPane( btn.id )
if (btn.getAttribute("data-original-title") === "Maximise pane") {
this.maximisePane(btn,pane);
} else {
this.resetPane(btn, pane);
}
}
/**
* Get the parent pane of the 'maximise' button / icon that was
* clicked through the buttons' ID
*
* @param {string} id
*/
resolveMaximiserParentPane(id){
switch(id) {
case "maximise-recipe":
return document.getElementById("recipe");
case "maximise-input":
return document.getElementById("input");
case "maximise-output":
return document.getElementById("output");
}
}
/**
* Set the pane from default state to Maximised
*
* @param {HTMLElement} btn
* @param {HTMLElement} pane
*/
maximisePane(btn, pane){
this.togglePane(pane,true);
this.toggleIcon(btn, true);
}
/**
* Reset the pane from Maximised state to default
*
* @param {HTMLElement} btn
* @param {HTMLElement} pane
*/
resetPane(btn, pane) {
this.togglePane(pane, false);
this.toggleIcon(btn, false);
}
/**
* Toggle the pane to or from maximised size,
* based on the 'isMaximised' flag
*
* @param {HTMLElement} pane
* @param {boolean} isMaximised
*/
togglePane(pane, isMaximised) {
isMaximised ? pane.classList.add("top-zindex") : pane.classList.remove("top-zindex");
isMaximised ? pane.classList.add("maximised-pane") : pane.classList.remove("maximised-pane");
}
/**
* Toggle the 'maximise' icon and attribute text based on
* the 'isMaximised' flag
*
* @param {HTMLElement} btn
* @param {boolean} isMaximised
*/
toggleIcon(btn, isMaximised ) {
btn.querySelector("i").innerHTML = isMaximised ? "fullscreen_exit" : "fullscreen";
$(btn).attr("data-original-title", isMaximised ? "Reset pane" : "Maximise pane");
}
}
export default ControlsWaiter;

12
src/web/waiters/OperationsWaiter.mjs
View file

@ -45,7 +45,7 @@ class OperationsWaiter {
this.openOperationsDropdown();
if ( e.target.value.length !== 0 ){
this.app.setVisibility(searchResults, true );
this.app.updateVisibility(searchResults, true );
}
}
@ -329,8 +329,8 @@ class OperationsWaiter {
const closeOperationsDropdown = document.getElementById("close-operations-dropdown");
const categories = document.getElementById("categories");
this.app.setVisibility(categories, true);
this.app.setVisibility(closeOperationsDropdown, true);
this.app.updateVisibility(categories, true);
this.app.updateVisibility(closeOperationsDropdown, true);
}
@ -346,9 +346,9 @@ class OperationsWaiter {
search.value = '';
}
this.app.setVisibility(document.getElementById( "categories"), false );
this.app.setVisibility(document.getElementById( "search-results"), false );
this.app.setVisibility(document.getElementById("close-operations-dropdown"), false );
this.app.updateVisibility(document.getElementById( "categories"), false );
this.app.updateVisibility(document.getElementById( "search-results"), false );
this.app.updateVisibility(document.getElementById("close-operations-dropdown"), false );
}
/**

41
src/web/waiters/OutputWaiter.mjs
View file

@ -1404,26 +1404,29 @@ class OutputWaiter {
* Handler for maximise output click events.
* Resizes the output frame to be as large as possible, or restores it to its original size.
*/
maximiseOutputClick(e) {
const el = e.target.id === "maximise-output" ? e.target : e.target.parentNode;
// maximiseOutputClick(e) {
// const el = e.target.id === "maximise-output" ? e.target : e.target.parentNode;
//
// if (el.getAttribute("data-original-title").indexOf("Maximise") === 0) {
// document.body.classList.add("output-maximised");
// this.app.initialiseSplitter(true);
// this.app.columnSplitter.collapse(0);
// this.app.columnSplitter.collapse(1);
// this.app.ioSplitter.collapse(0);
//
// $(el).attr("data-original-title", "Restore output pane");
// el.querySelector("i").innerHTML = "fullscreen_exit";
// } else {
// document.body.classList.remove("output-maximised");
// $(el).attr("data-original-title", "Maximise output pane");
// el.querySelector("i").innerHTML = "fullscreen";
// this.app.initialiseSplitter(false);
// // if ( window.innerWidth >= this.app.breakpoint ){
// // this.app.resetLayout();
// // }
// }
// }
if (el.getAttribute("data-original-title").indexOf("Maximise") === 0) {
document.body.classList.add("output-maximised");
this.app.initialiseSplitter(true);
this.app.columnSplitter.collapse(0);
this.app.columnSplitter.collapse(1);
this.app.ioSplitter.collapse(0);
$(el).attr("data-original-title", "Restore output pane");
el.querySelector("i").innerHTML = "fullscreen_exit";
} else {
document.body.classList.remove("output-maximised");
$(el).attr("data-original-title", "Maximise output pane");
el.querySelector("i").innerHTML = "fullscreen";
this.app.initialiseSplitter(false);
this.app.resetLayout();
}
}
/**
* Handler for find tab button clicked

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

@ -27,7 +27,6 @@ class WindowWaiter {
* continuous resetting).
*/
windowResize() {
// @TODO: maybe a debounce is desirable although generally people won't be resizing like crazy.. I think
if ( window.innerWidth >= this.app.breakpoint ) {
this.app.setDesktopUI(false);
} else {