Module: hcje/domTools

Module containing buttons, dialogs and other features for manipulating the DOM. It also includes a cutdown Markdown parser to allow Markdown to be used in dialog messages.

Source:

Classes

Button
ButtonControl
CheckboxControl
ElementWrapper
GameArea
InputControl
MenuBar
SpinnerControl
TextElement
TimeLimitedBusyIndicator
BaseControl

Interfaces

BusyIndicator

Members

(static, constant) SIM_KBD_INTERVAL :module:hcje/domTools~ButtonRepeatInterval

Simulated keyboard interval

Type:
Source:

Methods

(static) createChild(parentElement, tagName, className) → {Element}

Create an element as a child of another. This is just a convenience method to simplify the creation of an element, the addition of a class name, and attachment to a parent element.

Parameters:
Name Type Description
parentElement module:hcje/domTools~ElementWrapper | Element

Parent to which to attach element as child.
tagName string

DOM tag name.
className string

Class name to add to element.
Source:
Returns:
Type
Element

(static) createDialog(config) → {Promise}

Create a dialog. Styling is the responsibility of CSS, but the structure created is as follows:

  • div container className hcje-dialog-mask
  • div className hcje-dialog-box
    • div className hcje-dialog-box__title
    • div className hcje-dialog-box__body
    • div className hcje-dialog-box__buttons
      • div buttons className hcje-dialog-box__button

If any button is pressed, the dialog closes and the id of the button provided by the return.

Parameters:
Name Type Description
config Object
Properties
Name Type Attributes Description
title string

Title written in the dialog's title bar.
className string <optional>

Additional class to apply.
markdown string <optional>

The body content provided as markdown. If set, overrides the text option.
text string <optional>

The body content provided as plain text.
children Array.<(module:hcje/domTools~ElementWrapper|Element)> <optional>

add as children to dialog.
buttonDefns Array.<module:hcje/domTools~DialogButtonDefn>

Buttons placed at the bottom of the dialog to close it. If no label is provided, the button's id is used.
Source:
Returns:

Fulfils to the id of button that closed the dialog.

Type
Promise

(static) createDivider(config, parentElement, label, alignment) → {HTMLDivElement}

Create a divider, which is essentially a labelled horizontal rule.

Parameters:
Name Type Description
config Object
parentElement Element

Parent to which the rule should be added as a child.
label string

The label to apply.
alignment string

The label position: 'left', 'center' or 'right'.
Source:
Returns:
Type
HTMLDivElement

(static) parseMarkdown(markdown) → {string}

Parse markdown. This is a very limited set of markdown. All HTML tags in the markdown are replaced by character entities.

  • Character entities are supported.
  • Four levels of headings are supported but only using the ## abc format.
  • Images are supported but with the same limitations as links.
  • Links are supported, but only for https:// links and without query strings.
  • Only asterisks are supported for strong and emphasis formatting. E.g. **bold**. Underscores are not.
  • Ordered and unordered lists are supported but only to one level of indentation.
  • Inline code is supported, but not code blocks. To escape the backtick, use a character entity of <
Parameters:
Name Type Description
markdown string
Source:
Returns:
Type
string

Type Definitions

ButtonConfig

Type:
  • Object
Properties:
Name Type Attributes Description
parentElement Element

The buttons's parent element.
url string

Path to the image used on the button.
urlOn string <optional>

Path to the image used on the button if in it's on or down state. If provided, this is treated as a toggle button
on boolean <optional>

Should the button start in the on position. Only applicable to a toggle button.
label string

The button label.
labelOn string

The label for toggle buttons if on.
className string

Additional class name applied to the button's container.
onClick module:hcje/domTools~ButtonListener

Listener called on the click event.
interval module:hcje/domTools~ButtonRepeatInterval

Set the button to repeat with the specified interval in ms. If the button is set as a toggle button, this is ignored. Note that if a repeat interval is provided, a button repeater is used for handling events. Instead of just using the click event, the repeater will use Pointer events or Touch events. If these events are preferred over the simple click event, you can provide an empty object for repeatInterval property or set its delay property to zero.
Source:

ButtonListener(event, isDown)

Parameters:
Name Type Description
event Event

Triggering event
isDown boolean

True if toggle button is in down state.
Source:

ButtonRepeatInterval

Interval for button repeats.

Type:
  • Object
Properties:
Name Type Description
delay number

Delay for first repeat in ms.
repeat number

Interval between subsequent repeats in ms.
Source:

ConstrainInput(lastValidInput, currentInput) → {string}

Constraint function for input controls. This is called on the input event and should return the constrained value. Typically, if the current input fails the constraint requirements, the lastValidInput should be returned.

Parameters:
Name Type Description
lastValidInput string

The last value which satisified the constraint.
currentInput string

The current value input before application of the constraint.
Source:
Returns:

The constrained value.

Type
string

DialogButtonDefn

Definition of a button for use as a button that closes the dialog and returns an id.

Type:
  • Object
Properties:
Name Type Description
id string

Id of the button used as the dialog's return value
url string

Path to the image used on the button
label string

Label of the button.
Source: