chore(web): modularizes app/browser's touch-based language menu

keymanapp · May 16, 2023 · 6a68e4f · 6a68e4f
1 parent 00f8e3c
commit 6a68e4f
Show file tree

Hide file tree

Showing 9 changed files with 679 additions and 653 deletions.
diff --git a/web/src/app/browser/src/languageMenu.ts b/web/src/app/browser/src/languageMenu.ts
diff --git a/web/src/app/browser/src/oskConfiguration.ts b/web/src/app/browser/src/oskConfiguration.ts
@@ -2,14 +2,15 @@ import { type KeyElement, OSKView, VisualKeyboard } from "keyman/engine/osk";
 import { KEYMAN_VERSION } from "@keymanapp/keyman-version";
 import ContextManager from "./contextManager.js";
 import { KeymanEngine } from "./keymanEngine.js";
+import { LanguageMenu } from "./languageMenu.js";
 
 export function setupOskListeners(engine: KeymanEngine, osk: OSKView, contextManager: ContextManager) {
   const focusAssistant = contextManager.focusAssistant;
 
   osk.on('globeKey', (key, on) => { // K_LOPT
     if(on) {
       if(osk.hostDevice.touchable) {
-        this.lgMenu = new LanguageMenu(com.keyman.singleton);
+        this.lgMenu = new LanguageMenu(engine);
         this.lgMenu.show();
       }
     }

diff --git a/web/src/app/browser/src/utils/createElement.ts b/web/src/app/browser/src/utils/createElement.ts
@@ -0,0 +1,15 @@
+// Found a bit of magic formatting that allows dynamic return typing for a specified element tag!
+export function _CreateElement<E extends "p"|"style"|"script"|"div"|"canvas"|"span">(nodeName:E) {
+  const e = document.createElement<E>(nodeName);
+  e.style.userSelect="none";
+
+  // @ts-ignore
+  e.style.MozUserSelect="none";
+  // @ts-ignore
+  e.style.KhtmlUserSelect="none";
+  // @ts-ignore
+  e.style.UserSelect="none";
+  // @ts-ignore
+  e.style.WebkitUserSelect="none";
+  return e;
+}
diff --git a/web/src/app/browser/src/utils/getStyleValue.ts b/web/src/app/browser/src/utils/getStyleValue.ts
@@ -0,0 +1,21 @@
+/**
+ * Get browser-independent computed style value for element
+ *
+ * @param       {Element}     e             HTML element
+ * @param       {string}      s             CSS style name
+ * @return      {*}
+ */
+export function getStyleValue(e:HTMLElement, s:string) {
+  // Build 349: error trap added, since on iOS, getPropertyValue may fail
+  // and crash in some cases, possibly if passed a text node
+  try
+  {
+    if(e && (typeof(window.getComputedStyle) != 'undefined')) {
+        return window.getComputedStyle(e,'').getPropertyValue(s);
+    }
+  }
+  catch(ex){}
+
+  // Return empty string if unable to get style value
+  return '';
+}
diff --git a/web/src/app/browser/src/utils/getViewportScale.ts b/web/src/app/browser/src/utils/getViewportScale.ts
@@ -0,0 +1,42 @@
+
+/**
+ * Get viewport scale factor for this document
+ *
+ * @return      {number}
+ */
+export function getViewportScale(): number {
+  // This can sometimes fail with some browsers if called before document defined,
+  // so catch the exception
+  try {
+    // For emulation of iOS on a desktop device, use a default value
+    if(this.device.formFactor == 'desktop') {
+      return 1;
+    }
+
+    // Get viewport width
+    var viewportWidth = document.documentElement.clientWidth;
+
+    // Return a default value if screen width is greater than the viewport width (not fullscreen).
+    if(screen.width > viewportWidth) {
+      return 1;
+    }
+
+    // Get the orientation corrected screen width
+    var screenWidth = screen.width;
+    if(this.landscapeView()) {
+      // Take larger of the two dimensions
+      if(screen.width < screen.height) {
+        screenWidth = screen.height;
+      }
+    } else {
+      // Take smaller of the two dimensions
+      if(screen.width > screen.height) {
+        screenWidth = screen.height;
+      }
+    }
+    // Calculate viewport scale
+    return Math.round(100*screenWidth / viewportWidth)/100;
+  } catch(ex) {
+    return 1;
+  }
+}
diff --git a/web/src/app/browser/src/utils/index.ts b/web/src/app/browser/src/utils/index.ts
@@ -0,0 +1,3 @@
+export { _CreateElement } from './createElement.js';
+export { getStyleValue } from './getStyleValue.js';
+export { getViewportScale } from './getViewportScale.js';
diff --git a/web/src/engine/namespaced-main/kmwutils.ts b/web/src/engine/namespaced-main/kmwutils.ts
@@ -117,17 +117,6 @@ namespace com.keyman {
       return false;
     }
 
-    // Found a bit of magic formatting that allows dynamic return typing for a specified element tag!
-    _CreateElement<E extends "p"|"style"|"script"|"div"|"canvas"|"span">(nodeName:E) {
-      const e = document.createElement<E>(nodeName);
-
-      e.style.MozUserSelect="none";
-      e.style.KhtmlUserSelect="none";
-      e.style.UserSelect="none";
-      e.style.WebkitUserSelect="none";
-      return e;
-    }
-
         /**
      * Function     _CancelMouse
      * Scope        Private
@@ -146,30 +135,6 @@ namespace com.keyman {
       return false;
     }
 
-    createElement = this._CreateElement;
-
-    /**
-     * Get browser-independent computed style value for element
-     *
-     * @param       {Element}     e             HTML element
-     * @param       {string}      s             CSS style name
-     * @return      {*}
-     */
-    getStyleValue(e:HTMLElement, s:string) {
-      // Build 349: error trap added, since on iOS, getPropertyValue may fail
-      // and crash in some cases, possibly if passed a text node
-      try
-      {
-        if(e && (typeof(window.getComputedStyle) != 'undefined')) {
-            return window.getComputedStyle(e,'').getPropertyValue(s);
-        }
-      }
-      catch(ex){}
-
-      // Return empty string if unable to get style value
-      return '';
-    }
-
     /**
      * Get browser-independent computed style integer value for element  (Build 349)
      *
@@ -231,48 +196,6 @@ namespace com.keyman {
       }
     }
 
-    /**
-     * Get viewport scale factor for this document
-     *
-     * @return      {number}
-     */
-    getViewportScale(): number {
-      // This can sometimes fail with some browsers if called before document defined,
-      // so catch the exception
-      try {
-        // For emulation of iOS on a desktop device, use a default value
-        if(this.device.formFactor == 'desktop') {
-          return 1;
-        }
-
-        // Get viewport width
-        var viewportWidth = document.documentElement.clientWidth;
-
-        // Return a default value if screen width is greater than the viewport width (not fullscreen).
-        if(screen.width > viewportWidth) {
-          return 1;
-        }
-
-        // Get the orientation corrected screen width
-        var screenWidth = screen.width;
-        if(this.landscapeView()) {
-          // Take larger of the two dimensions
-          if(screen.width < screen.height) {
-            screenWidth = screen.height;
-          }
-        } else {
-          // Take smaller of the two dimensions
-          if(screen.width > screen.height) {
-            screenWidth = screen.height;
-          }
-        }
-        // Calculate viewport scale
-        return Math.round(100*screenWidth / viewportWidth)/100;
-      } catch(ex) {
-        return 1;
-      }
-    }
-
     /**
      * Return height of URL bar on mobile devices, if visible
      * TODO: This does not seem to be right, so is not currently used