NxTIC/doc/form-builder/behaviour.js

// <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
// {__html__}        - default variable name for the html given in higher level

/////////////////////////
// REGURAL EXPRESSIONS //
/////////////////////////
// /^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 '$/'
//                 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)
// 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


//////////////////////
// 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']
// }

////////////////////////
// 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]

};


/////////////
// EXAMPLE //
/////////////

var default_definition = {
	'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+