From 12116e53b13f9e8220f40bbfd18bf8b97fd76771 Mon Sep 17 00:00:00 2001 From: Robin Scholtes Date: Wed, 19 Apr 2023 23:31:06 +1200 Subject: [PATCH] [#181] move setVisibility to App.mjs since it's pretty generic and could be reused. Update TODO --- src/web/App.mjs | 19 ++++++++++++++ src/web/TODO.md | 5 ---- src/web/waiters/OperationsWaiter.mjs | 39 +++++++--------------------- 3 files changed, 29 insertions(+), 34 deletions(-) diff --git a/src/web/App.mjs b/src/web/App.mjs index 7f584027..76562488 100755 --- a/src/web/App.mjs +++ b/src/web/App.mjs @@ -860,6 +860,25 @@ class App { this.loadURIParams(); } + + /** + * Set element visibility + * + * @param {HTMLElement} elm + * @param {boolean} isVisible + * + */ + setVisibility( elm, isVisible ){ + if ( isVisible ) { + if ( elm.classList.contains("hidden")) { + elm.classList.remove("hidden"); + } + } else if ( isVisible === false ) { + if ( !elm.classList.contains("hidden")){ + elm.classList.add("hidden"); + } + } + } } export default App; diff --git a/src/web/TODO.md b/src/web/TODO.md index 11122c98..62bc14ed 100644 --- a/src/web/TODO.md +++ b/src/web/TODO.md @@ -4,7 +4,6 @@ --- ### Desktop UI: -- restore desktop UI - `search-results` should really be at the top once input, with `categories` below it - `calcControlsHeight` and `adjustComponentSizes` cause trouble in `recipe` `rec-list` when resizing from desktop to mobile @@ -22,10 +21,6 @@ ### JS: - `core/Recipe.mjs`, `core/lib/Magic.js` return imports to original -- `waiters/OperationsWaiter.mjs` setVisibility is pretty generic so probably move it ( to manager? ) -- `operations` dropdowns don't close on Escape once `input[type="search"]` is not in focus ( for instance, when you - have added some operations from the category list ). Low priority though -- - can probably refactor the Splitter funcs to be a little more reusable etc. Low priority ### Misc: - check for remaining todos diff --git a/src/web/waiters/OperationsWaiter.mjs b/src/web/waiters/OperationsWaiter.mjs index 9f37c6c4..5a7c87e0 100755 --- a/src/web/waiters/OperationsWaiter.mjs +++ b/src/web/waiters/OperationsWaiter.mjs @@ -28,25 +28,6 @@ class OperationsWaiter { this.removeIntent = false; } - /** - * Set element visibility - * - * @param {HTMLElement} elm - * @param {boolean} isVisible - * - */ - setVisibility( elm, isVisible ){ - if ( isVisible ) { - if ( elm.classList.contains("hidden")) { - elm.classList.remove("hidden"); - } - } else if ( isVisible === false ) { - if ( !elm.classList.contains("hidden")){ - elm.classList.add("hidden"); - } - } - } - /** * Handler for search events. * Finds operations which match the given search term and displays them under the search box. @@ -61,8 +42,8 @@ class OperationsWaiter { hideOperations = document.getElementById("reset-operations"); searchResults = document.getElementById("search-results" ); - this.setVisibility(categories, true); - this.setVisibility(hideOperations, true); + this.app.setVisibility(categories, true); + this.app.setVisibility(hideOperations, true); } if (e.type === "keyup"){ @@ -71,12 +52,12 @@ class OperationsWaiter { searchResults = document.getElementById("search-results" ); if ( e.target.value.length === 0 ) { - this.setVisibility(categories, true); - this.setVisibility(hideOperations, true); + this.app.setVisibility(categories, true); + this.app.setVisibility(hideOperations, true); } else { - this.setVisibility(categories, false ); - this.setVisibility(searchResults, true ); - this.setVisibility(hideOperations, true ); + this.app.setVisibility(categories, false ); + this.app.setVisibility(searchResults, true ); + this.app.setVisibility(hideOperations, true ); } } @@ -333,9 +314,9 @@ class OperationsWaiter { search.value = ''; } - this.setVisibility(categories, false ); - this.setVisibility(searchResults, false ); - this.setVisibility(resetOperations, false ); + this.app.setVisibility(categories, false ); + this.app.setVisibility(searchResults, false ); + this.app.setVisibility(resetOperations, false ); } /**