fix all ESlint errors

src/web/components/c-category-li.mjs

@@ -2,15 +2,16 @@ import {COperationList} from "./c-operation-list.mjs";
 
 /**
  * c(ustom element)-category-li ( list item )
- *
+ */
+export class CCategoryLi extends HTMLElement {
+    /**
      * @param {App} app - The main view object for CyberChef
      * @param {CatConf} category - The category and operations to be populated.
      * @param {Object.<string, OpConf>} operations - The list of operation configuration objects.
      * @param {Boolean} isExpanded - expand the category by default on init or not
      * @param {Boolean} includeOpLiStarIcon - Include the left side 'star' icon to each of the c-category-li >
      * c-operation-list > c-operation-li list items in this category
- * */
+     */
-export class CCategoryLi extends HTMLElement {
     constructor(
         app,
         category,
@@ -69,7 +70,7 @@ export class CCategoryLi extends HTMLElement {
             this.includeOpLiStarIcon,
             false,
             true
-        )
+        );
 
         opList.build();
 
@@ -85,7 +86,7 @@ export class CCategoryLi extends HTMLElement {
         li.classList.add("category");
 
         return li;
-    };
+    }
 
     /**
      * Build the anchor element
@@ -118,7 +119,7 @@ export class CCategoryLi extends HTMLElement {
         }
 
         return a;
-    };
+    }
 
     /**
      * Build the collapsable panel that contains the op-list for this category
@@ -137,7 +138,7 @@ export class CCategoryLi extends HTMLElement {
         }
 
         return div;
-    };
+    }
 
     /**
      *  If this category is Favourites, build and return the star icon button

src/web/components/c-category-list.mjs

@@ -2,15 +2,21 @@ import {CCategoryLi} from "./c-category-li.mjs";
 
 /**
  * c(ustom element)-category-list
- *
+ */
+export class CCategoryList extends HTMLElement {
+    /**
      * @param {App} app - The main view object for CyberChef
      * @param {CatConf[]} categories - The list of categories and operations to be populated.
      * @param {Object.<string, OpConf>} operations - A list of operation configuration objects.
      * @param {Boolean} includeOpLiStarIcon - Include the left side 'star' icon to each of the c-category-li >
      * c-operation-list > c-operation-li list items in this c-category-list
- **/
+     */
-export class CCategoryList extends HTMLElement {
+    constructor(
-    constructor(app, categories, operations, includeOpLiStarIcon) {
+        app,
+        categories,
+        operations,
+        includeOpLiStarIcon
+    ) {
         super();
 
         this.app = app;

src/web/components/c-ingredient-li.mjs

@@ -6,13 +6,18 @@ import HTMLIngredient from "../HTMLIngredient.mjs";
  * Note: This is the #recipe-list list item component, not to be confused with HTMLIngredient which make up the smaller
  * components of this list item. It would be good to eventually fuse that code into this component or alternatively, to
  * turn that into a separate native web component .
- *
+ */
+export class CIngredientLi extends HTMLElement {
+    /**
      * @param {App} app - The main view object for CyberChef
      * @param {string} name - The operation ( or aka ingredient- in this context ) name
      * @param {object[]} args - The args properties of the operation ( see operation config file )
- * */
+     */
-export class CIngredientLi extends HTMLElement {
+    constructor(
-    constructor(app, name, args = []) {
+        app,
+        name,
+        args = []
+    ) {
         super();
 
         this.app = app;
@@ -38,7 +43,6 @@ export class CIngredientLi extends HTMLElement {
 
     /**
      * Handle double click
-     *
      * @param {Event} e
      */
     handleDoubleClick(e) {
@@ -64,7 +68,7 @@ export class CIngredientLi extends HTMLElement {
         ingredientDiv.classList.add("ingredients");
 
         li.appendChild(titleDiv);
-        li.appendChild(ingredientDiv)
+        li.appendChild(ingredientDiv);
 
         for (let i = 0; i < this.args.length; i++) {
             ingredientDiv.innerHTML += (this.args[i].toHtml());

src/web/components/c-operation-li.mjs

@@ -2,7 +2,9 @@ import url from "url";
 
 /**
  * c(ustom element)-operation-li ( list item )
- *
+ */
+export class COperationLi extends HTMLElement {
+    /**
      * @param {App} app - The main view object for CyberChef
      * @param {string} name - The name of the operation
      * @param {Object} icon - { class: string, innerText: string } - The optional and customizable icon displayed on the
@@ -11,7 +13,6 @@ import url from "url";
      * @param {[number[]]} charIndicesToHighlight - optional array of indices that indicate characters to highlight (bold)
      * in the operation name, for instance when the user searches for an operation by typing
      */
-export class COperationLi extends HTMLElement {
     constructor(
         app,
         name,
@@ -134,12 +135,12 @@ export class COperationLi extends HTMLElement {
                 $(".popover").on("mouseleave", function () {
                     $(_this).popover("hide");
                 });
-            }).on("mouseleave", function () {
+            })
+            .on("mouseleave", function () {
                 const _this = this;
                 setTimeout(function() {
                     // Determine if the popover associated with this element is being hovered over
-                if ($(_this).data("bs.popover") &&
+                    if ($(_this).data("bs.popover") && ($(_this).data("bs.popover").tip && !$($(_this).data("bs.popover").tip).is(":hover"))) {
-                    ($(_this).data("bs.popover").tip && !$($(_this).data("bs.popover").tip).is(":hover"))) {
                         $(_this).popover("hide");
                     }
                 }, 50);
@@ -270,7 +271,7 @@ export class COperationLi extends HTMLElement {
      * or simply sets the name in the span element
      */
     buildOperationName() {
-        const span = document.createElement('span');
+        const span = document.createElement("span");
 
         if (this.charIndicesToHighlight.length) {
             let opName = "",

src/web/components/c-operation-list.mjs

@@ -3,15 +3,17 @@ import Sortable from "sortablejs";
 
 /**
  * c(ustom element)-operation-list
- *
- * @param {App} app - The main view object for CyberChef
- * @param {[string, number[]]} operations - A list of operation names and indexes of characters to highlight
- * @param {Boolean} includeOpLiStarIcon - Include the left side 'star' icon to each of the c-category-li >
- * c-operation-list > c-operation-li list items in this c-category-list
- *
- * @param {Object} icon ( { class: string, innerText: string } ). check-icon by default
  */
 export class COperationList extends HTMLElement {
+    /**
+     * @param {App} app - The main view object for CyberChef
+     * @param {[string, number[]]} operations - A list of operation names and indexes of characters to highlight
+     * @param {Boolean} includeStarIcon - Include the left side 'star' icon to each of the c-category-li >
+     * c-operation-list > c-operation-li list items in this c-category-list
+     * @param {Boolean} isSortable - List items may be sorted ( reordered ). False by default
+     * @param {Boolean} isCloneable - List items are cloneable to a target list. True by default
+     * @param {Object} icon ( { class: string, innerText: string } ). 'check-icon' by default
+     */
     constructor(
         app,
         operations,
@@ -50,19 +52,19 @@ export class COperationList extends HTMLElement {
             );
 
             ul.appendChild(cOpLi);
-        }))
+        }));
 
         if (this.isSortable) {
             this.createSortableList(ul);
         } else if (!this.app.isMobileView() && this.isCloneable) {
-            this.createCloneableList(ul, "recipe", "rec-list"); // target name and id can be component params if needed to make it reusable
+            this.createCloneableList(ul, "recipe", "rec-list");
         }
 
         this.append(ul);
     }
 
     /**
-     * Create a sortable ( not cloneable ) list
+     * Create a sortable ( but not cloneable ) list
      *
      * @param { HTMLElement } ul
      * */

src/web/waiters/OperationsWaiter.mjs

@@ -6,7 +6,6 @@
 
 import {fuzzyMatch, calcMatchRanges} from "../../core/lib/FuzzyMatch.mjs";
 import {COperationList} from "../components/c-operation-list.mjs";
-import {COperationLi} from "../components/c-operation-li.mjs";
 
 /**
  * Waiter to handle events related to the operations.
@@ -205,7 +204,7 @@ class OperationsWaiter {
                     class: "remove-icon",
                     innerText: "delete"
                 },
-            )
+            );
 
             opList.build();
             div.appendChild(opList);

src/web/waiters/RecipeWaiter.mjs

@@ -34,9 +34,18 @@ class RecipeWaiter {
     initDragAndDrop() {
         const recList = document.getElementById("rec-list");
 
-        let swapThreshold = this.app.isMobileView() ? 0.60 : 0.10;
+        let swapThreshold, animation, delay;
-        let animation = this.app.isMobileView() ? 400 : 200;
+
-        let delay = this.app.isMobileView() ? 200 : 0;
+        // tweak these values for better user experiences per device type and UI
+        if (this.app.isMobileView()) {
+            swapThreshold = 0.60;
+            animation = 400;
+            delay = 200;
+        } else {
+            swapThreshold = 0.10;
+            animation = 200;
+            delay = 0;
+        }
 
         // Recipe list
         Sortable.create(recList, {
@@ -365,7 +374,7 @@ class RecipeWaiter {
      * @param {string} name - The name of the operation to add
      */
     addOperation(name) {
-        let item = this.buildRecipeOperation(name);
+        const item = this.buildRecipeOperation(name);
         document.getElementById("rec-list").appendChild(item);
 
         $(item).find("[data-toggle='tooltip']").tooltip();