//

// // \n+ // \n+ // \n+ // // \n+ // \n+ // // // // \n+ // //     ou    \n+ // // // // //

\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.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 //////////////////////// // 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] }; 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}' }, 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}', repeat: '{{options}}' } ] } ], next_nodes: [{ node: 'br' }] } }; 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}}' } ] }; // \n+