Skip to content

Commit

Permalink
[gchq#181] update README, run / fix lint
Browse files Browse the repository at this point in the history
  • Loading branch information
valdelaseras committed May 10, 2023
1 parent 997f26e commit a7a76ec
Show file tree
Hide file tree
Showing 10 changed files with 72 additions and 70 deletions.
3 changes: 2 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ There are four main areas in CyberChef:

1. The **input** box in the top right, where you can paste, type or drag the text or file you want to operate on.
2. The **output** box in the bottom right, where the outcome of your processing will be displayed.
3. The **operations** list on the far left, where you can find all the operations that CyberChef is capable of in categorised lists, or by searching.
3. The **operations** list on the far left ( or in the dropdown at the top on mobile ), where you can find all the operations that CyberChef is capable of in categorised lists, or by searching.
4. The **recipe** area in the middle, where you can drag the operations that you want to use and specify arguments and options.

You can use as many operations as you like in simple or complex ways. Some examples are as follows:
Expand All @@ -49,6 +49,7 @@ You can use as many operations as you like in simple or complex ways. Some examp
- Drag and drop
- Operations can be dragged in and out of the recipe list, or reorganised.
- Files up to 2GB can be dragged over the input box to load them directly into the browser.
- On mobile devices, double-click the operations to add them to the recipe list.
- Auto Bake
- Whenever you modify the input or the recipe, CyberChef will automatically "bake" for you and produce the output immediately.
- This can be turned off and operated manually if it is affecting performance (if the input is very large, for instance).
Expand Down
18 changes: 9 additions & 9 deletions src/web/App.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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();

Expand Down Expand Up @@ -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();
Expand All @@ -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();
Expand All @@ -901,15 +901,15 @@ 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;

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

Expand Down
6 changes: 3 additions & 3 deletions src/web/HTMLOperation.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -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>";
Expand Down
6 changes: 3 additions & 3 deletions src/web/Manager.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
7 changes: 2 additions & 5 deletions src/web/TODO.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 changes: 2 additions & 2 deletions src/web/utils/statusBar.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -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";
}
);
}
Expand Down Expand Up @@ -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) {
Expand Down
20 changes: 10 additions & 10 deletions src/web/waiters/ControlsWaiter.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}

/**
Expand All @@ -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();
}
}
Expand All @@ -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 {
Expand All @@ -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 {
Expand Down
24 changes: 12 additions & 12 deletions src/web/waiters/OperationsWaiter.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
}

Expand All @@ -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();
Expand Down Expand Up @@ -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);
Expand All @@ -197,7 +197,7 @@ class OperationsWaiter {
*
* @param {event} e
*/
desktopOpListCreate(e){
desktopOpListCreate(e) {
this.manager.recipe.createSortableSeedList(e.target);
this.enableOpPopover(e.target);
}
Expand All @@ -208,7 +208,7 @@ class OperationsWaiter {
*
* @param {event} e
*/
mobileOpListCreate(e){
mobileOpListCreate(e) {
this.manager.recipe.createSortableSeedList(e.target, false);
this.disableOpsListPopovers();
}
Expand Down Expand Up @@ -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");
Expand All @@ -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);
Expand Down Expand Up @@ -380,7 +380,7 @@ class OperationsWaiter {
*
* @param {Event} e
*/
onIconFavouriteClick(e){
onIconFavouriteClick(e) {
this.app.addFavourite(e.target.getAttribute("title"));
}
}
Expand Down
28 changes: 13 additions & 15 deletions src/web/waiters/RecipeWaiter.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -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");
})
});
}
}

Expand All @@ -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");
})
});
}

/**
Expand All @@ -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);
}
})
})
});
});
}
}
}
Expand Down
Loading

0 comments on commit a7a76ec

Please sign in to comment.