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

This commit is contained in:
Robin Scholtes 2023-04-19 23:31:06 +12:00
parent f6b23ecca5
commit 12116e53b1
3 changed files with 29 additions and 34 deletions

View file

@ -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;

View file

@ -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

View file

@ -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 );
}
/**