From 28bebeb144e193e87a83e0e6bcccd4c462cd2519 Mon Sep 17 00:00:00 2001
From: Steven Evans <kopelli@gmail.com>
Date: Sun, 8 Jul 2018 00:38:13 -0400
Subject: [PATCH] [refactor] Moved 'createAccordionElement' to its own TS file

---
 src/ActiveScriptsUI.js                    |  2 +-
 src/Augmentations.js                      |  2 +-
 src/Gang.js                               |  2 +-
 utils/HelperFunctions.js                  | 30 ---------------
 utils/uiHelpers/createAccordionElement.ts | 47 +++++++++++++++++++++++
 5 files changed, 50 insertions(+), 33 deletions(-)
 delete mode 100644 utils/HelperFunctions.js
 create mode 100644 utils/uiHelpers/createAccordionElement.ts

diff --git a/src/ActiveScriptsUI.js b/src/ActiveScriptsUI.js
index cb098e45e..d62673031 100644
--- a/src/ActiveScriptsUI.js
+++ b/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";
diff --git a/src/Augmentations.js b/src/Augmentations.js
index 71d11b133..a754fe1f6 100644
--- a/src/Augmentations.js
+++ b/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";
diff --git a/src/Gang.js b/src/Gang.js
index 5d420cd06..89dca782d 100644
--- a/src/Gang.js
+++ b/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";
diff --git a/utils/HelperFunctions.js b/utils/HelperFunctions.js
deleted file mode 100644
index 69f4e8891..000000000
--- a/utils/HelperFunctions.js
+++ /dev/null
@@ -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};
diff --git a/utils/uiHelpers/createAccordionElement.ts b/utils/uiHelpers/createAccordionElement.ts
new file mode 100644
index 000000000..09ab49334
--- /dev/null
+++ b/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,
+    ];
+}