spiegel-keyman/web/testing/promise-api/index.html

152 lines
6.1 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 Testing Page - Promise API when Adding Keyboards</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;}
.log {font-size: 1em; width:80%; min-height:80px; max-height: 80px; border: 1px solid gray;}
#KeymanWebControl {width:50%;min-width:600px;}
.active {font-weight:bold}
</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>
<!-- Add keyboard management script for local selection of keyboards to use -->
<script src="promisehdr.js"></script>
<script src="eventLogging.js"></script>
<!-- Initialization: set paths to keyboards, resources and fonts as required -->
<script>
// Thank you to https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams
const alertType = (new URLSearchParams(window.location.search)).get("useAlerts") != "false";
var kmw=window.keyman;
// Test adding keyboards before kmw.init get deferred
addKeyboards('french','@he');
kmw.init({
useAlerts: alertType
}).then(function() {
loadKeyboards();
});
</script>
</head>
<!-- Sample page HTML -->
<body>
<h2>KeymanWeb Sample Page - Promise API</h2>
<p>This page is for testing the Promises returned from adding keyboards.
See <a href="https://github.com/keymanapp/keyman/issues/5044">Specification #5044.</a>
</p>
<p>
This test page is best used with Developer mode, as output for both successes
and failures will be logged to the JS console.
</p>
<p>Visible alert-style feedback will only occur for invalid search terms, such as using "foobar"
for any of the three keyboard-adding options at the bottom of the page.
</p>
<p id="modeSelect">Two internal-alert testing modes are available:
<a id="alert_disabled" href="./index.html?useAlerts=false">Disabled</a> or
<a id="alert_default" href="./index.html">Enabled (Default)</a></p>
<p>This will only affect whether or not KeymanWeb's alert modal is displayed.
A native browser alert and dev-console error log will occur regardless of this
setting when stub fetch errors occur.
</p>
<hr>
<p>Two keyboard-change related event-logging modes are available:
<div>
<input type='radio' id='eventLog-off' name='eventLog' value='off' onchange='eventLogChange()' checked>
<label id='event-label-off' for='eventLog-off' class='active'>No logging</label>
<input type='radio' id='eventLog-on' name='eventLog' value='on' onchange='eventLogChange()'>
<label id='event-label-on' for='eventLog-on'>Logging</label>
</div>
</p>
<div id='logZone' style='display:none'>
<textarea id='eventLogging' class='log' disabled></textarea>
<input type='button' id='logFlusher' style='display: block' onclick='flushLogs();' value='Clear event logs' />
</div>
<hr>
<div>
<!--
The following DIV is used to position the Button or Toolbar User Interfaces on the page.
If omitted, those User Interfaces will appear at the top of the document body.
(It is ignored by other User Interfaces.)
-->
<div id='KeymanWebControl'></div>
<h3>Type in your language in this text area:</h3>
<textarea id='ta1' class='test' placeholder='Type here'></textarea>
<h3>or in this input field:</h3>
<input class='test' value='' placeholder='or here'/>
<!-- The following elements show how the language menu can be dynamically extended at any time -->
<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 BCP-47 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 comma-separated language name(s):</h3>
<input type='input' id='kbd_id3' class='kmw-disabled' onkeypress="clickOnEnter(event,3);"/>
<input type='button' id='btn3' onclick='addKeyboard(3);' value='Add' />
<hr>
<h3>Add khmer_angkor keyboard without filename:</h3>
<input type='button' id='btn4' onclick='addKeyboard(4);' value='Add' />
<p>This verifies adding a keyboard stub with languages Object and no filename</p>
<h3><a href="./">Return to testing home page</a></h3>
</div>
</body>
<!--
*** DEVELOPER NOTE -- FIREFOX CONFIGURATION FOR TESTING ***
*
* If the URL bar starts with <b>file://</b>, Firefox may not load the font used
* to display the special characters used in the On-Screen Keyboard.
*
* To work around this Firefox bug, navigate to <b>about:config</b>
* and set <b>security.fileuri.strict_origin_policy</b> to <b>false</b>
* while testing.
*
* Firefox resolves website-based CSS URI references correctly without needing
* any configuration change, so this change should only be made for file-based testing.
*
***
-->
</html>