Skip to content

feat: show keyboard preview in keyboard details #501

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mcdurdin merged 3 commits into from
Nov 25, 2024
Merged

feat: show keyboard preview in keyboard details #501

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e184202
feat: show keyboard preview in keyboard details
mcdurdin Nov 22, 2024
3bf942e
chore: override keymanweb z-index for hosted osk
mcdurdin Nov 22, 2024
70e89e3
chore: address review comments
mcdurdin Nov 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 23 additions & 0 deletions _includes/2020/KeymanWebHost.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
}
}
105 changes: 93 additions & 12 deletions _includes/includes/ui/keyboard-details.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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/');
Expand Down Expand Up @@ -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>";
}
Expand Down Expand Up @@ -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) {
Expand All @@ -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>
Copy link
Contributor

@darcywong00 darcywong00 Nov 23, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you note the rationale why the blue button changed
from "Use keyboard online"
to "Full online editor"? (and removed the subtext)

I don't have a strong preference. (though does "Full online editor" imply a lot more features than what KeymanWeb offers?)

Copy link
Member Author

@mcdurdin mcdurdin Nov 25, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Rationale -- I agree that 'full online editor' implies a future version of keymanweb.com which has awesomesauce which we just don't currently have. I wanted to differentiate between the one line test box and the more fully featured keymanweb.com, and am open to other ideas.

I thought "Use keyboard online" was confusing because with this new feature the user will already be using the keyboard online. I removed the subtext because it seemed self-evident as it was below the existing keyboard. (I could add the subtext back again for pages which don't have the preview)

END;
}
return FALSE;
Expand Down Expand Up @@ -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?>',
Copy link
Contributor

@ermshiperete ermshiperete Nov 23, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does it work on Firefox if we set it to chrome here?

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'>

Expand Down
38 changes: 38 additions & 0 deletions cdn/dev/keyboard-search/search.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
27 changes: 7 additions & 20 deletions developer/keymanweb/index.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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([
Expand All @@ -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>
Expand All @@ -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)
Copy link
Contributor

@ermshiperete ermshiperete Nov 23, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why do we load EN and TH keyboards by default?

Copy link
Member Author

@mcdurdin mcdurdin Nov 25, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is an example only ... and long ago that was a good sample of keyboards. We could change it to another example one day.

})();
&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>
Expand Down
Loading