move operation removal from recipe list to c-recipe-li and remove all associated old code

src/web/Manager.mjs

@@ -155,10 +155,7 @@ 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-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);
         this.addDynamicListener("textarea.arg", "dragleave", this.recipe.textArgDragLeave, this.recipe);
         this.addDynamicListener("textarea.arg", "drop", this.recipe.textArgDrop, this.recipe);

src/web/TODO.md

@@ -4,6 +4,4 @@ operations:
 manual testing issues
 
 mobile:
-- double tap on mobile recipe list sometimes really annoying
+- all ops with bootstrap checkboxes in recipe break ( due to the bootstrap checkbox func not being applied ). Need to replace / remove this
-- 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

@@ -31,21 +31,24 @@ export class CRecipeLi extends HTMLElement {
 
         this.build();
 
+        this.addEventListener("click", this.handleClick.bind(this));
         this.addEventListener("dblclick", this.handleDoubleClick.bind(this));
     }
 
-    cloneNode() {
-        const { app, name, args } = this;
-        return new CRecipeLi( app, name, args );
-    }
-
     /**
      * Remove listeners on disconnectedCallback
      */
     disconnectedCallback() {
+        this.removeEventListener("click", this.handleClick.bind(this));
         this.removeEventListener("dblclick", this.handleDoubleClick.bind(this));
     }
 
+    /**
+     * Handle click
+     * @param {Event} e
+     */
+    handleClick(e) {}
+
     /**
      * Handle double click
      * @param {Event} e
@@ -53,10 +56,22 @@ export class CRecipeLi extends HTMLElement {
     handleDoubleClick(e) {
         // do not remove if icons or form elements are double clicked
         if (e.target === this.querySelector("li") || e.target === this.querySelector("div.op-title")) {
-            this.remove();
+            this.removeOperation();
         }
     }
 
+    /**
+     * Remove this operation from the recipe list
+     */
+    removeOperation(){
+        this.remove();
+        log.debug("Operation removed from recipe");
+        window.dispatchEvent(this.app.manager.statechange);
+
+        // @TODO: this func can be moved to c-operation-list
+        this.app.manager.ops.updateListItemsClasses("#rec-list", "selected");
+    }
+
     /**
      * Build the ingredient list item
      */
@@ -119,6 +134,16 @@ export class CRecipeLi extends HTMLElement {
 
         return div;
     }
+
+    /**
+     * Override native cloneNode method so we can clone c-recipe-li properly
+     * with constructor arguments for sortable and cloneable lists. This function
+     * is needed for the drag and drop functionality of the Sortable lists
+     */
+    cloneNode() {
+        const { app, name, args } = this;
+        return new CRecipeLi( app, name, args );
+    }
 }
 
 customElements.define("c-recipe-li", CRecipeLi);

src/web/waiters/RecipeWaiter.mjs

@@ -208,32 +208,6 @@ class RecipeWaiter {
     }
 
 
-    /**
-     * Handler for operation doubleclick events.
-     * Removes the operation from the recipe and auto bakes.
-     *
-     * @fires Manager#statechange
-     * @param {Event} e
-     */
-    operationDblclick(e) {
-        e.target.remove();
-        this.opRemove(e);
-    }
-
-
-    /**
-     * Handler for operation child doubleclick events.
-     * Removes the operation from the recipe.
-     *
-     * @fires Manager#statechange
-     * @param {Event} e
-     */
-    operationChildDblclick(e) {
-        e.target.parentNode.remove();
-        this.opRemove(e);
-    }
-
-
     /**
      * Generates a configuration object to represent the current recipe.
      *
@@ -416,21 +390,6 @@ class RecipeWaiter {
     }
 
 
-    /**
-     * Handler for operationremove events.
-     * Updates 'selected' classes in #operations
-     *
-     * @listens Manager#operationremove
-     * @fires Manager#statechange
-     * @param {Event} e
-     */
-    opRemove(e) {
-        log.debug("Operation removed from recipe");
-        window.dispatchEvent(this.manager.statechange);
-        this.manager.ops.updateListItemsClasses("#rec-list", "selected");
-    }
-
-
     /**
      * Handler for text argument dragover events.
      * Gives the user a visual cue to show that items can be dropped here.