Merge pull request #501 from keymanapp/feat/show-keymanweb-in-keyboar…

…d-details feat: show keyboard preview in keyboard details
keymanapp · Nov 25, 2024 · d1a43b9 · d1a43b9
2 parents 501e187 + 70e89e3
commit d1a43b9
Show file tree

Hide file tree

Showing 4 changed files with 161 additions and 32 deletions.
diff --git a/_includes/2020/KeymanWebHost.php b/_includes/2020/KeymanWebHost.php
@@ -0,0 +1,23 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Keyman\Site\com\keyman;
+
+class KeymanWebHost {
+  static function getKeymanWebUrlBase() {
+    global $KeymanHosts;
+    $json = @file_get_contents("{$KeymanHosts->api_keyman_com}/version/web");
+    if($json) {
+      $json = json_decode($json);
+    }
+    if($json && property_exists($json, 'version')) {
+      $build = $json->version;
+    } else {
+      // If the get-version API fails, we'll use the latest known stable version
+      $build = "17.0.332";
+    }
+
+    return "{$KeymanHosts->s_keyman_com}/kmw/engine/$build";
+  }
+}
diff --git a/_includes/includes/ui/keyboard-details.php b/_includes/includes/ui/keyboard-details.php
@@ -6,6 +6,7 @@
   require_once('includes/appstore.php');
 
   use \DateTime;
+  use \Keyman\Site\com\keyman\KeymanWebHost;
   use \Keyman\Site\Common\KeymanHosts;
 
   define('GITHUB_ROOT', 'https://github.com/keymanapp/keyboards/tree/master/');
@@ -67,7 +68,9 @@ public static function render_keyboard_details($id, $tier = 'stable', $landingPa
 
       self::LoadData();
       self::WriteTitle();
+      self::WriteDescription();
       self::WriteDownloadBoxes();
+      self::WriteKeymanWebBox();
       self::WriteKeyboardDetails();
       if(!empty(self::$deprecatedBy)) echo "</div></div>";
     }
@@ -119,11 +122,11 @@ protected static function download_box($platform) {
       }
     }
 
