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

This commit is contained in:
Steven Evans 2018-07-08 00:38:13 -04:00
parent af40252ee9
commit 28bebeb144
5 changed files with 50 additions and 33 deletions

@ -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";

@ -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";

@ -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";

@ -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};

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