mirror of
https://github.com/keymanapp/keyman.git
synced 2026-09-22 07:37:40 +00:00
240 lines
No EOL
8 KiB
HTML
240 lines
No EOL
8 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
|
|
|
<!-- Set the viewport width to match phone and tablet device widths -->
|
|
<meta name="viewport" content="width=device-width,user-scalable=no" />
|
|
|
|
<!-- Allow KeymanWeb to be saved to the iPhone home screen -->
|
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
|
|
|
<!-- Enable IE9 Standards mode -->
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
|
|
<title>KeymanWeb - Test Input Recorder</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>
|
|
|
|
<script src="recorder_KeyboardScripts.js" type="application/javascript"></script>
|
|
|
|
<script src="../release/recorder/recorder_InputEvents.js" type="application/javascript"></script>
|
|
|
|
<!-- Initialization: set paths to keyboards, resources and fonts as required -->
|
|
<script>
|
|
// Thank you to https://stackoverflow.com/questions/22607150/getting-the-url-parameters-inside-the-html-page.
|
|
var GetURLParameter = function (sParam) {
|
|
var sPageURL = window.location.search.substring(1);
|
|
var sURLVariables = sPageURL.split('&');
|
|
for (var i = 0; i < sURLVariables.length; i++) {
|
|
var sParameterName = sURLVariables[i].split('=');
|
|
if (sParameterName[0] == sParam) {
|
|
return sParameterName[1];
|
|
}
|
|
}
|
|
};
|
|
|
|
|
|
var kmw = window.keyman;
|
|
kmw.init({
|
|
attachType: 'auto',
|
|
});
|
|
</script>
|
|
|
|
<script>
|
|
var inputJSON = new KMWRecorder.InputTestSequence();
|
|
|
|
var ta_inputJSON;
|
|
var in_output;
|
|
|
|
setElementText = function(ele, text) {
|
|
ele.value = text;
|
|
if(ele['kmw_ip']) {
|
|
keyman.touchAliasing.setTextBeforeCaret(ele['kmw_ip'], ele.value);
|
|
}
|
|
}
|
|
|
|
addInputRecord = function(json) {
|
|
inputJSON.addInput(json, in_output.value);
|
|
setElementText(ta_inputJSON, inputJSON.toPrettyJSON());
|
|
}
|
|
|
|
resetInputRecord = function() {
|
|
setElementText(ta_inputJSON, "");
|
|
setElementText(in_output, "");
|
|
|
|
inputJSON = new KMWRecorder.InputTestSequence();
|
|
}
|
|
|
|
copyInputRecord = function() {
|
|
try {
|
|
if(!ta_inputJSON['kmw_ip']) {
|
|
ta_inputJSON.select();
|
|
} else {
|
|
var range = document.createRange();
|
|
range.selectNode(ta_inputJSON['kmw_ip']);
|
|
window.getSelection().removeAllRanges();
|
|
window.getSelection().addRange(range);
|
|
}
|
|
|
|
var res = document.execCommand('copy');
|
|
if(res) {
|
|
in_output.focus();
|
|
return;
|
|
}
|
|
} catch (err) { console.log(err) }
|
|
alert("Unable to copy successfully.");
|
|
}
|
|
|
|
setInputRecord = function() {
|
|
inputJSON = new KMWRecorder.InputTestSequence(JSON.parse(ta_inputJSON.value));
|
|
setElementText(in_output, inputJSON.output)
|
|
}
|
|
|
|
// Time for the 'magic'. Yay, JavaScript method extension strategies...
|
|
var _kd = keyman.touchAliasing._KeyDown.bind(keyman.touchAliasing);
|
|
keyman.touchAliasing._KeyDown = function(e) {
|
|
if(DOMEventHandlers.states.activeElement != in_output &&
|
|
DOMEventHandlers.states.activeElement != in_output['kmw_ip']) {
|
|
return _kd(e);
|
|
}
|
|
|
|
var event = new KMWRecorder.PhysicalInputEvent(e);
|
|
var retVal = _kd(e);
|
|
|
|
// Record the keystroke as part of a test sequence!
|
|
addInputRecord(event);
|
|
return retVal;
|
|
}
|
|
|
|
var _ock = keyman.osk.clickKey.bind(keyman.osk);
|
|
keyman.osk.clickKey = function(e) {
|
|
if(DOMEventHandlers.states.activeElement != in_output &&
|
|
DOMEventHandlers.states.activeElement != in_output['kmw_ip']) {
|
|
return _ock(e);
|
|
}
|
|
|
|
var event = new KMWRecorder.OSKInputEvent(e);
|
|
var retVal = _ock(e);
|
|
|
|
// Record the click/touch as part of a test sequence!
|
|
addInputRecord(event);
|
|
return retVal;
|
|
}
|
|
|
|
var _sak = keyman.keyboardManager._SetActiveKeyboard.bind(keyman.keyboardManager);
|
|
keyman.keyboardManager._SetActiveKeyboard = function(PInternalName, PLgCode, saveCookie) {
|
|
_sak(PInternalName, PLgCode, saveCookie);
|
|
|
|
// What's the active stub immediately after our _SetActiveKeyboard call?
|
|
var internalStub = keyman.keyboardManager.activeStub;
|
|
if(internalStub && (DOMEventHandlers.states.activeElement == in_output
|
|
|| DOMEventHandlers.states.activeElement == in_output['kmw_ip'])) {
|
|
var kbdRecord = new KMWRecorder.KeyboardStub(internalStub);
|
|
var ta_activeStub = document.getElementById('activeStub');
|
|
ta_activeStub.value = JSON.stringify(kbdRecord);
|
|
}
|
|
}
|
|
|
|
window.addEventListener('load', function() {
|
|
ta_inputJSON = document.getElementById('inputRecord');
|
|
in_output = document.getElementById('receiver');
|
|
p_layout = document.getElementById('layout');
|
|
|
|
keyman.attachToControl(in_output);
|
|
keyman.setKeyboardForControl(in_output, '', '');
|
|
resetInputRecord();
|
|
|
|
p_layout.textContent += keyman.util.device.formFactor;
|
|
});
|
|
</script>
|
|
</head>
|
|
|
|
<!-- Sample page HTML -->
|
|
|
|
<body onload='loadKeyboards();'>
|
|
<h2>KeymanWeb - Test Input Recorder</h2>
|
|
<p>This page is designed to record KeymanWeb input for use in test case development.</p>
|
|
<hr/>
|
|
<div>
|
|
<div id='recording'>
|
|
<p id='layout'>Current layout: </p>
|
|
<p>Recorded output JSON:</p>
|
|
<textarea id='inputRecord' style="width:90%; height:150px"></textarea>
|
|
<p>You must click 'Set Sequence' to save any changes to an input sequence above before continuing input recording, or they will be lost upon new input.</p>
|
|
<button id='btnReload' type="button" onclick="setInputRecord();">Set Sequence</button>
|
|
<button id='btnReload' type="button" onclick="copyInputRecord();">Copy Sequence</button>
|
|
<button id='btnReload' type="button" onclick="resetInputRecord();">Clear Sequence</button>
|
|
</div>
|
|
<hr>
|
|
<div id='recordSection'>
|
|
<p>Record input here:</p>
|
|
<input type='text' id='receiver'/>
|
|
</div>
|
|
<hr>
|
|
<div id='kbdSection'>
|
|
<p>Currently active stub (for use with addKeyboards):</p>
|
|
<textarea id='activeStub' style="width:90%; height:50px" readonly></textarea>
|
|
</div>
|
|
</div>
|
|
<hr/>
|
|
|
|
<!-- The following elements show how the language menu can be dynamically extended at any time -->
|
|
<h3>Add a keyboard by keyboard stub (to addKeyboards):</h3>
|
|
<input type='textarea' style="width:90%; height:100px" id='kbd_stub_add' class='kmw-disabled' onkeypress="clickOnEnter(event,4);"/><br>
|
|
<input type='button' id='btn4' onclick='addKeyboard(4);' style="width:90%" value='Add' />
|
|
|
|
<h3>Add a keyboard by keyboard name:</h3>
|
|
<input type='input' id='kbd_id1' class='kmw-disabled' onkeypress="clickOnEnter(event,1);"/>
|
|
<input type='button' id='btn1' onclick='addKeyboard(1);' value='Add' />
|
|
|
|
<h3>Add a keyboard by ISO 639 language code:</h3>
|
|
<input type='input' id='kbd_id2' class='kmw-disabled' onkeypress="clickOnEnter(event,2);"/>
|
|
<input type='button' id='btn2' onclick='addKeyboard(2);' value='Add' />
|
|
|
|
<h3>Add a keyboard by language name:</h3>
|
|
<input type='input' id='kbd_id3' class='kmw-disabled' onkeypress="clickOnEnter(event,3);"/>
|
|
<input type='button' id='btn3' onclick='addKeyboard(3);' value='Add' />
|
|
<h3>
|
|
<a href="../index.html">Return to testing home page</a>
|
|
</h3>
|
|
</body>
|
|
|
|
</html> |