diff --git a/src/ActiveScriptsUI.js b/src/ActiveScriptsUI.js index ec0d08cce..2110d9602 100644 --- a/src/ActiveScriptsUI.js +++ b/src/ActiveScriptsUI.js @@ -5,9 +5,10 @@ import {workerScripts, import {Player} from "./Player"; import {getServer} from "./Server"; import {dialogBoxCreate} from "../utils/DialogBox"; -import {printArray, createElement, +import {printArray, createAccordionElement, removeElement, removeChildrenFromElement} from "../utils/HelperFunctions"; +import {createElement} from "../utils/uiHelpers/createElement"; import {exceptionAlert} from "../utils/helpers/exceptionAlert"; import {logBoxCreate} from "../utils/LogBox"; import numeral from "numeral/min/numeral.min"; diff --git a/src/Augmentations.js b/src/Augmentations.js index 5a40f61a9..e4506ec98 100644 --- a/src/Augmentations.js +++ b/src/Augmentations.js @@ -12,10 +12,11 @@ import {Script, RunningScript} from "./Script"; import {Server} from "./Server"; import {SourceFiles} from "./SourceFile"; import {dialogBoxCreate} from "../utils/DialogBox"; -import {createElement, createAccordionElement, +import {createAccordionElement, removeChildrenFromElement, clearObject} from "../utils/HelperFunctions"; import {Reviver, Generic_toJSON, Generic_fromJSON} from "../utils/JSONReviver"; +import {createElement} from "../utils/uiHelpers/createElement"; import {isString} from "../utils/helpers/isString"; //Augmentations diff --git a/src/Bladeburner.js b/src/Bladeburner.js index 39ee2228b..29044e92b 100644 --- a/src/Bladeburner.js +++ b/src/Bladeburner.js @@ -12,12 +12,13 @@ import {KEY} from "./Terminal"; import {createProgressBarText} from "../utils/helpers/createProgressBarText"; import {dialogBoxCreate} from "../utils/DialogBox"; import {addOffset, clearObject, - createElement, removeChildrenFromElement, + removeChildrenFromElement, createPopup, appendLineBreaks, removeElementById, removeElement} from "../utils/HelperFunctions"; import {Reviver, Generic_toJSON, Generic_fromJSON} from "../utils/JSONReviver"; import numeral from "numeral/min/numeral.min"; +import {createElement} from "../utils/uiHelpers/createElement"; import {exceptionAlert} from "../utils/helpers/exceptionAlert"; import {formatNumber} from "../utils/StringHelperFunctions"; import {getRandomInt} from "../utils/helpers/getRandomInt"; diff --git a/src/CinematicText.js b/src/CinematicText.js index d82bc6e2c..566956d0f 100644 --- a/src/CinematicText.js +++ b/src/CinematicText.js @@ -1,9 +1,9 @@ -import {Engine} from "./engine"; +import {Engine} from "./engine"; -import {removeChildrenFromElement, - createElement} from "../utils/HelperFunctions"; -import {exceptionAlert} from "../utils/helpers/exceptionAlert"; -import {isString} from "../utils/helpers/isString"; +import {removeChildrenFromElement} from "../utils/HelperFunctions"; +import {createElement} from "../utils/uiHelpers/createElement"; +import {exceptionAlert} from "../utils/helpers/exceptionAlert"; +import {isString} from "../utils/helpers/isString"; var cinematicTextFlag = false; diff --git a/src/CompanyManagement.js b/src/CompanyManagement.js index 6e326d5ad..46691768a 100644 --- a/src/CompanyManagement.js +++ b/src/CompanyManagement.js @@ -8,12 +8,13 @@ import {Player} from "./Player"; import Decimal from "decimal.js"; import {dialogBoxCreate} from "../utils/DialogBox"; import {removeElementById, - createElement, createAccordionElement, + createAccordionElement, removeChildrenFromElement, createPopup, clearSelector} from "../utils/HelperFunctions"; import {Reviver, Generic_toJSON, Generic_fromJSON} from "../utils/JSONReviver"; import numeral from "numeral/min/numeral.min"; +import {createElement} from "../utils/uiHelpers/createElement"; import {formatNumber, generateRandomString} from "../utils/StringHelperFunctions"; import {getRandomInt} from "../utils/helpers/getRandomInt"; import {isString} from "../utils/helpers/isString"; diff --git a/src/CreateProgram.js b/src/CreateProgram.js index 6bf339860..dd8159e78 100644 --- a/src/CreateProgram.js +++ b/src/CreateProgram.js @@ -1,6 +1,6 @@ import {CONSTANTS} from "./Constants"; import {Player} from "./Player"; -import {createElement} from "../utils/HelperFunctions"; +import {createElement} from "../utils/uiHelpers/createElement"; // a function that returns a requirement for a program that requires only that // the player has at least the given skill level. diff --git a/src/Faction.js b/src/Faction.js index 6c2e87275..22ec3c75d 100644 --- a/src/Faction.js +++ b/src/Faction.js @@ -11,8 +11,9 @@ import {Settings} from "./Settings"; import {dialogBoxCreate} from "../utils/DialogBox"; import {factionInvitationBoxCreate} from "../utils/FactionInvitationBox"; -import {clearEventListeners, createElement, +import {clearEventListeners, removeChildrenFromElement} from "../utils/HelperFunctions"; +import {createElement} from "../utils/uiHelpers/createElement"; import {Reviver, Generic_toJSON, Generic_fromJSON} from "../utils/JSONReviver"; import numeral from "numeral/min/numeral.min"; diff --git a/src/Gang.js b/src/Gang.js index 42d514263..be791e8ec 100644 --- a/src/Gang.js +++ b/src/Gang.js @@ -6,10 +6,10 @@ import {Player} from "./Player"; import {dialogBoxCreate} from "../utils/DialogBox"; import {Reviver, Generic_toJSON, Generic_fromJSON} from "../utils/JSONReviver"; -import {createElement, - removeChildrenFromElement, +import {removeChildrenFromElement, createAccordionElement, createPopup, removeElementById, removeElement} from "../utils/HelperFunctions"; +import {createElement} from "../utils/uiHelpers/createElement"; import numeral from "numeral/min/numeral.min"; import {formatNumber} from "../utils/StringHelperFunctions"; import {getRandomInt} from "../utils/helpers/getRandomInt"; diff --git a/src/HacknetNode.js b/src/HacknetNode.js index 5682b90be..872275228 100644 --- a/src/HacknetNode.js +++ b/src/HacknetNode.js @@ -5,10 +5,11 @@ import {iTutorialSteps, iTutorialNextStep, iTutorialIsRunning, currITutorialStep} from "./InteractiveTutorial"; import {Player} from "./Player"; import {dialogBoxCreate} from "../utils/DialogBox"; -import {clearEventListeners, createElement, +import {clearEventListeners, getElementById} from "../utils/HelperFunctions"; import {Reviver, Generic_toJSON, Generic_fromJSON} from "../utils/JSONReviver"; +import {createElement} from "../utils/uiHelpers/createElement"; import {formatNumber} from "../utils/StringHelperFunctions"; /** diff --git a/src/Location.js b/src/Location.js index a62932dfe..4630b85b2 100644 --- a/src/Location.js +++ b/src/Location.js @@ -15,7 +15,7 @@ import {Settings} from "./Settings"; import {SpecialServerNames, SpecialServerIps} from "./SpecialServerIps"; import {dialogBoxCreate} from "../utils/DialogBox"; -import {clearEventListeners, createElement} from "../utils/HelperFunctions"; +import {clearEventListeners} from "../utils/HelperFunctions"; import {createRandomIp} from "../utils/IPAddress"; import numeral from "numeral/min/numeral.min"; import {formatNumber} from "../utils/StringHelperFunctions"; diff --git a/src/Prestige.js b/src/Prestige.js index 6f113901f..198247bff 100644 --- a/src/Prestige.js +++ b/src/Prestige.js @@ -30,8 +30,8 @@ import {initStockMarket, initSymbolToStockMap, import {Terminal, postNetburnerText} from "./Terminal"; import Decimal from "decimal.js"; import {dialogBoxCreate} from "../utils/DialogBox"; -import {createPopup, createElement, - removeElementById} from "../utils/HelperFunctions"; +import {createPopup, removeElementById} from "../utils/HelperFunctions"; +import {createElement} from "../utils/uiHelpers/createElement"; import {exceptionAlert} from "../utils/helpers/exceptionAlert"; import {yesNoBoxCreate, yesNoBoxGetYesButton, yesNoBoxGetNoButton, yesNoBoxClose} from "../utils/YesNoBox"; diff --git a/src/SaveObject.js b/src/SaveObject.js index 44d8172f6..54716d128 100644 --- a/src/SaveObject.js +++ b/src/SaveObject.js @@ -19,10 +19,11 @@ import {loadSpecialServerIps, SpecialServerIps} from "./SpecialServerIps"; import {loadStockMarket, StockMarket} from "./StockMarket"; import {dialogBoxCreate} from "../utils/DialogBox"; import {gameOptionsBoxClose} from "../utils/GameOptions"; -import {clearEventListeners, createElement, +import {clearEventListeners, createPopup, removeElementById} from "../utils/HelperFunctions"; import {Reviver, Generic_toJSON, Generic_fromJSON} from "../utils/JSONReviver"; +import {createElement} from "../utils/uiHelpers/createElement"; import {formatNumber} from "../utils/StringHelperFunctions"; import Decimal from "decimal.js"; diff --git a/src/Script.js b/src/Script.js index 2677f2bef..66cff5df8 100644 --- a/src/Script.js +++ b/src/Script.js @@ -36,7 +36,8 @@ import {parse, Node} from "../utils/acorn"; import {dialogBoxCreate} from "../utils/DialogBox"; import {Reviver, Generic_toJSON, Generic_fromJSON} from "../utils/JSONReviver"; -import {compareArrays, createElement} from "../utils/HelperFunctions"; +import {compareArrays} from "../utils/HelperFunctions"; +import {createElement} from "../utils/uiHelpers/createElement"; import {formatNumber} from "../utils/StringHelperFunctions"; import {roundToTwo} from "../utils/helpers/roundToTwo"; diff --git a/src/engine.js b/src/engine.js index 979d01289..f00e536d3 100644 --- a/src/engine.js +++ b/src/engine.js @@ -1,7 +1,8 @@ import {dialogBoxCreate} from "../utils/DialogBox"; import {gameOptionsBoxOpen, gameOptionsBoxClose}from "../utils/GameOptions"; -import {clearEventListeners, createElement, +import {clearEventListeners, removeChildrenFromElement} from "../utils/HelperFunctions"; +import {createElement} from "../utils/uiHelpers/createElement"; import {exceptionAlert} from "../utils/helpers/exceptionAlert"; import numeral from "numeral/min/numeral.min"; import {formatNumber, diff --git a/utils/HelperFunctions.js b/utils/HelperFunctions.js index 191092130..fb2950776 100644 --- a/utils/HelperFunctions.js +++ b/utils/HelperFunctions.js @@ -1,5 +1,6 @@ //General helper functions import {isString} from "./helpers/isString"; +import { createElement } from "./uiHelpers/createElement"; //Returns the size (number of keys) of an object function sizeOfObject(obj) { @@ -88,71 +89,6 @@ function getElementById(elementId) { return el; } -function createElement(type, params={}) { - var el = document.createElement(type); - if (params.id) {el.id = params.id;} - if (params.class) {el.className = params.class;} - if (params.name) {el.name = params.name;} - if (params.innerHTML) {el.innerHTML = params.innerHTML;} - if (params.innerText) {el.innerText = params.innerText;} - if (params.value) {el.value = params.value;} - if (params.text) {el.text = params.text;} - if (params.display) {el.style.display = params.display;} - if (params.visibility) {el.style.visibility = params.visibility;} - if (params.margin) {el.style.margin = params.margin;} - if (params.marginLeft) {el.style.marginLeft = params.marginLeft;} - if (params.marginTop) {el.style.marginTop = params.marginTop;} - if (params.padding) {el.style.padding = params.padding;} - if (params.color) {el.style.color = params.color;} - if (params.border) {el.style.border = params.border;} - if (params.float) {el.style.cssFloat = params.float;} - if (params.fontSize) {el.style.fontSize = params.fontSize;} - if (params.whiteSpace) {el.style.whiteSpace = params.whiteSpace;} - if (params.width) {el.style.width = params.width;} - if (params.backgroundColor) { - el.style.backgroundColor = params.backgroundColor - } - if (params.position) {el.style.position = params.position;} - if (params.type) {el.type = params.type;} - if (params.checked) {el.checked = params.checked;} - if (params.for) {el.htmlFor = params.for;} - if (params.pattern) {el.pattern = params.pattern;} - if (params.maxLength) {el.maxLength = params.maxLength;} - if (params.placeholder) {el.placeholder = params.placeholder;} - if (params.tooltip && params.tooltip !== "") { - el.className += " tooltip"; - el.appendChild(createElement("span", { - class:"tooltiptext", - innerHTML:params.tooltip - })); - } else if (params.tooltipleft) { - el.className += " tooltip"; - el.appendChild(createElement("span", { - class:"tooltiptextleft", - innerHTML:params.tooltipleft - })); - } - if (params.href) {el.href = params.href;} - if (params.target) {el.target = params.target;} - if (params.tabIndex) {el.tabIndex = params.tabIndex;} - if (params.clickListener) { - el.addEventListener("click", params.clickListener); - } - if (params.inputListener) { - el.addEventListener("input", params.inputListener); - } - if (params.changeListener) { - el.addEventListener("change", params.changeListener); - } - if (params.onkeyup) { - el.addEventListener("keyup", params.onkeyup); - } - if (params.onfocus) { - el.addEventListener("focus", params.onfocus); - } - return el; -} - function createPopup(id, elems) { var container = createElement("div", { class:"popup-box-container", @@ -247,7 +183,6 @@ export {sizeOfObject, clearEventListenersEl, removeElementById, removeElement, - createElement, createAccordionElement, appendLineBreaks, removeChildrenFromElement, diff --git a/utils/uiHelpers/createElement.ts b/utils/uiHelpers/createElement.ts new file mode 100644 index 000000000..9e9b76430 --- /dev/null +++ b/utils/uiHelpers/createElement.ts @@ -0,0 +1,221 @@ +interface ICreateElementAnchorOptions { + href?: string; + target?: string; + text?: string; +} + +interface ICreateElementInputOptions { + checked?: boolean; + maxLength?: number; + name?: string; + pattern?: string; + placeholder?: string; + type?: string; + value?: string; +} + +interface ICreateElementLabelOptions { + for?: string; +} + +interface ICreateElementListenerOptions { + changeListener?(this: HTMLElement, ev: Event): any; + clickListener?(this: HTMLElement, ev: MouseEvent): any; + inputListener?(this: HTMLElement, ev: Event): any; + onfocus?(this: HTMLElement, ev: FocusEvent): any; + onkeyup?(this: HTMLElement, ev: KeyboardEvent): any; +} + +interface ICreateElementStyleOptions { + backgroundColor?: string; + border?: string; + color?: string; + display?: string; + float?: string; + fontSize?: string; + margin?: string; + marginLeft?: string; + marginTop?: string; + padding?: string; + position?: string; + visibility?: string; + whiteSpace?: string; + width?: string; +} + +interface ICreateElementTooltipOptions { + tooltip?: string; + tooltipleft?: string; +} + +interface ICreateElementOptions extends + ICreateElementStyleOptions, + ICreateElementListenerOptions, + ICreateElementInputOptions, + ICreateElementAnchorOptions, + ICreateElementLabelOptions, + ICreateElementTooltipOptions { + /** + * CSS Class(es) to initially set. + */ + class?: string; + + /** + * A (hopefully) unique identifier for the element. + */ + id?: string; + + innerHTML?: string; + innerText?: string; + tabIndex?: number; +} + +function setElementAnchor(el: HTMLAnchorElement, params: ICreateElementAnchorOptions) { + if (params.text) { + el.text = params.text; + } + if (params.href) { + el.href = params.href; + } + if (params.target) { + el.target = params.target; + } +} + +function setElementInput(el: HTMLInputElement, params: ICreateElementInputOptions) { + if (params.name) { + el.name = params.name; + } + if (params.value) { + el.value = params.value; + } + if (params.type) { + el.type = params.type; + } + if (params.checked) { + el.checked = params.checked; + } + if (params.pattern) { + el.pattern = params.pattern; + } + if (params.maxLength) { + el.maxLength = params.maxLength; + } + if (params.placeholder) { + el.placeholder = params.placeholder; + } +} + +function setElementLabel(el: HTMLLabelElement, params: ICreateElementLabelOptions) { + if (params.for) { + el.htmlFor = params.for; + } +} + +function setElementListeners(el: HTMLElement, params: ICreateElementListenerOptions) { + if (params.clickListener) { + el.addEventListener("click", params.clickListener); + } + if (params.inputListener) { + el.addEventListener("input", params.inputListener); + } + if (params.changeListener) { + el.addEventListener("change", params.changeListener); + } + if (params.onkeyup) { + el.addEventListener("keyup", params.onkeyup); + } + if (params.onfocus) { + el.addEventListener("focus", params.onfocus); + } +} + +function setElementStyle(el: HTMLElement, params: ICreateElementStyleOptions) { + if (params.display) { + el.style.display = params.display; + } + if (params.visibility) { + el.style.visibility = params.visibility; + } + if (params.margin) { + el.style.margin = params.margin; + } + if (params.marginLeft) { + el.style.marginLeft = params.marginLeft; + } + if (params.marginTop) { + el.style.marginTop = params.marginTop; + } + if (params.padding) { + el.style.padding = params.padding; + } + if (params.color) { + el.style.color = params.color; + } + if (params.border) { + el.style.border = params.border; + } + if (params.float) { + el.style.cssFloat = params.float; + } + if (params.fontSize) { + el.style.fontSize = params.fontSize; + } + if (params.whiteSpace) { + el.style.whiteSpace = params.whiteSpace; + } + if (params.width) { + el.style.width = params.width; + } + if (params.backgroundColor) { + el.style.backgroundColor = params.backgroundColor; + } + if (params.position) { + el.style.position = params.position; + } +} + +function setElementTooltip(el: HTMLElement, params: ICreateElementTooltipOptions) { + if (params.tooltip && params.tooltip !== "") { + el.className += " tooltip"; + el.appendChild(createElement("span", { + class: "tooltiptext", + innerHTML: params.tooltip, + })); + } else if (params.tooltipleft) { + el.className += " tooltip"; + el.appendChild(createElement("span", { + class: "tooltiptextleft", + innerHTML: params.tooltipleft, + })); + } +} + +export function createElement(tagName: string, params: ICreateElementOptions = {}) { + const el: HTMLElement = document.createElement(tagName); + + if (params.id) { + el.id = params.id; + } + if (params.class) { + el.className = params.class; + } + if (params.innerHTML) { + el.innerHTML = params.innerHTML; + } + if (params.innerText) { + el.innerText = params.innerText; + } + if (params.tabIndex) { + el.tabIndex = params.tabIndex; + } + + setElementAnchor(el as HTMLAnchorElement, params); + setElementInput(el as HTMLInputElement, params); + setElementLabel(el as HTMLLabelElement, params); + setElementListeners(el, params); + setElementStyle(el, params); + setElementTooltip(el, params); + + return el; +}