[#181] correctly handle checkmarks after favourites updates and resetting, update addSelectedClass to put selected on all operations with target data name ( as sometimes there will be 2 of the same rather than 1, in the case of a favourited operation ). Make updates to pass the op-title around based by the data-name attr instead of innerText

src/web/HTMLOperation.mjs

@@ -46,6 +46,7 @@ class HTMLOperation {
      * @returns {string}
      */
     toStubHtml(removeIcon) {
+        console.log("toStubHtml ==>",this.name);
         let html = `<li data-name="${this.name}" class="operation"`;
 
         if (this.description) {

src/web/TODO.md

@@ -12,6 +12,7 @@
 - test drag and drop etc. Regular mobile events / UX
 - view-heights not correct due to variable taskbar on mobile devices
 
+- see if i can use OpWaiter > getSelectedOp for getting selected ops. Although I dont see 'selected-op' on any op?
 
 ### Desktop UI:
 ### General UI:

src/web/waiters/OperationsWaiter.mjs

@@ -11,6 +11,7 @@ import {fuzzyMatch, calcMatchRanges} from "../../core/lib/FuzzyMatch.mjs";
 
 /**
  * Waiter to handle events related to the operations.
+ * Waiter to handle events related to the operations
  */
 class OperationsWaiter {
 
@@ -54,7 +55,7 @@ class OperationsWaiter {
             if (ops.length) {
                 selected = this.getSelectedOp(ops);
                 if (selected > -1) {
-                    this.manager.recipe.addOperation(ops[selected].innerHTML);
+                    this.manager.recipe.addOperation(ops[selected].getAttribute("data-name"));
                 }
             }
         }
@@ -350,6 +351,7 @@ class OperationsWaiter {
      */
     resetFavouritesClick() {
         this.app.resetFavourites();
+        this.manager.recipe.updateSelectedOperations();
     }
 }
 

src/web/waiters/RecipeWaiter.mjs

@@ -43,7 +43,7 @@ class RecipeWaiter {
             filter: ".arg",
             preventOnFilter: false,
             setData: function(dataTransfer, dragEl) {
-                dataTransfer.setData("Text", dragEl.querySelector(".op-title").textContent);
+                dataTransfer.setData("Text", dragEl.getAttribute("data-name"));
             },
             onEnd: function(evt) {
                 if (this.removeIntent) {
@@ -97,7 +97,7 @@ class RecipeWaiter {
             draggable: draggable ? ".operation" : null,
             sort: false,
             setData: function(dataTransfer, dragEl) {
-                dataTransfer.setData("Text", dragEl.textContent);
+                dataTransfer.setData("Text", dragEl.getAttribute("data-name"));
             },
             onStart: function(evt) {
                 // Removes popover element and event bindings from the dragged operation but not the
@@ -147,6 +147,7 @@ class RecipeWaiter {
             return;
         }
 
+        console.log("opSortEnd ==>", evt.item);
         this.buildRecipeOperation(evt.item);
         evt.item.dispatchEvent(this.manager.operationadd);
     }
@@ -327,7 +328,7 @@ class RecipeWaiter {
             }
 
             item = {
-                op: operations[i].querySelector(".op-title").textContent,
+                op: operations[i].getAttribute("data-name"),
                 args: ingredients
             };
 
@@ -371,6 +372,7 @@ class RecipeWaiter {
      * @param {element} el - The operation stub element from the operations pane
      */
     buildRecipeOperation(el) {
+        console.log("buildRecipeOperation ==>", el);
         const opName = el.textContent;
         const op = new HTMLOperation(opName, this.app.operations[opName], this.app, this.manager);
         el.innerHTML = op.toFullHtml();
@@ -396,6 +398,7 @@ class RecipeWaiter {
      * @returns {element}
      */
     addOperation(name) {
+        console.log("addOperation ==>", name);
         const item = document.createElement("li");
         item.setAttribute("data-name", name);
 
@@ -638,9 +641,13 @@ class RecipeWaiter {
      */
     addSelectedClass(opDataName){
         const list = document.querySelectorAll(".operation");
-        const item = Array.from(list).find((item) => item.getAttribute("data-name") === opDataName );
+        const item = Array.from(list).filter((item) => item.getAttribute("data-name") === opDataName );
 
-        item.classList.add("selected");
+        // when an item is listed in favourites, there are 2 of
+        // them and both need the 'selected' class ( checkmark )
+        item.forEach((op) => {
+            op.classList.add("selected");
+        })
     }
 
     /**

src/web/waiters/WindowWaiter.mjs

@@ -27,6 +27,7 @@ class WindowWaiter {
      * continuous resetting).
      */
     windowResize() {
+        // @TODO: maybe a debounce  is desireable although genrally people won't be resizing like crazy
         if ( window.innerWidth >= this.app.breakpoint ) {
             this.app.setDesktopUI(false);
         } else {