mirror of
https://github.com/bitburner-official/bitburner-src.git
synced 2024-12-18 20:25:45 +01:00
[refactor] Moved 'createAccordionElement' to its own TS file
This commit is contained in:
parent
af40252ee9
commit
28bebeb144
@ -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};
|
47
utils/uiHelpers/createAccordionElement.ts
Normal file
47
utils/uiHelpers/createAccordionElement.ts
Normal file
@ -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,
|
||||
];
|
||||
}
|
Loading…
Reference in New Issue
Block a user