mirror of
https://github.com/keymanapp/keyman.git
synced 2026-09-22 07:37:40 +00:00
Merge pull request #1715 from keymanapp/android-init-height
[Android] Display suggestion banner in the app
This commit is contained in:
Darcy Wong
GitHub
commit
55d289e71a
18 changed files with 174 additions and 51 deletions
|
|
@ -155,8 +155,9 @@ public class SystemKeyboard extends InputMethodService implements OnKeyboardEven
|
|||
if (inputView != null)
|
||||
inputViewHeight = inputView.getHeight();
|
||||
|
||||
int bannerHeight = KMManager.getBannerHeight(this);
|
||||
int kbHeight = KMManager.getKeyboardHeight(this);
|
||||
outInsets.contentTopInsets = inputViewHeight - kbHeight;
|
||||
outInsets.contentTopInsets = inputViewHeight - bannerHeight - kbHeight;
|
||||
outInsets.touchableInsets = InputMethodService.Insets.TOUCHABLE_INSETS_REGION;
|
||||
outInsets.touchableRegion.set(0, outInsets.contentTopInsets, size.x, size.y);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -420,9 +420,12 @@ public class MainActivity extends AppCompatActivity implements OnKeyboardEventLi
|
|||
}
|
||||
|
||||
private void resizeTextView(boolean isKeyboardVisible) {
|
||||
int bannerHeight = 0;
|
||||
int keyboardHeight = 0;
|
||||
if (isKeyboardVisible)
|
||||
if (isKeyboardVisible) {
|
||||
bannerHeight = KMManager.getBannerHeight(this);
|
||||
keyboardHeight = KMManager.getKeyboardHeight(this);
|
||||
}
|
||||
|
||||
TypedValue outValue = new TypedValue();
|
||||
getTheme().resolveAttribute(android.R.attr.actionBarSize, outValue, true);
|
||||
|
|
@ -437,7 +440,8 @@ public class MainActivity extends AppCompatActivity implements OnKeyboardEventLi
|
|||
Point size = new Point(0, 0);
|
||||
getWindowManager().getDefaultDisplay().getSize(size);
|
||||
int screenHeight = size.y;
|
||||
textView.setHeight(screenHeight - statusBarHeight - actionBarHeight - keyboardHeight);
|
||||
Log.d(TAG, "Main resizeTextView bannerHeight: " + bannerHeight);
|
||||
textView.setHeight(screenHeight - statusBarHeight - actionBarHeight - bannerHeight - keyboardHeight);
|
||||
}
|
||||
|
||||
private void showInfo() {
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@
|
|||
<script src="keyman.js"></script>
|
||||
<script type="text/javascript">
|
||||
var device = window.jsInterface.getDeviceType();
|
||||
var bannerHeight = window.jsInterface.getBannerHeight();
|
||||
var oskHeight = window.jsInterface.getKeyboardHeight();
|
||||
var oskWidth = 0;
|
||||
window.addEventListener('load', init, false);
|
||||
|
|
@ -18,18 +19,20 @@
|
|||
//document.body.style.backgroundColor="transparent";
|
||||
//window.console.log('Device type = '+device);
|
||||
//window.console.log('Keyboard height = '+oskHeight);
|
||||
var kmw=window['keyman'];
|
||||
var kmw=com.keyman.singleton;
|
||||
kmw.init({'app':device,'fonts':'packages/'});
|
||||
kmw['util']['setOption']('attachType','manual');
|
||||
kmw['oninserttext'] = insertText;
|
||||
kmw['showKeyboardList'] = showMenu;
|
||||
kmw['hideKeyboard'] = hideKeyboard;
|
||||
kmw['getBannerHeight'] = getBannerHeight;
|
||||
kmw['getOskHeight'] = getOskHeight;
|
||||
kmw['getOskWidth'] = getOskWidth;
|
||||
kmw['beepKeyboard'] = beepKeyboard;
|
||||
var ta = document.getElementById('ta');
|
||||
kmw['setActiveElement'](ta);
|
||||
|
||||
setBanner('blank');
|
||||
ta.readOnly = false;
|
||||
|
||||
kmw.addEventListener('keyboardloaded', setIsChiral);
|
||||
|
|
@ -42,6 +45,11 @@
|
|||
}
|
||||
var kmw=window['keyman'];
|
||||
kmw['correctOSKTextSize']();
|
||||
window.console.log('Embedded done with correctOSKTextSize');
|
||||
}
|
||||
|
||||
function getBannerHeight() {
|
||||
return bannerHeight;
|
||||
}
|
||||
|
||||
function setOskWidth(w) {
|
||||
|
|
@ -51,6 +59,7 @@
|
|||
}
|
||||
|
||||
function getOskHeight() {
|
||||
window.console.log('Embedded getOskHeight: '+oskHeight);
|
||||
return oskHeight;
|
||||
}
|
||||
|
||||
|
|
@ -124,6 +133,15 @@
|
|||
function insertText(dn, s) {
|
||||
//window.console.log('insertText('+ dn +', ' + s +');');
|
||||
window.jsInterface.insertText(dn, s);
|
||||
|
||||
// TODO: Remove for production: Testing
|
||||
var kmw=com.keyman.singleton;
|
||||
if (s == 'b') {
|
||||
setBanner('blank');
|
||||
} else if (s == 's') {
|
||||
setBanner('suggestion');
|
||||
kmw.osk.banner.activeBanner.updateSuggestions([{displayAs: 'insertAlpha'}, {displayAs: 'insertBeta'}, {displayAs: 'insertCharlie'}]);
|
||||
}
|
||||
}
|
||||
|
||||
function registerModel(model) {
|
||||
|
|
@ -207,6 +225,28 @@
|
|||
window.location.hash = 'hideKeyboard' + fragmentToggle;
|
||||
}
|
||||
|
||||
function setBanner(bannerType) {
|
||||
var kmw = com.keyman.singleton;
|
||||
var banner = kmw.osk.banner;
|
||||
if (bannerType == 'blank') {
|
||||
banner.setOptions({
|
||||
'persistentBanner': false,
|
||||
'enablePredictions': false
|
||||
});
|
||||
banner.setBanner('blank');
|
||||
} else if (bannerType == 'suggestion') {
|
||||
banner.setOptions({
|
||||
'persistentBanner': true,
|
||||
'enablePredictions': true
|
||||
});
|
||||
banner.setBanner('suggestion', bannerHeight);
|
||||
|
||||
// TODO: Remove for production. For testing integration of suggestion banner
|
||||
window.console.log('Embedded setBanner to ' + bannerHeight);
|
||||
kmw.osk.banner.activeBanner.updateSuggestions([{displayAs: 'alpha'}, {displayAs: 'bravo'}, {displayAs: 'charlie'}]);
|
||||
}
|
||||
}
|
||||
|
||||
function showHelpBubble() {
|
||||
fragmentToggle = (fragmentToggle + 1) % 100;
|
||||
var kmw = window['keyman'];
|
||||
|
|
|
|||
|
|
@ -25,6 +25,14 @@ public abstract class KMKeyboardJSHandler {
|
|||
return context.getResources().getString(R.string.device_type);
|
||||
}
|
||||
|
||||
// This annotation is required in Jelly Bean and later:
|
||||
@JavascriptInterface
|
||||
public int getBannerHeight() {
|
||||
int bannerHeight = context.getResources().getDimensionPixelSize(R.dimen.banner_height);
|
||||
//bannerHeight -= bannerHeight % 20;
|
||||
return bannerHeight;
|
||||
}
|
||||
|
||||
// This annotation is required in Jelly Bean and later:
|
||||
@JavascriptInterface
|
||||
public int getKeyboardHeight() {
|
||||
|
|
|
|||
|
|
@ -104,6 +104,7 @@ public final class KMManager {
|
|||
protected static boolean SystemKeyboardShouldIgnoreSelectionChange = false;
|
||||
protected static KMKeyboard InAppKeyboard = null;
|
||||
protected static KMKeyboard SystemKeyboard = null;
|
||||
protected static String currentBanner = "blank";
|
||||
|
||||
// Keyman public keys
|
||||
public static final String KMKey_ID = "id";
|
||||
|
|
@ -234,12 +235,18 @@ public final class KMManager {
|
|||
return false;
|
||||
}
|
||||
|
||||
private static RelativeLayout.LayoutParams getKeyboardLayoutParams() {
|
||||
int bannerHeight = currentBanner.equals("suggestion") ? getBannerHeight(appContext) : 0;
|
||||
int kbHeight = getKeyboardHeight(appContext);
|
||||
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT, bannerHeight + kbHeight);
|
||||
params.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM, RelativeLayout.TRUE);
|
||||
return params;
|
||||
}
|
||||
|
||||
private static void initInAppKeyboard(Context appContext) {
|
||||
if (InAppKeyboard == null) {
|
||||
int kbHeight = appContext.getResources().getDimensionPixelSize(R.dimen.keyboard_height);
|
||||
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT, kbHeight);
|
||||
params.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM, RelativeLayout.TRUE);
|
||||
InAppKeyboard = new KMKeyboard(appContext, KeyboardType.KEYBOARD_TYPE_INAPP);
|
||||
RelativeLayout.LayoutParams params = getKeyboardLayoutParams();
|
||||
InAppKeyboard.setLayoutParams(params);
|
||||
InAppKeyboard.setVerticalScrollBarEnabled(false);
|
||||
InAppKeyboard.setHorizontalScrollBarEnabled(false);
|
||||
|
|
@ -251,10 +258,8 @@ public final class KMManager {
|
|||
|
||||
private static void initSystemKeyboard(Context appContext) {
|
||||
if (SystemKeyboard == null) {
|
||||
int kbHeight = appContext.getResources().getDimensionPixelSize(R.dimen.keyboard_height);
|
||||
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT, kbHeight);
|
||||
params.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM, RelativeLayout.TRUE);
|
||||
SystemKeyboard = new KMKeyboard(appContext, KeyboardType.KEYBOARD_TYPE_SYSTEM);
|
||||
RelativeLayout.LayoutParams params = getKeyboardLayoutParams();
|
||||
SystemKeyboard.setLayoutParams(params);
|
||||
SystemKeyboard.setVerticalScrollBarEnabled(false);
|
||||
SystemKeyboard.setHorizontalScrollBarEnabled(false);
|
||||
|
|
@ -668,14 +673,19 @@ public final class KMManager {
|
|||
return false;
|
||||
}
|
||||
|
||||
// Use single quotes in JSONobject for javascript call
|
||||
// Escape single quotes, and then convert double quotes to single quotes for javascript call
|
||||
String model = String.valueOf(modelObj);
|
||||
model = model.replaceAll("\'", "\\\\'"); // Double-escaped-backslash b/c regex.
|
||||
model = model.replaceAll("\"", "'");
|
||||
|
||||
currentBanner = "suggestion";
|
||||
RelativeLayout.LayoutParams params = getKeyboardLayoutParams();
|
||||
if (InAppKeyboard != null && InAppKeyboardLoaded && !InAppKeyboardShouldIgnoreTextChange) {
|
||||
InAppKeyboard.setLayoutParams(params);
|
||||
InAppKeyboard.loadUrl(String.format("javascript:registerModel(%s)", model));
|
||||
}
|
||||
if (SystemKeyboard != null && SystemKeyboardLoaded && !SystemKeyboardShouldIgnoreTextChange) {
|
||||
SystemKeyboard.setLayoutParams(params);
|
||||
SystemKeyboard.loadUrl(String.format("javascript:registerModel(%s)", model));
|
||||
}
|
||||
return true;
|
||||
|
|
@ -939,6 +949,10 @@ public final class KMManager {
|
|||
KMKeyboard.removeOnKeyboardEventListener(listener);
|
||||
}
|
||||
|
||||
public static int getBannerHeight(Context context) {
|
||||
return (int) context.getResources().getDimension(R.dimen.banner_height);
|
||||
}
|
||||
|
||||
public static int getKeyboardHeight(Context context) {
|
||||
return (int) context.getResources().getDimension(R.dimen.keyboard_height);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Dimens for Landscape (Phone) -->
|
||||
<resources>
|
||||
<dimen name="banner_height">60dp</dimen>
|
||||
<dimen name="keyboard_height">205dp</dimen>
|
||||
<dimen name="key_width">49.25dp</dimen>
|
||||
<dimen name="key_height">49.25dp</dimen>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Dimens for Landscape (Tablet 7") -->
|
||||
<resources>
|
||||
<dimen name="banner_height">80dp</dimen>
|
||||
<dimen name="keyboard_height">305dp</dimen>
|
||||
<dimen name="key_width">73.5dp</dimen>
|
||||
<dimen name="key_height">58.5dp</dimen>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Dimens for Landscape (Tablet 10") -->
|
||||
<resources>
|
||||
<dimen name="banner_height">90dp</dimen>
|
||||
<dimen name="keyboard_height">405dp</dimen>
|
||||
<dimen name="key_width">98.5dp</dimen>
|
||||
<dimen name="key_height">98.5dp</dimen>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Dimens for Default or Portrait (Tablet 10") -->
|
||||
<resources>
|
||||
<dimen name="banner_height">90dp</dimen>
|
||||
<dimen name="keyboard_height">405dp</dimen>
|
||||
<dimen name="key_width">68.5dp</dimen>
|
||||
<dimen name="key_height">98.5dp</dimen>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Dimens for Default or Portrait (Phone) -->
|
||||
<resources>
|
||||
<dimen name="banner_height">60dp</dimen>
|
||||
<dimen name="keyboard_height">205dp</dimen>
|
||||
<dimen name="key_width">34.25dp</dimen>
|
||||
<dimen name="key_height">49.25dp</dimen>
|
||||
|
|
|
|||
41
web/package-lock.json
generated
41
web/package-lock.json
generated
|
|
@ -1274,7 +1274,8 @@
|
|||
"ansi-regex": {
|
||||
"version": "2.1.1",
|
||||
"bundled": true,
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"aproba": {
|
||||
"version": "1.2.0",
|
||||
|
|
@ -1295,12 +1296,14 @@
|
|||
"balanced-match": {
|
||||
"version": "1.0.0",
|
||||
"bundled": true,
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"brace-expansion": {
|
||||
"version": "1.1.11",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"balanced-match": "^1.0.0",
|
||||
"concat-map": "0.0.1"
|
||||
|
|
@ -1315,17 +1318,20 @@
|
|||
"code-point-at": {
|
||||
"version": "1.1.0",
|
||||
"bundled": true,
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"concat-map": {
|
||||
"version": "0.0.1",
|
||||
"bundled": true,
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"console-control-strings": {
|
||||
"version": "1.1.0",
|
||||
"bundled": true,
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"core-util-is": {
|
||||
"version": "1.0.2",
|
||||
|
|
@ -1442,7 +1448,8 @@
|
|||
"inherits": {
|
||||
"version": "2.0.3",
|
||||
"bundled": true,
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"ini": {
|
||||
"version": "1.3.5",
|
||||
|
|
@ -1454,6 +1461,7 @@
|
|||
"version": "1.0.0",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"number-is-nan": "^1.0.0"
|
||||
}
|
||||
|
|
@ -1468,6 +1476,7 @@
|
|||
"version": "3.0.4",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"brace-expansion": "^1.1.7"
|
||||
}
|
||||
|
|
@ -1475,12 +1484,14 @@
|
|||
"minimist": {
|
||||
"version": "0.0.8",
|
||||
"bundled": true,
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"minipass": {
|
||||
"version": "2.2.4",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"safe-buffer": "^5.1.1",
|
||||
"yallist": "^3.0.0"
|
||||
|
|
@ -1499,6 +1510,7 @@
|
|||
"version": "0.5.1",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"minimist": "0.0.8"
|
||||
}
|
||||
|
|
@ -1579,7 +1591,8 @@
|
|||
"number-is-nan": {
|
||||
"version": "1.0.1",
|
||||
"bundled": true,
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"object-assign": {
|
||||
"version": "4.1.1",
|
||||
|
|
@ -1591,6 +1604,7 @@
|
|||
"version": "1.4.0",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"wrappy": "1"
|
||||
}
|
||||
|
|
@ -1676,7 +1690,8 @@
|
|||
"safe-buffer": {
|
||||
"version": "5.1.1",
|
||||
"bundled": true,
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"safer-buffer": {
|
||||
"version": "2.1.2",
|
||||
|
|
@ -1712,6 +1727,7 @@
|
|||
"version": "1.0.2",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"code-point-at": "^1.0.0",
|
||||
"is-fullwidth-code-point": "^1.0.0",
|
||||
|
|
@ -1731,6 +1747,7 @@
|
|||
"version": "3.0.1",
|
||||
"bundled": true,
|
||||
"dev": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"ansi-regex": "^2.0.0"
|
||||
}
|
||||
|
|
@ -1774,12 +1791,14 @@
|
|||
"wrappy": {
|
||||
"version": "1.0.2",
|
||||
"bundled": true,
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
},
|
||||
"yallist": {
|
||||
"version": "3.0.2",
|
||||
"bundled": true,
|
||||
"dev": true
|
||||
"dev": true,
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -130,10 +130,11 @@ namespace com.keyman.osk {
|
|||
if(device.OS == 'Android' && 'devicePixelRatio' in window) {
|
||||
rowHeight = rowHeight/window.devicePixelRatio;
|
||||
}
|
||||
let bannerHeight : number = oskManager.getBannerHeight();
|
||||
let oskHeight : number = nRows*rowHeight;
|
||||
|
||||
var b: HTMLElement = _Box, bs=b.style;
|
||||
bs.height=bs.maxHeight=(oskHeight+3)+'px';
|
||||
bs.height=bs.maxHeight=(bannerHeight+oskHeight+3)+'px';
|
||||
b = <HTMLElement> b.childNodes.item(1).firstChild;
|
||||
bs=b.style;
|
||||
bs.height=bs.maxHeight=(oskHeight+3)+'px';
|
||||
|
|
@ -358,7 +359,7 @@ namespace com.keyman.text {
|
|||
*/
|
||||
keymanweb['registerModel']=function(model: com.keyman.text.prediction.ModelSpec) {
|
||||
keymanweb.modelManager.register(model);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Function called by iOS when a device-implemented keyboard popup is displayed or hidden
|
||||
|
|
|
|||
|
|
@ -651,6 +651,17 @@ if(!window['keyman']['initialized']) {
|
|||
rotationManager.init();
|
||||
}
|
||||
|
||||
/**
|
||||
* Test code to set suggestion banner
|
||||
* TODO: Remove from production
|
||||
*/
|
||||
keymanweb['setBanner']=function() {
|
||||
let keyman = com.keyman.singleton;
|
||||
let osk = keyman.osk;
|
||||
osk.banner.setBanner('suggestion');
|
||||
osk.banner.setSuggestions();
|
||||
};
|
||||
|
||||
/**
|
||||
* Possible way to detect the start of a rotation and hide the OSK before it is adjusted in size
|
||||
*
|
||||
|
|
|
|||
|
|
@ -58,7 +58,7 @@ namespace com.keyman.osk {
|
|||
let util = keymanweb.util;
|
||||
|
||||
let d = util._CreateElement('div');
|
||||
d.id = "keymanweb_banner_bar";
|
||||
d.id = "kmw-banner-bar";
|
||||
d.className = "kmw-banner-bar";
|
||||
this.div = d;
|
||||
|
||||
|
|
@ -266,6 +266,11 @@ namespace com.keyman.osk {
|
|||
|
||||
// TODO: Dynamic suggestion text resizing. (Refer to OSKKey.getTextWidth in visualKeyboard.ts.)
|
||||
|
||||
// TODO: Investigate the factor of "48"
|
||||
let ss = s.style;
|
||||
let oskManager = keyman.osk;
|
||||
ss.top = oskManager.getBannerHeight() - 48 + 'px';
|
||||
|
||||
// Finalize the suggestion text
|
||||
s.innerHTML = suggestionText;
|
||||
return s;
|
||||
|
|
@ -275,6 +280,7 @@ namespace com.keyman.osk {
|
|||
/**
|
||||
* Function SuggestionBanner
|
||||
* Scope Public
|
||||
* @param {number} height - If provided, the height of the banner in pixels
|
||||
* Description Display lexical model suggestions in the banner
|
||||
*/
|
||||
export class SuggestionBanner extends Banner {
|
||||
|
|
@ -284,8 +290,8 @@ namespace com.keyman.osk {
|
|||
private suggestionList : BannerSuggestion[];
|
||||
private currentSuggestions: Suggestion[] = [];
|
||||
|
||||
constructor() {
|
||||
super(SuggestionBanner.DEFAULT_HEIGHT);
|
||||
constructor(height?: number) {
|
||||
super(height);
|
||||
this.suggestionList = new Array();
|
||||
for (var i=0; i<SuggestionBanner.SUGGESTION_LIMIT; i++) {
|
||||
let d = new BannerSuggestion(i);
|
||||
|
|
@ -325,6 +331,7 @@ namespace com.keyman.osk {
|
|||
option.update(null);
|
||||
}
|
||||
});
|
||||
console.log("updateSuggestions done");
|
||||
}.bind(this);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -173,8 +173,9 @@ namespace com.keyman.osk {
|
|||
*
|
||||
* @param type `'blank' | 'image' | 'suggestion'` - A plain-text string
|
||||
* representing the type of `Banner` to set active.
|
||||
* @param height - Optional banner height in pixels.
|
||||
*/
|
||||
public setBanner(type: BannerType) {
|
||||
public setBanner(type: BannerType, height?: number) {
|
||||
switch(type) {
|
||||
case 'blank':
|
||||
this._setBanner(new BlankBanner());
|
||||
|
|
@ -183,7 +184,7 @@ namespace com.keyman.osk {
|
|||
this._setBanner(new ImageBanner(this.imagePath, ImageBanner.DEFAULT_HEIGHT));
|
||||
break;
|
||||
case 'suggestion':
|
||||
this._setBanner(new SuggestionBanner());
|
||||
this._setBanner(new SuggestionBanner(height));
|
||||
let keyman = com.keyman.singleton;
|
||||
let banner = this.activeBanner as SuggestionBanner;
|
||||
keyman.modelManager['addEventListener']('invalidatesuggestions', banner.invalidateSuggestions);
|
||||
|
|
@ -194,6 +195,17 @@ namespace com.keyman.osk {
|
|||
}
|
||||
}
|
||||
|
||||
// TODO: test code not to keep in production
|
||||
public setSuggestions() {
|
||||
let blank : Suggestion = {displayAs: 'blank'} as Suggestion;
|
||||
let s:Array<Suggestion> = Array(blank, blank, blank);
|
||||
s[0].displayAs = 'choco';
|
||||
s[1].displayAs = 'taco';
|
||||
s[2].displayAs = 'last';
|
||||
let suggestionBanner = this.activeBanner as SuggestionBanner;
|
||||
suggestionBanner.updateSuggestions(s);
|
||||
}
|
||||
|
||||
/**
|
||||
* Handles `ModelManager`'s `'modelchange'` events,
|
||||
* allowing logic to automatically hot-swap `Banner`s as needed.
|
||||
|
|
|
|||
|
|
@ -1303,7 +1303,7 @@ namespace com.keyman.osk {
|
|||
Ls.left=Ls.bottom='0px';
|
||||
let vkbdHeight = (<HTMLElement> this.vkbd.kbdDiv.firstChild).style.height;
|
||||
vkbdHeight = vkbdHeight.substr(0, vkbdHeight.indexOf('px'));
|
||||
Ls.height=Ls.maxHeight= (parseInt(vkbdHeight, 10) + this.getBannerHeight()) + 'px';
|
||||
Ls.height=Ls.maxHeight= (this.getBannerHeight() + parseInt(vkbdHeight, 10)) + 'px';
|
||||
Ls.border='none';
|
||||
Ls.borderTop='1px solid gray';
|
||||
|
||||
|
|
|
|||
|
|
@ -638,7 +638,7 @@ namespace com.keyman.osk {
|
|||
let bannerHeight = oskManager.banner.height;
|
||||
let rowsPercent = 100;
|
||||
|
||||
var lDiv=util._CreateElement('div'), ls=lDiv.style, actualHeight=0;
|
||||
var lDiv=util._CreateElement('div'), ls=lDiv.style, totalHeight=0;
|
||||
|
||||
// Set OSK box default style
|
||||
lDiv.className='kmw-key-layer-group';
|
||||
|
|
@ -647,9 +647,9 @@ namespace com.keyman.osk {
|
|||
switch(formFactor) {
|
||||
case 'phone':
|
||||
case 'tablet':
|
||||
actualHeight=oskManager.getHeight();
|
||||
ls.height=actualHeight+'px';
|
||||
rowsPercent = Math.round(100*oskManager.getKeyboardHeight()/actualHeight );
|
||||
totalHeight=oskManager.getHeight();
|
||||
ls.height=totalHeight+'px';
|
||||
rowsPercent = Math.round(100*oskManager.getKeyboardHeight()/totalHeight );
|
||||
break;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -49,9 +49,10 @@
|
|||
.phone.ios .kmw-key.kmw-key-special-on {color:#000;background-color:#fdfdfe;}
|
||||
.phone.ios .kmw-key.kmw-key-touched {background-color:#88f;}
|
||||
|
||||
.phone.ios .kmw-banner-bar {background-color: #cfd3d9; height: 40px; width: 100%;}
|
||||
.phone.ios .kmw-banner-bar .kmw-suggest-option {background-color: #fdfdfe; display:inline-block; vertical-align: middle; border-radius: 5px;}
|
||||
.phone.ios .kmw-suggestion-text {color:#000; width: 100%; text-align: center;}
|
||||
.phone.ios .kmw-banner-bar {background-color: #cfd3d9; display: inline-block; height: 100%; width: 100%;}
|
||||
.phone.ios .kmw-banner-bar .kmw-suggest-option {background-color: #cfd3d9; display:inline-block; text-align: center; border-radius: 5px;}
|
||||
.phone.ios .kmw-suggestion-text {color:#000; background-color:#fdfdfe; display: inline; height: 100%;
|
||||
line-height: normal; position: relative; vertical-align: middle;}
|
||||
|
||||
.phone.android .kmw-key-layer-group {background-color: #333;}
|
||||
.phone.android .kmw-key {border: none; border-bottom: solid 1px #8a8d90; box-shadow:none; border-radius: 3px;}
|
||||
|
|
@ -65,9 +66,9 @@
|
|||
.phone.android .kmw-key.kmw-spacebar.kmw-key-touched {background-color: #bbb;}
|
||||
.phone.android .kmw-spacebar-caption {color: #aaa;}
|
||||
|
||||
.phone.android .kmw-banner-bar {background-color: #222; height: 40px; width: 100%;}
|
||||
.phone.android .kmw-banner-bar .kmw-suggest-option {background-color: #333; display:inline-block; vertical-align: middle; border-radius: 5px}
|
||||
.phone.android .kmw-suggestion-text {color:#ffff; background-color: #222; text-align: center;}
|
||||
.phone.android .kmw-banner-bar {background-color: #222; display: inline-block; height: 100%; width: 100%;}
|
||||
.phone.android .kmw-banner-bar .kmw-suggest-option {background-color: #333; display:inline-block; text-align: center; height: 85%; border-radius: 5px;}
|
||||
.phone.android .kmw-suggestion-text {color:#fff; background-color: #222; line-height: normal; position: relative; vertical-align: middle;}
|
||||
|
||||
.tablet.kmw-osk-frame{position:fixed;left:0;bottom:0;width:100%;height:144px;overflow-y:visible;
|
||||
background-color:rgba(0,0,0,0.8);-webkit-user-select:none;}
|
||||
|
|
@ -94,9 +95,10 @@
|
|||
.tablet.ios .kmw-key.kmw-key-special-on {color:#000;background-color:#fdfdfe;}
|
||||
.tablet.ios .kmw-key.kmw-key-touched {background-color:#88f;}
|
||||
|
||||
.tablet.ios .kmw-banner-bar {background-color: #cfd3d9}
|
||||
.tablet.ios .kmw-banner-bar .kmw-suggest-option {background-color: #fdfdfe; display:inline-block; vertical-align:middle; border-radius: 5px;}
|
||||
.tablet.ios .kmw-suggestion-text {color:#000; text-align: center;}
|
||||
.tablet.ios .kmw-banner-bar {background-color: #cfd3d9; display: inline-block; height: 100%; width: 100%;}
|
||||
.tablet.ios .kmw-banner-bar .kmw-suggest-option {background-color: #cfd3d9; display:inline-block; text-align: center; border-radius: 5px;}
|
||||
.tablet.ios .kmw-suggestion-text {color:#000; background-color:#fdfdfe; display: inline; height: 100%;
|
||||
line-height: normal; position: relative; vertical-align: middle;}
|
||||
|
||||
.tablet .kmw-key-row {-webkit-touch-callout:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);}
|
||||
|
||||
|
|
@ -112,9 +114,10 @@
|
|||
.tablet.android .kmw-key.kmw-spacebar.kmw-key-touched {background-color: #777;}
|
||||
.tablet.android .kmw-spacebar-caption {color: #888;}
|
||||
|
||||
.tablet.android .kmw-banner-bar {background-color: #b4b4b8; height: 40px; width: 100%;}
|
||||
.tablet.android .kmw-banner-bar .kmw-suggest-option {background-color: #b4b4b8; display:inline-block; vertical-align: middle; border-radius: 5px}
|
||||
.tablet.android .kmw-suggestion-text {color:#77f; background-color: #b4b4b8; text-align: center;}
|
||||
.tablet.android .kmw-banner-bar {background-color: #b4b4b8; display: inline-block; height: 100%; width: 100%;}
|
||||
.tablet.android .kmw-banner-bar .kmw-suggest-option {background-color: #b4b4b8; display:inline-block; text-align: center; border-radius: 5px;}
|
||||
.tablet.android .kmw-suggestion-text {color:#77f; background-color: #b4b4b8; display: inline; height: 100%;
|
||||
line-height: normal; postion: relative; vertical-align: middle;}
|
||||
|
||||
/* Vertical centering of text labels on keys */
|
||||
.kmw-key {text-align:center; white-space:nowrap;}
|
||||
|
|
@ -155,11 +158,9 @@
|
|||
.kmw-title-bar-actions{position: absolute; cursor: default; right:2px; top:0; width: 33px; height: 13px;}
|
||||
.kmw-footer-caption{color:#fff;font:0.7em Arial;margin:0 0 0 4px;}
|
||||
|
||||
.kmw-banner-container{width:100%; margin:0;}
|
||||
.kmw-banner-bar{height:40px; width:100%; margin:0; background-color:darkorange;}
|
||||
.kmw-banner-bar .kmw-suggest-option {background-color: orange; display:inline-block; vertical-align: middle; text-align: center; border-radius: 5px}
|
||||
.kmw-suggestion-text{color:#ffff; text-align: center; width: 95%}
|
||||
|
||||
.kmw-banner-bar{height:100%; width:100%; margin:0; background-color:darkorange; display: inline-block;}
|
||||
.kmw-banner-bar .kmw-suggest-option {background-color: orange; display:inline-block; text-align: center; height: 85%; border-radius: 5px;}
|
||||
.kmw-suggestion-text{color:#fff; background-color: orange; line-height: normal; position: relative; vertical-align: middle;}
|
||||
|
||||
.kmw-footer-resize{cursor:se-resize;position:absolute;right:2px;bottom:2px;width:16px;height:16px;overflow:hidden;
|
||||
font-family:SpecialOSK;color:white;}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue