[#181] rename hideOperations / resetOperations to more semantic name

This commit is contained in:
Robin Scholtes 2023-04-20 19:21:15 +12:00
parent 432f2e49ee
commit caa57aeb74
4 changed files with 20 additions and 21 deletions

View file

@ -145,7 +145,7 @@ class Manager {
// Operations
this.addMultiEventListener("#search", "keyup paste search click", this.ops.searchOperations, this.ops);
this.addDynamicListener(".op-list li.operation", "dblclick", this.ops.operationDblclick, this.ops);
document.getElementById("reset-operations").addEventListener("click", this.ops.resetOperations.bind(this.ops));
document.getElementById("close-operations-dropdown").addEventListener("click", this.ops.closeOperationsDropdown.bind(this.ops));
document.getElementById("edit-favourites").addEventListener("click", this.ops.editFavouritesClick.bind(this.ops));
document.getElementById("save-favourites").addEventListener("click", this.ops.saveFavouritesClick.bind(this.ops));
document.getElementById("reset-favourites").addEventListener("click", this.ops.resetFavouritesClick.bind(this.ops));

View file

@ -203,8 +203,8 @@
<span class="pane-controls hide-on-maximised-output">
<button type="button"
class="btn bmd-btn-icon mobile-only hidden"
id="reset-operations"
title="Reset operations">
id="close-operations-dropdown"
title="Close dropdown">
<i class="material-icons">close</i>
</button>
</span>

View file

@ -20,7 +20,7 @@
border-bottom: 1px solid var(--primary-border-colour);
}
#reset-operations.hidden,
#close-operations-dropdown.hidden,
#search-results.hidden,
#categories.hidden {
z-index: -10;
@ -32,6 +32,7 @@
border-bottom: none;
}
/* On desktop UI, the dropdown is always open */
#search-results.hidden,
#categories.hidden {
z-index: initial;

View file

@ -28,6 +28,7 @@ class OperationsWaiter {
this.removeIntent = false;
}
/**
* Handler for search events.
* Finds operations which match the given search term and displays them under the search box.
@ -35,34 +36,31 @@ class OperationsWaiter {
* @param {event} e
*/
searchOperations(e) {
let ops, selected, hideOperations, categories, searchResults;
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){
categories = document.getElementById("categories");
hideOperations = document.getElementById("reset-operations");
searchResults = document.getElementById("search-results" );
this.app.setVisibility(categories, true);
this.app.setVisibility(hideOperations, true);
this.app.setVisibility(closeOperationsDropdown, true);
}
if (e.type === "keyup"){
categories = document.getElementById("categories");
hideOperations = document.getElementById("reset-operations");
searchResults = document.getElementById("search-results" );
if ( e.target.value.length === 0 ) {
this.app.setVisibility(categories, true);
this.app.setVisibility(hideOperations, true);
this.app.setVisibility(closeOperationsDropdown, true);
} else {
this.app.setVisibility(categories, true );
this.app.setVisibility(searchResults, true );
this.app.setVisibility(hideOperations, true );
this.app.setVisibility(closeOperationsDropdown, true );
}
}
if (e.type === "keyup" && e.keyCode === 27 ) { // Escape
this.resetOperations();
this.closeOperationsDropdown();
}
if (e.type === "search" || e.keyCode === 13) { // Search or Return
@ -301,13 +299,13 @@ class OperationsWaiter {
* Hide any operation lists ( #categories or #search-results ) and the reset-operations button itself,
* clear any search input
*/
resetOperations(){
let search, categories, searchResults, resetOperations;
closeOperationsDropdown(){
let search, categories, searchResults, closeOperationsDropdown;
search = document.getElementById("search");
categories = document.getElementById( "categories");
searchResults = document.getElementById( "search-results");
resetOperations = document.getElementById("reset-operations");
closeOperationsDropdown = document.getElementById("close-operations-dropdown");
// if any input remains in #search, clear it
if (search.value.length) {
@ -316,7 +314,7 @@ class OperationsWaiter {
this.app.setVisibility(categories, false );
this.app.setVisibility(searchResults, false );
this.app.setVisibility(resetOperations, false );
this.app.setVisibility(closeOperationsDropdown, false );
}
/**