search

scrapjs / prama

[Replaced with settings-panel] Panel manager for applications, demos or tests.
https://dfcreative.github.io/prama
5 stars 0 forks source link

readme

❁

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

Credits

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