Skip to content
/ prama Public

[Replaced with settings-panel] Panel manager for applications, demos or tests.

Notifications You must be signed in to change notification settings

scrapjs/prama

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

96 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

❁

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.

Credits

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

About

[Replaced with settings-panel] Panel manager for applications, demos or tests.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published