Skip to content

Commit

Permalink
chore(web): adds explicit typing for the app/ui Web modules
Browse files Browse the repository at this point in the history
  • Loading branch information
@jahorton
jahorton committed May 16, 2024
1 parent faa3751 commit 8405668
Show file tree
Hide file tree
Showing 4 changed files with 50 additions and 29 deletions.
3 changes: 2 additions & 1 deletion web/src/app/ui/kmwuibutton.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -293,7 +293,7 @@ if(!keyman?.ui?.name) {

/* TODO: why is this still needed??? Does it actually do anything?? */
osk.addEventListener('hide', function(obj) {
if((arguments.length > 0) && obj['hiddenByUser']) {
if((arguments.length > 0) && obj['HiddenByUser']) {
let _a = document.getElementById('KMW_Keyboard');
if(_a) {
_a.className = 'kmw_hide';
Expand Down Expand Up @@ -405,6 +405,7 @@ if(!keyman?.ui?.name) {
// ... wait, what? I can't find any evidence of this reference point existing.
// Even tag `release-web-stable-2.0` turns up results only for this specific sourcefile.
// Thus, in essence: if(true) { /* ... */ }
// @ts-ignore
if(!keymanweb['iOS']) {
var _li = util.createElement('li');
var _a = util.createElement('a');
Expand Down
6 changes: 3 additions & 3 deletions web/src/app/ui/kmwuifloat.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -442,7 +442,7 @@ if(!keyman?.ui?.name) {
* @param {Object} e event
* Description Change active keyboard in response to user selection event
*/
readonly SelectKeyboardChange = (e) => {
readonly SelectKeyboardChange = (e: Event) => {
keymanweb.activatingUI(true);

if(this.KeyboardSelector.value != '-') {
Expand All @@ -465,7 +465,7 @@ if(!keyman?.ui?.name) {
* @param {Object} e event
* Description Ensure OSK is hidden when moving focus after reselecting a keyboard
*/
readonly SelectBlur = (e) => {
readonly SelectBlur = (e: Event) => {
if(!this.selecting) {
keymanweb.focusLastActiveElement();
}
Expand Down Expand Up @@ -542,7 +542,7 @@ if(!keyman?.ui?.name) {
* @return {boolean}
* Description Display KMW OSK at specified position (returns nothing)
*/
readonly _Resize = (e) => {
readonly _Resize = (e: Event) => {
if(this.outerDiv.style.display =='block') {
var elem = keymanweb.getLastActiveElement();
if(this.floatRight) { // I1296
Expand Down
22 changes: 13 additions & 9 deletions web/src/app/ui/kmwuitoggle.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,10 @@ type KeyboardMenuEntry = {
_Index: number;
}

interface Owned<T> {
_owningObject?: T;
}

// If a UI module has been loaded, we can rely on the publically-published 'name' property
// having been set as a way to short-out a UI reload. Its parent object always exists by
// this point in the build process.
Expand Down Expand Up @@ -80,7 +84,7 @@ if(!keyman?.ui?.name) {
* @param {(boolean|number)} focusing true if focusing
* @param {Object} activeControl Object representing API specs for the control, if it exists and is now focused.
*/
doFocus(someElement: HTMLElement, focusing: boolean | number, activeControl) {
doFocus(someElement: HTMLElement, focusing: boolean | number, activeControl: HTMLElement) {
// This callback must be ignored until UI is initialized, or for touch devices (which can never initialize the UI)
if(!this.initialized) {
return;
Expand Down Expand Up @@ -260,17 +264,17 @@ if(!keyman?.ui?.name) {

class Button {
// Button event-state management fields
_onclick = null;
_onmouseover = null;
_onmouseout = null;
_onclick: () => void = null;
_onmouseover: () => void = null;
_onmouseout: () => void = null;
_down = false;
_over = false;
_selected: boolean;

/**
* The top-level element of the button.
*/
_elem: HTMLDivElement;
_elem: HTMLDivElement & Owned<Button>;

getElem() {
return this._elem;
Expand Down Expand Up @@ -338,7 +342,7 @@ if(!keyman?.ui?.name) {
};


_setSelected(_value) {
_setSelected(_value: boolean) {
keymanweb.activatingUI(false); // Always clear activating UI flag after selecting UI
this._selected = _value;
this.__updatestyle();
Expand All @@ -360,7 +364,7 @@ if(!keyman?.ui?.name) {
this._selected = _selected;

let imgPath=util.getOption('resources') + 'ui/toggle/';
let _elemImg = util.createElement('img');
let _elemImg = util.createElement('img') as HTMLImageElement & Owned<Button>;
this._elem = util.createElement('div');
this._elem['_owningObject'] = this;
_elemImg.style.display = 'block';
Expand All @@ -371,7 +375,7 @@ if(!keyman?.ui?.name) {
this._elem.style.height = '24px';
this._elem.style.zIndex = '10002';
this._elem.style.lineHeight = '100%';
this._elem.style['styleFloat'] = this._elem.style.cssFloat = 'left';
this._elem.style.cssFloat = 'left';

_elemImg.title = _caption;
_elemImg.alt = _caption;
Expand Down Expand Up @@ -704,7 +708,7 @@ if(!keyman?.ui?.name) {
this.selectedMenuItem=_a;
this.keyboardMenu.appendChild(_li);

const _kbds=keymanweb.getKeyboards(), _added=[];
const _kbds=keymanweb.getKeyboards(), _added: Record<string, number> = {};
this.keyboards = [];
for(var _kbd = 0; _kbd < _kbds.length; _kbd++) {
var _li1=util.createElement('li');
Expand Down
48 changes: 32 additions & 16 deletions web/src/app/ui/kmwuitoolbar.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,14 @@ type LanguageEntry = {
keyboards: KeyboardDetail[];
}

interface ListedKeyboard {
priority: number;
lang: LanguageEntry,
keyboard: KeyboardDetail;
buttonNode: HTMLDivElement;
aNode: HTMLAnchorElement;
}

// If a UI module has been loaded, we can rely on the publically-published 'name' property
// having been set as a way to short-out a UI reload. Its parent object always exists by
// this point in the build process.
Expand Down Expand Up @@ -76,7 +84,6 @@ if(!keyman?.ui?.name) {
init = false;

toolbarNode: HTMLDivElement = null;
backgroundNode = null;
browseMapNode: HTMLDivElement = null;
keyboardsButtonNode: HTMLDivElement = null;
languageButtonsNode: HTMLDivElement = null;
Expand All @@ -87,9 +94,9 @@ if(!keyman?.ui?.name) {
selectorNode: HTMLDivElement = null;
regionLanguageListNodes: Record<string, HTMLDivElement> = {};
regionsNode: HTMLDivElement = null;
regionNodes = null;
langKeyboardNodes = [];
langKeyboardListNodes = [];
regionNodes: Record<string, HTMLAnchorElement> = null;
langKeyboardNodes: Record<string, HTMLSpanElement> = {};
langKeyboardListNodes: Record<string, HTMLUListElement> = {};
selectedRegion = 'as';

/**
Expand All @@ -99,7 +106,7 @@ if(!keyman?.ui?.name) {
* page refresh. (If either condition isn't met, it's ignored and the next in line
* is checked until one is found that meets both conditions.)
*/
listedKeyboards = [];
listedKeyboards: ListedKeyboard[] = [];
catchAllRegion = 'un';

/**
Expand All @@ -113,14 +120,17 @@ if(!keyman?.ui?.name) {
* of a new entry will result in pruning the oldest in the list, as with a cache.
*/
maxListedKeyboards = 1;
lastActiveControl = null;
lastActiveControl: HTMLElement = null;
selectedKeyboard: KeyboardDetail = null;
selectedLanguage = '';
helpOffsetX = 0;
helpOffsetY = 0;

keyboardsForLangPopup = null;
lastSelectedKeyboard = null;
keyboardsForLangPopup: HTMLUListElement = null;
lastSelectedKeyboard: {
internalName: string,
languageCode: string
} = null;

regions: Record<string, MapRegion>;

Expand Down Expand Up @@ -289,6 +299,7 @@ if(!keyman?.ui?.name) {
areaNode.alt = '';
areaNode.href = '#';
areaNode.title = this.regions[i].t;
// @ts-ignore
areaNode['hidefocus'] = 'true';
areaNode.onclick = ((i) => { return (event) => this.selectRegion(event, i); })(i);
areaNode.onmouseover = ((i) => { return (event) => this.hoverRegion(event, i); })(i);
Expand Down Expand Up @@ -1038,7 +1049,8 @@ if(!keyman?.ui?.name) {
* @return {*}
* Description Get the value of an element property
**/
pluck(elem, property) {
pluck(elem: HTMLElement, property: string) {
// @ts-ignore
return elem.getAttribute ? elem.getAttribute(property) || elem[property] : elem[property];
};

Expand Down Expand Up @@ -1080,13 +1092,17 @@ if(!keyman?.ui?.name) {
// NOTE: as best as I can tell, this is to be specified by the site developer, not KMW.
// I don't see documentation for it on first glance, though.
let offsetX, offsetY;
// @ts-ignore
if(t['KMW_HelpOffsetX']) {
// @ts-ignore
offsetX = t['KMW_HelpOffsetX'];
} else {
offsetX = 64;
}

// @ts-ignore
if(t['KMW_HelpOffsetY']) {
// @ts-ignore
offsetY = t['KMW_HelpOffsetY'];
} else {
offsetY = 0;
Expand Down Expand Up @@ -1155,7 +1171,7 @@ if(!keyman?.ui?.name) {
* @param {Object} oskPosition
* @return {Object}
**/
readonly onShowOSK = (oskPosition) => {
readonly onShowOSK = (oskPosition: any) => {
if(this.init) {
this.oskButtonNode.className = 'kmw_button_selected';
}
Expand Down Expand Up @@ -1195,7 +1211,7 @@ if(!keyman?.ui?.name) {
* @return {boolean}
* Description Update the map when displayed
**/
readonly showKeyboardsPopup = (event) => {
readonly showKeyboardsPopup = (event: Event) => {
// Add any newly available keyboards to the map
this.addKeyboardsToMap();

Expand Down Expand Up @@ -1293,7 +1309,7 @@ if(!keyman?.ui?.name) {
* @param {function(Object)} callback
* Description Prepare for callback dismissal
**/
SetupPopupDismissal(element, callback: (event: Event) => any) {
SetupPopupDismissal(element: HTMLElement, callback: (event: Event) => any) {
if(this.PopupDismissal == document.onclick) {
this.CancelPopupDismissal(this.dismissalCallback);
}
Expand All @@ -1309,7 +1325,7 @@ if(!keyman?.ui?.name) {
* @param {?function(Object)} callback
* Description Cancel callback dismissal
**/
CancelPopupDismissal(callback) {
CancelPopupDismissal(callback?: (event: Event) => void) {
if(this.PopupDismissal == document.onclick) {
document.onclick = this.lastDismissalCallback;
this.lastDismissalCallback = null;
Expand Down Expand Up @@ -1343,8 +1359,8 @@ if(!keyman?.ui?.name) {
// Iterate over the implicit array
for(let i=0; i < c.maxrecent; i++) {
// Is the entry actually defined?
if(c['recent'+i] != undefined) {
var r=c['recent'+i].split(',');
if(c[`recent${i}`] != undefined) {
var r=c[`recent${i}`].split(',');
// Does its definition have the expected format? That is: langID,keyboardID
if(r.length == 2) {
var k = this.languages[r[0]];
Expand Down Expand Up @@ -1400,7 +1416,7 @@ if(!keyman?.ui?.name) {
vs.maxrecent = this.listedKeyboards.length;

for(var i=0; i<this.listedKeyboards.length; i++) {
vs['recent'+i] = this.listedKeyboards[i].lang.id+","+this.listedKeyboards[i].keyboard.InternalName;
vs[`recent${i}`] = this.listedKeyboards[i].lang.id+","+this.listedKeyboards[i].keyboard.InternalName;
}

util.saveCookie<ToolbarCookie>('KeymanWeb_Toolbar',vs);
Expand Down

0 comments on commit 8405668

Please sign in to comment.