NxTIC/doc/form-builder/behaviour.js

186 lines
6.5 KiB
JavaScript
Raw Normal View History

// <h4 data-icon='o' class='new-contact color2'>
//
// <input type='hidden' data-name='uid' value='@uid'>\n+
// <input type='hidden' data-name='call' value='@call'>\n+
// <input type='hidden' data-name='sms' value='@sms'>\n+
//
// <input type='hidden' data-name='countcall' value='@countcall'>\n+
// <input type='hidden' data-name='countsms' value='@countsms'>\n+
//
// <input type='text' data-name='number' placeholder='Numéro de téléphone' value='@number' >
//
// <span class='select-container nobold'><select data-name='existing'>\n+
// <option value='.'>Utiliser pseudo</option>\n+
// @contacts+
// </select></span>\n+
//
// &nbsp;&nbsp;&nbsp;&nbsp;ou&nbsp;&nbsp;&nbsp;&nbsp;\n+
//
// <input type='text' data-name='username' placeholder='Pseudo' value='@username' >
// <input type='submit' class='primary sub-number' value='Enregistrer'>
//
// </h4>\n\n);
//////////////
// USE CASE //
//////////////
////////////////
// PARAMETERS //
////////////////
// {xx} - where 'xx' is a variable name which will be (literally) replaced by the $xx given parameter (if missing, by an empty string)
// note that the parameter in a higher level have to be preceeded by '$'
// /!\ warning: the variable name must only contain [ lowercase_letters, hyphens ]
//
// {zz[]} - where 'zz' is an array variable name which will be (for each item) replaced by the $$zz given array (see next statement)
// note that the parameter in a higher level have to be preceeded by '$$'
//
// {zz()} - where 'zz' is a function variable name which will be replaced by the $zz function
//
// {zz.xx} - where 'zz' is an array name + 'xx' is an index name of this array's items, it will be replaced by zz[0][xx], then zz[1][xx], etc
// note that this is the only case when the dot (.) is allowed in variable naming
//
// {__attributes__} - default variable name for the attributes
// {__children__} - default variable name for the children
2016-09-17 14:04:03 +00:00
// {__html__} - default variable name for the html given in higher level
/////////////////////////
// REGURAL EXPRESSIONS //
/////////////////////////
2016-09-17 14:04:03 +00:00
// /^yy$/ - where '^yy$' is a regular expression, matches will be added to the input parameters named like so : '{$1}', '{$2}', etc
// note that it have to match the whole string and begin with '/^' and end with '$/'
2016-09-17 14:04:03 +00:00
// this pattern can only be present in an attribute KEY, and can't be partial, it must be the whole key
//
////////////////////////
// DEFAULT ATTRIBUTES //
////////////////////////
//
// node - is a "key" of a definition that describes an element
// next_nodes - the set of the element's next elements
// prev_nodes - the set of the element's previous elements
// node_type - real node-type (to create element in javascript)
// text - overrides all to specify the text content corresponding of the element
// children - the set of the element's children (doesn't check if it is a container or not)
2016-09-17 14:04:03 +00:00
// attributes - attributes of the element ()
// listeners - contains the associations: 'eventName' => 'listenerFuncName'
// $xxx - where 'xxx' is a variable name that will be replaced in a lower level
// $$zzz - where 'zzz' is an array variable name that will be split in a lower level
// repeat - must contain a number or an array name (such as: "{{tabname}}")
// 1- if an array is given, the element will be repeated for each item of the array
// 2- if a number @n is given, the element will be repeated @n times
2016-09-17 14:04:03 +00:00
2016-09-18 13:11:19 +00:00
//////////////////////
// REFERENCE SYSTEM //
//////////////////////
// variables are transformed to references, so they can be updated easily without rebuilding the whole model
// when the model is built the first time, all the passed variables are transformed to references
// and they are spread by references
// REPEAT: '$01abcdef$' ->ref-> {
// repeat: 'repeatAttr',
// references: ['myTab.attr1', 'myTab.attr2', 'repeat.i', 'repeat.n']
// }
2016-09-17 14:04:03 +00:00
////////////////////////
// LANGAGE DEFINITION //
////////////////////////
var ElementObject = {
node: 'node name defined earlier',
attributes: { attr_name_1: 'attr_value_1', attr_name_2: 'attr_value_2' },
children: [ElementObject],
next_nodes: [ElementObject],
prev_nodes: [ElementObject],
text: 'some text to be the innerHTML',
repeat: 'number to repeat ElementObject || {{array}} to repeat ElementObject',
node_type: 'html tag name',
listeners: [EventListener]
2016-09-17 14:04:03 +00:00
};
2016-09-18 13:11:19 +00:00
/////////////
// EXAMPLE //
/////////////
var default_definition = {
2016-09-17 14:04:03 +00:00
'input': { node_type: 'input' },
'/^h([1-6])$/': { node_type: 'h{$1}' },
'br': { node_type: 'br' },
'option': { node_type: 'option' },
'select': { node_type: 'select' },
'span': { node_type: 'span' }
};
var custom_definition = {
'/^input\.([a-z]+)$/': {
node: 'input',
attributes: {
'type': '{$1}',
'data-name': '{name}',
'value': '{value}',
'placeholder': '{placeholder}'
},
listeners: {
'click': '{onclick()}'
},
next_nodes: [{ node: 'br' }]
},
'custom-select': {
node: 'span',
attributes: { 'class': 'select-container nobold' },
children: [
{
node: 'select',
attributes: { 'data-name': '{name}' },
children: [
{
node: 'option',
attribute: { value: '{options.value}' },
text: '{options.value}',
browse: { array: '{options[]}' }
}
]
}
],
next_nodes: [{ node: 'br' }]
},
'mult-text': {
node: 'span',
attributes: { id: 'text_{rep.i}' },
text: "{rep.i} sur {rep.n}",
repeat: { n:10, id: 'rep' }
}
};
var form = {
node: 'h4',
attributes: { 'data-icon': 'o', 'class': 'new-contact color2' },
children: [
{ node: 'input:hidden', $name: 'uid', $value: '{uid}' },
{ node: 'input:hidden', $name: 'call', $value: '{call}' },
{ node: 'input:hidden', $name: 'sms', $value: '{sms}' },
{ node: 'input:hidden', $name: 'countcall', $value: '{countcall}' },
{ node: 'input:hidden', $name: 'countsms', $value: '{countsms}' },
{ node: 'input:text', $name: 'number', $value: '{number}', $placeholder: '{Numéro de téléphone}' },
{ node: 'custom-select', $name: 'existing', $$options: '{{options}}' }
]
};
// <span class='select-container nobold'><select data-name='existing'>\n+
// <option value='.'>Utiliser pseudo</option>\n+
// @contacts+
// </select></span>\n+