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] update README, run / fix lint

Browse source
This commit is contained in:
Robin Scholtes 2023-05-10 21:53:29 +12:00
parent 997f26e4f8
commit a7a76ec7ef
10 changed files with 72 additions and 70 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -429,8 +429,8 @@ ${navigator.userAgent}
*/
onMaximiseButtonClick(e) {
// the target pane is not already maximised because it does not have the 'maximised-pane' class..
const maximise = !document.getElementById(e.currentTarget.id.replace('maximise-', '')).classList.contains("maximised-pane");
this.setPaneMaximised(e.currentTarget.id.replace('maximise-', ''), maximise);
const maximise = !document.getElementById(e.currentTarget.id.replace("maximise-", "")).classList.contains("maximised-pane");
this.setPaneMaximised(e.currentTarget.id.replace("maximise-", ""), maximise);
}
/**
@ -440,17 +440,17 @@ ${navigator.userAgent}
* @param {string} paneId
* @param {boolean} maximise
*/
setPaneMaximised( paneId, maximise ){
const pane = document.getElementById( paneId );
const btn = document.getElementById( `maximise-${paneId}` );
setPaneMaximised(paneId, maximise) {
const pane = document.getElementById(paneId);
const btn = document.getElementById(`maximise-${paneId}`);
this.setMaximiseControlButton(btn, maximise);
this.setPaneMaximisedClasses(pane, maximise);
if ( maximise ) {
if (maximise) {
pane.style.height = `${window.innerHeight - 40}px`;
} else {
if ( window.innerWidth < this.app.breakpoint ){
if (window.innerWidth < this.app.breakpoint) {
this.app.assignAvailableHeight();
}
}
@ -463,7 +463,7 @@ ${navigator.userAgent}
* @param {boolean} maximise
*/
setPaneMaximisedClasses(pane, maximise) {
if ( maximise ) {
if (maximise) {
pane.classList.add("top-zindex");
pane.classList.add("maximised-pane");
} else {
@ -480,8 +480,8 @@ ${navigator.userAgent}
* @param {HTMLElement} btn
* @param {boolean} maximise
*/
setMaximiseControlButton(btn, maximise ) {
if ( maximise ) {
setMaximiseControlButton(btn, maximise) {
if (maximise) {
btn.querySelector("i").innerHTML = "fullscreen_exit";
btn.setAttribute("data-original-title", "Reset pane");
} else {

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

@ -39,13 +39,13 @@ class OperationsWaiter {
searchOperations(e) {
let ops, selected;
if (e.type === "keyup"){
if (e.type === "keyup") {
const searchResults = document.getElementById("search-results");
this.openOperationsDropdown();
if ( e.target.value.length !== 0 ){
this.app.updateVisibility(searchResults, true );
if (e.target.value.length !== 0) {
this.app.updateVisibility(searchResults, true);
}
}
@ -60,9 +60,9 @@ class OperationsWaiter {
}
}
if (e.type === "click" && !e.target.value.length){
if (e.type === "click" && !e.target.value.length) {
this.openOperationsDropdown();
} else if (e.keyCode === 27 ) { // Escape
} else if (e.keyCode === 27) { // Escape
this.closeOperationsDropdown();
} else if (e.keyCode === 40) { // Down
e.preventDefault();
@ -184,7 +184,7 @@ class OperationsWaiter {
* @param {event} e
*/
opListCreate(e) {
if ( window.innerWidth < this.app.breakpoint ){
if (window.innerWidth < this.app.breakpoint) {
this.mobileOpListCreate(e);
} else {
this.desktopOpListCreate(e);
@ -197,7 +197,7 @@ class OperationsWaiter {
*
* @param {event} e
*/
desktopOpListCreate(e){
desktopOpListCreate(e) {
this.manager.recipe.createSortableSeedList(e.target);
this.enableOpPopover(e.target);
}
@ -208,7 +208,7 @@ class OperationsWaiter {
*
* @param {event} e
*/
mobileOpListCreate(e){
mobileOpListCreate(e) {
this.manager.recipe.createSortableSeedList(e.target, false);
this.disableOpsListPopovers();
}
@ -324,7 +324,7 @@ class OperationsWaiter {
/**
* Open operations dropdown
*/
openOperationsDropdown(){
openOperationsDropdown() {
// the 'close' ( dropdown ) icon in Operations component mobile UI
const closeOperationsDropdown = document.getElementById("close-operations-dropdown");
const categories = document.getElementById("categories");
@ -338,12 +338,12 @@ class OperationsWaiter {
* Hide any operation lists ( #categories or #search-results ) and the close-operations-dropdown
* icon itself, clear any search input
*/
closeOperationsDropdown(){
closeOperationsDropdown() {
const search = document.getElementById("search");
// if any input remains in #search, clear it
if (search.value.length) {
search.value = '';
search.value = "";
}
this.app.updateVisibility(document.getElementById("categories"), false);
@ -380,7 +380,7 @@ class OperationsWaiter {
*
* @param {Event} e
*/
onIconFavouriteClick(e){
onIconFavouriteClick(e) {
this.app.addFavourite(e.target.getAttribute("title"));
}
}

28
src/web/waiters/RecipeWaiter.mjs
View file

@ -595,14 +595,14 @@ class RecipeWaiter {
* This hides all the checkmark icons of previously added ( selected )
* operations to the recipe list
*/
clearAllSelectedClasses(){
clearAllSelectedClasses() {
const list = document.querySelectorAll(".operation.selected");
// check if any operations are selected at all to prevent errors
if (list.length){
if (list.length) {
list.forEach((item) => {
item.classList.remove("selected");
})
});
}
}
@ -613,15 +613,15 @@ class RecipeWaiter {
*
* @param {string} opDataName the data-name of the target operation
*/
addSelectedClass(opDataName){
addSelectedClass(opDataName) {
const list = document.querySelectorAll(".operation");
const item = Array.from(list).filter((item) => item.getAttribute("data-name") === opDataName );
const item = Array.from(list).filter((item) => item.getAttribute("data-name") === opDataName);
// when an item is listed in favourites, there are 2 of
// them and both need the 'selected' class ( checkmark )
item.forEach((op) => {
op.classList.add("selected");
})
});
}
/**
@ -636,24 +636,22 @@ class RecipeWaiter {
* code ), I'd recommend to refactor this at one point, but that would mean a huge code
* overhaul for another time / issue.
*/
updateSelectedOperations(){
let recipeList, operations;
recipeList = document.querySelectorAll("#rec-list > li");
operations = document.querySelectorAll(".operation");
updateSelectedOperations() {
const recipeList = document.querySelectorAll("#rec-list > li");
const operations = document.querySelectorAll(".operation");
this.clearAllSelectedClasses();
if ( recipeList.length ){
if (recipeList.length) {
recipeList.forEach((ingredient) => {
const ingredientName = ingredient.getAttribute("data-name");
operations.forEach((operation) => {
if ( ingredientName === operation.getAttribute("data-name")){
if (ingredientName === operation.getAttribute("data-name")) {
this.addSelectedClass(ingredientName);
}
})
})
});
});
}
}
}

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

@ -30,7 +30,7 @@ class WindowWaiter {
* continuous resetting).
*/
windowResize() {
if ( window.innerWidth >= this.app.breakpoint ) {
if (window.innerWidth >= this.app.breakpoint) {
this.onResizeToDesktop();
} else {
this.onResizeToMobile();
@ -38,35 +38,41 @@ class WindowWaiter {
// #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 );
if (document.getElementById("output").classList.contains("maximised-pane")) {
this.manager.controls.setPaneMaximised("output", true);
}
debounce(this.app.adjustComponentSizes, 200, "windowResize", this.app, [])();
}
onResizeToDesktop(){
/**
* Set desktop UI and close #recipe / #input maximised panes if there were any.
* Correct the height of #recipe
*/
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));
["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(){
/**
* Set mobile UI and close any maximised panes if there were any
*/
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));
.map(paneId => document.getElementById(paneId))
.filter(pane => pane.classList.contains("maximised-pane"))
.forEach(pane => this.manager.controls.setPaneMaximised(pane.id, true));
}