mxui.dom

Create and manipulate DOM nodes.

Methods

create(element, props, child…)

This method is called to create a dom node.

Parameters

Name	Type	Description
element	String	Name of the HTML element to create.
props	Object	Optional. Properties to set on the element.
child	DOMNode	Nodes to append to the newly created element.

Returns

Type	Description
DOMNode	The newly created element.

Examples

var $ = mxui.dom.create;

var table = $("table", {
        "class" : "bordered-table",
        style   : "font-weight:bold"
    },
    $("tbody",
        $("tr",
            $("td", "content")
        )
    )
);
    
var node = $("div", {
        style : {
            color      : "red",
            cursor     : "pointer",
            fontWeight : "bold"
        },
    },
    $("span", "text")
);

escapeString(str)

Escapes HTML special characters in str so it can be used inside HTML documents. Use this to sanitize data before assigning it to innerHTML.

Name	Type	Description
str	String	String to escape

Example

escaped = mxui.dom.escapeString("<script src='evil.example.com/nasty.js'></script>");
// escaped:  "&lt;script src='evil.example.com/script.js'&gt;&lt;/script&gt;"
document.body.innerHTML = escaped;  // No script injection.

copyChildren(source, target)

Performs a deep copy of the children of source to target.

Parameters

Name	Type	Description
source	DOMNode	The node to get the children from.
target	DOMNode	The node to add the children to.

Example

// Copy all children from list1 to list2.
mxui.dom.copyChildren(document.getElementById("list1"),
                      document.getElementById("list2"));

insertBefore(node, target)

Inserts the node before the given target in de DOM Tree.

Parameters

Name	Type	Description
node	DOMNode	The node to insert.
target	DOMNode	The node to insert before.

Example

// Move first child in list after the last child in list.
mxui.dom.insertBefore(list.lastChild, list.firstChild);

insertAfter(node, target)

Inserts the node after the given target in de DOM Tree.

Parameters

Name	Type	Description
node	DOMNode	The node to insert.
target	DOMNode	The node to insert after.

Returns

Type	Description
Boolean	true if successful, false otherwise.

Example

// Move first child in list after the last child in list.
mxui.dom.insertAfter(list.firstChild, list.lastChild);

getAncestorNode(node, name, depth)

Gets the first ancestor node which nodeName is equal to name.

Parameters

Name	Type	Description
node	DOMNode	The node to get the ancestor of.
name	String	The nodeName of the desired ancestor.
depth	Number	The range in which to search for an ancestor.

Returns

Type	Description
DOMNode	The found ancestor, or false.

Example

$ = mxui.dom.create;
d = $("div", $("i", e = $("em", "foo"))); // <div><i><em>foo</em></i></div>
mxui.dom.getAncestorNode(e, "DIV") === d; // true

setSelectOptions(node, options, selected)

Sets the given list of options to the select node, and optionally sets the selected value.
Always adds an empty option.

Parameters

Name	Type	Description
node	DOMNode	The select node.
options	Object	Object containing the values and captions of the options.
selected	_String	The options which should be selected.

Example

mxui.dom.setSelectOptions(selectNode, {
    "red": "Cherry red",
    "blue": "Sea blue"
}, "blue");

getSelectedValue(node)

Returns the value of the selected option.

Parameters

Name	Type	Description
node	DOMNode	The select node.

Returns

Type	Description
String	The value of the selected option.

Example

mxui.dom.setSelectOptions(selectNode, {
    "red": "Cherry red",
    "blue": "Sea blue"
}, "blue");
mxui.dom.getSelectedValue(selectNode); // "blue"

getSelectedText(node)

Returns the text value of the selected option.

Parameters

Name	Type	Description
node	DOMNode	The select node.

Returns

Type	Description
String	The text value of the selected option.

Example

mxui.dom.setSelectOptions(selectNode, {
    "red": "Cherry red",
    "blue": "Sea blue"
}, "blue");
mxui.dom.getSelectedText(selectNode); // "Sea blue"

enableNode(node)

Enables a node, i.e. remove the readonly and disabled attributes from it.

Parameters

Name	Type	Description
node	DOMNode	The node to enable.

Example

mxui.dom.disableNode(node); // disabling a node
mxui.dom.enableNode(node); // enabling it again

disableNode(node)

Disables a node, i.e. add the readonly and disabled attributes to it.

Parameters

Name	Type	Description
node	DOMNode	The node to disable.

Example

mxui.dom.disableNode(node); // disabling a node
mxui.dom.enableNode(node); // enabling it again

getCss(path, doc)

Get the DOMNode from a document linking to the given stylesheet.

Parameters

Name	Type	Description
path	String	Path of the stylesheet location.
doc	Document	Document in which to look for the stylesheet link. Defaults to document.

Example

cssNode = mxui.dom.getCss("css/theme.css"); // Node referencing the theme stylesheet.
cssNode.href = "css/theme2.css"; // Replace stylesheet.

addCss(path, doc, media)

Add a link to the given stylesheet to a document.

Parameters

Name	Type	Description
path	String	Path of the stylesheet location.
doc	Document	Document to add the stylesheet link to. Defaults to document.
media	String	String describing the media types supported by the stylesheet.

Example

mxui.dom.addCss("my/custom.css");

removeCss(filepath)

Removes a linked css file from the document.

Parameters

Name	Type	Description
filepath	String	The path to the css file.

Returns

Type	Description
Boolean	true if successful.

Example

mxui.dom.removeCss("css/theme.css");

selectTextRange(input, start, end)

Selects a range in an input field. Position 0 is left of the first character, position 1 is to the right of the first character, etc.

Parameters

Name	Type	Description
input	DOMNode	The input node.
start	Number	The begin position of the selection.
end	Number	The end position of the selection.

Example

// select 3rd character in inputNode
input.focus();
mxui.dom.selectTextRange(inputNode, 2, 3);

getCursorPosition(input)

Returns the position of the cursor in an input field. In case of a selection, the lowest position of the selection is returned.

Parameters

Name	Type	Description
input	DOMNode	The input node.

Returns

Type	Description
Number	The position of the cursor.

mxui.dom.getCursorPosition(inputNode);

getSelection(input)

Returns the start and end positions of the selection in an input field. The start position is always the lower position.

Parameters

Name	Type	Description
input	DOMNode	The input node.

Returns

Type	Description
Object	Object with Number valued attributes start and end.

mxui.dom.getSelection(inputNode); // { start: 1, end: 3 }