[#181] update README, run / fix lint

README.md

@@ -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:
@@ -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).

src/web/App.mjs

@@ -865,8 +865,8 @@ class App {
      *
      */
     updateVisibility(elm, isVisible) {
-        isVisible ? elm.classList.remove("hidden") : elm.classList.add("hidden");
+        return isVisible ? elm.classList.remove("hidden") : elm.classList.add("hidden");
-    }h
+    }
 
     /**
      * Set desktop UI ( on init and on window resize events )

src/web/HTMLOperation.mjs

@@ -74,7 +74,7 @@ class HTMLOperation {
         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>";

src/web/Manager.mjs

@@ -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-recipe").addEventListener("click", this.controls.onMaximiseButtonClick.bind(this.controls));
-        document.getElementById("maximise-input").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-output").addEventListener("click", this.controls.onMaximiseButtonClick.bind(this.controls));
 
         // Operations
         this.addMultiEventListener("#search", "keyup paste search click", this.ops.searchOperations, this.ops);

src/web/TODO.md

@@ -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
+- backspace on fs view should close max view. Keep making the same mistake and navigating away when for instance recipe
-- remove tabs on window resizing large to small?
+  is expanded and double click the window to fs > resolve. Reset layout
-- drag and drop from op to rec on desktop only working once
 
 ### 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 :)
 

src/web/utils/statusBar.mjs

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

src/web/waiters/ControlsWaiter.mjs

@@ -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");
+        const maximise = !document.getElementById(e.currentTarget.id.replace("maximise-", "")).classList.contains("maximised-pane");
-        this.setPaneMaximised(e.currentTarget.id.replace('maximise-', ''), maximise);
+        this.setPaneMaximised(e.currentTarget.id.replace("maximise-", ""), maximise);
     }
 
     /**

src/web/waiters/OperationsWaiter.mjs

@@ -343,7 +343,7 @@ class OperationsWaiter {
 
         // if any input remains in #search, clear it
         if (search.value.length) {
-            search.value = '';
+            search.value = "";
         }
 
         this.app.updateVisibility(document.getElementById("categories"), false);

src/web/waiters/RecipeWaiter.mjs

@@ -602,7 +602,7 @@ class RecipeWaiter {
         if (list.length) {
             list.forEach((item) => {
                 item.classList.remove("selected");
-            })
+            });
         }
     }
 
@@ -621,7 +621,7 @@ class RecipeWaiter {
         // them and both need the 'selected' class ( checkmark )
         item.forEach((op) => {
             op.classList.add("selected");
-        })
+        });
     }
 
     /**
@@ -637,10 +637,8 @@ class RecipeWaiter {
      * overhaul for another time / issue.
      */
     updateSelectedOperations() {
-        let recipeList, operations;
+        const recipeList = document.querySelectorAll("#rec-list > li");
-
+        const operations =  document.querySelectorAll(".operation");
-        recipeList = document.querySelectorAll("#rec-list > li");
-        operations =  document.querySelectorAll(".operation");
 
         this.clearAllSelectedClasses();
 
@@ -652,8 +650,8 @@ class RecipeWaiter {
                     if (ingredientName === operation.getAttribute("data-name")) {
                         this.addSelectedClass(ingredientName);
                     }
-                })
+                });
-            })
+            });
         }
     }
 }

src/web/waiters/WindowWaiter.mjs

@@ -46,6 +46,10 @@ class WindowWaiter {
     }
 
 
+    /**
+     * Set desktop UI and close #recipe / #input maximised panes if there were any.
+     * Correct the height of #recipe
+     */
     onResizeToDesktop() {
         this.app.setDesktopUI(false);
 
@@ -57,7 +61,9 @@ class WindowWaiter {
         document.getElementById("recipe").style.height = "100%";
     }
 
-
+    /**
+     * Set mobile UI and close any maximised panes if there were any
+     */
     onResizeToMobile() {
         this.app.setMobileUI();