Configure a Monster Control

Many of the components of the Monster Control can be configured. Components are created either by a tag in the HTML code or by the document.createElement method.

Example

The following example shows how to configure the Monster Control.

// Create a new Monster Control
var monster = document.createElement('monster-control');

Configuration

Mittels JavaScript können die Monster Controls über die Methode setOption konfiguriert werden. Dazu muss der Name der Option und der Wert übergeben werden.

monster.setOption('optionName', 'optionValue');

A list of available options can be found in the respective documentation of the component or can be read out using the default property.

const control = document.createElement('monster-control');
console.log(control.default);

There are three ways to configure a Monster Control via HTML.

JSON via an attribute

You can simply pass the JSON as a string to the data-monster-options attribute.

<monster-control data-monster-options='{"optionName": "optionValue"}'></monster-control>

If the JSON is too long or contains special characters, it can be converted to a data URL.

new Monster.Types.DataUrl(btoa(JSON.stringify({
    "optionName": "optionValue"
})),'application/json',true).toString()

JSON via a script tag

But the preferred way is to use a script tag.

<script id="id-for-this-config" type="application/json">
    {
        "optionName": "optionValue"
    }
</script>

<monster-control data-monster-options-selector="#id-for-this-config"></monster-control>

Options via attributes

Almost every option can also be set via an attribute. The name of the attribute begins with data-monster-option- and ends with the name of the option. The value of the attribute is the value of the option.

The name of the option is converted to a property path. It replaces the dashes with dots to form the property path. For example, the attribute ‘data-monster-option-url’ maps to the ‘url’ property in the options object.

With the mapping parameter, the attribute value can be mapped to a different value. For example, the attribute ‘data-monster-option-foo’ maps to the ‘bar’ property in the options object.

The mapping object would look like this:

{
'foo': (value) => value + 'bar'
// the value of the attribute 'data-monster-option-foo' is appended with 'bar'
// and assigned to the 'bar' property in the options object.
// e.g. <div data-monster-option-foo="foo"></div>
'bar.baz': (value) => value + 'bar'
// the value of the attribute 'data-monster-option-bar-baz' is appended with 'bar'
// and assigned to the 'bar.baz' property in the options object.
// e.g. <div data-monster-option-bar-baz="foo"></div>
}

Here is an example of how to configure a Monster Control via attributes.

<monster-my-control data-monster-option-bar-baz="foo"></monster-my-control>