[refactor] Moved 'createAccordionElement' to its own TS file

src/ActiveScriptsUI.js

@@ -5,7 +5,7 @@ import {workerScripts,
 import {Player}                    from "./Player";
 import {getServer}                 from "./Server";
 import {dialogBoxCreate}           from "../utils/DialogBox";
-import {createAccordionElement}    from "../utils/HelperFunctions";
+import {createAccordionElement}    from "../utils/uiHelpers/createAccordionElement";
 import {arrayToString}             from "../utils/helpers/arrayToString";
 import {createElement}             from "../utils/uiHelpers/createElement";
 import {exceptionAlert}            from "../utils/helpers/exceptionAlert";

src/Augmentations.js

@@ -12,7 +12,7 @@ import {Script, RunningScript}             from "./Script";
 import {Server}                            from "./Server";
 import {SourceFiles}                       from "./SourceFile";
 import {dialogBoxCreate}                   from "../utils/DialogBox";
-import {createAccordionElement}            from "../utils/HelperFunctions";
+import {createAccordionElement}            from "../utils/uiHelpers/createAccordionElement";
 import {Reviver, Generic_toJSON,
         Generic_fromJSON}                  from "../utils/JSONReviver";
 import {clearObject}                       from "../utils/helpers/clearObject";

src/Gang.js

@@ -6,7 +6,7 @@ import {Player}                                 from "./Player";
 import {dialogBoxCreate}                        from "../utils/DialogBox";
 import {Reviver, Generic_toJSON,
         Generic_fromJSON}                       from "../utils/JSONReviver";
-import {createAccordionElement}                 from "../utils/HelperFunctions";
+import {createAccordionElement}                 from "../utils/uiHelpers/createAccordionElement";
 import {createElement}                          from "../utils/uiHelpers/createElement";
 import {createPopup}                            from "../utils/uiHelpers/createPopup";
 import  numeral                                 from "numeral/min/numeral.min";

utils/HelperFunctions.js

@@ -1,30 +0,0 @@
-//Creates both the header and panel element of an accordion and sets the click handler
-function createAccordionElement(params) {
-    var li = document.createElement("li"),
-        hdr = document.createElement("button"),
-        panel = document.createElement("div");
-    hdr.classList.add("accordion-header");
-    panel.classList.add("accordion-panel");
-
-    if (params.id) {
-        hdr.id = params.id + "-hdr";
-        panel.id = params.id + "-panel";
-    }
-    if (params.hdrText)         {hdr.innerHTML = params.hdrText;}
-    if (params.panelText)       {panel.innerHTML = params.panelText;}
-    li.appendChild(hdr);
-    li.appendChild(panel);
-    //Click handler
-    hdr.onclick = function() {
-        this.classList.toggle("active");
-        var tmpPanel = this.nextElementSibling;
-        if (tmpPanel.style.display === "block") {
-            tmpPanel.style.display = "none";
-        } else {
-            tmpPanel.style.display = "block";
-        }
-    }
-    return [li, hdr, panel];
-}
-
-export {createAccordionElement};

utils/uiHelpers/createAccordionElement.ts

@@ -0,0 +1,47 @@
+import { createElement } from "./createElement";
+
+interface IAccordionConfigurationParameters {
+    /**
+     * The HTML to appear in the accordion header.
+     */
+    hdrText?: string;
+
+    /**
+     * A (hopefully) unique identifier for the accordion.
+     */
+    id?: string;
+
+    /**
+     * The HTML to appear in the expanded accordion.
+     */
+    panelText?: string;
+}
+/**
+ * Creates both the header and panel element of an accordion and sets the click handler
+ * @param params The creation parameters.
+ */
+export function createAccordionElement(params: IAccordionConfigurationParameters) {
+    const liElem: HTMLLIElement = createElement("li") as HTMLLIElement;
+    const header: HTMLButtonElement = createElement("button", {
+        clickListener() {
+            this.classList.toggle("active");
+            const pnl: CSSStyleDeclaration = (this.nextElementSibling as HTMLDivElement).style;
+            pnl.display = pnl.display === "block" ? "none" : "block";
+        },
+        id: params.id ? `${params.id}-hdr` : undefined,
+        innerHTML: params.hdrText,
+    }) as HTMLButtonElement;
+    const panel: HTMLDivElement = createElement("div", {
+        id: params.id ? `${params.id}-panel` : undefined,
+        innerHTML: params.panelText,
+    }) as HTMLDivElement;
+
+    liElem.appendChild(header);
+    liElem.appendChild(panel);
+
+    return [
+        liElem,
+        header,
+        panel,
+    ];
+}