FANDOM


UI-js is a JavaScript library providing a function for creating DOM elements. It can be used as a tool for building user interfaces in scripts.

Usage

Importing

To import the script through your own script, use:

importArticle({
    type: 'script',
    article: 'u:dev:MediaWiki:UI-js/code.js'
});

The script's function won't be immediately available, but it will call a hook through mw.hook. To ensure the builder function exists, you can use:

mw.hook('dev.ui').add(function(ui) {
    // Use your code here
    // `ui` parameter is the builder function
    // It is also available in `window.dev.ui` at this point
});

Function

UI-js exposes a single function used for creating DOM elements. It accepts a single parameter, an object with the following possible properties:

type
Type of the element. For example, if you want to make a div element, it should be set to div.
If not set, it will create a document fragment.
text
Text content of the element.
html
Inner HTML of the element.
Should only be used in cases when HTML is not easily convertible to objects recognized by the script (for example, if HTML is downloaded from another source), otherwise, use script's functionality to generate needed DOM nodes.
attr
Object containing all attributes of the element and their values.
data
Object containing all data attributes of the element.
Technically the same as attr option but every attribute is prefixed with data-
style
Object with CSS properties of the element.
This option isn't always working in the current version. Please submit bug reports for cases where this parameter doesn't work.
events
Object with all event listeners.
Keys of this object are event names, values are functions used for handling these events.
checked
Used for to determine if a checkbox is checked.
If the element isn't a checkbox, setting this parameter does nothing.
children
Array of objects that represent configurations for child elements of the current element.
Any valid value that can be passed to the library function is a valid element of this array.
parent
If the element should be appended to another already existent DOM element, it can be passed here as a string that represents the selector for it.
classes
If the element has multiple classes, this is a more useful property than setting the class through attr.
Additionally, some linters may throw warnings/errors as class is a reserved word and should not be used in property names for ES3 compatibility.
condition
If the element should be generated.
Used to simplify the logic when some elements should only display under certain conditions.
selected
Selected index of the element.
Used for <select> dropdowns.

If a simple string is passed to the function, it will create a simple text node with contents of the string.

Examples

Examples below are using the ui function to generate DOM elements. Instructions on how to get that function can be seen in the "Importing" section and more information about its parameters is in "Function" section.

Description Code Generates
Text node
ui("This is a text node");
This is a text node
Div element
ui({type: 'div'});
<div></div>
With text
ui({
    type: 'div',
    text: 'This is a div with text'
});
<div>This is a div with text</div>
With a class and ID
ui({
    type: 'div',
    attr: {
        id: 'testdiv',
        class: 'thisisatest'
    }
});
<div id="testdiv" class="thisisatest"></div>
With red text
ui({
    type: 'div',
    style: {
        color: 'red'
    },
    text: 'This is red text'
});
<div style="color: red;">This is red text</div>
With data attributes
ui({
    type: 'div',
    data: {
        test: 'Test one',
        test2: 'Test two'
    }
});
<div data-test="Test one" data-test2="Test two" />
With event listener
ui({
    type: 'div',
    text: 'Click on me!',
    events: {
        click: function() {
            console.log('Test');
        }
    }
});
<div>Click on me!</div>

Div logs "Test" into console when clicked on.

With children spans
ui({
    type: 'div',
    children: [
        {
            type: 'span',
            text: 'First span'
        },
        {
            type: 'span',
            text: 'Second span'
        }
    ]
});
<div>
    <span>First span</span>
    <span>Second span</span>
</div>
Appended to the body
ui({
    type: 'div',
    text: 'Text',
    parent: 'body'
});
<div>Text</div>

Div is appended to the body upon creation.

Only displayed to administrators
var ug = mw.config.get('wgUserGroups');
ui({
    type: 'div',
    text: 'Admin, you can see this!',
    condition: ug.indexOf('sysop') !== -1
});
<div>Admin, you can see this!</div>

Displayed only to administrators.

With multiple classes
ui({
    type: 'div',
    classes: [
        'wds-button',
        'wds-is-secondary'
    ]
});
<div class="wds-button wds-is-secondary"></div>

See also

Community content is available under CC-BY-SA unless otherwise noted.

Fandom may earn an affiliate commission on sales made from links on this page.

Stream the best stories.

Fandom may earn an affiliate commission on sales made from links on this page.

Get Disney+