restore recipe list ordering, properly removing c-ingredient-li and update 'selected' checkmarks in c-op-list

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("#rec-list li.operation", "dblclick", this.recipe.operationDblclick, this.recipe);
-        this.addDynamicListener("#rec-list li.operation > div", "dblclick", this.recipe.operationChildDblclick, 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("#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

@@ -1,7 +1,6 @@
 - ignore dropped item outside of rec-list
 - search-results dropdown
-
-- reordering recipe list
+- can only drag an op to favourites 1 time
 - stupid popovers on deleting favs for instance ( dont always close nicely )
 
 - UI tests etc.

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

@@ -1,8 +1,7 @@
-import Utils from "../../core/Utils.mjs";
 import HTMLIngredient from "../HTMLIngredient.mjs";
 
 export class CIngredientLi extends HTMLElement {
-    constructor(app, name, args) {
+    constructor(app, name, args = []) {
         super();
 
         this.app = app;
@@ -15,6 +14,8 @@ export class CIngredientLi extends HTMLElement {
         }
 
         this.build();
+
+        this.addEventListener("dblclick", this.handleDoubleClick.bind(this));
     }
 
     build() {
@@ -67,6 +68,20 @@ export class CIngredientLi extends HTMLElement {
 
         this.appendChild(li);
     }
+
+    /**
+     * Remove listeners on disconnectedCallback
+     */
+    disconnectedCallback() {
+        this.removeEventListener("dblclick", this.handleDoubleClick.bind(this));
+    }
+
+    /**
+     * Handle double click
+     */
+    handleDoubleClick() {
+        this.remove();
+    }
 }
 
 customElements.define("c-ingredient-li", CIngredientLi);

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

@@ -123,11 +123,6 @@ export class COperationList extends HTMLElement {
                 if (item.parentNode.id === targetListId) {
                     this.app.manager.recipe.addOperation(item.name);
                     item.remove();
-                    return;
-                }
-
-                if (item.parentNode.id !== targetListId) {
-                    return;
                 }
             }
         });

src/web/waiters/RecipeWaiter.mjs

@@ -30,7 +30,7 @@ class RecipeWaiter {
 
 
     /**
-     * Sets up the drag and drop capability for operations in the operations and recipe areas.
+     * Sets up the drag and drop capability for recipe-list
      */
     initDragAndDrop() {
         const recList = document.getElementById("rec-list");
@@ -40,8 +40,8 @@ class RecipeWaiter {
             group: "recipe",
             sort: true,
             draggable: "c-ingredient-li",
-            swapThreshold: this.app.isMobileView ? 0.60 : 0.3,
-            animation: this.app.isMobileView ? 400 : 200,
+            swapThreshold: this.app.isMobileView ? 0.60 : 0.40,
+            animation: this.app.isMobileView() ? 400 : 0,
             delay: this.app.isMobileView ? 200 : 0,
             filter: ".arg",
             preventOnFilter: false,
@@ -93,7 +93,6 @@ class RecipeWaiter {
      * @param {Event} evt
      */
     opSortEnd(evt) {
-        console.log(evt);
         if (this.removeIntent && evt.item.parentNode.id === "rec-list") {
             evt.item.remove();
             return;