From 107f1de18de83718040fd5f55907c580174b19e2 Mon Sep 17 00:00:00 2001 From: Steven Evans Date: Thu, 5 Jul 2018 00:38:00 -0400 Subject: [PATCH] [refactor] Moved `createElement` into its own TS file This is the start at separating out UI related work from potentially backend related work. This distinction will help when Web Workers can be introduced to get around the background tab limitation for scripts. --- src/ActiveScriptsUI.js | 3 +- src/Augmentations.js | 3 +- src/Bladeburner.js | 3 +- src/CinematicText.js | 10 +- src/CompanyManagement.js | 3 +- src/CreateProgram.js | 2 +- src/Faction.js | 3 +- src/Gang.js | 4 +- src/HacknetNode.js | 3 +- src/Location.js | 2 +- src/Prestige.js | 4 +- src/SaveObject.js | 3 +- src/Script.js | 3 +- src/engine.js | 3 +- utils/HelperFunctions.js | 67 +--------- utils/uiHelpers/createElement.ts | 221 +++++++++++++++++++++++++++++++ 16 files changed, 251 insertions(+), 86 deletions(-) create mode 100644 utils/uiHelpers/createElement.ts 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; +}