From 4b030c7d61068cfe78ea8014e8cecae5b116d73a Mon Sep 17 00:00:00 2001
From: Robin Scholtes <robin@theweirdscience.com>
Date: Mon, 15 May 2023 20:54:49 +1200
Subject: [PATCH] on user test request: when the recipe pane is maximised but
 the rec-list is empty, open the operations-dropdown on click of the
 recipe-list ( which holds no items )

---
 src/web/Manager.mjs                |  1 +
 src/web/waiters/ControlsWaiter.mjs | 18 ++++++++++++++++++
 src/web/waiters/RecipeWaiter.mjs   | 11 +++++++----
 3 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/src/web/Manager.mjs b/src/web/Manager.mjs
index 2af4813d..d7b893fa 100755
--- a/src/web/Manager.mjs
+++ b/src/web/Manager.mjs
@@ -141,6 +141,7 @@ class Manager {
         document.getElementById("load-button").addEventListener("click", this.controls.loadButtonClick.bind(this.controls));
         document.getElementById("support").addEventListener("click", this.controls.supportButtonClick.bind(this.controls));
         this.addMultiEventListeners("#save-texts textarea", "keyup paste", this.controls.saveTextChange, this.controls);
+        document.getElementById("rec-list").addEventListener("click", this.controls.onMaximisedRecipeClick.bind(this.controls));
         // A note for the Maximise Controls listeners below: click events via addDynamicListener don't properly bubble and the hit box to maximise is unacceptably tiny, hence this solution
         document.getElementById("maximise-recipe").addEventListener("click", this.controls.onMaximiseButtonClick.bind(this.controls));
         document.getElementById("maximise-input").addEventListener("click", this.controls.onMaximiseButtonClick.bind(this.controls));
diff --git a/src/web/waiters/ControlsWaiter.mjs b/src/web/waiters/ControlsWaiter.mjs
index 6c50fe13..f2db2bf4 100755
--- a/src/web/waiters/ControlsWaiter.mjs
+++ b/src/web/waiters/ControlsWaiter.mjs
@@ -489,6 +489,24 @@ ${navigator.userAgent}
             btn.setAttribute("data-original-title", "Maximise pane");
         }
     }
+
+    /**
+     * If #recipe is maximised and #rec-list is empty, clicking / tapping on
+     * the ( empty ) list will open #operations-dropdown to help guide users
+     * with that they are supposed to do
+     */
+    onMaximisedRecipeClick() {
+        if (this.app.isMobileView()
+            // if #recipe is maximised
+            && document.querySelector("#recipe.maximised-pane")
+            // and #rec-list is empty
+            && document.querySelectorAll("#rec-list > li").length === 0 ) {
+
+            // close max pane and display the expanded #operations-dropdown
+            this.setPaneMaximised("recipe", false);
+            this.manager.ops.openOperationsDropdown();
+        }
+    }
 }
 
 export default ControlsWaiter;
diff --git a/src/web/waiters/RecipeWaiter.mjs b/src/web/waiters/RecipeWaiter.mjs
index 51fc6fb8..04aac20c 100755
--- a/src/web/waiters/RecipeWaiter.mjs
+++ b/src/web/waiters/RecipeWaiter.mjs
@@ -620,17 +620,18 @@ class RecipeWaiter {
         }))
     }
 
+
     /**
      * Update which items are selected in op-list.
      *
      * First, all selected classes are removed from op-list, then we get the current
      * recipe-list ingredient names and add 'selected' back to the matching operations.
      *
-     * Note: It seems a little overkill, but with the current tightly coupled code this is
-     * a reliable way to make sure the 'selected' operations are always in sync with
+     * Note: It seems a little overkill to nuke all selected classes, but with the current
+     * code this is a reliable way to make sure the 'selected' operations are always in sync with
      * the recipe list ( I think this is preferable to complicating a lot of existing
-     * code ), I'd recommend to refactor this at one point, but that would mean a huge code
-     * overhaul for another time / issue.
+     * code ), I'd recommend to refactor this at one point, but that should go hand in hand
+     * with a huge code overhaul for another time / issue.
      */
     updateSelectedOperations() {
         const recipeListItems = document.querySelectorAll("#rec-list > li");
@@ -648,6 +649,8 @@ class RecipeWaiter {
             });
         });
     }
+
+
 }
 
 export default RecipeWaiter;