restore recipe on refresh

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

@@ -0,0 +1,72 @@
+import Utils from "../../core/Utils.mjs";
+import HTMLIngredient from "../HTMLIngredient.mjs";
+
+export class CIngredientLi extends HTMLElement {
+    constructor(app, name, args) {
+        super();
+
+        this.app = app;
+        this.name = name;
+        this.args = [];
+
+        for (let i = 0; i < args.length; i++) {
+            const ing = new HTMLIngredient(args[i], this.app, this.app.manager);
+            this.args.push(ing);
+        }
+
+        this.build();
+    }
+
+    build() {
+        const li = document.createElement("li");
+        li.classList.add("operation");
+        li.setAttribute("data-name", this.name);
+
+        const titleDiv = document.createElement("div");
+        titleDiv.classList.add("op-title");
+        titleDiv.innerText = this.name;
+
+        const ingredientDiv = document.createElement("div");
+        ingredientDiv.classList.add("ingredients");
+
+        li.appendChild(titleDiv);
+        li.appendChild(ingredientDiv)
+
+        for (let i = 0; i < this.args.length; i++) {
+            ingredientDiv.innerHTML += (this.args[i].toHtml());
+        }
+
+        const iconsDiv = document.createElement("div");
+        iconsDiv.classList.add("recipe-icons");
+
+        const breakPointIcon = document.createElement("i");
+        breakPointIcon.classList.add("material-icons");
+        breakPointIcon.classList.add("breakpoint");
+        breakPointIcon.setAttribute("title", "Set breakpoint");
+        breakPointIcon.setAttribute("break", "false");
+        breakPointIcon.setAttribute("data-help-title", "Setting breakpoints");
+        breakPointIcon.setAttribute("data-help", "Setting a breakpoint on an operation will cause execution of the Recipe to pause when it reaches that operation.");
+        breakPointIcon.innerText = "pause";
+
+        const disableIcon = document.createElement("i");
+        disableIcon.classList.add("material-icons");
+        disableIcon.classList.add("disable-icon");
+        disableIcon.setAttribute("title", "Disable operation");
+        disableIcon.setAttribute("disabled", "false");
+        disableIcon.setAttribute("data-help-title", "Disabling operations");
+        disableIcon.setAttribute("data-help", "Disabling an operation will prevent it from being executed when the Recipe is baked. Execution will skip over the disabled operation and continue with subsequent operations.");
+        disableIcon.innerText = "not_interested";
+
+        iconsDiv.appendChild(breakPointIcon);
+        iconsDiv.appendChild(disableIcon);
+
+        const clearfixDiv = document.createElement("div");
+
+        li.appendChild(iconsDiv);
+        li.appendChild(clearfixDiv);
+
+        this.appendChild(li);
+    }
+}
+
+customElements.define("c-ingredient-li", CIngredientLi);

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

@@ -24,7 +24,6 @@ export class COperationLi extends HTMLElement {
         this.includeStarIcon = includeStarIcon;
 
         this.config = this.app.operations[name];
-        // this.ingList = [];
 
         this.isFavourite = this.app.isLocalStorageAvailable() && JSON.parse(localStorage.favourites).indexOf(name) >= 0;
 
@@ -37,11 +36,6 @@ export class COperationLi extends HTMLElement {
             this.observer = new MutationObserver(this.updateFavourite.bind(this));
             this.observer.observe(this.querySelector("li"), { attributes: true });
         }
-
-        // for (let i = 0; i < this.config.args.length; i++) {
-        //     const ing = new HTMLIngredient(this.config.args[i], this.app, this.manager);
-        //     this.ingList.push(ing);
-        // }
     }
 
     /**
@@ -249,6 +243,15 @@ export class COperationLi extends HTMLElement {
             this.querySelector("i.star-icon").innerText = "star_outline";
         }
     }
+
+    /**
+     * Override native cloneNode method so we can clone c-operation-li properly
+     * with constructor arguments for sortable and cloneable lists
+     */
+    cloneNode() {
+        const { app, name, icon, includeStarIcon } = this;
+        return new COperationLi( app, name, icon, includeStarIcon );
+    }
 }
 
 

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

