config-ui

0.2.1 • Public • Published

CONFIG-UI

Create JS property controls from HTML form controls.

Example

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 }
  })

Package Sidebar

Install

npm i config-ui

Weekly Downloads

1

Version

0.2.1

License

ISC

Last publish

Collaborators

  • tmanderson