From 5162a028cc603c4ecf6ee68e56b7e20bf0a436d9 Mon Sep 17 00:00:00 2001
From: Marc Durdin <marc@durdin.net>
Date: Tue, 21 Sep 2021 07:30:15 +1000
Subject: [PATCH 1/2] chore(web): inline osk test page

Adds a page to experiment with the inline osk.
---
 web/testing/index.html            |   1 +
 web/testing/inline-osk/index.html | 123 ++++++++++++++++++++++++++++++
 2 files changed, 124 insertions(+)
 create mode 100644 web/testing/inline-osk/index.html
diff --git a/web/testing/index.html b/web/testing/index.html
index 940be7eb43..78b6009fa9 100644
--- a/web/testing/index.html
+++ b/web/testing/index.html
@@ -57,6 +57,7 @@
   <h2><a href="./issue5455/index.html">Test page for util.wait checking options.useAlerts</a></h2>
   <h2><a href="./issue917-context-and-notany/">Test page for context() and notany() interaction</a></h2>
   <h2><a href="./spacebar-text/">Test SpacebarText APIs (#949)</a></h2>
+  <h2><a href="./inline-osk/">Test inline OSK (#5665)</a></h2>
   <p><a href="../">Return to main index.</a>
   </body>
 </html>
diff --git a/web/testing/inline-osk/index.html b/web/testing/inline-osk/index.html
new file mode 100644
index 0000000000..93daba0b4c
--- /dev/null
+++ b/web/testing/inline-osk/index.html
@@ -0,0 +1,123 @@
+<!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 Sample Page - Inline OSK</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>
+      let newOSK;
+      function setOSK(platform) {
+        let targetDevice = platform == 'windows' ?
+          {'browser': 'chrome', 'formFactor': 'desktop', OS: 'windows', touchable: false} :  // Or whatever target config you want.
+          {'browser': 'chrome', 'formFactor': 'phone', OS: 'ios', touchable: true};
+        if(newOSK) document.getElementById('KeymanWebControl').removeChild(newOSK.element);
+        newOSK = new com.keyman.osk.InlinedOSKView(targetDevice, keyman.util.device.coreSpec);
+        newOSK.setSize('300px', '150px');  // Or pick whatever size you want, however you want it.
+        document.getElementById('KeymanWebControl').appendChild(newOSK.element);
+        keyman.osk = newOSK;
+        newOSK.activeKeyboard = keyman.core.activeKeyboard;
+        keyman.alignInputs();
+        document.getElementById('ta1').focus();
+      }
+
+      var kmw=window.keyman;
+      kmw.init({
+		    attachType:'auto'
+      }).then(function() {
+        setOSK('windows');
+        loadKeyboards(1);
+      });
+    </script>
+
+    <!-- Add keyboard management script for local selection of keyboards to use -->
+    <script src="../commonHeader.js"></script>
+
+  </head>
+
+<!-- Sample page HTML -->
+  <body>
+    <h2>KeymanWeb Sample Page - Inline OSK</h2>
+
+    <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 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="./">Return to testing home page</a></h3>
+
+    <h3>Control inline osk</h3>
+    <input type='button' onclick='setOSK("ios");' value='setOSK(ios)' />
+    <input type='button' onclick='setOSK("windows");' value='setOSK(windows)' />
+  </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>

From e8cb33d75ed14c2aabab610ae86169332a149d66 Mon Sep 17 00:00:00 2001
From: Marc Durdin <marc@durdin.net>
Date: Wed, 22 Sep 2021 10:53:04 +1000
Subject: [PATCH 2/2] Update web/testing/inline-osk/index.html

Co-authored-by: Darcy Wong <darcy_wong@sil.org>
---
 web/testing/inline-osk/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/testing/inline-osk/index.html b/web/testing/inline-osk/index.html
index 93daba0b4c..01bf80a84f 100644
--- a/web/testing/inline-osk/index.html
+++ b/web/testing/inline-osk/index.html
@@ -96,7 +96,7 @@
     <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="./">Return to testing home page</a></h3>
+    <h3><a href="../index.html">Return to testing home page</a></h3>
 
     <h3>Control inline osk</h3>
     <input type='button' onclick='setOSK("ios");' value='setOSK(ios)' />
