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, + ]; +}