bitburner-src/utils/uiHelpers/createElement.ts

273 lines
7.6 KiB
TypeScript
Raw Normal View History

2018-07-08 07:11:34 +02:00
/**
* Options specific to creating an anchor ("<a>") element.
*/
interface ICreateElementAnchorOptions {
href?: string;
target?: string;
text?: string;
}
2018-07-08 07:11:34 +02:00
/**
* Options specific to creating an input ("<input>") element.
*/
interface ICreateElementInputOptions {
checked?: boolean;
maxLength?: number;
name?: string;
pattern?: string;
placeholder?: string;
type?: string;
value?: string;
}
2018-07-08 07:11:34 +02:00
/**
* Options specific to creating a label ("<label>") element.
*/
interface ICreateElementLabelOptions {
for?: string;
}
2018-07-08 07:11:34 +02:00
/**
* Options for setting up event listeners on the element.
*/
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;
2018-09-23 02:25:48 +02:00
onkeydown?(this: HTMLElement, ev: KeyboardEvent): any;
onkeyup?(this: HTMLElement, ev: KeyboardEvent): any;
}
2018-07-08 07:11:34 +02:00
/**
* Options for setting up the inline-styling of element.
* NOTE: Relying on CSS styling should be preferred over forcing the higher specificity via inline styles.
*/
interface ICreateElementStyleOptions {
backgroundColor?: string;
border?: string;
color?: string;
display?: string;
float?: string;
fontSize?: string;
margin?: string;
marginLeft?: string;
marginTop?: string;
overflow?: string;
padding?: string;
position?: string;
visibility?: string;
whiteSpace?: string;
width?: string;
}
2018-07-08 07:11:34 +02:00
/**
* Options for adding an in-game tooltip to the element.
*/
interface ICreateElementTooltipOptions {
tooltip?: string;
tooltipleft?: string;
tooltipsmall?: string;
tooltiplow?: string;
}
2018-07-08 07:11:34 +02:00
/**
* All possible configuration options when creating an element.
*/
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) {
2018-07-08 07:11:34 +02:00
if (params.text !== undefined) {
el.text = params.text;
}
2018-07-08 07:11:34 +02:00
if (params.href !== undefined) {
el.href = params.href;
}
2018-07-08 07:11:34 +02:00
if (params.target !== undefined) {
el.target = params.target;
}
}
function setElementInput(el: HTMLInputElement, params: ICreateElementInputOptions) {
2018-07-08 07:11:34 +02:00
if (params.name !== undefined) {
el.name = params.name;
}
2018-07-08 07:11:34 +02:00
if (params.value !== undefined) {
el.value = params.value;
}
2018-07-08 07:11:34 +02:00
if (params.type !== undefined) {
el.type = params.type;
}
2018-07-08 07:11:34 +02:00
if (params.checked !== undefined) {
el.checked = params.checked;
}
2018-07-08 07:11:34 +02:00
if (params.pattern !== undefined) {
el.pattern = params.pattern;
}
2018-07-08 07:11:34 +02:00
if (params.maxLength !== undefined) {
el.maxLength = params.maxLength;
}
2018-07-08 07:11:34 +02:00
if (params.placeholder !== undefined) {
el.placeholder = params.placeholder;
}
}
function setElementLabel(el: HTMLLabelElement, params: ICreateElementLabelOptions) {
2018-07-08 07:11:34 +02:00
if (params.for !== undefined) {
el.htmlFor = params.for;
}
}
function setElementListeners(el: HTMLElement, params: ICreateElementListenerOptions) {
2018-07-08 07:11:34 +02:00
// tslint:disable:no-unbound-method
if (params.clickListener !== undefined) {
el.addEventListener("click", params.clickListener);
}
2018-07-08 07:11:34 +02:00
if (params.inputListener !== undefined) {
el.addEventListener("input", params.inputListener);
}
2018-07-08 07:11:34 +02:00
if (params.changeListener !== undefined) {
el.addEventListener("change", params.changeListener);
}
2018-07-08 07:11:34 +02:00
if (params.onkeyup !== undefined) {
el.addEventListener("keyup", params.onkeyup);
}
2018-09-23 02:25:48 +02:00
if (params.onkeydown !== undefined) {
el.addEventListener("keydown", params.onkeydown);
}
2018-07-08 07:11:34 +02:00
if (params.onfocus !== undefined) {
el.addEventListener("focus", params.onfocus);
}
2018-07-08 07:11:34 +02:00
// tslint:enable:no-unbound-method
}
function setElementStyle(el: HTMLElement, params: ICreateElementStyleOptions) {
2018-07-08 07:11:34 +02:00
if (params.display !== undefined) {
el.style.display = params.display;
}
2018-07-08 07:11:34 +02:00
if (params.visibility !== undefined) {
el.style.visibility = params.visibility;
}
2018-07-08 07:11:34 +02:00
if (params.margin !== undefined) {
el.style.margin = params.margin;
}
2018-07-08 07:11:34 +02:00
if (params.marginLeft !== undefined) {
el.style.marginLeft = params.marginLeft;
}
2018-07-08 07:11:34 +02:00
if (params.marginTop !== undefined) {
el.style.marginTop = params.marginTop;
}
2018-07-08 07:11:34 +02:00
if (params.padding !== undefined) {
el.style.padding = params.padding;
}
2018-07-08 07:11:34 +02:00
if (params.color !== undefined) {
el.style.color = params.color;
}
2018-07-08 07:11:34 +02:00
if (params.border !== undefined) {
el.style.border = params.border;
}
2018-07-08 07:11:34 +02:00
if (params.float !== undefined) {
el.style.cssFloat = params.float;
}
2018-07-08 07:11:34 +02:00
if (params.fontSize !== undefined) {
el.style.fontSize = params.fontSize;
}
2018-07-08 07:11:34 +02:00
if (params.whiteSpace !== undefined) {
el.style.whiteSpace = params.whiteSpace;
}
2018-07-08 07:11:34 +02:00
if (params.width !== undefined) {
el.style.width = params.width;
}
2018-07-08 07:11:34 +02:00
if (params.backgroundColor !== undefined) {
el.style.backgroundColor = params.backgroundColor;
}
2018-07-08 07:11:34 +02:00
if (params.position !== undefined) {
el.style.position = params.position;
}
if (params.overflow !== undefined) {
el.style.overflow = params.overflow;
}
}
function setElementTooltip(el: HTMLElement, params: ICreateElementTooltipOptions) {
2018-07-08 07:11:34 +02:00
if (params.tooltip !== undefined && params.tooltip !== "") {
el.className += " tooltip";
el.appendChild(createElement("span", {
class: "tooltiptext",
innerHTML: params.tooltip,
}));
2018-07-08 07:11:34 +02:00
} else if (params.tooltipleft !== undefined) {
el.className += " tooltip";
el.appendChild(createElement("span", {
class: "tooltiptextleft",
innerHTML: params.tooltipleft,
}));
} else if (params.tooltipsmall !== undefined) {
el.className += " tooltip";
el.appendChild(createElement("span", {
class: "tooltiptext smallfont",
innerHTML: params.tooltipsmall,
}));
} else if (params.tooltiplow !== undefined) {
el.className += "tooltip";
el.appendChild(createElement("span", {
class: "tooltiptextlow",
innerHTML: params.tooltiplow,
}));
}
}
2018-07-08 07:11:34 +02:00
/**
* An all-in-one-call way of creating an element to be added to the DOM at some point.
* @param tagName The HTML tag/element name
* @param params Additional parameters to set on the element
*/
export function createElement(tagName: string, params: ICreateElementOptions = {}) {
const el: HTMLElement = document.createElement(tagName);
2018-07-08 07:11:34 +02:00
if (params.id !== undefined) {
el.id = params.id;
}
2018-07-08 07:11:34 +02:00
if (params.class !== undefined) {
el.className = params.class;
}
2018-07-08 07:11:34 +02:00
if (params.innerHTML !== undefined) {
el.innerHTML = params.innerHTML;
}
2018-07-08 07:11:34 +02:00
if (params.innerText !== undefined) {
el.innerText = params.innerText;
}
2018-07-08 07:11:34 +02:00
if (params.tabIndex !== undefined) {
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;
}