rename c-ingredient-li to c-recipe-li, update TODOs

src/web/HTMLIngredient.mjs

@@ -9,8 +9,8 @@ import Utils from "../core/Utils.mjs";
 /**
  * Object to handle the creation of operation ingredients.
  *
- * Note: Not to be confused with the native web component c-ingredient-li, which is the component that makes the parent
- * list item 'ingredient' in recipe-list.
+ * Note: Not to be confused with the native web component c-recipe-li, which is the component that is the (parent)
+ * list item in recipe-list.
  */
 class HTMLIngredient {
 

src/web/Manager.mjs

@@ -155,8 +155,8 @@ class Manager {
         this.addDynamicListener(".arg[type=checkbox], .arg[type=radio], select.arg", "change", this.recipe.ingChange, this.recipe);
         this.addDynamicListener(".disable-icon", "click", this.recipe.disableClick, this.recipe);
         this.addDynamicListener(".breakpoint", "click", this.recipe.breakpointClick, this.recipe);
-        this.addDynamicListener("c-ingredient-li li.operation", "dblclick", this.recipe.operationDblclick, this.recipe);
-        this.addDynamicListener("c-ingredient-li li.operation > div", "dblclick", this.recipe.operationChildDblclick, this.recipe);
+        this.addDynamicListener("c-recipe-li li.operation", "dblclick", this.recipe.operationDblclick, this.recipe);
+        this.addDynamicListener("c-recipe-li li.operation > div", "dblclick", this.recipe.operationChildDblclick, this.recipe);
         this.addDynamicListener("#rec-list .dropdown-menu.toggle-dropdown a", "click", this.recipe.dropdownToggleClick, this.recipe);
         this.addDynamicListener("#rec-list", "operationremove", this.recipe.opRemove.bind(this.recipe));
         this.addDynamicListener("textarea.arg", "dragover", this.recipe.textArgDragover, this.recipe);

src/web/TODO.md

@@ -5,4 +5,5 @@ manual testing issues
 
 mobile:
 - double tap on mobile recipe list sometimes really annoying
-- same for grabbing items in rec-list. Especially 'magic' for whatever reason?
+- same for grabbing items in rec-list. Especially 'magic' for whatever reason? And 'to Hexdump'
+ ( so looks like recipe list items with 3 'rows', title + 2 rows or args )

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

@@ -1,16 +1,16 @@
 import HTMLIngredient from "../HTMLIngredient.mjs";
 
 /**
- * c(ustom element)-ingredient-li ( list item ).
+ * c(ustom element)-recipe-li ( list item ).
  *
  * 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 {
+export class CRecipeLi extends HTMLElement {
     /**
      * @param {App} app - The main view object for CyberChef
-     * @param {string} name - The operation ( or aka ingredient- in this context ) name
+     * @param {string} name - The operation name
      * @param {object[]} args - The args properties of the operation ( see operation config file )
      */
     constructor(
@@ -36,7 +36,7 @@ export class CIngredientLi extends HTMLElement {
 
     cloneNode() {
         const { app, name, args } = this;
-        return new CIngredientLi( app, name, args );
+        return new CRecipeLi( app, name, args );
     }
 
     /**
@@ -121,4 +121,4 @@ export class CIngredientLi extends HTMLElement {
     }
 }
 
-customElements.define("c-ingredient-li", CIngredientLi);
+customElements.define("c-recipe-li", CRecipeLi);

src/web/waiters/ControlsWaiter.mjs

@@ -497,7 +497,7 @@ ${navigator.userAgent}
      */
     onMaximisedRecipeClick() {
         // if #recipe is maximised & rec-list is empty on mobile UI
-        if (this.app.isMobileView() && document.querySelector("#recipe.maximised-pane") && document.querySelectorAll("#rec-list > c-ingredient-li").length === 0) {
+        if (this.app.isMobileView() && document.querySelector("#recipe.maximised-pane") && document.querySelectorAll("#rec-list > c-recipe-li").length === 0) {
             // close max pane and display the expanded #operations-dropdown
             this.setPaneMaximised("recipe", false);
             this.manager.ops.openOpsDropdown();

src/web/waiters/RecipeWaiter.mjs

@@ -7,7 +7,7 @@
 import Sortable from "sortablejs";
 import Utils from "../../core/Utils.mjs";
 import {escapeControlChars} from "../utils/editorUtils.mjs";
-import {CIngredientLi} from "../components/c-ingredient-li.mjs";
+import {CRecipeLi} from "../components/c-recipe-li.mjs";
 
 
 /**
@@ -51,7 +51,7 @@ class RecipeWaiter {
         Sortable.create(recList, {
             group: "recipe",
             sort: true,
-            draggable: "c-ingredient-li",
+            draggable: "c-recipe-li",
             swapThreshold: swapThreshold,
             animation: animation,
             delay: delay,
@@ -314,7 +314,7 @@ class RecipeWaiter {
      * @param {string} name - The operation stub element from the operations pane
      */
     buildRecipeOperation(name) {
-        const op = new CIngredientLi(this.app, name, this.app.operations[name].args);
+        const op = new CRecipeLi(this.app, name, this.app.operations[name].args);
 
         if (this.app.operations[name].flowControl) {
             op.classList.add("flow-control-op");