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>