0.2.1 • Published 7 years ago
config-ui v0.2.1
CONFIG-UI
Create JS property controls from HTML form controls.
Create all the controls you need (no need to create labels/value placeholders) and ConfiGUI will handle the rest.
The HTML
Use any valid HTML input types (including color
)
Primary control group
<div data-configui>
...
</div>
Control Group
<div data-configui>
<div data-group="rotate">
...
</div>
</div>
Controls
<div data-configui>
<div data-group="rotate">
<input type="range" name="x" value="0" min="-1.57" max="1.57" step="0.1" />
</div>
</div>
The JavaScript
Getters, setters, and listeners.
ConfiGUI(HTMLElement)
The element argument is optional (and if omitted, configui will use the
first data-configui
element on the page)
const cui = new ConfiGUI();
#get(key)
Get a value from control model.
cui.get('rotate') // => { x: 0 }
cui.get('rotate.x') // => 0
#set(key, value)
Set a value (and update related UI).
cui.set('rotate', { x: Math.PI })
cui.set('rotate.x', Math.PI)
#on(key, callback)
Listen to changes on the control model and execute supplied callback.
cui.on('rotate.x', function(value, htmlEvent) {
console.log(value) // => 2.12
})
cui.on('rotate', function(value, htmlEvent) {
console.log(value) // => { x: 2.12 }
})