Oncogene (JSON Config Generator) allows to create visual config generators. Demo 1. Demo 2. Custom Progressbar.
You only need to declare steps.
Warning! Oncogene is in active development. Minor versions may contain breaking changes.
new Oncogene(options)
CSS selector of element which will be Oncogene root.
Example:
{
selector: '.oncogene-root'
...
}
List of generator's steps
*required if options.steps[].callback
not in use.
Config key for chosen value. May be nested (dot separated).
*required if options.steps[].key
not in use.
Step callback. You can use it for complicated logic when a key is not enough.
Params:
- config {Object} — current config;
- value — chosen value.
Returns:
- config {Object} — new config.
Note: You can use key or callback or both
The given step is only shown if the callback returns true.
Params:
- config {Object} — current config;
Returns:
- true or false.
Common hint. Can contain HTML.
Array of variants. It should contain at least two items.
Variant hint. Can contain HTML.
Code example.
Applicable in case of array or object. Default behaviour, is to replace. Setting it true will force the value to be pushed/merged instead.
Skip true will not add this key to config
Any value that will be set by key
or/and will be used in callback
.
Example:
{
...
steps: [
{
key: 'someConfigKey',
hint: 'Common hint',
variants: [
{
hint: 'first variant hint',
code: 'first code example',
value: 'first variant value'
},
...
],
callback: (config, value) => {
config.anotherConfigKey = value
return config
}
},
...
]
}
Initial config. By default it is empty object ({}
).
Options validation skipping. By default it is false.
Configuring of result step.
Result hint. Can contain HTML.