mirrors/CyberChef
1
0
Fork 0
mirror of https://github.com/gchq/CyberChef.git synced 2025-05-09 07:45:00 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

[#181] refactor some of the event handler in OperationsWaiter

Browse source
This commit is contained in:
Robin Scholtes 2023-04-20 19:45:37 +12:00
parent caa57aeb74
commit 3d03a31f38
2 changed files with 26 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/web/TODO.md
View file

@ -5,7 +5,7 @@
### Mobile UI: ### Mobile UI:
#### Operations: #### Operations:
- on click of `input[type="search]`, `favourites` briefly opens and closes. It should remain open until further action - on click of `input[type="search]`, `favourites` briefly opens and closes. It should remain open until further action.
- on mobile, there is almost no visual feedback when adding an operation to the recipe list. Since the recipe list is not visible like on desktop, this is very confusing UX - on mobile, there is almost no visual feedback when adding an operation to the recipe list. Since the recipe list is not visible like on desktop, this is very confusing UX
#### General mobile UX: #### General mobile UX:

46
src/web/waiters/OperationsWaiter.mjs
View file

@ -38,24 +38,17 @@ class OperationsWaiter {
searchOperations(e) { searchOperations(e) {
let ops, selected; let ops, selected;
// 'close' button in Operations component mobile UI
const closeOperationsDropdown = document.getElementById("close-operations-dropdown");
const categories = document.getElementById("categories");
const searchResults = document.getElementById("search-results");
if (e.type === "click" && !e.target.value.length){ if (e.type === "click" && !e.target.value.length){
this.app.setVisibility(categories, true); this.openOperationsDropdown();
this.app.setVisibility(closeOperationsDropdown, true);
} }
if (e.type === "keyup"){ if (e.type === "keyup"){
if ( e.target.value.length === 0 ) { const searchResults = document.getElementById("search-results");
this.app.setVisibility(categories, true);
this.app.setVisibility(closeOperationsDropdown, true); this.openOperationsDropdown();
} else {
this.app.setVisibility(categories, true ); if ( e.target.value.length !== 0 ){
this.app.setVisibility(searchResults, true ); this.app.setVisibility(searchResults, true );
this.app.setVisibility(closeOperationsDropdown, true );
} }
} }
@ -296,16 +289,27 @@ class OperationsWaiter {
/** /**
* Hide any operation lists ( #categories or #search-results ) and the reset-operations button itself, * Open operations dropdown
* clear any search input */
openOperationsDropdown(){
// 'close' icon in Operations component mobile UI
const closeOperationsDropdown = document.getElementById("close-operations-dropdown");
const categories = document.getElementById("categories");
this.app.setVisibility(categories, true);
this.app.setVisibility(closeOperationsDropdown, true);
}
/**
* Hide any operation lists ( #categories or #search-results ) and the close-operations-dropdown
* icon itself, clear any search input
*/ */
closeOperationsDropdown(){ closeOperationsDropdown(){
let search, categories, searchResults, closeOperationsDropdown; const search = document.getElementById("search");
const categories = document.getElementById( "categories");
search = document.getElementById("search"); const searchResults = document.getElementById( "search-results");
categories = document.getElementById( "categories"); const closeOperationsDropdown = document.getElementById("close-operations-dropdown");
searchResults = document.getElementById( "search-results");
closeOperationsDropdown = document.getElementById("close-operations-dropdown");
// if any input remains in #search, clear it // if any input remains in #search, clear it
if (search.value.length) { if (search.value.length) {