reduce selector complexity a little

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

@@ -1,4 +1,5 @@
 import url from "url";
+import HTMLIngredient from "../HTMLIngredient.mjs";
 
 /**
  * c(ustom element)-operation-li ( list item )
@@ -23,6 +24,8 @@ 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;
 
         this.build();
@@ -34,6 +37,11 @@ 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);
+        // }
     }
 
     /**

src/web/waiters/OperationsWaiter.mjs

@@ -5,7 +5,6 @@
  */
 
 import HTMLOperation from "../HTMLOperation.mjs";
-import Sortable from "sortablejs";
 import {fuzzyMatch, calcMatchRanges} from "../../core/lib/FuzzyMatch.mjs";
 import {COperationList} from "../components/c-operation-list.mjs";
 
@@ -271,18 +270,15 @@ class OperationsWaiter {
      * Update classes in the #dropdown-operations op-lists based on the
      * list items of a srcListSelector.
      *
-     * e.g: the operations currently listed in the recipe-list and the appropriate
+     * e.g: update all list items to add or remove the 'selected' class based on the operations
-     * list items in operations-dropdown that need to have the 'selected' class added
+     * in the current recipe-list, or 'favourite' classes on the current list of favourites.
-     * or removed. Another use case is using the current 'Favourite' category op-list
-     * as a source and handle the 'favourite' class on operations-dropdown op-lists
-     * accordingly
      *
      * @param {string} srcListSelector - the UL element list to compare to
      * @param {string} className - the className to update
      */
     updateListItemsClasses(srcListSelector, className) {
         const listItems = document.querySelectorAll(`${srcListSelector} li`);
-        const ops =  document.querySelectorAll("#categories c-operation-li > li.operation");
+        const ops =  document.querySelectorAll("c-operation-li > li.operation");
 
         this.removeClassFromOps(className);
 
@@ -305,7 +301,7 @@ class OperationsWaiter {
      * @param {string} className  - the class to remove
      */
     removeClassFromOps(className) {
-        const ops = document.querySelectorAll("#categories c-operation-li > li.operation");
+        const ops = document.querySelectorAll("c-operation-li > li.operation");
 
         ops.forEach((op => {
             this.removeClassFromOp(op.getAttribute("data-name"), className);
@@ -314,15 +310,15 @@ class OperationsWaiter {
 
 
     /**
-     * Generic function to remove a class from target operation list item
+     * Generic function to remove a class from target operation list item. This operation li may occur twice ( when the op is in
+     * 'favourites' and in the category for instance )
      *
      * @param {string} opName - operation name through data-name attribute of the target operation
      * @param {string} className - the class to remove
      */
     removeClassFromOp(opName, className) {
-        const ops = document.querySelectorAll(`#categories c-operation-li > li.operation[data-name="${opName}"].${className}`);
+        const ops = document.querySelectorAll(`c-operation-li > li.operation[data-name="${opName}"].${className}`);
 
-        // the same operation may occur twice if it is also in #catFavourites
         ops.forEach((op) => {
             op.classList.remove(`${className}`);
         });
@@ -330,15 +326,15 @@ class OperationsWaiter {
 
 
     /**
-     * Generic function to add a class to an operation list item
+     * Generic function to add a class to a specific operation. This operation li may occur twice ( when the op is in
+     * 'favourites' and in the category for instance )
      *
      * @param {string} opName - operation name through data-name attribute of the target operation
      * @param {string} className - the class to add to the operation list item
      */
     addClassToOp(opName, className) {
-        const ops = document.querySelectorAll(`#categories c-operation-li > li.operation[data-name="${opName}"]`);
+        const ops = document.querySelectorAll(`c-operation-li > li.operation[data-name="${opName}"]`);
 
-        // the same operation may occur twice if it is also in #catFavourites
         ops.forEach((op => {
             op.classList.add(`${className}`);
         }));