From c58c860ad37d7666d8ba1b73c1896cdddb17261c Mon Sep 17 00:00:00 2001 From: Theodore Kruczek Date: Sun, 21 Jan 2024 07:52:06 -0500 Subject: [PATCH] fix: :bug: fix search bar toggle and slide in animations --- src/plugins/KeepTrackPlugin.ts | 2 +- src/plugins/countries/countries.ts | 2 +- src/plugins/missile/missilePlugin.ts | 2 +- src/plugins/sat-changes/sat-changes.ts | 2 +- .../sat-constellations/sat-constellations.ts | 2 +- src/settings/versionDate.js | 2 +- .../input-manager/keyboard-input.ts | 17 +-- src/singletons/input-manager/mouse-input.ts | 4 +- src/singletons/mobileManager.ts | 6 +- src/singletons/orbitManager.ts | 2 +- src/singletons/search-manager.ts | 108 +++++++++--------- 11 files changed, 71 insertions(+), 78 deletions(-) diff --git a/src/plugins/KeepTrackPlugin.ts b/src/plugins/KeepTrackPlugin.ts index 80b7fbf26..b0b9a224d 100644 --- 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 index 546be0e89..c62aa91d0 100644 --- 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 index 740969f67..8a0604285 100644 --- 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 index d6a50245d..dec2f9fc5 100644 --- 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 index 7ca2f5e56..2ffaf081d 100644 --- 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 index 1e9d167f4..ee2b3771d 100644 --- 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 index 977e211fc..59a31d61a 100644 --- 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 ((keepTrackApi.getPlugin(DebugMenuPlugin)).isErudaVisible) { + if (keepTrackApi.getPlugin(DebugMenuPlugin).isErudaVisible) { eruda.hide(); - (keepTrackApi.getPlugin(DebugMenuPlugin)).isErudaVisible = false; + keepTrackApi.getPlugin(DebugMenuPlugin).isErudaVisible = false; } else { eruda.show(); - (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 index 8f839564c..075c2acb2 100644 --- 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)) { - (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 index 812cf0d76..98fe616bd 100644 --- 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 index d9325935f..f0047a773 100644 --- 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 index c7e177acf..7aab51370 100644 --- 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_ = 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 = (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 = 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 = 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 = 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); } } }