fix: update scaled recipe content in place

Refs #1, #5

MMM-NextcloudCookbook.js

@@ -33,11 +33,12 @@ Module.register("MMM-NextcloudCookbook", {
     this.setRecipeMode(Boolean(payload.active));
     const requiresDomUpdate = previous.active !== payload.active
       || previous.recipeId !== payload.recipeId
-      || previous.portions !== payload.portions
       || previous.theme !== payload.theme
       || previous.error !== payload.error
-      || previous.recipe?.recipeYield !== payload.recipe?.recipeYield;
+      || (previous.portions === payload.portions
+        && previous.recipe?.recipeYield !== payload.recipe?.recipeYield);
     if (requiresDomUpdate) this.updateDom(this.config.animationSpeed);
+    else if (previous.portions !== payload.portions) this.updateRecipeDom();
     else this.updateProgressDom();
   },
 
@@ -112,6 +113,44 @@ Module.register("MMM-NextcloudCookbook", {
     });
   },
 
+  updateRecipeDom() {
+    const root = document.getElementById(this.identifier)?.querySelector(".ncc-active");
+    const recipe = this.state.recipe;
+    if (!root || !recipe) return;
+    const yieldDetail = root.querySelector("[data-ncc-yield]");
+    const ingredients = root.querySelectorAll("[data-ncc-progress-kind=ingredient]");
+    if (!yieldDetail || ingredients.length !== (recipe.recipeIngredient || []).length) {
+      this.updateDom(this.config.animationSpeed);
+      return;
+    }
+
+    yieldDetail.textContent = this.formatYield(recipe);
+    ingredients.forEach((item, index) => {
+      const ingredient = recipe.recipeIngredient[index];
+      const status = recipe.recipeIngredientStatus?.[index];
+      const text = item.querySelector("label > span");
+      if (text) text.textContent = ingredient;
+      item.classList.remove("ncc-quantity-warning", "ncc-quantity-error");
+      if (status === "unquantified") {
+        item.classList.add("ncc-quantity-warning");
+        item.setAttribute("aria-label", `Verify quantity: ${ingredient}`);
+      } else if (status === "unscalable" || status === "approximate") {
+        item.classList.add("ncc-quantity-error");
+        item.setAttribute("aria-label", `Scaling warning: ${ingredient}`);
+      } else {
+        item.removeAttribute("aria-label");
+      }
+    });
+    this.updateProgressDom();
+    this.scheduleRecipeFit();
+  },
+
+  formatYield(recipe) {
+    return recipe.originalRecipeYield && recipe.originalRecipeYield !== recipe.recipeYield
+      ? `${recipe.recipeYield} (originally ${recipe.originalRecipeYield})`
+      : recipe.recipeYield;
+  },
+
   getDom() {
     const root = document.createElement("section");
     root.className = `ncc-root ${this.state.active ? "ncc-active" : "ncc-idle"} ncc-theme-${this.state.theme || this.config.theme}`;
@@ -169,11 +208,8 @@ Module.register("MMM-NextcloudCookbook", {
     title.textContent = recipe.name || "Untitled recipe";
     header.appendChild(title);
 
-    const yieldValue = recipe.originalRecipeYield && recipe.originalRecipeYield !== recipe.recipeYield
-      ? `${recipe.recipeYield} (originally ${recipe.originalRecipeYield})`
-      : recipe.recipeYield;
     const metadata = [
-      ["Yield", yieldValue],
+      ["Yield", this.formatYield(recipe)],
       ["Prep", NCCFormatDuration(recipe.prepTime)],
       ["Cook", NCCFormatDuration(recipe.cookTime)],
       ["Total", NCCFormatDuration(recipe.totalTime)]
@@ -188,6 +224,7 @@ Module.register("MMM-NextcloudCookbook", {
         term.textContent = label;
         const detail = document.createElement("dd");
         detail.textContent = value;
+        if (label === "Yield") detail.dataset.nccYield = "";
         pair.append(term, detail);
         list.appendChild(pair);
       });