refactor(web): osk inner-frame abstraction (help text vs std OSK) 🍕 #5430
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -98,24 +98,33 @@ namespace com.keyman.keyboards { | |
| } | ||
|
|
||
| /** | ||
| * HTML help text, as specified by either the &kmw_helptext or &kmw_helpfile system stores. | ||
| * | ||
| * Reference: https://help.keyman.com/developer/language/reference/kmw_helptext, | ||
| * https://help.keyman.com/developer/language/reference/kmw_helpfile | ||
| */ | ||
| get helpText(): string { | ||
| return this.scriptObject['KH']; | ||
| } | ||
|
|
||
| /** | ||
| * Embedded JS script designed for use with a keyboard's HTML help text. Always defined | ||
| * within the file referenced by &kmw_embedjs in a keyboard's source, though that file | ||
| * may also contain _other_ script definitions as well. (`KHF` must be explicitly defined | ||
| * within that file.) | ||
| */ | ||
| get hasScript(): boolean { | ||
| return !!this.scriptObject['KHF']; | ||
| } | ||
|
|
||
| /** | ||
| * Embeds a custom script for use by the OSK, which may be interactive (like with sil_euro_latin). | ||
| * Note: this must be called AFTER any contents of `helpText` have been inserted into the DOM. | ||
| * (See sil_euro_latin's source -> sil_euro_latin_js.txt) | ||
|
There was a problem hiding this comment. This PR gave me a great opportunity to dive into The Sadly, it seems that Github doesn't like to expand cross-repo permalinks. There was a problem hiding this comment. Side-note: that Like, direct insertion of a style sheet to the element, as seen here. It also blatantly ignores the provided There was a problem hiding this comment. How could we chart a way forward to using shadow dom? What sort of changes would we need to make to keyboards that use kmw_embedjs? (sil_euro_latin, Chinese, Japanese, Korean, perhaps others). There was a problem hiding this comment. Chinese and Japanese are deprecated, .js-only keyboards so far as I can tell. Neither defines a
My proposition: We pass
If the keyboard is able to utilize Shadow DOM stuff, great! If not... I think we kind of have to support the old, non-shadowed functionality for now - both in keyboards and in the engine. I don't see any reliable way to shoe-horn non-shadow-aware JS into Shadow DOM stuff. There was a problem hiding this comment.
Legacy, not deprecated. Big difference. There was a problem hiding this comment. Shadow DOM discussion captured in #4881. |
||
| * | ||
| * Reference: https://help.keyman.com/developer/language/reference/kmw_embedjs | ||
| */ | ||
| embedScript(e: any) { | ||
| // e: Expects the OSKManager's _Box element. We don't add type info here b/c it would | ||
| // reference the DOM. | ||
| this.scriptObject['KHF'](e); | ||
|
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| /// <reference path="keyboardView.interface.ts" /> | ||
|
|
||
| namespace com.keyman.osk { | ||
| export class EmptyView implements KeyboardView { | ||
| readonly element: HTMLDivElement; | ||
|
There was a problem hiding this comment. I'm fairly certain KMW currently keeps the OSK hidden whenever this is the active "inner frame" type. But... it does bother to construct it, so it gets its own proper class. |
||
|
|
||
| constructor() { | ||
| let Ldiv = this.element = document.createElement('div'); | ||
| Ldiv.style.userSelect = 'none'; | ||
| Ldiv.className='kmw-osk-none'; | ||
| } | ||
|
|
||
| // No operations needed; this is a stand-in for the desktop OSK when no keyboard is active. | ||
| public postInsert() { } | ||
| public updateState() { } | ||
| } | ||
| } | ||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| /// <reference path="keyboardView.interface.ts" /> | ||
|
|
||
| namespace com.keyman.osk { | ||
| export class HelpPageView implements KeyboardView { | ||
| private readonly kbd: keyboards.Keyboard; | ||
| public readonly element: HTMLDivElement; | ||
|
|
||
| private static readonly ID = 'kmw-osk-help-page'; | ||
|
|
||
| constructor(keyboard: keyboards.Keyboard) { | ||
| this.kbd = keyboard; | ||
|
|
||
| var Ldiv = this.element = document.createElement('div'); | ||
| Ldiv.style.userSelect = "none"; | ||
| Ldiv.className = 'kmw-osk-static'; | ||
| Ldiv.id = HelpPageView.ID; | ||
| Ldiv.innerHTML = keyboard.helpText; | ||
| } | ||
|
|
||
| public postInsert() { | ||
| if(!this.element.parentElement || !document.getElementById(HelpPageView.ID)) { | ||
| throw new Error("The HelpPage root element has not yet been inserted into the DOM."); | ||
| } | ||
|
|
||
| if(this.kbd.hasScript) { | ||
| // .parentElement: ensure this matches the _Box element from OSKManager / OSKView | ||
| // Not a hard requirement for any known keyboards, but is asserted by legacy docs. | ||
| this.kbd.embedScript(this.element.parentElement); | ||
| } | ||
| } | ||
|
|
||
| public updateState() { } | ||
| } | ||
| } |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| namespace com.keyman.osk { | ||
| /** | ||
| * An abstract representation for visualizations of the active keyboard within an | ||
| * OSKManager / OSKView. Most keyboards will default to use of a VisualKeyboard, | ||
| * though some will use HelpPage for certain form factors. | ||
| */ | ||
| export interface KeyboardView { | ||
| readonly element: HTMLDivElement; | ||
|
|
||
| /** | ||
| * Evaluates code that must be run _after_ the KeyboardView has been inserted into | ||
| * the DOM hierarchy. | ||
| */ | ||
| postInsert(): void; | ||
|
|
||
| /** | ||
| * Code that updates the state of the KeyboardView whenever the OSK itself needs to be | ||
| * refreshed or updated with new state information. | ||
| */ | ||
| updateState(): void; | ||
| } | ||
| } |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Please add a comment, similar to the one above for
helpText, referencing kmw_embedjs