mirror of
https://github.com/keymanapp/keyman.git
synced 2026-08-29 19:57:41 +00:00
153 lines
5.6 KiB
HTML
153 lines
5.6 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 - Basic IFrames</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;}
|
|
code {line-height: 1.6; font-style: oblique; }
|
|
</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;
|
|
|
|
var platform = 'desktop';
|
|
|
|
keyman.getOskWidth = function() {
|
|
return platform == 'desktop' ? 960 :
|
|
platform == 'phone' ? 520 : 720;
|
|
};
|
|
|
|
keyman.getOskHeight = function() {
|
|
return platform == 'desktop' ? 320 :
|
|
platform == 'phone' ? 240 : 360;
|
|
};
|
|
|
|
let shadowfy = function(container, style) {
|
|
const docBase = container.children[0];
|
|
container.removeChild(docBase);
|
|
|
|
const shadow = container.attachShadow({ mode: "open" });
|
|
shadow.appendChild(docBase);
|
|
|
|
const baseOSKStyle = document.createElement('link');
|
|
baseOSKStyle.href = "../../release/unminified/web/osk/kmwosk.css";
|
|
baseOSKStyle.rel="stylesheet";
|
|
baseOSKStyle.type="text/css";
|
|
shadow.appendChild(baseOSKStyle);
|
|
|
|
shadow.appendChild(style);
|
|
}
|
|
|
|
let documentKeyboard = async function(kbdid, langid, formFactor, layer) {
|
|
let docTarget = document.getElementById("docTarget");
|
|
label = document.createElement('h3');
|
|
docTarget.appendChild(label);
|
|
|
|
let idLabel = document.createElement('code');
|
|
docTarget.appendChild(idLabel);
|
|
|
|
const container = document.createElement('div');
|
|
|
|
await kmw.addKeyboards(`${kbdid}@${langid}`);
|
|
await kmw.setActiveKeyboard(kbdid, langid);
|
|
docBase = keyman.BuildVisualKeyboard(kbdid, 1, formFactor, layer);
|
|
|
|
label.textContent = `${keyman.getKeyboard(kbdid).Name} - ${formFactor} - ${layer} layer`;
|
|
idLabel.textContent = `${kbdid.replace(/^Keyboard_/)}`;
|
|
container.appendChild(docBase);
|
|
|
|
docTarget.appendChild(container);
|
|
|
|
// Trigger message queue: let the mutation observer do its thing.
|
|
// In case it's not obvious: this is only really safe because this test page is a
|
|
// highly-controlled environment.
|
|
await Promise.resolve();
|
|
|
|
// Grab the stylesheet element that was inserted; there should be no intervening additions,
|
|
// so the newly-added stylesheet element should be the last element in the <head> section.
|
|
const stylesheet = document.head.lastChild;
|
|
stylesheet.parentElement.removeChild(stylesheet);
|
|
|
|
shadowfy(container, stylesheet);
|
|
}
|
|
|
|
kmw.init({
|
|
}).then(async function() {
|
|
await documentKeyboard("gff_amharic", "am", "phone", "default");
|
|
await documentKeyboard("sil_euro_latin", "no", "phone", "shift");
|
|
await documentKeyboard("lao_2008_basic", "lo", "tablet", "default");
|
|
await documentKeyboard("lao_2008_basic", "lo", "desktop", "default");
|
|
await documentKeyboard("sil_cameroon_azerty", "pny", "tablet", "default");
|
|
await documentKeyboard("khmer_angkor", "km", "desktop", "default");
|
|
});
|
|
</script>
|
|
|
|
</head>
|
|
|
|
<!-- Sample page HTML -->
|
|
<body>
|
|
<h2>KeymanWeb: Keyboard documentation rendering</h2>
|
|
|
|
<div id='DynamicTextboxes'>
|
|
<!--
|
|
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>This test page exists for testing KMW's keyboard-documentation rendering system.</h3>
|
|
<!--<iframe src="hello-world.html" height=100></iframe>-->
|
|
<hr>
|
|
<div id="docTarget"></div>
|
|
</div>
|
|
<h3><a href="../">Return to testing home page</a></h3>
|
|
|
|
|
|
|
|
</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>
|