prama

prāṃa

Parameters manager for applications or tests.

Define parameters which your component depends on and prama will take care of settings panel, history of changes, saving/loading states, parameter types, themes etc. Essentially it is a wrapper for settings-panel.

Usage

var createParams = require('prama');
 
var params = createParams(
    title: 'Login',
    popup: 'dropdown',
    position: 'top-right',
    fields: [
        { label: 'Full name', type: 'text'},
        { label: 'Email', type: 'email'},
        { label: 'Sign In', type: 'button', input: () => {
                var querystring = params.toString();
                //...
            }
        }
    ]
);

API

const Prama = require('prama');

`let prama = new Prama({title, fields, ...})`

Create settings manager instance based off options:

title: 'Settings'

Display menu title at the top of the panel. Can be omitted.

fields: []

List or object of fields for settings-panel.

Prama adds save and order additional field properties.

theme: null

Theme, one of control, dragon, lucy, merka, typer or false for default theme. Require theme as theme: require('prama/theme/name'). See theme folder.

container: document.body

Container element to place panel and settings button.

popup: 'dropdown'

Enable popup — can be a popup type string, popup options or boolean. See popoff for popup options.

draggable: true

Make panel draggable — can be boolean or handle selector. Default handle is panel title.

button: true

Create settings menu button at the corner of the page.

history: false

Reflect settings state in url.

session: true

Save/load settings state between browser sessions, overridden by history.

storage: window.sessionStorage

Default storage for session.

`prama.get('my field')`

Get single field value by name.

`prama.get()`

Return object with values of all fields

`prama.set('my field', value|options)`

Set field value or update field options.

`prama.set({field1: value, field2: options, ...})`

Update multiple field values or field options. State can be an object or a list, same as fields property in options.

`prama.on('change', (name, value, state) => {})`

Hook up a callback for any field change. Callback recieves field name, new value and full state arguments.

`prama.show()`

Show panel.

`prama.hide()`

Hide panel.

`prama.update({title, theme, orientation, palette})`

Update panel visual options.

`prama.toString()`

Get string representation of state. Basically, a querystring.

`prama.toJSON()`

Get state object with fields filtered for saving. Fields which save attribute is set to false will be ignored.

See also

• settings-panel — setting panel used by prama.
• popoff — any type of popup, modal, dropdown etc.
• start-app — demo page for components.
• tst — minimalistic test runner.
• dat.gui — other oldschool settings panel.

Credits

Thanks to freepik.com for astonishing illustration used for logo.