mirror of
https://github.com/keymanapp/keyman.git
synced 2026-08-05 16:35:33 +00:00
Created an integrated rotation testing page. Needs more work.
This commit is contained in:
Joshua A. Horton
parent
cf5a2483f7
commit
e2a8e13c07
4 changed files with 130 additions and 64 deletions
|
|
@ -465,30 +465,38 @@ if(!window['keyman']['initialized']) {
|
|||
);
|
||||
}
|
||||
}
|
||||
|
||||
// Placing the rotation handler in two separate functions allows us to stub the functions for
|
||||
// debugging/event-logging.
|
||||
keymanweb.innerRotationHandler = function() {
|
||||
keymanweb.alignInputs(true);
|
||||
osk.hideLanguageList();
|
||||
osk._Load();
|
||||
if(osk.wasVisible) {
|
||||
osk._Show();
|
||||
}
|
||||
|
||||
// clear timeout variable, if it exists.
|
||||
}
|
||||
|
||||
// A general handler for rotation events on touch-enabled devices.
|
||||
keymanweb.rotationHandler = function() {
|
||||
osk.wasVisible = osk.isVisible();
|
||||
osk.hideNow();
|
||||
|
||||
// At least on simulators, it seems we can reach a minor race condition on screen-size updates without a timeout.
|
||||
//window.setTimeout(function() {
|
||||
keymanweb.innerRotationHandler();
|
||||
//}, 500);
|
||||
}
|
||||
|
||||
/**
|
||||
* Use rotation events to adjust OSK and input element positions and scaling as necessary
|
||||
*/
|
||||
keymanweb.handleRotationEvents=function() {
|
||||
// General handler for rotation events.
|
||||
var rotationHandler: () => void = function() {
|
||||
osk.wasVisible = osk.isVisible();
|
||||
osk.hideNow();
|
||||
|
||||
// At least on simulators, it seems we can reach a minor race condition on screen-size updates without a timeout.
|
||||
//window.setTimeout(function() {
|
||||
keymanweb.alignInputs(true);
|
||||
osk.hideLanguageList();
|
||||
osk._Load();
|
||||
if(osk.wasVisible) {
|
||||
osk._Show();
|
||||
}
|
||||
//}, 500);
|
||||
};
|
||||
|
||||
if(device.OS == 'iOS') {
|
||||
util.attachDOMEvent(window, 'orientationchange', rotationHandler);
|
||||
util.attachDOMEvent(window, 'resize', rotationHandler);
|
||||
if(device.OS == 'iOS') {
|
||||
util.attachDOMEvent(window, 'orientationchange', keymanweb.rotationHandler);
|
||||
util.attachDOMEvent(window, 'resize', keymanweb.rotationHandler);
|
||||
}
|
||||
|
||||
// Also manage viewport rescaling after rotation on Android
|
||||
|
|
@ -500,7 +508,7 @@ if(!window['keyman']['initialized']) {
|
|||
util.attachDOMEvent(screen,'mozorientationchange',osk.hideNow);
|
||||
|
||||
// Then align inputs and redisplay the OSK on resize event following rotation
|
||||
util.attachDOMEvent(window, 'resize', rotationHandler);
|
||||
util.attachDOMEvent(window, 'resize', keymanweb.rotationHandler);
|
||||
}
|
||||
|
||||
//TODO: may be able to recognize start of rotation using accelerometer call...
|
||||
|
|
|
|||
|
|
@ -1,44 +0,0 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" name="viewport">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<textarea cols=40 rows=20 id='e' style='overflow: scroll'></textarea>
|
||||
|
||||
<script>
|
||||
var e = document.getElementById('e');
|
||||
var lastW, lastH, lastO;
|
||||
var noRecentChange = 100;
|
||||
|
||||
function doLog(event, onlyIfChanged) {
|
||||
if(onlyIfChanged) {
|
||||
if(lastW == window.innerWidth && lastH == window.innerHeight && lastO == window.orientation) {
|
||||
if(noRecentChange == 100) {
|
||||
e.value = e.value + event + ": no-change" + '\n\n';
|
||||
}
|
||||
noRecentChange++;
|
||||
return;
|
||||
}
|
||||
lastW = window.innerWidth;
|
||||
lastH = window.innerHeight;
|
||||
lastO = window.orientation;
|
||||
}
|
||||
e.value = e.value + event + ': w.iw='+window.innerWidth+' w.ih='+window.innerHeight+' w.o='+window.orientation+'\n';
|
||||
e.scrollTop = e.scrollHeight;
|
||||
noRecentChange = 0;
|
||||
}
|
||||
|
||||
window.setInterval(function() {
|
||||
doLog('tick', true);
|
||||
}, 1);
|
||||
|
||||
window.addEventListener('resize', function() { doLog('resize-b', false) }, false);
|
||||
window.addEventListener('resize', function() { doLog('resize-c', false) }, true);
|
||||
window.addEventListener('orientationchange', function() { doLog('orientationchange-b', false) }, false);
|
||||
window.addEventListener('orientationchange', function() { doLog('orientationchange-c', false) }, true);
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -38,6 +38,7 @@
|
|||
<h2><a href="./issue160/">Uxxxx code testing</a></h2>
|
||||
<h2><a href="./issue271">Test page for interactions between setActiveKeyboard and the toolbar UI.</a></h2>
|
||||
<h2><a href="./basic-iframe">Test page for IFrame connectivity and class prototype management.</a></h2>
|
||||
<h2><a href="./rotation-events">Test page for evaluating issues with mobile device rotation events.</a></h2>
|
||||
<p><a href="../">Return to main index.</a>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
101
web/testing/rotation-events/index.html
Normal file
101
web/testing/rotation-events/index.html
Normal file
|
|
@ -0,0 +1,101 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" name="viewport">
|
||||
|
||||
<title>KeymanWeb Sample Page - Unminified Source</title>
|
||||
|
||||
<!-- Your page CSS -->
|
||||
<style type='text/css'>
|
||||
body {font-family: Tahoma,helvetica;}
|
||||
h3 {font-size: 1em;font-weight:normal;color: darkred; margin-bottom: 4px}
|
||||
.test {font-size: 1.5em; width:80%; min-height:30px; border: 1px solid gray;}
|
||||
#KeymanWebControl {width:50%;min-width:600px;}
|
||||
</style>
|
||||
|
||||
<!-- Insert uncompiled KeymanWeb source scripts -->
|
||||
<script src="../../release/unminified/web/keymanweb.js" type="application/javascript"></script>
|
||||
|
||||
<!--
|
||||
For desktop browsers, a script for the user interface must be inserted here.
|
||||
|
||||
Standard UIs are toggle, button, float and toolbar.
|
||||
The toolbar UI is best for any page designed to support keyboards for
|
||||
a large number of languages.
|
||||
-->
|
||||
<script src="../../release/unminified/web/kmwuitoggle.js"></script>
|
||||
|
||||
<!-- Initialization: set paths to keyboards, resources and fonts as required -->
|
||||
<script>
|
||||
var kmw=window.keyman;
|
||||
kmw.init({
|
||||
attachType:'auto'
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Add keyboard management script for local selection of keyboards to use -->
|
||||
<script src="../commonHeader.js"></script>
|
||||
</head>
|
||||
<body onload='loadKeyboards(1);'>
|
||||
|
||||
<textarea cols=50 rows=20 id='e' style='overflow: scroll' class='kmw-disabled'></textarea>
|
||||
<br><br>
|
||||
<input></input>
|
||||
|
||||
<script>
|
||||
var e = document.getElementById('e');
|
||||
var lastW, lastH, lastO;
|
||||
//var lastOSKW, lastOSKH, lastVS;
|
||||
var noRecentChange = 100;
|
||||
|
||||
function doLog(event, onlyIfChanged) {
|
||||
var orient = window.orientation;
|
||||
var orientText = ' w.o=';
|
||||
|
||||
if(orient === undefined) {
|
||||
orient = window.screen.orientation.angle;
|
||||
orientText = ' w.soa=';
|
||||
}
|
||||
|
||||
if(onlyIfChanged) {
|
||||
if(lastW == window.innerWidth && lastH == window.innerHeight && lastO == orient) {
|
||||
if(noRecentChange == 100) {
|
||||
e.value = e.value + event + ": no-change" + '\n\n';
|
||||
}
|
||||
noRecentChange++;
|
||||
return;
|
||||
}
|
||||
lastW = window.innerWidth;
|
||||
lastH = window.innerHeight;
|
||||
lastO = orient;
|
||||
}
|
||||
|
||||
e.value = e.value + event + ': w.iw='+window.innerWidth+' w.ih='+window.innerHeight+orientText+orient+'\n';
|
||||
|
||||
if(event == 'kmw.rh') {
|
||||
e.value = e.value + ' osk.w=' + keyman.osk.getWidth() + ' osk.h=' + keyman.osk.getHeight() + ' kmw.vs=' + keyman.util.getViewportScale() + '\n';
|
||||
}
|
||||
|
||||
e.scrollTop = e.scrollHeight;
|
||||
noRecentChange = 0;
|
||||
}
|
||||
|
||||
window.setInterval(function() {
|
||||
doLog('tick', true);
|
||||
}, 1);
|
||||
|
||||
window.addEventListener('resize', function() { doLog('resize-b', false) }, false);
|
||||
window.addEventListener('resize', function() { doLog('resize-c', false) }, true);
|
||||
window.addEventListener('orientationchange', function() { doLog('orientationchange-b', false) }, false);
|
||||
window.addEventListener('orientationchange', function() { doLog('orientationchange-c', false) }, true);
|
||||
|
||||
var kmw_rh = keyman.rotationHandler;
|
||||
|
||||
keyman.rotationHandler = function() {
|
||||
doLog('kmw.rh');
|
||||
kmw_rh();
|
||||
}
|
||||
</script>
|
||||
<p><a href="../">Return to main index.</a>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Reference in a new issue