From ef5067c645b092c68b1bf8767d9c118ce70c65c0 Mon Sep 17 00:00:00 2001
From: Dannii Willis <curiousdannii@gmail.com>
Date: Sat, 5 Oct 2024 12:51:34 +1000
Subject: [PATCH] Try a visualViewport resize handler to fix the dialog height
 on mobile Safari

---
 src/common/misc.ts                      | 10 ++++++-
 src/dialog/browser/ui/BaseDialog.svelte | 35 +++++++++++++++++++++++++
 src/dialog/browser/ui/FileDialog.svelte |  9 ++-----
 src/glkote/web/input.ts                 |  4 +--
 src/glkote/web/metrics.ts               |  3 ++-
 src/glkote/web/shared.ts                | 10 +------
 src/glkote/web/windows.ts               |  5 ++--
 7 files changed, 54 insertions(+), 22 deletions(-)

diff --git a/src/common/misc.ts b/src/common/misc.ts
index 53fdf02..af885c7 100644
--- a/src/common/misc.ts
+++ b/src/common/misc.ts
@@ -3,7 +3,7 @@
 Miscellaneous common things
 ===========================
 
-Copyright (c) 2023 Dannii Willis
+Copyright (c) 2024 Dannii Willis
 MIT licenced
 https://github.com/curiousdannii/asyncglk
 
@@ -66,6 +66,14 @@ export function BEBuffer_to_Array(buf: Uint8Array) {
     return arr
 }
 
+/** If we can determine that the browser is currently pinch zoomed */
+export function is_pinch_zoomed() {
+    if (visualViewport) {
+        return (visualViewport.scale - 1) > 0.001
+    }
+    return false
+}
+
 export function is_unicode_array(arr: GlkTypedArray) {
     return arr.BYTES_PER_ELEMENT === 4
 }
diff --git a/src/dialog/browser/ui/BaseDialog.svelte b/src/dialog/browser/ui/BaseDialog.svelte
index 1d0d7e1..fbcf2a3 100644
--- a/src/dialog/browser/ui/BaseDialog.svelte
+++ b/src/dialog/browser/ui/BaseDialog.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
+    import {is_pinch_zoomed} from '../../../common/misc.js'
+
     let dialog: HTMLDialogElement
     export let extra_class = ''
+    /** Whether or not the dialog should use the full viewport in mobile browsers*/
+    export let fullscreen = false
     let promise_resolve: (res: string | boolean) => void
     let title = ''
 
@@ -8,17 +12,35 @@
         title = _title
         const promise: Promise<string | boolean> = new Promise((resolve) => promise_resolve = resolve)
         dialog.showModal()
+        if (fullscreen && visualViewport) {
+            visualViewport.addEventListener('resize', on_visualViewport_resize)
+        }
         return promise
     }
 
     export function resolve(val: string | boolean) {
         dialog.close()
+        if (fullscreen && visualViewport) {
+            visualViewport.removeEventListener('resize', on_visualViewport_resize)
+            dialog.style.height = ''
+        }
         promise_resolve(val)
     }
 
     function on_close() {
         resolve(false)
     }
+
+    function on_visualViewport_resize() {
+        // Don't do anything if the window is pinch zoomed
+        if (is_pinch_zoomed()){
+            return
+        }
+
+        // The iOS virtual keyboard does not change the layout height, but it does change the viewport
+        // Try to account for this by setting the dialog to the viewport height
+        dialog.style.height = visualViewport!.height + 'px'
+    }
 </script>
 
 <style>
@@ -53,6 +75,18 @@
         width: 100%;
     }
 
+    dialog.fullscreen {
+        margin-top: 0;
+    }
+
+    @media screen and (max-width: 767px) {
+        dialog.fullscreen {
+            border: none !important;
+            max-height: none !important;
+            max-width: none !important;
+        }
+    }
+
     dialog::backdrop {
         background: linear-gradient(rgba(64, 64, 64, 25%), rgba(64, 64, 64, 40%));
     }
@@ -96,6 +130,7 @@
 </style>
 
 <dialog bind:this={dialog}
+    class:fullscreen
     class={extra_class}
     on:close={on_close}
 >
diff --git a/src/dialog/browser/ui/FileDialog.svelte b/src/dialog/browser/ui/FileDialog.svelte
index ee5314c..78dc4b4 100644
--- a/src/dialog/browser/ui/FileDialog.svelte
+++ b/src/dialog/browser/ui/FileDialog.svelte
@@ -164,18 +164,12 @@
 </script>
 
 <style>
