From 7c024a32ed5a7e6de5eecb9e046841f23027a47c Mon Sep 17 00:00:00 2001
From: abdelrahman1234567 <abdelrahman.hossameldin.awadalla@huawei.com>
Date: Tue, 26 Aug 2025 14:54:29 +0800
Subject: [PATCH] Adding AvoidAreaChange API for servo

Implemented AvoidAreaChange API listener to pass avoid area change information to servo to help with resizing the webview to the available area on screen.

Signed-off-by: abdelrahman1234567 <abdelrahman.hossameldin.awadalla@huawei.com>
---
 entry/src/main/ets/pages/Index.ets | 43 +++++++++++++++++++++++++-----
 1 file changed, 37 insertions(+), 6 deletions(-)

diff --git a/entry/src/main/ets/pages/Index.ets b/entry/src/main/ets/pages/Index.ets
index 59937cc..34bec61 100644
--- a/entry/src/main/ets/pages/Index.ets
+++ b/entry/src/main/ets/pages/Index.ets
@@ -2,6 +2,8 @@ import { common } from '@kit.AbilityKit';
 import display from '@ohos.display';
 import deviceInfo from '@ohos.deviceInfo';
 import promptAction from '@ohos.promptAction';
+import window from '@ohos.window';
+import { BusinessError } from '@kit.BasicServicesKit';
 
 interface ServoXComponentInterface {
   loadURL(url: string): void;
@@ -12,6 +14,7 @@ interface ServoXComponentInterface {
   registerPromptToastCallback(callback: (msg: string) => void): void;
   focusWebview(index: number): void;
   initServo(options: InitOpts): void;
+  keyboardHeightChange(height: number): void;
 }
 
 interface InitOpts {
@@ -21,10 +24,10 @@ interface InitOpts {
 }
 
 function prompt_toast(msg: string) {
-    promptAction.showToast({
-      message: msg,
-      duration: 2000
-    });
+  promptAction.showToast({
+    message: msg,
+    duration: 2000
+  });
 }
 
 // Use the getShared API to obtain the LocalStorage instance shared by stage.
@@ -41,6 +44,7 @@ struct Index {
   }
 
   private context = getContext(this) as common.UIAbilityContext;
+  private mainWindow: window.Window | undefined = undefined;
   @LocalStorageProp('InitialURI') InitialURI: string = "unused"
   @LocalStorageProp('CommandlineArgs') CommandlineArgs: string = ""
   @State urlToLoad: string = this.InitialURI
@@ -54,6 +58,32 @@ struct Index {
     return true;
   }
 
+  // Setup avoid area change listener for keyboard detection
+  async setupAvoidAreaChangeListener() {
+    try {
+      if (!this.context) {
+        console.warn('Context not available, cannot setup keyboard listener');
+        return;
+      }
+
+      this.mainWindow = await window.getLastWindow(this.context);
+
+      this.mainWindow.on('avoidAreaChange', (info: window.AvoidAreaOptions) => {
+        if (info.type === window.AvoidAreaType.TYPE_KEYBOARD) {
+          const keyboardHeight: number = info.area.bottomRect?.height || 0;
+          if (this.xComponentContext) {
+            this.xComponentContext.keyboardHeightChange(keyboardHeight);
+          } else {
+            console.warn('xComponentContext not available when keyboard height changed');
+          }
+        }
+      });
+    } catch (exception) {
+      const err = exception as BusinessError;
+      console.error(`Failed to setup avoid area keyboard listener. Code: ${err.code}, message: ${err.message}`);
+    }
+  }
+
   build() {
     // We originally use `Column()` here, but for some reason the column
     // extends beyond the edge of the screen. This does not happen with
@@ -73,8 +103,8 @@ struct Index {
               this.tablist.push(this.tablist[this.tablist.length-1]+1);
             }
             // yes this is correct as we always have one tab extra
-	    // The tab extra is seperate for the initialization and will always exist.
-	    // It is not in the tablist.
+            // The tab extra is seperate for the initialization and will always exist.
+            // It is not in the tablist.
             this.currentIndex = this.tablist.length;
           })
         Button('⇦')
@@ -128,6 +158,7 @@ struct Index {
                 this.urlToLoad = new_url
               })
               this.xComponentContext.registerPromptToastCallback(prompt_toast)
+              this.setupAvoidAreaChangeListener()
             })
         }.tabBar('1')
         ForEach(this.tablist, (item: number) => {