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] 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

18
src/web/App.mjs
View file

@ -298,7 +298,7 @@ class App {
* @param {boolean} [minimise=false] - Set this flag if attempting to minimise frames to 0 width
*/
initialiseUI() {
if ( window.innerWidth < this.breakpoint ){
if (window.innerWidth < this.breakpoint) {
this.setMobileUI();
} else {
this.setDesktopUI(false);
@ -308,7 +308,7 @@ class App {
/**
* Set desktop splitters
*/
setDesktopSplitter(minimise){
setDesktopSplitter(minimise) {
if (this.columnSplitter) this.columnSplitter.destroy();
if (this.ioSplitter) this.ioSplitter.destroy();
@ -864,16 +864,16 @@ class App {
* @param {boolean} isVisible
*
*/
updateVisibility( elm, isVisible ){
isVisible ? elm.classList.remove("hidden") : elm.classList.add("hidden");
}h
updateVisibility(elm, isVisible) {
return isVisible ? elm.classList.remove("hidden") : elm.classList.add("hidden");
}
/**
* Set desktop UI ( on init and on window resize events )
*
* @param {boolean} minimise
*/
setDesktopUI(minimise){
setDesktopUI(minimise) {
$("[data-toggle=tooltip]").tooltip("enable");
this.setDesktopSplitter(minimise);
this.adjustComponentSizes();
@ -884,7 +884,7 @@ class App {
/**
* Set mobile UI ( on init and on window resize events )
*/
setMobileUI(){
setMobileUI() {
$("[data-toggle=tooltip]").tooltip("disable");
this.setMobileSplitter();
this.assignAvailableHeight();
@ -901,7 +901,7 @@ class App {
* Be mindful to update these fixed numbers accordingly in the stylesheets
* ( themes/_structure ) if you make changes to those elements' height.
*/
assignAvailableHeight(){
assignAvailableHeight() {
const bannerHeight = 40;
const controlsHeight = 50;
const operationsHeight = 80;
@ -909,7 +909,7 @@ class App {
const remainingSpace = window.innerHeight - (bannerHeight+controlsHeight+operationsHeight - 1); // - 1 is accounting for a border
// equally divide among recipe, input and output
["recipe", "input", "output"].forEach(( div ) => {
["recipe", "input", "output"].forEach((div) => {
document.getElementById(div).style.height = `${remainingSpace/3}px`;
});

6
src/web/HTMLOperation.mjs
View file

@ -64,17 +64,17 @@ class HTMLOperation {
if (removeIcon) {
html += "<i class='material-icons remove-icon op-icon'>delete</i>";
} else if (!removeIcon && window.innerWidth < this.app.breakpoint ){
} else if (!removeIcon && window.innerWidth < this.app.breakpoint) {
html += "<i class='material-icons check-icon op-icon'>check</i>";
}
const favourites = JSON.parse(localStorage.favourites);
const isFavourite = favourites.includes(this.name);
if ( window.innerWidth < this.app.breakpoint ){
if (window.innerWidth < this.app.breakpoint) {
html += `<i title="${this.name}" class='material-icons icon-add-favourite star-icon op-icon ${isFavourite ? "fav-op" : ""}'>
${isFavourite ? "star" : "star_outline"}
</i>`
</i>`;
}
html += "</li>";

6
src/web/Manager.mjs
View file

@ -142,9 +142,9 @@ class Manager {
document.getElementById("support").addEventListener("click", this.controls.supportButtonClick.bind(this.controls));
this.addMultiEventListeners("#save-texts textarea", "keyup paste", this.controls.saveTextChange, this.controls);
// A note for the Maximise Controls listeners below: click events via addDynamicListener don't properly bubble and the hit box to maximise is unacceptably tiny, hence this solution
document.getElementById("maximise-recipe").addEventListener("click", this.controls.onMaximiseButtonClick.bind(this.controls))
document.getElementById("maximise-input").addEventListener("click", this.controls.onMaximiseButtonClick.bind(this.controls))
document.getElementById("maximise-output").addEventListener("click", this.controls.onMaximiseButtonClick.bind(this.controls))
document.getElementById("maximise-recipe").addEventListener("click", this.controls.onMaximiseButtonClick.bind(this.controls));
document.getElementById("maximise-input").addEventListener("click", this.controls.onMaximiseButtonClick.bind(this.controls));
document.getElementById("maximise-output").addEventListener("click", this.controls.onMaximiseButtonClick.bind(this.controls));
// Operations
this.addMultiEventListener("#search", "keyup paste search click", this.ops.searchOperations, this.ops);

7
src/web/TODO.md
View file

@ -4,17 +4,14 @@
---
#### Mobile UI ( on real device ):
- shannon entropy thingies
- maybe a bit annoying that the fav cat opens whenever you add a new fav via icon-fav-click on mobile
- backspace on fs view should close max view. Keep making the same mistake and navigating away when for instance recipe is expanded and double click the window to fs > resolve. Reset layout
- remove tabs on window resizing large to small?
- drag and drop from op to rec on desktop only working once
- backspace on fs view should close max view. Keep making the same mistake and navigating away when for instance recipe
is expanded and double click the window to fs > resolve. Reset layout
### JS:
- `core/Recipe.mjs`, `core/lib/Magic.js` return imports to original
### Misc:
- Gruntfile revert dev config
- Update README instructions per Mobile UI
- delete this file when done :)

4
src/web/utils/statusBar.mjs
View file

@ -292,7 +292,7 @@ class StatusBarPanel {
this.dom.querySelectorAll(".cm-status-bar-select-scroll").forEach(
el => {
el.style.maxHeight = window.innerWidth >= 768 ? (viewHeight - 50) + "px" : '250px';
el.style.maxHeight = window.innerWidth >= 768 ? (viewHeight - 50) + "px" : "250px";
}
);
}
@ -476,7 +476,7 @@ function makePanel(opts) {
sbPanel.updateSelection(update.state, update.selectionSet);
sbPanel.updateTiming();
sbPanel.monitorHTMLOutput();
if ( update.geometryChanged) {
if (update.geometryChanged) {
sbPanel.updateSizing(update.view);
}
if (update.docChanged) {

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