Publishes the alignInputs() function as API for touch-alias correction.

web/history.md

@@ -7,6 +7,7 @@
 * Fixes issue with oversized key text on some keyboards. (#382)
 * Fixes issue with diacritics not displaying on some keyboards.  (#1070)
 * Adds support for Promises to init() and setActiveKeyboard(). (#100)
+* Adds the alignInputs() API function to facilitate touch-alias element work-arounds in case of future issues. (#69)
 
 ## 2018-07-06 10.0.103 stable
 * Fixes issue for embedded Android, iOS apps where a keyboard with varying row counts in different layers could crash (#1055)

web/source/kmwbase.ts

@@ -82,7 +82,9 @@ namespace com.keyman {
     getKeyboardPath(f, p?){return f;}
     KC_(n, ln, Pelem){return '';} 
     handleRotationEvents(){}
-    alignInputs(b){}
+    // Will serve as an API function for a workaround, in case of future touch-alignment issues.
+    ['alignInputs'](eleList?: HTMLElement[]){}
+    hideInputs() {};
     namespaceID(Pstub) {};
     preserveID(Pk) {};
 

web/source/kmwembedded.ts

@@ -190,10 +190,10 @@
   /**
    * Align input fields (should not be needed with KMEI, KMEA)
    * 
-   *  @param  {boolean}   align    align and make visible, else hide
+   *  @param  {object}   eleList    A list of specific elements to align.  If nil, selects all elements.
    * 
    **/
-  keymanweb.alignInputs = function(align) {};
+  keymanweb.alignInputs = function(eleList: HTMLElement[]) {};
 
   /**
    * Use rotation events to adjust OSK element positions and scaling if necessary

web/source/kmwnative.ts

@@ -146,6 +146,46 @@ if(!window['keyman']['initialized']) {
       return tempContext._kmwSubstr(-n)._kmwSubstr(0,ln);
     }      
 
+    /**
+     * Align input fields (should not be needed with KMEI, KMEA)
+     * 
+     *  @param  {object}   eleList    A list of specific elements to align.  If nil, selects all elements.
+     * 
+     **/
+    keymanweb.alignInputs = function(eleList: HTMLElement[]) {
+      if(device.touchable) {
+        var domManager = keymanweb.domManager;
+        var processList: HTMLElement[] = [];
+
+        if(eleList) {
+          // Did the user specify the actual element or the touch-alias?
+          eleList.forEach(function(element: HTMLElement){
+            if(element.base) {
+              // It's a touch-alias element, which is what we wish to perform alignment on.
+              processList.push(element);
+            } else {
+              // This retrieves an element's touch-alias, should it exist.
+              let touchAlias = element['kmw_ip'] as HTMLDivElement;
+              if(touchAlias) {
+                processList.push(element['kmw_ip']);
+              }
+            }
+          });
+        } else {
+          processList = domManager.inputList;
+        }
+
+        // Supported by IE 9 and all modern browsers.
+        processList.forEach(function(element: HTMLElement) {
+          domManager.touchHandlers.updateInput(element);
+          element.style.visibility = 'visible';
+          if(element.base.textContent.length > 0) {
+            element.base.style.visibility = 'hidden';
+          }
+        })      
+      }
+    }
+
     /**
      * Align all input fields with underlying elements after a rotation, resize, or change of element font
      * and/or set visibility     
@@ -153,22 +193,15 @@ if(!window['keyman']['initialized']) {
      *  @param  {boolean}   align    align and make visible, else hide
      * 
      **/
-    keymanweb.alignInputs = function(align) {
+    keymanweb.hideInputs = function() {
       var domManager = keymanweb.domManager;
       if(device.touchable) {
         for(var i=0; i<domManager.inputList.length; i++) {
-          if(align) {     
-            domManager.touchHandlers.updateInput(domManager.inputList[i]);
-            domManager.inputList[i].style.visibility='visible';
-            if(domManager.inputList[i].base.textContent.length > 0)
-              domManager.inputList[i].base.style.visibility='hidden';
-          } else {
-            domManager.inputList[i].style.visibility='hidden';
-            domManager.inputList[i].base.style.visibility='visible';
-          }
+          domManager.inputList[i].style.visibility='hidden';
+          domManager.inputList[i].base.style.visibility='visible';
         }        
       }
-    }    
+    }
 
     /**
      * Test if caret position is determined from the active element, or 
@@ -527,7 +560,7 @@ if(!window['keyman']['initialized']) {
         {
           window.clearInterval(keymanweb.fontCheckTimer);
           keymanweb.fontCheckTimer=null;
-          keymanweb.alignInputs(true);    
+          keymanweb.alignInputs();    
         }    
       },100);
       
@@ -538,7 +571,7 @@ if(!window['keyman']['initialized']) {
         {
           window.clearInterval(keymanweb.fontCheckTimer);
           keymanweb.fontCheckTimer=null;
-          keymanweb.alignInputs(true);
+          keymanweb.alignInputs();
           // Don't notify - this is a management issue, not anything the user needs to deal with
           // TODO: Consider having an icon in the OSK with a bubble that indicates missing font
           //util.alert('Unable to download the font normally used with '+ks['KN']+'.');

web/source/kmwosk.ts

@@ -4778,7 +4778,7 @@ if(!window['keyman']['initialized']) {
       util.addFontFaceStyleSheet(kfd); util.addFontFaceStyleSheet(ofd);
 
       // Temporarily hide duplicated elements on non-desktop browsers
-      keymanweb.alignInputs(false);
+      keymanweb.hideInputs();
 
       // Build the style string and append (or replace) the font style sheet
       // Note: Some browsers do not download the font-face font until it is applied,
@@ -4791,7 +4791,9 @@ if(!window['keyman']['initialized']) {
       osk.styleSheet = util.addStyleSheet(customStyle); //Build 360
 
       // Wait until font is loaded then align duplicated input elements with page elements
-      if(osk.waitForFonts(kfd,ofd)) keymanweb.alignInputs(true);
+      if(osk.waitForFonts(kfd,ofd)) {
+        keymanweb.alignInputs();
+      }
     }
 
     /**

web/source/kmwrotation.ts

@@ -42,7 +42,7 @@ namespace com.keyman {
     }
 
     resolve() {
-      this.keyman.alignInputs(true);
+      this.keyman.alignInputs();
 
       var osk = this.keyman.osk;
       osk.hideLanguageList();