fix: 🐛 fix search bar toggle and slide in animations

thkruz · Jan 21, 2024 · c58c860 · c58c860
1 parent 61c93d3
commit c58c860
Show file tree

Hide file tree

Showing 11 changed files with 71 additions and 78 deletions.
diff --git a/src/plugins/KeepTrackPlugin.ts b/src/plugins/KeepTrackPlugin.ts
@@ -523,7 +523,7 @@ export class KeepTrackPlugin {
 
   hideSideMenus(): void {
     if (settingsManager.isMobileModeEnabled) {
-      keepTrackApi.getUiManager().searchManager.searchToggle(false);
+      keepTrackApi.getUiManager().searchManager.closeSearch();
     }
     keepTrackApi.getUiManager().hideSideMenus();
     this.isMenuButtonActive = false;

diff --git a/src/plugins/countries/countries.ts b/src/plugins/countries/countries.ts
@@ -138,7 +138,7 @@ export class CountriesMenu extends KeepTrackPlugin {
     keepTrackApi.getPlugin(SelectSatManager)?.selectSat(-1);
 
     // Close Menus
-    if (settingsManager.isMobileModeEnabled) uiManagerInstance.searchManager.searchToggle(true);
+    if (settingsManager.isMobileModeEnabled) uiManagerInstance.searchManager.closeSearch();
     uiManagerInstance.hideSideMenus();
   }
 }

diff --git a/src/plugins/missile/missilePlugin.ts b/src/plugins/missile/missilePlugin.ts
@@ -36,7 +36,7 @@ export const bottomMenuClick = (iconName: string): void => {
       uiManagerInstance.hideSideMenus();
       return;
     } else {
-      if (settingsManager.isMobileModeEnabled) uiManagerInstance.searchManager.searchToggle(false);
+      if (settingsManager.isMobileModeEnabled) uiManagerInstance.searchManager.closeSearch();
       uiManagerInstance.hideSideMenus();
       slideInRight(getEl('missile-menu'), 1000);
       getEl('menu-missile').classList.add('bmenu-item-selected');

diff --git a/src/plugins/sat-changes/sat-changes.ts b/src/plugins/sat-changes/sat-changes.ts
@@ -140,7 +140,7 @@ export const bottomMenuClick = (iconName: string): void => {
       uiManagerInstance.hideSideMenus();
       return;
     } else {
-      if (settingsManager.isMobileModeEnabled) uiManagerInstance.searchManager.searchToggle(false);
+      if (settingsManager.isMobileModeEnabled) uiManagerInstance.searchManager.closeSearch();
       uiManagerInstance.hideSideMenus();
       slideInRight(getEl('satChng-menu'), 1000);
       issatChngMenuOpen = true;

diff --git a/src/plugins/sat-constellations/sat-constellations.ts b/src/plugins/sat-constellations/sat-constellations.ts
@@ -155,7 +155,7 @@ export class SatConstellations extends KeepTrackPlugin {
     uiManagerInstance.searchManager.doSearch(groupManagerInstance.groupList[groupName].ids.map((id: number) => catalogManagerInstance.getSat(id)?.sccNum).join(','));
 
     // Close Menus
-    if (settingsManager.isMobileModeEnabled) uiManagerInstance.searchManager.searchToggle(true);
+    if (settingsManager.isMobileModeEnabled) uiManagerInstance.searchManager.closeSearch();
     uiManagerInstance.hideSideMenus();
   }
 }

diff --git a/src/settings/versionDate.js b/src/settings/versionDate.js
@@ -1,2 +1,2 @@
 // THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
-export const VERSION_DATE = 'January 20, 2024';
+export const VERSION_DATE = 'January 21, 2024';
diff --git a/src/singletons/input-manager/keyboard-input.ts b/src/singletons/input-manager/keyboard-input.ts
@@ -95,10 +95,13 @@ export class KeyboardInput {
       // Open the search bar for faster searching
       // TODO: What if it isn't available?
       case 'F':
-        if (this.isShiftPressed) {
-          evt.preventDefault();
-          uiManagerInstance.searchManager.searchToggle(true);
-          getEl('search').focus();
+        evt.preventDefault();
+
+        if (this.isShiftPressed && !uiManagerInstance.searchManager.isSearchOpen) {
+          uiManagerInstance.searchManager.toggleSearch();
+          setTimeout(() => {
+            getEl('search').focus();
+          }, 1000);
           this.releaseShiftKey(keepTrackApi.getMainCamera());
         }
         break;
@@ -111,12 +114,12 @@ export class KeyboardInput {
         break;
       case 'D':
         if (this.isShiftPressed && keepTrackApi.getMainCamera().cameraType !== CameraType.FPS) {
-          if ((<DebugMenuPlugin>keepTrackApi.getPlugin(DebugMenuPlugin)).isErudaVisible) {
+          if (keepTrackApi.getPlugin(DebugMenuPlugin).isErudaVisible) {
             eruda.hide();
-            (<DebugMenuPlugin>keepTrackApi.getPlugin(DebugMenuPlugin)).isErudaVisible = false;
+            keepTrackApi.getPlugin(DebugMenuPlugin).isErudaVisible = false;
           } else {
             eruda.show();
-            (<DebugMenuPlugin>keepTrackApi.getPlugin(DebugMenuPlugin)).isErudaVisible = true;
+            keepTrackApi.getPlugin(DebugMenuPlugin).isErudaVisible = true;
           }
         }
         break;

diff --git a/src/singletons/input-manager/mouse-input.ts b/src/singletons/input-manager/mouse-input.ts
@@ -524,10 +524,10 @@ export class MouseInput {
         break;
       case 'clear-screen-rmb':
         if (keepTrackApi.getPlugin(TimeMachine)) {
-          (<TimeMachine>keepTrackApi.getPlugin(TimeMachine)).isTimeMachineRunning = false;
+          keepTrackApi.getPlugin(TimeMachine).isTimeMachineRunning = false;
         }
         uiManagerInstance.doSearch('');
-        uiManagerInstance.searchManager.searchToggle(false);
+        uiManagerInstance.searchManager.closeSearch();
         uiManagerInstance.hideSideMenus();
 
         // if (

diff --git a/src/singletons/mobileManager.ts b/src/singletons/mobileManager.ts
@@ -56,11 +56,7 @@ export class MobileManager {
             event: KeepTrackApiEvents.selectSatData,
             cbName: 'MobileManager.selectSatData',
             cb: () => {
-              const searchManager = keepTrackApi.getUiManager().searchManager;
-
-              if (searchManager.isResultsOpen) {
-                searchManager.searchToggle(false);
-              }
+              keepTrackApi.getUiManager().searchManager.closeSearch();
             },
           });
 

diff --git a/src/singletons/orbitManager.ts b/src/singletons/orbitManager.ts
@@ -244,7 +244,7 @@ export class OrbitManager {
   updateAllVisibleOrbits(): void {
     const uiManagerInstance = keepTrackApi.getUiManager();
 
-    if (uiManagerInstance.searchManager.isResultsOpen() && !settingsManager.disableUI && !settingsManager.lowPerf) {
+    if (uiManagerInstance.searchManager.isResultsOpen && !settingsManager.disableUI && !settingsManager.lowPerf) {
       const currentSearchSats = uiManagerInstance.searchManager.getLastResultGroup()?.ids;
       if (typeof currentSearchSats !== 'undefined') {
         if (this.updateAllThrottle_ >= currentSearchSats.length) this.updateAllThrottle_ = 0;

diff --git a/src/singletons/search-manager.ts b/src/singletons/search-manager.ts
@@ -38,12 +38,10 @@ export enum SearchResultType {
  * about the current search state.
  */
 export class SearchManager {
-  private resultsOpen_ = false;
+  isSearchOpen = false;
+  isResultsOpen = false;
   private lastResultGroup_ = <ObjectGroup>null;
   private uiManager_: UiManager;
-  private isSearchOpen = false;
-  private forceClose = false;
-  private forceOpen = false;
 
   constructor(uiManager: UiManager) {
     this.uiManager_ = uiManager;
@@ -73,7 +71,6 @@ export class SearchManager {
         keepTrackApi.getPlugin(SelectSatManager)?.selectSat(satId);
       }
     });
-
     getEl('search-results')?.addEventListener('mouseover', (evt) => {
       let satId = SearchManager.getSatIdFromSearchResults_(evt);
       if (isNaN(satId) || satId === -1) return;
@@ -85,14 +82,17 @@ export class SearchManager {
       keepTrackApi.getHoverManager().setHoverId(-1);
       this.uiManager_.searchHoverSatId = -1;
     });
-
     getEl('search')?.addEventListener('input', () => {
       const searchStr = (<HTMLInputElement>getEl('search')).value;
       this.doSearch(searchStr);
     });
-
+    getEl('search')?.addEventListener('blur', () => {
+      if (this.isSearchOpen && this.getCurrentSearch().length === 0) {
+        this.toggleSearch();
+      }
+    });
     getEl('search-icon')?.addEventListener('click', () => {
-      this.searchToggle();
+      this.toggleSearch();
     });
   }
 
@@ -122,7 +122,7 @@ export class SearchManager {
    * Returns the current search string entered by the user.
    */
   getCurrentSearch(): string {
-    if (this.resultsOpen_) {
+    if (this.isResultsOpen) {
       const searchDom = <HTMLInputElement>getEl('search', true);
       if (searchDom) {
         return searchDom.value;
@@ -132,10 +132,6 @@ export class SearchManager {
     return '';
   }
 
-  isResultsOpen(): boolean {
-    return this.resultsOpen_;
-  }
-
   /**
    * Hides the search results box and clears the selected satellite group.
    * Also updates the color scheme if necessary.
@@ -149,7 +145,7 @@ export class SearchManager {
 
       slideOutUp(getEl('search-results'), 1000);
       groupManagerInstance.clearSelect();
-      this.resultsOpen_ = false;
+      this.isResultsOpen = false;
 
       settingsManager.lastSearch = '';
       settingsManager.lastSearchResults = [];
@@ -543,7 +539,7 @@ export class SearchManager {
     if (satInfoboxDom) SatInfoBox.resetMenuLocation(satInfoboxDom, false);
 
     slideInDown(getEl('search-results'), 1000);
-    this.resultsOpen_ = true;
+    this.isResultsOpen = true;
 
     if (
       colorSchemeManagerInstance.currentColorScheme === colorSchemeManagerInstance.groupCountries ||
@@ -555,51 +551,49 @@ export class SearchManager {
     }
   }
 
-  searchToggle(force?: boolean) {
-    // Reset Force Options
-    this.forceClose = false;
-    this.forceOpen = false;
-
-    // Pass false to force close and true to force open
-    if (typeof force != 'undefined') {
-      if (!force) this.forceClose = true;
-      if (force) this.forceOpen = true;
+  toggleSearch() {
+    if (!this.isSearchOpen) {
+      this.openSearch();
+    } else {
+      this.closeSearch();
     }
+  }
 
-    if ((!this.isSearchOpen && !this.forceClose) || this.forceOpen) {
-      this.isSearchOpen = true;
-      getEl('search-holder')?.classList.remove('search-slide-up');
-      getEl('search-holder')?.classList.add('search-slide-down');
-      getEl('search-icon')?.classList.add('search-icon-search-on');
-      getEl('fullscreen-icon')?.classList.add('top-menu-icons-search-on');
-      getEl('tutorial-icon')?.classList.add('top-menu-icons-search-on');
-      getEl('legend-icon')?.classList.add('top-menu-icons-search-on');
-      getEl('sound-icon')?.classList.add('top-menu-icons-search-on');
-
-      const searchDom = <HTMLInputElement>getEl('search');
-      if (searchDom) {
-        const curSearch = searchDom.value;
-        if (curSearch.length > settingsManager.minimumSearchCharacters) {
-          this.doSearch(curSearch);
-        }
+  closeSearch(isForce = false) {
+    if (!this.isSearchOpen && !isForce) return;
+
+    this.isSearchOpen = false;
+    getEl('search-holder')?.classList.remove('search-slide-down');
+    getEl('search-holder')?.classList.add('search-slide-up');
+    getEl('search-icon')?.classList.remove('search-icon-search-on');
+    setTimeout(function () {
+      getEl('fullscreen-icon')?.classList.remove('top-menu-icons-search-on');
+      getEl('tutorial-icon')?.classList.remove('top-menu-icons-search-on');
+      getEl('legend-icon')?.classList.remove('top-menu-icons-search-on');
+      getEl('sound-icon')?.classList.remove('top-menu-icons-search-on');
+    }, 500);
+    this.uiManager_.hideSideMenus();
+    this.hideResults();
+  }
+
+  openSearch(isForce = false) {
+    if (this.isSearchOpen && !isForce) return;
+
+    this.isSearchOpen = true;
+    getEl('search-holder')?.classList.remove('search-slide-up');
+    getEl('search-holder')?.classList.add('search-slide-down');
+    getEl('search-icon')?.classList.add('search-icon-search-on');
+    getEl('fullscreen-icon')?.classList.add('top-menu-icons-search-on');
+    getEl('tutorial-icon')?.classList.add('top-menu-icons-search-on');
+    getEl('legend-icon')?.classList.add('top-menu-icons-search-on');
+    getEl('sound-icon')?.classList.add('top-menu-icons-search-on');
+
+    const searchDom = <HTMLInputElement>getEl('search');
+    if (searchDom) {
+      const curSearch = searchDom.value;
+      if (curSearch.length > settingsManager.minimumSearchCharacters) {
+        this.doSearch(curSearch);
       }
-    } else {
-      this.isSearchOpen = false;
-      getEl('search-holder')?.classList.remove('search-slide-down');
-      getEl('search-holder')?.classList.add('search-slide-up');
-      getEl('search-icon')?.classList.remove('search-icon-search-on');
-      setTimeout(function () {
-        getEl('fullscreen-icon')?.classList.remove('top-menu-icons-search-on');
-        getEl('tutorial-icon')?.classList.remove('top-menu-icons-search-on');
-        getEl('legend-icon')?.classList.remove('top-menu-icons-search-on');
-        getEl('sound-icon')?.classList.remove('top-menu-icons-search-on');
-      }, 500);
-      this.uiManager_.hideSideMenus();
-      this.hideResults();
-      // getEl('menu-space-stations').classList.remove('bmenu-item-selected');
-      // This is getting called too much. Not sure what it was meant to prevent?
-      // colorSchemeManagerInstance.setColorScheme(colorSchemeManagerInstance.default, true);
-      // this.uiManager_.colorSchemeChangeAlert(settingsManager.currentColorScheme);
     }
   }
 }