diff --git a/src/web/Manager.mjs b/src/web/Manager.mjs index 2af4813d8..d7b893faf 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 6c50fe134..f2db2bf41 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 51fc6fb83..04aac20ce 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;