[#181] move setVisibility to App.mjs since it's pretty generic and could be reused. Update TODO

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;

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

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.app.setVisibility(categories, true);
-            this.setVisibility(hideOperations, 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.app.setVisibility(categories, true);
-                this.setVisibility(hideOperations, true);
+                this.app.setVisibility(hideOperations, true);
             } else {
-                this.setVisibility(categories, false );
+                this.app.setVisibility(categories, false );
-                this.setVisibility(searchResults, true );
+                this.app.setVisibility(searchResults, true );
-                this.setVisibility(hideOperations, true );
+                this.app.setVisibility(hideOperations, true );
             }
         }
 
@@ -333,9 +314,9 @@ class OperationsWaiter {
             search.value = '';
         }
 
-        this.setVisibility(categories, false );
+        this.app.setVisibility(categories, false );
-        this.setVisibility(searchResults, false );
+        this.app.setVisibility(searchResults, false );
-        this.setVisibility(resetOperations, false );
+        this.app.setVisibility(resetOperations, false );
     }
 
     /**