MOBILE-4842 keyboard: Change keyboard events to signals

Author: crazyserver

src/core/features/comments/pages/viewer/viewer.ts

@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Component, OnDestroy, OnInit, ViewChild, AfterViewInit, inject } from '@angular/core';
+import { Component, OnDestroy, OnInit, ViewChild, AfterViewInit, effect, inject } from '@angular/core';
 import { CoreEventObserver, CoreEvents } from '@singletons/events';
 import { ActivatedRoute } from '@angular/router';
 import { CoreSites } from '@services/sites';
@@ -49,6 +49,7 @@ import { CoreDom } from '@singletons/dom';
 import { CoreSharedModule } from '@/core/shared.module';
 import { ADDON_MOD_ASSIGN_COMMENTS_COMPONENT_NAME } from '@addons/mod/assign/submission/comments/constants';
 import { CoreCourses } from '@features/courses/services/courses';
+import { CoreKeyboard } from '@singletons/keyboard';
 
 /**
  * Page that displays comments.
@@ -93,7 +94,6 @@ export default class CoreCommentsViewerPage implements OnInit, OnDestroy, AfterV
     protected addDeleteCommentsAvailable = false;
     protected syncObserver?: CoreEventObserver;
     protected onlineObserver: Subscription;
-    protected keyboardObserver: CoreEventObserver;
     protected viewDestroyed = false;
     protected scrollBottom = true;
     protected scrollElement?: HTMLElement;
@@ -128,9 +128,11 @@ export default class CoreCommentsViewerPage implements OnInit, OnDestroy, AfterV
             });
         });
 
-        this.keyboardObserver = CoreEvents.on(CoreEvents.KEYBOARD_CHANGE, (keyboardHeight: number) => {
-            // Force when opening.
-            this.scrollToBottom(keyboardHeight > 0);
+        effect(() => {
+            const shown = CoreKeyboard.getKeyboardShownSignal();
+
+            /// Force when opening.
+            this.scrollToBottom(shown());
         });
     }
 
@@ -700,7 +702,6 @@ export default class CoreCommentsViewerPage implements OnInit, OnDestroy, AfterV
         this.syncObserver?.off();
         this.onlineObserver.unsubscribe();
         this.viewDestroyed = true;
-        this.keyboardObserver.off();
     }
 
 }

src/core/features/editor/components/rich-text-editor/rich-text-editor.ts

@@ -25,6 +25,7 @@ import {
     Output,
     EventEmitter,
     inject,
+    effect,
 } from '@angular/core';
 import { IonContent } from '@ionic/angular';
 import { CoreSharedModule } from '@/core/shared.module';
@@ -50,6 +51,7 @@ import { CoreLoadingComponent } from '@components/loading/loading';
 import { CoreToasts } from '@services/overlays/toasts';
 import { CorePromiseUtils } from '@singletons/promise-utils';
 import { convertTextToHTMLElement } from '@/core/utils/create-html-element';
+import { CoreKeyboard } from '@singletons/keyboard';
 
 /**
  * Component that displays a rich text editor.
@@ -85,7 +87,6 @@ export class CoreEditorRichTextEditorComponent implements AfterViewInit, OnDestr
 
     @ViewChild(CoreDynamicComponent) dynamicComponent!: CoreDynamicComponent<CoreEditorBaseComponent>;
 
-    protected keyboardObserver?: CoreEventObserver;
     protected resizeListener?: CoreEventObserver;
     protected editorComponentClass?: Type<CoreEditorBaseComponent>;
     protected editorComponentData: Record<string, unknown> = {};
@@ -107,6 +108,15 @@ export class CoreEditorRichTextEditorComponent implements AfterViewInit, OnDestr
     constructor() {
          // Generate a "unique" ID based on timestamp.
         this.pageInstance = `app_${Date.now()}`;
+
+        effect(() => {
+            // Signal will be triggered when the keyboard is shown or hidden.
+            CoreKeyboard.getKeyboardShownSignal();
+
+            // Opening or closing the keyboard also calls the resize function, but sometimes the resize is called too soon.
+            // Check the height again, now the window height should have been updated.
+            this.maximizeEditorSize();
+        });
     }
 
     /**
@@ -188,20 +198,13 @@ export class CoreEditorRichTextEditorComponent implements AfterViewInit, OnDestr
         this.controlSubscription = this.control?.valueChanges.subscribe((newValue) => {
             this.onControlValueChange(newValue);
         });
-
-        // Opening or closing the keyboard also calls the resize function, but sometimes the resize is called too soon.
-        // Check the height again, now the window height should have been updated.
-        this.keyboardObserver = CoreEvents.on(CoreEvents.KEYBOARD_CHANGE, () => {
-            this.maximizeEditorSize();
-        });
     }
 
     /**
      * @inheritdoc
      */
     ngOnDestroy(): void {
         this.resizeListener?.off();
-        this.keyboardObserver?.off();
         this.controlSubscription?.unsubscribe();
         this.resetObserver?.off();
         this.labelObserver?.disconnect();

src/core/features/mainmenu/pages/menu/menu.ts

@@ -12,7 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
-import { Component, OnInit, OnDestroy, ViewChild } from '@angular/core';
+import { Component, OnInit, OnDestroy, ViewChild, effect } from '@angular/core';
 import { IonTabs } from '@ionic/angular';
 import { BackButtonEvent } from '@ionic/core';
 import { Subscription } from 'rxjs';
@@ -44,6 +44,7 @@ import {
 import { CoreSharedModule } from '@/core/shared.module';
 import { CoreMainMenuUserButtonComponent } from '../../components/user-menu-button/user-menu-button';
 import { BackButtonPriority } from '@/core/constants';
+import { CoreKeyboard } from '@singletons/keyboard';
 
 const ANIMATION_DURATION = 500;
 
@@ -119,6 +120,22 @@ export default class CoreMainMenuPage implements OnInit, OnDestroy {
                 this.isMainScreen = !this.mainTabs?.outlet.canGoBack();
                 this.updateVisibility();
             });
+
+        if (CorePlatform.isIOS()) {
+            effect(() => {
+                const shown = CoreKeyboard.getKeyboardShownSignal();
+                // In iOS, the resize event is triggered before the keyboard is opened/closed and not triggered again once done.
+                // Init handlers again once keyboard is closed since the resize event doesn't have the updated height.
+                if (!shown) {
+                    this.updateHandlers();
+
+                    // If the device is slow it can take a bit more to update the window height. Retry in a few ms.
+                    setTimeout(() => {
+                        this.updateHandlers();
+                    }, 250);
+                }
+            });
+        }
     }
 
     /**
@@ -150,20 +167,6 @@ export default class CoreMainMenuPage implements OnInit, OnDestroy {
         });
         document.addEventListener('ionBackButton', this.backButtonFunction);
 
-        if (CorePlatform.isIOS()) {
-            // In iOS, the resize event is triggered before the keyboard is opened/closed and not triggered again once done.
-            // Init handlers again once keyboard is closed since the resize event doesn't have the updated height.
-            this.keyboardObserver = CoreEvents.on(CoreEvents.KEYBOARD_CHANGE, (kbHeight: number) => {
-                if (kbHeight === 0) {
-                    this.updateHandlers();
-
-                    // If the device is slow it can take a bit more to update the window height. Retry in a few ms.
-                    setTimeout(() => {
-                        this.updateHandlers();
-                    }, 250);
-                }
-            });
-        }
         CoreEvents.trigger(CoreEvents.MAIN_HOME_LOADED);
     }
 

src/core/initializers/subscribe-to-keyboard-events.ts

@@ -25,6 +25,6 @@ export default function(): void {
     // Execute callbacks in the Angular zone, so change detection doesn't stop working.
     keyboard.onKeyboardShow().subscribe(data => zone.run(() => CoreKeyboard.onKeyboardShow(data.keyboardHeight)));
     keyboard.onKeyboardHide().subscribe(() => zone.run(() => CoreKeyboard.onKeyboardHide()));
-    keyboard.onKeyboardWillShow().subscribe(() => zone.run(() => CoreKeyboard.onKeyboardWillShow()));
+    keyboard.onKeyboardWillShow().subscribe((data) => zone.run(() => CoreKeyboard.onKeyboardWillShow(data.keyboardHeight)));
     keyboard.onKeyboardWillHide().subscribe(() => zone.run(() => CoreKeyboard.onKeyboardWillHide()));
 }

src/core/services/app.ts

@@ -90,7 +90,7 @@ export class CoreAppProvider {
     /**
      * Closes the keyboard.
      *
-     * @deprecated sinde 4.5.0. Use CoreKeyboard.closeKeyboard instead.
+     * @deprecated since 4.5.0. Use CoreKeyboard.closeKeyboard instead.
      */
     closeKeyboard(): void {
         CoreKeyboard.close();

src/core/singletons/events.ts

@@ -107,6 +107,9 @@ export class CoreEvents {
     static readonly IAB_MESSAGE = 'inappbrowser_message';
     static readonly APP_LAUNCHED_URL = 'app_launched_url'; // App opened with a certain URL (custom URL scheme).
     static readonly FILE_SHARED = 'file_shared';
+    /**
+     * @deprecated since 5.0.0. Use CoreKeyboard.getKeyboardShownSignal signal.
+     */
     static readonly KEYBOARD_CHANGE = 'keyboard_change';
     static readonly ORIENTATION_CHANGE = 'orientation_change';
     static readonly SEND_ON_ENTER_CHANGED = 'send_on_enter_changed';

src/core/singletons/keyboard.ts

@@ -12,6 +12,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 
+import { effect, Signal, signal } from '@angular/core';
 import { CorePlatform } from '@services/platform';
 import { Keyboard } from '@singletons';
 import { CoreEvents } from '@singletons/events';
@@ -21,13 +22,16 @@ import { CoreEvents } from '@singletons/events';
  */
 export class CoreKeyboard {
 
-    protected static isKeyboardShown = false;
-    protected static keyboardOpening = false;
-    protected static keyboardClosing = false;
+    protected static readonly IS_KEYBOARD_SHOWN = signal(false);
+    protected static readonly KEYBOARD_OPENING = signal(false);
+    protected static readonly KEYBOARD_CLOSING = signal(false);
+    protected static readonly KEYBOARD_HEIGHT = signal(0);
 
     // Avoid creating singleton instances.
     private constructor() {
-        // Nothing to do.
+        effect(() => {
+            document.body.classList.toggle('keyboard-is-open', CoreKeyboard.IS_KEYBOARD_SHOWN());
+        });
     }
 
     /**
@@ -49,53 +53,80 @@ export class CoreKeyboard {
         }
     }
 
+    /**
+     * Get a signal that indicates whether the keyboard is shown or not.
+     *
+     * @returns Signal indicating whether the keyboard is shown.
+     */
+    static getKeyboardShownSignal(): Signal<boolean> {
+        return CoreKeyboard.IS_KEYBOARD_SHOWN.asReadonly();
+    }
+
+    /**
+     * Get a signal that indicates the keyboard height.
+     *
+     * @returns Signal indicating the keyboard height.
+     */
+    static getKeyboardHeightSignal(): Signal<number> {
+        return CoreKeyboard.KEYBOARD_HEIGHT.asReadonly();
+    }
+
     /**
      * Notify that Keyboard has been shown.
      *
      * @param keyboardHeight Keyboard height.
      */
     static onKeyboardShow(keyboardHeight: number): void {
-        document.body.classList.add('keyboard-is-open');
-        CoreKeyboard.setKeyboardShown(true);
         // Error on iOS calculating size.
-        // More info: https://github.com/ionic-team/ionic-plugin-keyboard/issues/276 .
-        CoreEvents.trigger(CoreEvents.KEYBOARD_CHANGE, keyboardHeight);
+        // More info: https://github.com/ionic-team/ionic-plugin-keyboard/issues/276
+        CoreKeyboard.setKeyboardShown(true, keyboardHeight);
     }
 
     /**
      * Notify that Keyboard has been hidden.
      */
     static onKeyboardHide(): void {
-        document.body.classList.remove('keyboard-is-open');
-        CoreKeyboard.setKeyboardShown(false);
-        CoreEvents.trigger(CoreEvents.KEYBOARD_CHANGE, 0);
+        CoreKeyboard.setKeyboardShown(false, 0);
     }
 
     /**
      * Notify that Keyboard is about to be shown.
+     *
+     * @param keyboardHeight Keyboard height.
      */
-    static onKeyboardWillShow(): void {
-        CoreKeyboard.keyboardOpening = true;
-        CoreKeyboard.keyboardClosing = false;
+    static onKeyboardWillShow(keyboardHeight?: number): void {
+        CoreKeyboard.KEYBOARD_OPENING.set(true);
+        CoreKeyboard.KEYBOARD_CLOSING.set(false);
+
+        if (keyboardHeight !== undefined) {
+            this.KEYBOARD_HEIGHT.set(keyboardHeight);
+        }
     }
 
     /**
      * Notify that Keyboard is about to be hidden.
      */
     static onKeyboardWillHide(): void {
-        CoreKeyboard.keyboardOpening = false;
-        CoreKeyboard.keyboardClosing = true;
+        CoreKeyboard.KEYBOARD_OPENING.set(false);
+        CoreKeyboard.KEYBOARD_CLOSING.set(true);
+
+        this.KEYBOARD_HEIGHT.set(0);
     }
 
     /**
      * Set keyboard shown or hidden.
      *
      * @param shown Whether the keyboard is shown or hidden.
+     * @param keyboardHeight Keyboard height.
      */
-    protected static setKeyboardShown(shown: boolean): void {
-        CoreKeyboard.isKeyboardShown = shown;
-        CoreKeyboard.keyboardOpening = false;
-        CoreKeyboard.keyboardClosing = false;
+    protected static setKeyboardShown(shown: boolean, keyboardHeight: number): void {
+        CoreKeyboard.IS_KEYBOARD_SHOWN.set(shown);
+        CoreKeyboard.KEYBOARD_OPENING.set(false);
+        CoreKeyboard.KEYBOARD_CLOSING.set(false);
+        this.KEYBOARD_HEIGHT.set(keyboardHeight);
+
+        // eslint-disable-next-line @typescript-eslint/no-deprecated
+        CoreEvents.trigger(CoreEvents.KEYBOARD_CHANGE, keyboardHeight);
     }
 
     /**
@@ -104,7 +135,7 @@ export class CoreKeyboard {
      * @returns Whether keyboard is closing (animating).
      */
     static isKeyboardClosing(): boolean {
-        return CoreKeyboard.keyboardClosing;
+        return CoreKeyboard.KEYBOARD_CLOSING();
     }
 
     /**
@@ -113,7 +144,7 @@ export class CoreKeyboard {
      * @returns Whether keyboard is opening (animating).
      */
     static isKeyboardOpening(): boolean {
-        return CoreKeyboard.keyboardOpening;
+        return CoreKeyboard.KEYBOARD_OPENING();
     }
 
     /**
@@ -122,7 +153,7 @@ export class CoreKeyboard {
      * @returns Whether keyboard is visible.
      */
     static isKeyboardVisible(): boolean {
-        return CoreKeyboard.isKeyboardShown;
+        return CoreKeyboard.IS_KEYBOARD_SHOWN();
     }
 
 }