jquery-formula
Version:
Javscript WYSWYG formula builder.
345 lines (330 loc) • 13.4 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, user-scalable=no" />
<meta property="og:url" content="http://www.pigno.se/barn/PIGNOSE-Formula">
<meta property="og:type" content="product" />
<meta property="og:title" content="PIGNOSE Formula" />
<meta property="og:description" content="Javscript WYSWYG formula builder." />
<meta property="og:image" content="http://www.pigno.se/barn/PIGNOSE-Formula/demo/img/cover@250.png" />
<meta property="og:site_name" content="PIGNOSE" />
<title>PIGNOSE Formula</title>
<link rel="shortcut icon" type="image/x-icon" href="demo/img/pignose-ico.ico" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />
<link rel="stylesheet" href="demo/css/semantic.ui.min.css">
<link rel="stylesheet" href="demo/css/prism.css" />
<link rel="stylesheet" href="demo/css/formula-style.css" />
<link rel="stylesheet" href="demo/css/style.css" />
<link rel="stylesheet" type="text/css" href="src/css/pignose.formula.css" />
<script type="text/javascript" src="demo/js/jquery.latest.min.js"></script>
<script type="text/javascript" src="demo/js/jquery-ui.latest.js"></script>
<script type="text/javascript" src="demo/js/semantic.ui.min.js"></script>
<script type="text/javascript" src="demo/js/prism.min.js"></script>
<script type="text/javascript" src="src/js/pignose.formula.build.js"></script>
<script type="text/javascript">
//<![CDATA[
$(function() {
// Plugin version confirmation.
$('.version strong').text('v' + $.fn.formula.getVersion());
var $formula = $('.formula').formula();
// You can load formula expression by wrting JSON type value;
var data = {"operator":"+","operand1":{"operator":"+","operand1":{"value":"1","type":"unit"},"operand2":{"value":"2","type":"unit"}},"operand2":{"value":"3","type":"unit"}};
// .setFormula({:data}) can load new expression.
$formula.first().formula('setFormula', data);
// .draggable is normal jQuery UI plugin. It support to dragging the element by using mouse click and move.
$('.formula-drop .formula-drop-items .formula-custom').draggable({
revert: 'invalid',
helper: 'clone',
cancel: '',
scroll: false
});
// .droppable can detect drop event of draggable element.
$('.formula-advanced').droppable({
drop: function(event, ui) {
// You can clone drop item to move inside formula.
var $element = ui.draggable.clone();
// Position variable describes `where` you put the element.
var position = {
x: event.offsetX,
y: event.offsetY
};
// 'insert' command can put the element at some position.
$(this).formula('insert', $element, position);
}
});
$('.formula-advanced').bind('formula.input', function(event, data) {
console.log('input', data);
});
$('.formula-get .compact .item').bind('click', function(event) {
event.preventDefault();
$('.formula-advanced').formula('getFormula', function(data) {
console.log('Formula result:', data);
$('.formula-get .formula-get-json .formula-get-json-data').text(JSON.stringify(data));
});
});
$('.menu .item').tab();
});
//]]>
</script>
</head>
<body>
<div id="wrapper">
<div class="header">
<img src="demo/img/pignose-logo.png" alt="" />
<h1>PIGNOSE Formula</h1>
<a href="https://github.com/KennethanCeyer/Formula" target="_blank" class="ui button primary">View project on Github</a>
<a href="https://github.com/KennethanCeyer/Formula/archive/master.zip" target="_blank" class="ui button teal">Download zip</a>
<h4 class="version">Latest version <strong></strong></h4>
</div>
<div class="article">
<h3>
<span>Basic</span>
</h3>
<div class="formula formula-basic"></div>
</div>
<div class="article">
<h3>
<span>Advanced</span>
</h3>
<div class="formula formula-advanced"></div>
<div class="formula-drop">
<i class="fa fa-mouse-pointer" aria-hidden="true"></i>
<p>You can drag and drop each of below items to the formula area.</p>
<p>If you want to set a value on your custom element, Set <span class="ui label">data-value</span> attribute on your element.</p>
<div class="formula-drop-items">
<a href="#" class="formula-custom" data-value="3.14">PI</a>
<a href="#" class="formula-custom formula-custom-operator" data-value="+">Custom operator (+)</a>
<a href="#" class="formula-custom" data-value="3">Variable (INT 3)</a>
</div>
</div>
<div class="formula-get">
<h4>Also you can get the <span class="ui label">javascript object</span> data by calling <span class="ui label primary">getFormula();</span></h4>
<div class="ui compact menu">
<a href="#" class="item">getFormula</a>
</div>
<div class="formula-get-json">
<span class="ui right ribbon label" style="margin-top: -40px; margin-left: 30px;">JSON</span>
<div class="formula-get-json-data">The json data will be appeared when you click <span class="ui label">getFormula</span> button.</div>
</div>
<h4>You can easily get the formula result to call <span class="ui label">getFormula();</span> function in case. Check the following codes.</h4>
<pre><code class="language-js">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);</code></pre>
</div>
</div>
<div id="content" class="article">
<h3>
<span>Options</span>
</h3>
<table class="ui table celled">
<colgroup>
<col style="width: 160px;">
<col>
<col>
<col>
<col>
</colgroup>
<thead>
<tr>
<th colspan="2">name</th>
<th>type</th>
<th>description</th>
<th>default</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">id</td>
<td class="center"><span class="ui label blue">string</span></td>
<td>An unique id of formula textarea element.</td>
<td>formula</td>
</tr>
<tr>
<td colspan="2">cursorAnimTime</td>
<td class="center"><span class="ui label blue">int</span></td>
<td>Blinking animation time of cursor. (ms)</td>
<td>160</td>
</tr>
<tr>
<td colspan="2">cursorDelayTime</td>
<td class="center"><span class="ui label blue">int</span></td>
<td>Blinking delay time of cursor. (ms)</td>
<td>500</td>
</tr>
<tr>
<td>strings</td>
<td>formula</td>
<td class="center"><span class="ui label blue">string</span></td>
<td>Default label text in formula.</td>
<td>Formula</td>
</tr>
<tr>
<td>strings</td>
<td>validationPassed</td>
<td class="center"><span class="ui label blue">string</span></td>
<td>The label text when result of validation is passed.</td>
<td>Passed</td>
</tr>
<tr>
<td>strings</td>
<td>validationError</td>
<td class="center"><span class="ui label blue">string</span></td>
<td>A message when formula occurs validation error.</td>
<td>Validation Error</td>
</tr>
<tr>
<td>export</td>
<td>filter(data)</td>
<td class="center"><span class="ui label blue">function</span></td>
<td>You can filter pre-export data as map filtering.</td>
<td>function(data) { return data; }</td>
</tr>
<tr>
<td>export</td>
<td>item(element)</td>
<td class="center"><span class="ui label blue">function</span></td>
<td>You can bind a trigger or customize for item which be inserted by <span class="ui label">insert()</span> function.</td>
<td>function($e) { return $e.text(); }</td>
</tr>
</tbody>
</table>
</div>
<div id="content" class="article">
<h3>
<span>Methods</span>
</h3>
<h4>You can call the function to use <span class="ui label">$element.data('formula').Function Name();</span></h4>
<table class="ui table celled">
<thead>
<tr>
<th>name</th>
<th>type</th>
<th>description</th>
</tr>
</thead>
<tbody>
<tr>
<td>syntaxCheck()</td>
<td><div class="ui label blue">function</div></td>
<td>This feature can check the formula syntax, And that informs a result (passed or not) at label in the formula area.</td>
</tr>
<tr>
<td>destroyDrag</td>
<td><div class="ui label blue">function</div></td>
<td>You can destroy drag selection in formula.</td>
</tr>
<tr>
<td>selectAll</td>
<td><div class="ui label blue">function</div></td>
<td>You can select all unit in formula.</td>
</tr>
<tr>
<td>click(position)</td>
<td><div class="ui label blue">function</div></td>
<td>If you want click and make a cursor in formula, Use this feature. You need to send the correct coordinate as <span class="ui label">{x: ~~, y: ~~}</span></td>
</tr>
<tr>
<td>keydown(key, shift)</td>
<td><div class="ui label blue">function</div></td>
<td>This method helps you to insert a character as <span class="ui label">event.keycode</span>. If you give second argument as boolean, You can insert new character which be combined with Shift key.</td>
</tr>
<tr>
<td>insert(element)</td>
<td><div class="ui label blue">function</div></td>
<td>You can insert html tag directly in formula.</td>
</tr>
<tr>
<td>insertChar(key)</td>
<td><div class="ui label blue">function</div></td>
<td>It is more simple usage to insert a character.</td>
</tr>
<tr>
<td>empty()</td>
<td><div class="ui label blue">function</div></td>
<td>Remove all unit in formula, It seems like <span class="ui label">jQuery.empty()</span>.</td>
</tr>
<tr>
<td>setFormula(data)</td>
<td><div class="ui label blue">function</div></td>
<td>You can load formula units by <span class="ui label">javascript object</span>.</td>
</tr>
<tr>
<td>getFormula()</td>
<td><div class="ui label blue">function</div></td>
<td>You can get formula units as <span class="ui label">javascript object</span>.</td>
</tr>
</tbody>
</table>
</div>
<div id="content" class="article">
<h3>
<span>Event</span>
</h3>
<h4>You can attach event listener to formula element as <span class="ui label">$element.data('formula').on();</span></h4>
<table class="ui table celled">
<thead>
<tr>
<th>name</th>
<th>type</th>
<th>description</th>
</tr>
</thead>
<tbody>
<tr>
<td>formula.input</td>
<td class="center"><div class="ui label blue">event</div></td>
<td>When user type or change the formula expression this event will be fired.</td>
</tr>
</tbody>
</table>
</div>
<div id="bower" class="article">
<h3>
<span>bower</span>
</h3>
<blockquote><p>If you use bower.</p></blockquote>
<pre><code class="language-bash">bower install jquery-formula</code></pre>
</div>
<div id="npm" class="article">
<h3>
<span>npm</span>
</h3>
<blockquote><p>If you use npm.</p></blockquote>
<pre><code class="language-bash">npm install jquery-formula</code></pre>
</div>
<div id="sample" class="article">
<h3>
<span>Example</span>
</h3>
<br />
<ul class="ui top pointing secondary menu">
<a href="#" role="presentation" class="item active" data-tab="html">HTML</a>
<a href="#" role="presentation" class="item" data-tab="javascript">Javascript</a>
<a href="#" role="presentation" class="item" data-tab="css">CSS</a>
</ul>
<div role="tabpanel" class="ui tab segment active" data-tab="html">
<pre><code class="language-markup"><div class="formula"></div></code></pre>
</div>
<div role="tabpanel" class="ui tab segment" data-tab="javascript">
<pre><code class="language-js">$(function() {
$('.formula').formula();
});</code></pre>
</div>
<div role="tabpanel" class="ui tab segment" data-tab="css">
<pre><code class="language-css">.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);
}</code></pre>
</div>
</div>
</div>
</body>
</html>