bitburner-src/utils/uiHelpers/createAccordionElement.ts
2018-08-02 14:23:49 -04:00

54 lines
1.6 KiB
TypeScript

import { createElement } from "./createElement";
/**
* Possible configuration parameters when creating the accordion element.
*/
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", {
class: "accordion-header",
clickListener() {
this.classList.toggle("active");
const pnl: CSSStyleDeclaration = (this.nextElementSibling as HTMLDivElement).style;
pnl.display = pnl.display === "block" ? "none" : "block";
},
id: params.id !== undefined ? `${params.id}-hdr` : undefined,
innerHTML: params.hdrText,
}) as HTMLButtonElement;
const panel: HTMLDivElement = createElement("div", {
class: "accordion-panel",
id: params.id !== undefined ? `${params.id}-panel` : undefined,
innerHTML: params.panelText,
}) as HTMLDivElement;
liElem.appendChild(header);
liElem.appendChild(panel);
return [
liElem,
header,
panel,
];
}