diff --git a/android/app/src/main/AndroidManifest.xml b/android/app/src/main/AndroidManifest.xml index 592a833b..7f2554b1 100644 --- a/android/app/src/main/AndroidManifest.xml +++ b/android/app/src/main/AndroidManifest.xml @@ -1,7 +1,7 @@ - + diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 009a88b7..c285a323 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -22,6 +22,7 @@ import {environment} from '../environments/environment'; import {StatusBar, Style} from '@capacitor/status-bar'; import {Capacitor} from '@capacitor/core'; import {ScheduleSyncService} from './modules/background/schedule/schedule-sync.service'; +import {Keyboard, KeyboardResize} from '@capacitor/keyboard'; /** * TODO @@ -45,6 +46,11 @@ export class AppComponent implements AfterContentInit { title: string; }>; + /** + * Angular component selectors that should not infulence keyboard state + */ + ommitedEventSources = ['ion-input', 'ion-searchbar']; + /** * * @param platform TODO @@ -104,6 +110,11 @@ export class AppComponent implements AfterContentInit { 'others', ]); }); + + window.addEventListener('touchmove', this.touchMoveEvent, true); + if (Capacitor.isNativePlatform()) { + Keyboard.setResizeMode({mode: KeyboardResize.None}); + } } private async authNotificationsInit() { @@ -129,4 +140,30 @@ export class AppComponent implements AfterContentInit { }); await toast.present(); } + + /** + * Checks if keyboard should be dissmissed + */ + touchMoveEvent = (event: Event): void => { + if ( + this.ommitedEventSources.includes( + (event?.target as unknown as Record)?.[ + 's-hn' + ]?.toLowerCase(), + ) + ) { + return; + } + this.unfocusActiveElement(); + }; + + /** + * Loses focus on the currently active element (meant for input fields). + * Results in virtual keyboard being dissmissed on native and web plattforms. + */ + unfocusActiveElement() { + const activeElement = document.activeElement; + // eslint-disable-next-line @typescript-eslint/no-explicit-any + (activeElement as any)?.blur(); + } } diff --git a/src/app/modules/dashboard/dashboard.component.html b/src/app/modules/dashboard/dashboard.component.html index f70340d5..193c6649 100644 --- a/src/app/modules/dashboard/dashboard.component.html +++ b/src/app/modules/dashboard/dashboard.component.html @@ -50,7 +50,10 @@ - + diff --git a/src/app/modules/dashboard/dashboard.component.ts b/src/app/modules/dashboard/dashboard.component.ts index 8157993d..2cb81577 100644 --- a/src/app/modules/dashboard/dashboard.component.ts +++ b/src/app/modules/dashboard/dashboard.component.ts @@ -52,6 +52,8 @@ export class DashboardComponent implements OnInit, OnDestroy { @ViewChild('schedule', {read: ElementRef}) scheduleRef: ElementRef; + @ViewChild('search', {read: ElementRef}) searchRef: ElementRef; + @ViewChild('ionContent') ionContentRef: IonContent; collapseAnimation: DashboardCollapse; @@ -88,6 +90,11 @@ export class DashboardComponent implements OnInit, OnDestroy { }, }; + /** + * Offset from search bar to top + */ + searchToTopOffset = 0; + constructor( private readonly dataRoutingService: DataRoutingService, private scheduleProvider: ScheduleProvider, @@ -121,6 +128,11 @@ export class DashboardComponent implements OnInit, OnDestroy { ); } + ionViewDidEnter() { + this.searchToTopOffset = + this.searchRef.nativeElement?.getBoundingClientRect().top - 100; + } + async loadNextEvent() { const dataSeries = await this.scheduleProvider.getDateSeries( this.uuids, @@ -142,4 +154,15 @@ export class DashboardComponent implements OnInit, OnDestroy { this._uuidSubscription.unsubscribe(); this.collapseAnimation.destroy(); } + + async onSearchBarFocus(_event: Event) { + this.ionContentRef.getScrollElement().then(element => { + if ( + element.scrollHeight - element.clientHeight >= + this.searchToTopOffset + ) { + this.ionContentRef.scrollToPoint(0, this.searchToTopOffset, 100); + } + }); + } } diff --git a/src/app/modules/dashboard/sections/search-section/search-section.component.html b/src/app/modules/dashboard/sections/search-section/search-section.component.html index 0cd4964c..e94375c9 100644 --- a/src/app/modules/dashboard/sections/search-section/search-section.component.html +++ b/src/app/modules/dashboard/sections/search-section/search-section.component.html @@ -20,9 +20,11 @@