Move the top-most grid window into the visual viewport on resize/scroll

Fixes erkyrath#50.

When the iOS soft keyboard opens, the "resize" event doesn't fire on the window (the "layout viewport" hasn't changed) but the the "visual viewport" resizes.
https://developer.mozilla.org/en-US/docs/Web/API/Visual_Viewport_API
https://developers.google.com/web/updates/2017/09/visual-viewport-api

In this commit, we respond to changes in the size of the visual viewport, moving the top-most grid window down to the top of the visual viewport. Since the vast majority of games have just one grid window at the top of the screen, this does what we want.

I set this code to only slide around the top-most grid window when the game UI sets spacing to 0, because non-zero spacing introduces a visual border around the windows, with the background color coming from the #gameport, but if we slide a grid window down on top of a buffer window, it can't bring its spacing with it. (This is OK by me, because I'm really only doing this for Parchment's sake, which does set spacing 0. Lectrote uses spacing 4, which is fine; it won't be affected by these changes. I tested this code with spacing 4, showing that it has no effect, and with spacing 0, on iOS 15.)

I'd previously experimented with re-measuring the window and using the visual viewport's dimensions for the computation, but we don't actually want to resize the primary buffer window smaller; that will screw up its scroll position, and, worse, it will look really weird to the user.
Furthermore, we can't actually trust visualViewport.height on iOS 15; we can know where the top of the viewport is, but the 20px URL bar may overlay the bottom. See erkyrath#50 for a screenshot of the buggy results.

glkote.css

@@ -63,6 +63,7 @@
   font-size: 15px;
   line-height: 1.4;
   padding: 6px 10px 6px 10px;
+  z-index: 1;
 }
 
 .BufferLine {
@@ -75,6 +76,7 @@
   font-family: monaco, andale mono, lucidatypewriter, courier, courier new, monospace; /* necessary! */
   font-size: 14px;
   padding: 6px 10px 6px 10px;
+  z-index: 2;
 }
 
 .GridLine {

glkote.js

@@ -623,6 +623,16 @@ function create_resize_sensors() {
      This is one reason evhan_doc_resize() has debouncing logic. */
   shrinkel.on('scroll', evhan);
   expandel.on('scroll', evhan);
+
+  /* Move the top-most grid window into the viewport
+    when the iOS virtual keyboard pops up. */
+  if (window.visualViewport) {
+    var visualViewportHandler = function () {
+      $('.topgrid').css({ top: visualViewport.offsetTop });
+    }
+    visualViewport.addEventListener('resize', visualViewportHandler);
+    visualViewport.addEventListener('scroll', visualViewportHandler);
+  }
 }
 
 /* This function becomes GlkOte.update(). The game calls this to update
@@ -923,9 +933,13 @@ function accept_one_window(arg) {
     if (win.type == 'graphics')
       typeclass = 'GraphicsWindow';
     var rockclass = 'WindowRock_' + arg.rock;
+    var topclass = "";
+    if (win.type == 'grid' && arg.top === 0 && current_metrics.inspacingy === 0) {
+      topclass = " topgrid";
+    }
     frameel = $('<div>',
       { id: dom_prefix+'window'+arg.id,
-        'class': 'WindowFrame HasNoInputField ' + typeclass + ' ' + rockclass });
+        'class': 'WindowFrame HasNoInputField ' + typeclass + ' ' + rockclass + topclass});
     frameel.data('winid', arg.id);
     frameel.on('mousedown', arg.id, evhan_window_mousedown);
     if (perform_paging && win.type == 'buffer')

sample-demo.html

@@ -79,7 +79,7 @@
 Game = {
   accept: SampleDemo.game_accept,
   detect_external_links: 'match',
-  spacing: 4
+  spacing: 0
 };
 
 </script>