@@ -37,7 +37,7 @@ export class COperationList extends HTMLElement {
         ul.classList.add("op-list");
 
         this.opNames.forEach((opName => {
-            const li = new COperationLi(
+            const cOpLi = new COperationLi(
                 this.app,
                 opName,
                 {
@@ -47,41 +47,91 @@ export class COperationList extends HTMLElement {
                 this.includeStarIcon
             );
 
-            ul.appendChild(li);
+            ul.appendChild(cOpLi);
         }))
 
         if (this.isSortable) {
-            const sortableList = Sortable.create(ul, {
-                group: "sorting",
-                sort: true,
-                draggable: "c-operation-li",
-                onFilter: function (e) {
-                    const el = sortableList.closest(e.item);
-                    if (el && el.parentNode) {
-                        $(el).popover("dispose");
-                        el.parentNode.removeChild(el);
-                    }
-                },
-                onEnd: function(e) {
-                    if (this.removeIntent) {
-                        $(e.item).popover("dispose");
-                        e.item.remove();
-                    }
-                }.bind(this),
-            });
+            this.createSortableList(ul);
         } else if (!this.app.isMobileView() && this.isCloneable) {
-            const cloneableList = Sortable.create(ul, {
-                group: {
-                    name: "recipe",
-                    pull: "clone",
-                },
-                draggable: "c-operation-li",
-                sort: false
-            })
+            this.createCloneableList(ul, "recipe", "rec-list"); // target name and id can be component params if needed to make it reusable
         }
 
         this.append(ul);
     }
+
+    /**
+     * Create a sortable ( not cloneable ) list
+     *
+     * @param { HTMLElement } ul
+     * */
+    createSortableList(ul) {
+        const sortableList = Sortable.create(ul, {
+            group: "sorting",
+            sort: true,
+            draggable: "c-operation-li",
+            onFilter: function (e) {
+                const el = sortableList.closest(e.item);
+                if (el && el.parentNode) {
+                    $(el).popover("dispose");
+                    el.parentNode.removeChild(el);
+                }
+            },
+            onEnd: function(e) {
+                if (this.app.manager.recipe.removeIntent) {
+                    $(e.item).popover("dispose");
+                    e.item.remove();
+                }
+            }.bind(this),
+        });
+    }
+
+    /**
+     * Create a cloneable ( not sortable ) list
+     *
+     * @param { HTMLElement } ul
+     * @param { string } targetListName
+     * @param { string } targetListId
+     * */
+    createCloneableList(ul, targetListName, targetListId) {
+        Sortable.create(ul, {
+            group: {
+                name: targetListName,
+                pull: "clone",
+                put: false,
+            },
+            draggable: "c-operation-li",
+            sort: false,
+            setData: function(dataTransfer, dragEl) {
+                dataTransfer.setData("Text", dragEl.querySelector("li").getAttribute("data-name"));
+            },
+            onStart: function(e) {
+                // Removes popover element and event bindings from the dragged operation but not the
+                // event bindings from the one left in the operations list. Without manually removing
+                // these bindings, we cannot re-initialise the popover on the stub operation.
+                $(e.item)
+                    .popover("dispose")
+                    .removeData("bs.popover")
+                    .off("mouseenter")
+                    .off("mouseleave")
+                    .attr("data-toggle", "popover-disabled");
+                $(e.clone)
+                    .off(".popover")
+                    .removeData("bs.popover");
+            },
+            // @todo: popovers dont display anymore after dragging into recipe list and then hovering the op
+            onEnd: ({item}) => {
+                if (item.parentNode.id === targetListId) {
+                    this.app.manager.recipe.addOperation(item.name);
+                    item.remove();
+                    return;
+                }
+
+                if (item.parentNode.id !== targetListId) {
+                    return;
+                }
+            }
+        });
+    }
 }
 
 customElements.define("c-operation-list", COperationList);