Merge pull request #5406 from keymanapp/feat/cherry-pick/spacebar-text

feat(web): spacebar text controls 🍒 🌌

web/source/keyboards/kmwkeyboards.ts

@@ -59,6 +59,8 @@ namespace com.keyman.keyboards {
     'KFont': KeyboardFont;
     'KOskFont': KeyboardFont;
 
+    'displayName': string; // Display name as shown on spacebar
+
     // Used when loading a stub's keyboard.
     asyncLoader?: any;
 
@@ -271,6 +273,7 @@ namespace com.keyman.keyboards {
       sp['KR'] = (typeof sp['KR'] === 'undefined') ? KeyboardManager.regions[rIndex] : sp['KR'];
       sp['KRC'] = (typeof sp['KRC'] === 'undefined') ? KeyboardManager.regionCodes[rIndex] : sp['KRC'];
       sp['KN'] = (typeof sp['KN'] === 'undefined') ? kp['name'] : sp['KN'];
+      sp['displayName'] = (typeof sp['displayName'] === 'undefined') ? kp['displayName'] : sp['displayName'];
 
       if(typeof(sp['KF']) == 'undefined') {
         rx=RegExp('^(([\\.]/)|([\\.][\\.]/)|(/))|(:)');
@@ -658,7 +661,7 @@ namespace com.keyman.keyboards {
               manager.keymanweb.uiManager.justActivated = true; // TODO:  Resolve without need for the cast.
               manager.keymanweb.domManager._SetTargDir(manager.keymanweb.domManager.getLastActiveElement());
             }
-            
+
             manager.saveCurrentKeyboard(kbd['KI'], kbdStub['KLC']);
 
             // Prepare and show the OSK for this keyboard

web/source/kmwbase.ts

@@ -24,10 +24,18 @@
 /// <reference path="text/prediction/modelManager.ts" />
 
 /***
-   KeymanWeb 11.0
-   Copyright 2017-2019 SIL International
+   KeymanWeb 14.0
+   Copyright 2017-2021 SIL International
 ***/
 namespace com.keyman {
+
+  export enum SpacebarText {
+    KEYBOARD = 'keyboard',
+    LANGUAGE = 'language',
+    LANGUAGE_KEYBOARD = 'languageKeyboard',
+    BLANK = 'blank'
+  };
+
   export class KeymanBase {
     _TitleElement = null;      // I1972 - KeymanWeb Titlebar should not be a link
     _IE = 0;                   // browser version identification
@@ -80,7 +88,8 @@ namespace com.keyman {
       'fonts':'',
       'attachType':'',
       'ui':null,
-      'setActiveOnRegister':'true'
+      'setActiveOnRegister':'true',
+      'spacebarText':SpacebarText.LANGUAGE_KEYBOARD
     };
 
 

web/source/osk/visualKeyboard.ts

@@ -124,7 +124,7 @@ namespace com.keyman.osk {
       }
 
       // re-use canvas object for better performance
-      var canvas: HTMLCanvasElement = OSKKey.getTextMetrics['canvas'] || 
+      var canvas: HTMLCanvasElement = OSKKey.getTextMetrics['canvas'] ||
                                      (OSKKey.getTextMetrics['canvas'] = document.createElement("canvas"));
       var context = canvas.getContext("2d");
       context.font = fontSize + " " + fontFamily;
@@ -748,8 +748,8 @@ namespace com.keyman.osk {
       } else if(newWidth > 0.9*screen.width) {
         newWidth=0.9*screen.width;
       }
-  
-      // Default height decision made here: 
+
+      // Default height decision made here:
       // https://github.com/keymanapp/keyman/pull/4279#discussion_r560453929
       newHeight=util.toNumber(c['height'], 0.333 * newWidth);
 
@@ -764,8 +764,8 @@ namespace com.keyman.osk {
 
     /**
      * Sets & tracks the size of the VisualKeyboard's primary element.
-     * @param width 
-     * @param height 
+     * @param width
+     * @param height
      * @param pending Set to `true` if called during a resizing interaction
      */
     public setSize(width: number, height: number, pending?: boolean) {
@@ -1839,7 +1839,7 @@ namespace com.keyman.osk {
 
         // Preference order:
         // #1:  if a default subkey has been specified, select it.  (pending, for 15.0+)
-        // #2:  if no default subkey is specified, default to a subkey with the same 
+        // #2:  if no default subkey is specified, default to a subkey with the same
         //      key ID and layer / modifier spec.
         //if(skSpec.isDefault) { TODO for 15.0
         //  bk = skElement;
@@ -1870,16 +1870,36 @@ namespace com.keyman.osk {
     showLanguage() {
       let keyman = com.keyman.singleton;
 
-      var lgName='',kbdName='';
-      var activeStub = keyman.keyboardManager.activeStub;
+      let displayName: string = undefined;
+      let activeStub = keyman.keyboardManager.activeStub;
 
       if(activeStub) {
-        lgName=activeStub['KL'];
-        kbdName=activeStub['KN'];
-      } else if(keyman.getActiveLanguage(true)) {
-        lgName=keyman.getActiveLanguage(true);
+        if(activeStub['displayName']) {
+          displayName = activeStub['displayName'];
+        } else {
+          let
+            lgName: string = activeStub['KL'],
+            kbdName: string = activeStub['KN'];
+          kbdName = kbdName.replace(/\s*keyboard\s*/i,'');
+          switch(keyman.options['spacebarText']) {
+            case SpacebarText.KEYBOARD:
+              displayName = kbdName;
+              break;
+            case SpacebarText.LANGUAGE:
+              displayName = lgName;
+              break;
+            case SpacebarText.LANGUAGE_KEYBOARD:
+              displayName = (kbdName == lgName) ? lgName : lgName + ' - ' + kbdName;
+              break;
+            case SpacebarText.BLANK:
+              displayName = '';
+              break;
+            default:
+              displayName = kbdName;
+          }
+        }
       } else {
-        lgName='(System keyboard)';
+        displayName = '(System keyboard)';
       }
 
       try {
@@ -1891,19 +1911,13 @@ namespace com.keyman.osk {
           tParent.className +=' kmw-spacebar';
         }
 
-        t.className='kmw-spacebar-caption';
-        kbdName=kbdName.replace(/\s*keyboard\s*/i,'');
-
-        // We use a separate variable here to keep down on MutationObserver messages in keymanweb.js code.
-        var keyboardName = "";
-        if(kbdName == lgName) {
-          keyboardName=lgName;
-        } else {
-          keyboardName=lgName+' ('+kbdName+')';
+        if(t.className != 'kmw-spacebar-caption') {
+          t.className='kmw-spacebar-caption';
         }
+
         // It sounds redundant, but this dramatically cuts down on browser DOM processing.
-        if(t.innerHTML != keyboardName) {
-          t.innerHTML = keyboardName;
+        if(t.innerText != displayName) {
+          t.innerText = displayName;
         }
       }
       catch(ex){}

web/testing/index.html

@@ -53,6 +53,7 @@
   <h2><a href="./issue382">Test page for automatic key-cap scaling.</a></h2>
   <h2><a href="./issue3701">Test page for fat-finger interaction with beep feedback</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>
   <p><a href="../">Return to main index.</a>
   </body>
 </html>

web/testing/spacebar-text/index.html

@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset='utf-8' />
+
+  <!-- Set the viewport width to match phone and tablet device widths -->
+  <meta name="viewport" content="width=device-width,user-scalable=no" />
+
+  <title>KeymanWeb SpacebarText Tests</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>
+    keyman.init({
+      attachType: 'auto'
+    });
+
+    window.addEventListener('load', function() {
+      keyman.addKeyboards({id:'rac_balti',name:'RAC Balti',
+        languages:{
+          id:'bft-Arab-PK',name:'Balti'
+        },
+        filename:'rac_balti.js',
+        displayName: 'My Custom Name'
+      },
+      '@en');
+    }, false);
+
+    function setST(t) {
+      keyman.options['spacebarText'] = t;
+      document.getElementById('ta1').focus();
+      //keyman.osk.show(true); <-- this is needed if you are not triggering a re-display of
+      //                           the keyboard, which the focus() call does for us here.
+    }
+  </script>
+</head>
+
+<!-- Sample page HTML -->
+<body>
+  <h2>KeymanWeb Sample Page - SpacebarText Testing</h2>
+  <p>See <a href='https://github.com/keymanapp/keyman/pull/5348'>PR #5348</a> for details.</p>
+  <p>The English keyboard should have its spacebar caption modified by the radio controls,
+    whereas the Balti keyboard has a custom caption specified in its `addKeyboards` call.
+  </p>
+
+  <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'/>
+
+  <div>Set default caption to:<br>
+    <input type='radio' name='st' onclick="setST('language')" id='radioLanguage' /><label for='radioLanguage'>Language</label>
+    <input type='radio' name='st' onclick="setST('keyboard')" id='radioKeyboard' /><label for='radioKeyboard'>Keyboard</label>
+    <input type='radio' name='st' checked onclick="setST('languageKeyboard')" id='radioLanguageKeyboard' /><label for='radioLanguageKeyboard'>Language - Keyboard</label>
+    <input type='radio' name='st' onclick="setST('blank')" id='radioBlank' /><label for='radioBlank'>Blank</label>
+  </div>
+
+  <hr/>
+  <h3><a href="../index.html">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>