-    protected static function WriteWebBoxes() {
+    protected static function WriteWebBoxes($useDescription) {
       global $embed_target;
       global $KeymanHosts;
       if (isset(self::$keyboard->platformSupport->desktopWeb) && self::$keyboard->platformSupport->desktopWeb != 'none' && empty(self::$deprecatedBy)) {
-          if(empty(self::$bcp47)) {
+        if(empty(self::$bcp47)) {
           if (isset(self::$keyboard->languages)) {
             if (is_array(self::$keyboard->languages)) {
               if (count(self::$keyboard->languages) > 0) {
@@ -141,12 +144,19 @@ protected static function WriteWebBoxes() {
         }
         if (!isset($lang)) $lang = 'en';
         $url = "{$KeymanHosts->keymanweb_com}/#$lang,Keyboard_" . self::$keyboard->id;
-        $description = htmlentities(self::$keyboard->name);
-          return <<<END
+        if($useDescription) {
+          $description = htmlentities(self::$keyboard->name);
+          $description = "<div class=\"download-description\">Use $description in your web browser. No need to install anything.</div>";
+          $linktext = 'Use keyboard online';
+        } else {
+          $description = '';
+          $linktext = 'Full online editor';
+        }
+        return <<<END
           <div class="download download-web">
-          <a class="download-link" $embed_target href='$url'>Use keyboard online</a>
-          <div class="download-description">Use $description in your web browser. No need to install anything.</div>
-        </div>
+            <a class="download-link" $embed_target href='$url'>$linktext</a>
+            $description
+          </div>
 END;
       }
       return FALSE;
@@ -369,24 +379,95 @@ protected static function WriteDownloadBoxes() {
       }
 
       if ($embed == 'none') {
-        $webtext = self::WriteWebBoxes();
-        if ($webtext) {
-          echo $webtext;
+        if(self::GetWebDeviceFromPageDevice() == null) {
+          $webtext = self::WriteWebBoxes(true);
+          if ($webtext) {
+            // If we have a web keyboard, and we are not embedded, and this is a
+            // mobile device, then show the link to keymanweb.com
+            echo $webtext;
+          }
         }
-
         if(empty(self::$deprecatedBy)) {
           self::WriteQRCode('other');
         }
       }
     }
 
+    protected static function GetWebDeviceFromPageDevice() {
+      global $pageDevice;
+      switch($pageDevice) {
+        case 'Windows': return 'windows';
+        case 'mac':     return 'macosx';
+        case 'Linux':   return 'linux';
+      }
+      return null;
+    }
+
+    protected static function WriteKeymanWebBox() {
+      global $embed;
+
+      // don't show if we are embedded into a Keyman app
+      if($embed != 'none') {
+        return;
+      }
+
+      // only show if we have a web keyboard and we are not deprecated
+      if(!isset(self::$keyboard->platformSupport->desktopWeb) ||
+          self::$keyboard->platformSupport->desktopWeb == 'none' ||
+          !empty(self::$deprecatedBy)) {
+        return;
+      }
+
+      // only inject on desktop platforms
+      $webDevice = self::GetWebDeviceFromPageDevice();
+      if(!$webDevice) {
+        return;
+      }
+
+      $webtext = self::WriteWebBoxes(false);
+      $cdnUrlBase = KeymanWebHost::getKeymanWebUrlBase();
+      ?>
+        <h2 id='try-header' class='red underline'>Try this keyboard</h2>
+        <div id='try-box'>
+          <input type='text' id='try-keyboard'>
+          <div id='osk-host'></div>
+          <div id='try-keymanweb-link'><?= $webtext ?></div>
+        </div>
+        <script src='<?=$cdnUrlBase?>/keymanweb.js'></script>
+        <script>
+          (function() {
+            keyman.init({attachType:'manual'}).then(
+              function() {
+                keyman.attachToControl(document.getElementById('try-keyboard'));
+
+                // Create a new on screen keyboard view and tell KeymanWeb that
+                // we are using the targetDevice for context input.
+                const targetDevice = {
+                  browser: 'chrome', formFactor: 'desktop', OS: '<?=$webDevice?>',
+                  touchable: false, dimensions: [640, 300] };
+                newOSK = new keyman.views.InlinedOSKView(keyman, { device: targetDevice });  // Note: KeymanWeb internal API
+                keyman.core.contextDevice = targetDevice;  // Note: KeymanWeb internal API
+                keyman.osk = newOSK;  // Note: undocumented KeymanWeb API
+                newOSK.setSize(targetDevice.dimensions[0]+'px', targetDevice.dimensions[1]+'px');
+                document.getElementById('osk-host').appendChild(newOSK.element);
+              }
+            );
+            keyman.addKeyboards('<?= self::$id ?>');
+          })();
+        </script>
+      <?php
+    }
+
+    protected static function WriteDescription() {
+      echo "<p>" . self::$description . "</p>";
+    }
+
     protected static function WriteKeyboardDetails() {
       global $embed_target, $session_query_q, $KeymanHosts;
 
       // this is html, trusted in database
       ?>
       <h2 class='red underline'>Keyboard Details</h2>
-      <p><?= self::$description ?></p>
       <div class='cols' id='keyboard-details-col'>
         <div class='col'>
 

diff --git a/cdn/dev/keyboard-search/search.css b/cdn/dev/keyboard-search/search.css
@@ -314,6 +314,44 @@ p#permalink {
   font-size: 8pt;
 }
 
+/* Try this keyboard */
+
+#try-box {
+  display: none;
+  margin: 0px 0px 16px 16px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+html[data-platform~='windows linux macos'] #try-header,
+html[data-platform~='windows linux macos'] #try-box {
+  display: block;
+}
+
+#try-keyboard {
+  font-size: 1.5em;
+  width: 632px;
+  height: 44px;
+  margin: 0 auto 8px auto;
+  display: block;
+}
+
+#osk-host {
+  width: 640px;
+  height: 300px;
+}
+
+#osk-host .kmw-key-square {
+  /* Note: this is a hack to override the incorrect z-index that KMW is using for embedded OSK */
+  z-index: auto;
+}
+
+#try-keymanweb-link {
+  margin-top: 8px;
+  display: block;
+}
+
 /* Download boxes */
 
 .download {

diff --git a/developer/keymanweb/index.php b/developer/keymanweb/index.php
@@ -2,6 +2,7 @@
   require_once('includes/template.php');
   require_once __DIR__ . '/../../_includes/autoload.php';
   use Keyman\Site\Common\KeymanHosts;
+  use Keyman\Site\com\keyman\KeymanWebHost;
 
   // Required
   head([
@@ -10,18 +11,7 @@
     'showMenu' => true
   ]);
 
-  $json = @file_get_contents("{$KeymanHosts->api_keyman_com}/version/web");
-  if($json) {
-    $json = json_decode($json);
-  }
-  if($json && property_exists($json, 'version')) {
-    $build = $json->version;
-  } else {
-    // If the get-version API fails, we'll use the latest known stable version
-    $build = "16.0.145";
-  }
-
-  $cdnUrlBase = "{$KeymanHosts->s_keyman_com}/kmw/engine/$build";
+  $cdnUrlBase = KeymanWebHost::getKeymanWebUrlBase();
 ?>
 <script src='<?=cdn('js/clipboard.min.js')?>'></script>
 <script src='<?=cdn('js/prism.js')?>'></script>
@@ -42,18 +32,15 @@
 &lt;script src='<?=$cdnUrlBase?>/keymanweb.js'&gt;&lt;/script&gt;
 &lt;script src='<?=$cdnUrlBase?>/kmwuitoggle.js'&gt;&lt;/script&gt;
 &lt;script&gt;
-  (function(kmw) {
-    kmw.init({attachType:'auto'});
-    kmw.addKeyboards('@en'); // Loads default English keyboard from Keyman Cloud (CDN)
-    kmw.addKeyboards('@th'); // Loads default Thai keyboard from Keyman Cloud (CDN)
-  })(keyman);
+  (function() {
+    keyman.init({attachType:'auto'});
+    keyman.addKeyboards('@en'); // Loads default English keyboard from Keyman Cloud (CDN)
+    keyman.addKeyboards('@th'); // Loads default Thai keyboard from Keyman Cloud (CDN)
+  })();
 &lt;/script&gt;
 </code></pre>
 </div>
 
-<p>Upgrade Note: with KeymanWeb <?= $stable_version; ?>, the unminified version is no longer served from our CDN.
-Instead, we use source maps to make the full source available in web developer tools.</p>
-
 <h3>Live Examples</h3>
 
 <ul>