PIGNOSE Formula

Basic

Advanced

You can drag and drop each of below items to the formula area.

If you want to set a value on your custom element, Set data-value attribute on your element.

PI Custom operator (+) Variable (INT 3)

Also you can get the javascript object data by calling getFormula();

JSON

The json data will be appeared when you click getFormula button.

You can easily get the formula result to call getFormula(); function in case. Check the following codes.

var result = $formula.data('formula').getFormula();
// result.data is parsed formula exression (like [1, '*', 3, '+', 2]);
console.log(result.data);

// result.filterData is original formula object (like { operation: '*', operand1: 1, operand2: 3 })
console.log(result.filterData);

Options

name		type	description	default
id		string	An unique id of formula textarea element.	formula
cursorAnimTime		int	Blinking animation time of cursor. (ms)	160
cursorDelayTime		int	Blinking delay time of cursor. (ms)	500
strings	formula	string	Default label text in formula.	Formula
strings	validationPassed	string	The label text when result of validation is passed.	Passed
strings	validationError	string	A message when formula occurs validation error.	Validation Error
export	filter(data)	function	You can filter pre-export data as map filtering.	function(data) { return data; }
export	item(element)	function	You can bind a trigger or customize for item which be inserted by insert() function.	function($e) { return $e.text(); }

Methods

You can call the function to use $element.data('formula').Function Name();

name	type	description
syntaxCheck()	function	This feature can check the formula syntax, And that informs a result (passed or not) at label in the formula area.
destroyDrag	function	You can destroy drag selection in formula.
selectAll	function	You can select all unit in formula.
click(position)	function	If you want click and make a cursor in formula, Use this feature. You need to send the correct coordinate as {x: ~~, y: ~~}
keydown(key, shift)	function	This method helps you to insert a character as event.keycode. If you give second argument as boolean, You can insert new character which be combined with Shift key.
insert(element)	function	You can insert html tag directly in formula.
insertChar(key)	function	It is more simple usage to insert a character.
empty()	function	Remove all unit in formula, It seems like jQuery.empty().
setFormula(data)	function	You can load formula units by javascript object.
getFormula()	function	You can get formula units as javascript object.

Event

You can attach event listener to formula element as $element.data('formula').on();

name	type	description
formula.input	event	When user type or change the formula expression this event will be fired.

bower

If you use bower.

bower install jquery-formula

npm

If you use npm.

npm install jquery-formula

Example

<div class="formula"></div>

$(function() {
	$('.formula').formula();
});

.formula {
    min-height: 400px;
}

.formula-wrapper .formula {
    background-color: #f8f8f8;
    border: 1px solid #d8d8d8;
    text-align: left;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
}