wm.List can create a List from either an existing DOM UL element or from a JSON object containing the list data.

You can pass either a reference to the UL element or if the UL element have an id-attribute, you can pass the id as a string.

If you retrieve the list data from a database, it is typically easier to create a JSON object - the schema is defined below.

'flyout' | 'accordion'.

Note that if you just want a list that is always fully expanded.

Default: 'flyout'.

'vertical' | 'horizontal'. If used as a flyout menu, a vertical list will typically be placed at the left or right side of the viewport, while a horizontal list will typically be placed at the top or bottom side of the viewport.

Default: 'vertical'.

NOT IMPLEMENTED.

'auto' | 'click' | 'hover' | 'expand'. How sublists are activated, that is: if the user needs to click or hover an item to toggle its sublist. 

If set to 'auto', trigger will be 'hover' for flyout lists and 'click' for accordions. 

If set to 'expand', the full list will be expanded for accordions, however for flyouts, trigger will revert to 'hover'.

If set to 'click', links will be disabled on parent items.

On mobile there is no 'hover', in which case trigger will revert to 'click' (unless if set to 'expand').

Default: 'auto'.

'auto' | css-width-value (eg. '400px'). If set to 'auto', the list will fill the parent container.

Default: 'auto'.

'right' | 'left' | 'down' | 'up'. If used as a bottom menu, you would like the flyout direction to be 'up'.

Default: 'right'.

NOT IMPLEMENTED.

Moves the flyout to the right of the its parent item. Use to fine tune position of flyouts.

Default: 0.

Moves the flyout downwards from its parent item. Use to fine tune position of flyouts.

Default: -3.

false | true. 

If false and trigger is different from 'expand' only 1 sublevel can be open at a time.

If true and listType is set to 'accordion' multiple sublevels can be open at a time (it is adviced to set trigger to 'click' for this effect).

Default: false.

false | true.

If set to true and multipleExpand is also set to true, toggle state will show on all items not only the last activated subhierarchy.

Default: false.

How many pixels an accordion sublevel should be indented (have no effect for listType='flyout').

Default: 24.

The color of the item label & icon.

Default: '#050505'.

The color of the item label & icon, when the item is hovered.

Default: '#640DF3'.

The color of the item label & icon if the item is selected.

Default: 'white'.

NOT IMPLEMENTED

The background color of the item.

Default: 'white'.

The background color of the item, when the item is hovered

Default: '#ECE0FD'

The background color of the item if the item is selected.

Default: 'black'.

NOT IMPLEMENTED.

'auto' | 'yes' | 'no'.

If 'yes', then checkboxes will be added to all items (mixed state will be tracked).

If 'no', then no checkboxes will be added even if there are checkbox information in the list data.

if 'auto', then checkboxes will be added to the items that have checkbox information in the list data.

Default: 'auto'.

true | false.

If true, then arrows will be inserted on items that have subitems to indicate this item can be toggled.

Default: true.

true | false.

If true, then arrows will change direction to indicate whether an item is toggled (only relevant for addArrows=true).

Default: true.

Creates a list and returns a reference to the list javascript object.

Note that the DOM representation of the list can be retrived as: refList.ulList.

The arguments are explained in detail in the above arguments documentation.

Will fire when (after) a checkbox is toggled.

Usage:

document.addEventListener('wm-list-checkbox', function(e) {

    var refList = e.detail.list;

    var refCheckbox = e.detail.checkbox;

});

Note that refCheckbox is a javascript object {id: chkId, state: checkedState, ref: refChk}