+    /* TODO: consider changing to an ID rather than a class, however that would need a regtest-html update */
     :global(dialog.asyncglk_file_dialog) {
         max-height: 500px !important;
         max-width: 700px !important;
     }
 
-    @media screen and (max-width: 767px) {
-        :global(dialog.asyncglk_file_dialog) {
-            max-height: none !important;
-            max-width: none !important;
-        }
-    }
-
     .actions {
         text-align: right;
     }
@@ -198,6 +192,7 @@
 <BaseDialog
     bind:this={base_dialog}
     extra_class="asyncglk_file_dialog {!saving ? 'selecting' : ''}"
+    fullscreen
 >
     <div class="actions">
         <button on:click={on_add_file}>Add file</button>
diff --git a/src/glkote/web/input.ts b/src/glkote/web/input.ts
index ababff1..40e1ff9 100644
--- a/src/glkote/web/input.ts
+++ b/src/glkote/web/input.ts
@@ -3,7 +3,7 @@
 GlkOte input handlers
 =====================
 
-Copyright (c) 2023 Dannii Willis
+Copyright (c) 2024 Dannii Willis
 MIT licenced
 https://github.com/curiousdannii/asyncglk
 
@@ -11,9 +11,9 @@ https://github.com/curiousdannii/asyncglk
 import {throttle} from 'lodash-es'
 
 import {KEY_CODE_DOWN, KEY_CODE_RETURN, KEY_CODE_UP, KEY_CODES_TO_NAMES, OFFSCREEN_OFFSET} from '../../common/constants.js'
+import {is_pinch_zoomed} from '../../common/misc.js'
 import * as protocol from '../../common/protocol.js'
 
-import {is_pinch_zoomed} from './shared.js'
 import {apply_text_run_styles, type Window} from './windows.js'
 
 const MAX_HISTORY_LENGTH = 25
diff --git a/src/glkote/web/metrics.ts b/src/glkote/web/metrics.ts
index 1b21b2e..784fcb0 100644
--- a/src/glkote/web/metrics.ts
+++ b/src/glkote/web/metrics.ts
@@ -11,9 +11,10 @@ https://github.com/curiousdannii/asyncglk
 
 import {throttle} from 'lodash-es'
 
+import {is_pinch_zoomed} from '../../common/misc.js'
 import * as protocol from '../../common/protocol.js'
 
-import {create, is_pinch_zoomed} from './shared.js'
+import {create} from './shared.js'
 import WebGlkOte from './web.js'
 
 function get_size(el: JQuery<HTMLElement>): {height: number, width: number} {
diff --git a/src/glkote/web/shared.ts b/src/glkote/web/shared.ts
index 0fd489d..a2f9f51 100644
--- a/src/glkote/web/shared.ts
+++ b/src/glkote/web/shared.ts
@@ -71,12 +71,4 @@ export class DOM {
     }
 }
 
-export type EventFunc = (event: Partial<protocol.Event>) => void
-
-/** If we can determine that the browser is currently pinch zoomed */
-export function is_pinch_zoomed() {
-    if (visualViewport) {
-        return (visualViewport.scale - 1) > 0.001
-    }
-    return false
-}
\ No newline at end of file
+export type EventFunc = (event: Partial<protocol.Event>) => void
\ No newline at end of file
diff --git a/src/glkote/web/windows.ts b/src/glkote/web/windows.ts
index 8ad66a0..5749fa8 100644
--- a/src/glkote/web/windows.ts
+++ b/src/glkote/web/windows.ts
@@ -3,7 +3,7 @@
 GlkOte windows
 ==============
 
-Copyright (c) 2023 Dannii Willis
+Copyright (c) 2024 Dannii Willis
 MIT licenced
 https://github.com/curiousdannii/asyncglk
 
@@ -13,10 +13,11 @@ import {debounce} from 'lodash-es'
 
 import {Blorb} from '../../blorb/blorb.js'
 import {NBSP} from '../../common/constants.js'
+import {is_pinch_zoomed} from '../../common/misc.js'
 import * as protocol from '../../common/protocol.js'
 
 import {TextInput} from './input.js'
-import {create, DOM, type EventFunc, is_pinch_zoomed} from './shared.js'
+import {create, DOM, type EventFunc} from './shared.js'
 import WebGlkOte from './web.js'
 
 export type Window = BufferWindow | GraphicsWindow | GridWindow