prama

2.0.4 • Public • Published

❁

prāṃa WIP

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

npm install prama

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.

Package Sidebar

Install

npm i prama

Weekly Downloads

1

Version

2.0.4

License

MIT

Last publish

Collaborators

  • dfcreative