From 62b794d3aeeed6a31eb043cdbdccc2c7ff9c98cf Mon Sep 17 00:00:00 2001 From: "Joshua A. Horton" Date: Wed, 19 Dec 2018 12:50:46 +0700 Subject: [PATCH] Publishes the alignInputs() function as API for touch-alias correction. --- web/history.md | 1 + web/source/kmwbase.ts | 4 ++- web/source/kmwembedded.ts | 4 +-- web/source/kmwnative.ts | 59 ++++++++++++++++++++++++++++++--------- web/source/kmwosk.ts | 6 ++-- web/source/kmwrotation.ts | 2 +- 6 files changed, 57 insertions(+), 19 deletions(-) diff --git a/web/history.md b/web/history.md index 6a77e5d3d3..95016d3150 100644 --- a/web/history.md +++ b/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) diff --git a/web/source/kmwbase.ts b/web/source/kmwbase.ts index a72b2376cb..a996c8a30c 100644 --- a/web/source/kmwbase.ts +++ b/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) {}; diff --git a/web/source/kmwembedded.ts b/web/source/kmwembedded.ts index 81da89444d..60fdbbbb6d 100644 --- a/web/source/kmwembedded.ts +++ b/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 diff --git a/web/source/kmwnative.ts b/web/source/kmwnative.ts index 0123ff7252..654537c608 100644 --- a/web/source/kmwnative.ts +++ b/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 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']+'.'); diff --git a/web/source/kmwosk.ts b/web/source/kmwosk.ts index 35eaf41ffc..ac7ae8da4f 100644 --- a/web/source/kmwosk.ts +++ b/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(); + } } /** diff --git a/web/source/kmwrotation.ts b/web/source/kmwrotation.ts index eff1331971..0d02a81461 100644 --- a/web/source/kmwrotation.ts +++ b/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();