kedyou: make specific event for manual close button on virtual keyboard

kedyou · Jun 18, 2023 · 7352a64 · 7352a64
1 parent a87839f
commit 7352a64
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 3 deletions.
diff --git a/src/public/virtual-keyboard.ts b/src/public/virtual-keyboard.ts
@@ -248,6 +248,7 @@ export interface MathfieldProxy {
 export interface VirtualKeyboardInterface extends VirtualKeyboardOptions {
   show(options?: { animate: boolean }): void;
   hide(options?: { animate: boolean }): void;
+  manualClose(options?: { animate: boolean }): void;
   visible: boolean;
   readonly isShifted: boolean;
   readonly boundingRect: DOMRect;
@@ -286,6 +287,7 @@ export type VirtualKeyboardMessageAction =
   | 'execute-command' // From proxy to VK
   | 'show' // From proxy to VK
   | 'hide' // From proxy to VK
+  | 'manual-close' // From proxy to VK
   | 'update-setting' // From proxy to VK
   | 'update-toolbar' // From proxy to VK
   | 'synchronize-proxy' // From VK to proxy

diff --git a/src/virtual-keyboard/commands.ts b/src/virtual-keyboard/commands.ts
@@ -39,6 +39,10 @@ register(
       window.mathVirtualKeyboard.show({ animate: true });
       return false;
     },
+    closeVirtualKeyboard: () => {
+      window.mathVirtualKeyboard.manualClose();
+      return false;
+    },
   },
   { target: 'virtual-keyboard' }
 );
diff --git a/src/virtual-keyboard/proxy.ts b/src/virtual-keyboard/proxy.ts
@@ -90,6 +90,10 @@ export class VirtualKeyboardProxy
     this.sendMessage('hide', options);
   }
 
+  manualClose(options?: { animate: boolean } | undefined): void {
+    this.sendMessage('manual-close', options);
+  }
+
   get isShifted(): boolean {
     return this._isShifted;
   }

diff --git a/src/virtual-keyboard/utils.ts b/src/virtual-keyboard/utils.ts
@@ -304,7 +304,7 @@ export function makeEditToolbar(
   if (mathfield.selectionIsCollapsed) availableActions.push('undo', 'redo');
   else availableActions.push('cutToClipboard', 'copyToClipboard');
 
-  availableActions.push('pasteFromClipboard', 'hideVirtualKeyboard');
+  availableActions.push('pasteFromClipboard', 'closeVirtualKeyboard');
 
   const actionsMarkup = {
     undo: `<div class='action ${mathfield.canUndo === false ? 'disabled' : ''}'
@@ -338,9 +338,9 @@ export function makeEditToolbar(
             <svg><use xlink:href='#svg-paste' /></svg>
         </div>
     `,
-    hideVirtualKeyboard: `
+    closeVirtualKeyboard: `
 				<div class='action'
-						data-command='"hideVirtualKeyboard"'
+						data-command='"closeVirtualKeyboard"'
 						data-tooltip='${l10n('tooltip.close')}'
 						style="font-size:200%;line-height:0"
 				>&times;</div>

diff --git a/src/virtual-keyboard/virtual-keyboard.ts b/src/virtual-keyboard/virtual-keyboard.ts
@@ -333,6 +333,20 @@ export class VirtualKeyboard implements VirtualKeyboardInterface, EventTarget {
     return !event.defaultPrevented;
   }
 
+  /**
+   * Fire a specific event for when the close button is clicked on the virtual keyboard
+   */
+  manualClose({ animate = false } = {}): void {
+    this.hide({ animate });
+    this.dispatchEvent(
+      new Event('manual-close', {
+        bubbles: true,
+        cancelable: false,
+        composed: true,
+      })
+    );
+  }
+
   removeEventListener(
     type: string,
     callback: EventListenerOrEventListenerObject | null,