Merge pull request #10035 from keymanapp/fix/web/getViewportScale-this

fix(web): fixes OSK viewport scaling on iOS devices
keymanapp · Nov 22, 2023 · 6b8a06a · 6b8a06a
2 parents 6f4def8 + f6e3847
commit 6b8a06a
Show file tree

Hide file tree

Showing 8 changed files with 11 additions and 50 deletions.
diff --git a/web/src/app/browser/src/languageMenu.ts b/web/src/app/browser/src/languageMenu.ts
@@ -216,7 +216,7 @@ export class LanguageMenu {
     if(device.OS == 'ios') {
       if(device.formFactor == 'phone') {
         barWidth=(landscapeView() ? 36 : 0);
-        maxHeight=(window.innerHeight-barWidth-16)*util.getViewportScale();
+        maxHeight=(window.innerHeight-barWidth-16)*util.getViewportScale(device.formFactor);
       } else if(device.formFactor == 'tablet') {
         barWidth=(landscapeView() ? 16 : 0);
         maxHeight=(maxHeight-barWidth);
@@ -316,7 +316,7 @@ export class LanguageMenu {
     langs.sort();
 
     // Get current scale factor (reciprocal of viewport scale)
-    var scale=Math.round(100/util.getViewportScale())/100;
+    var scale=Math.round(100/util.getViewportScale(device.formFactor))/100;
 
     var dx,lgBar,i,kb,activeLanguageIndex=-1;
     for(k=0; k<langs.length; k++) {

diff --git a/web/src/app/browser/src/utils/getViewportScale.ts b/web/src/app/browser/src/utils/getViewportScale.ts
diff --git a/web/src/app/browser/src/utils/index.ts b/web/src/app/browser/src/utils/index.ts
@@ -1,5 +1,5 @@
 export { AlertHost } from './alertHost.js';
 export { _CreateElement } from './createElement.js';
 export { getStyleValue } from './getStyleValue.js';
-export { getViewportScale } from './getViewportScale.js';
+export { getViewportScale } from 'keyman/engine/osk';
 export { whenDocumentReady } from './documentReady.js';
diff --git a/web/src/engine/osk/src/index.ts b/web/src/engine/osk/src/index.ts
@@ -20,6 +20,8 @@ export { type OSKKeySpec } from './keyboard-layout/oskKey.js';
 export { type default as InputEventCoordinate } from './input/inputEventCoordinate.js';
 export { type default as EmbeddedGestureConfig } from './config/embeddedGestureConfig.js';
 
+export { getViewportScale } from './screenUtils.js';
+
 export { default as Activator, StaticActivator } from './views/activator.js';
 export { default as SimpleActivator } from './views/simpleActivator.js';
 export { default as TwoStateActivator } from './views/twoStateActivator.js';

diff --git a/web/src/engine/osk/src/screenUtils.ts b/web/src/engine/osk/src/screenUtils.ts
@@ -1,16 +1,17 @@
 import { landscapeView } from "keyman/engine/dom-utils";
+import { DeviceSpec } from "@keymanapp/web-utils";
 
 /**
  * Get viewport scale factor for this document
  *
  * @return      {number}
  */
-export function getViewportScale(): number {
+export function getViewportScale(formFactor: DeviceSpec.FormFactor): 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') {
+    if(formFactor == 'desktop') {
       return 1;
     }
 

diff --git a/web/src/engine/osk/src/views/anchoredOskView.ts b/web/src/engine/osk/src/views/anchoredOskView.ts
@@ -161,7 +161,7 @@ export default class AnchoredOSKView extends OSKView {
 
     // Correct for viewport scaling (iOS - Android 4.2 does not want this, at least on Galaxy Tab 3))
     if(this.targetDevice.OS == DeviceSpec.OperatingSystem.iOS) {
-      height=height/getViewportScale();
+      height=height/getViewportScale(this.targetDevice.formFactor);
     }
 
     return height;

diff --git a/web/src/engine/osk/src/views/floatingOskView.ts b/web/src/engine/osk/src/views/floatingOskView.ts
@@ -314,7 +314,7 @@ export default class FloatingOSKView extends OSKView {
 
     // Correct for viewport scaling (iOS - Android 4.2 does not want this, at least on Galaxy Tab 3))
     if(this.targetDevice.OS == DeviceSpec.OperatingSystem.iOS) {
-      height=height/getViewportScale();
+      height=height/getViewportScale(this.targetDevice.formFactor);
     }
 
     return height;

diff --git a/web/src/engine/osk/src/visualKeyboard.ts b/web/src/engine/osk/src/visualKeyboard.ts
@@ -1395,7 +1395,7 @@ export default class VisualKeyboard extends EventEmitter<EventMap> implements Ke
     var fs = 1.0;
     // TODO: Logically, this should be needed for Android, too - may need to be changed for the next version!
     if (device.OS == DeviceSpec.OperatingSystem.iOS && !this.isEmbedded) {
-      fs = fs / getViewportScale();
+      fs = fs / getViewportScale(this.device.formFactor);
     }
 
     let paddedHeight: number;