From 5896d82af6895544db5d239cf0d2cbcb643145bf Mon Sep 17 00:00:00 2001
From: jahorton <jahorton@sil.org>
Date: Fri, 13 Mar 2020 10:54:25 +0700
Subject: [PATCH] fix(web): further fixes BuildVisualKeyboard.  Fixes #2818

---
 web/source/osk/visualKeyboard.ts | 52 ++++++++++++++++++++++++++++++--
 1 file changed, 49 insertions(+), 3 deletions(-)

diff --git a/web/source/osk/visualKeyboard.ts b/web/source/osk/visualKeyboard.ts
index 2bf9c13db4..722f98cf45 100644
--- a/web/source/osk/visualKeyboard.ts
+++ b/web/source/osk/visualKeyboard.ts
@@ -1330,6 +1330,39 @@ namespace com.keyman.osk {
 
     // cancel = function(e) {} //cancel event is never generated by iOS
 
+    /** 
+     * Function     findKeyElement
+     * Scope        Private
+     * @param       {string}   layerId
+     * @param       {string}   keyId
+     * Description  Finds the DOM element associated with the specified key, if it exists.
+     */
+    findKeyElement(layerId: string, keyId: string) {
+      let layerGroup = this.kbdDiv.firstChild as HTMLDivElement;
+
+      for(let i = 0; i < layerGroup.childElementCount; i++) {
+        // TODO:  At some point, our OSK construction should 'link' a TS metadata type to this, 
+        // like with OSKKey / KeyElement for keys.
+        let layer = layerGroup.childNodes[i] as HTMLDivElement;
+        // row -> key-square -> actual KeyElement.
+        let currentLayerId = (layer.firstChild.firstChild.firstChild as KeyElement).key.layer
+        if(currentLayerId == layerId) {
+          // Layer identified!  Now to find the key.  First - iterate over rows.
+          for(let r = 0; r < layer.childElementCount; r++) {
+            let row = layer.childNodes[r] as HTMLDivElement;
+            for(let k = 0; k < row.childElementCount; k++) {
+              let key = row.childNodes[k].firstChild as KeyElement;
+              if(key.keyId == keyId) {
+                return key;
+              }
+            }
+          }
+        }
+      }
+
+      return null;
+    }
+
     /**
      * Function     _UpdateVKShiftStyle
      * Scope        Private
@@ -1366,9 +1399,20 @@ namespace com.keyman.osk {
         }
 
         keys[i]['sp'] = Processor.stateKeys[states[i]] ? Layouts.buttonClasses['SHIFT-ON'] : Layouts.buttonClasses['SHIFT'];
-        var btn = document.getElementById(layerId+'-'+states[i]);
+        let keyId = layerId+'-'+states[i]
+        var btn = document.getElementById(keyId);
 
-        this.setButtonClass(keys[i], btn, this.layout);
+        if(btn == null) {
+          //This can happen when using BuildDocumentationKeyboard, as the OSK isn't yet in the
+          //document hierarchy.  Sometimes.  (It's weird.)
+          btn = this.findKeyElement(layerId, states[i]);
+        }
+
+        if(btn != null) {
+          this.setButtonClass(keys[i], btn, this.layout);
+        } else {
+          console.warn("Could not find key to apply style: \"" + keyId + "\"");
+        }
       }
     }
 
@@ -1866,7 +1910,7 @@ namespace com.keyman.osk {
       var b: HTMLElement = _Box, bs=b.style;
       bs.height=bs.maxHeight=oskHeight+'px';
 
-      b = <HTMLElement> b.childNodes.item(1).firstChild;
+      b = this.kbdDiv;
       bs=b.style;
       // Sets the layer group to the correct height.
       bs.height=bs.maxHeight=oskHeight+'px';
@@ -2187,6 +2231,8 @@ namespace com.keyman.osk {
         kbdObj.layerId = layerId;
         kbdObj.show();
         kbdObj.adjustHeights(); // Necessary for the row heights to be properly set!
+        // Relocates the font size definition from the main VisualKeyboard wrapper, since we don't return the whole thing.
+        kbd.style.fontSize = kbdObj.kbdDiv.style.fontSize;
       } else {
         kbd.innerHTML="<p style='color:#c40; font-size:0.5em;margin:10px;'>No "+formFactor+" layout is defined for "+PKbd['KN']+".</p>";
       }