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.
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();
//...
}
}
]
);
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
- 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.
save
and order
additional field properties.
`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.
- 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.
Thanks to freepik.com for astonishing illustration used for logo.