From 84056682b60cc236b3a4bbd758d5dcad1718eea8 Mon Sep 17 00:00:00 2001
From: "Joshua A. Horton" <joshua_horton@sil.org>
Date: Thu, 16 May 2024 14:34:26 +0700
Subject: [PATCH] chore(web): adds explicit typing for the app/ui Web modules

---
 web/src/app/ui/kmwuibutton.ts  |  3 ++-
 web/src/app/ui/kmwuifloat.ts   |  6 ++---
 web/src/app/ui/kmwuitoggle.ts  | 22 +++++++++-------
 web/src/app/ui/kmwuitoolbar.ts | 48 ++++++++++++++++++++++------------
 4 files changed, 50 insertions(+), 29 deletions(-)

diff --git a/web/src/app/ui/kmwuibutton.ts b/web/src/app/ui/kmwuibutton.ts
index adf929fac4e..700e854b280 100644
--- a/web/src/app/ui/kmwuibutton.ts
+++ b/web/src/app/ui/kmwuibutton.ts
@@ -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';
@@ -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');
diff --git a/web/src/app/ui/kmwuifloat.ts b/web/src/app/ui/kmwuifloat.ts
index 06b3ef9715a..8d06534ad7c 100644
--- a/web/src/app/ui/kmwuifloat.ts
+++ b/web/src/app/ui/kmwuifloat.ts
@@ -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 != '-') {
@@ -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();
         }
@@ -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
diff --git a/web/src/app/ui/kmwuitoggle.ts b/web/src/app/ui/kmwuitoggle.ts
index 266ce1f5ccf..e354b0c97e5 100644
--- a/web/src/app/ui/kmwuitoggle.ts
+++ b/web/src/app/ui/kmwuitoggle.ts
@@ -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.
@@ -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;
@@ -260,9 +264,9 @@ 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;
@@ -270,7 +274,7 @@ if(!keyman?.ui?.name) {
           /**
            * The top-level element of the button.
            */
-          _elem: HTMLDivElement;
+          _elem: HTMLDivElement & Owned<Button>;
 
           getElem() {
             return this._elem;
@@ -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();
@@ -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';
@@ -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;
@@ -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');
diff --git a/web/src/app/ui/kmwuitoolbar.ts b/web/src/app/ui/kmwuitoolbar.ts
index b62eb4afab1..3a0039eeebe 100644
--- a/web/src/app/ui/kmwuitoolbar.ts
+++ b/web/src/app/ui/kmwuitoolbar.ts
@@ -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.
@@ -76,7 +84,6 @@ if(!keyman?.ui?.name) {
       init = false;
 
       toolbarNode: HTMLDivElement = null;
-      backgroundNode = null;
       browseMapNode: HTMLDivElement = null;
       keyboardsButtonNode: HTMLDivElement = null;
       languageButtonsNode: HTMLDivElement = null;
@@ -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';
 
       /**
@@ -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';
 
       /**
@@ -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>;
 
@@ -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);
@@ -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];
       };
 
@@ -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;
@@ -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';
         }
@@ -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();
 
@@ -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);
         }
@@ -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;
@@ -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]];
@@ -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);