N4Ig7glgJg5gpgFygQwaiCA2cQC4QCycAdgK4gA0IAzgBYD2YCG2ARsgE54Bmym1cKsWQBbHPjFlKITPWRQ4ADwRwOwzHgQdSgmgGMOcEnu4w8oSaT30FeENIHXiKDgE87C3qUwJpezMjU1HbSlsxY4iBQ9HrUAHQAPNRa9MQwAHx6AExxTNwJAPTJHKkZoSSk4diYEMQA1na1CopxAA60rQ4MYHqciHap0lAlrdFgxP4Qeg34Dgiu2CoirQEqdgAicF4+0q301BgQg/jCAG7sHAC0HBAwtL5UAFakyRDcEHBQIVSyMPTfUVQyDswAAOiBLODcABtMEgKpwKHggAqlXoNz41HBFHBqC0AH1aIZuEiQABibHguiMXqGBBQrQ6HE0UisSF4WHghGkgDKiFIrVwAAICMgIJhKSA8RxCcTSQVWsh4AVReLwQBfChw7l4cF8hAC4UAeWINWIcCFPIYrUl0tlW3liuVJrNcEuVvoNpAmu1LERupA+sNQvW9BEYuIWMouIQBKJDoDCqVcAK3QQ9Eu0XDtSjPq5ftJAE16KQOEKAArJ6iWxl6A2GW2xmXxkmJp0p9uXYpWev+vPwgsBgASjCF6eF8igQuQQvNYArycbcblbeTqcY6cuc/bGq1+YipJH8/HQrA6Lqp4wtCFyLgy1WcCjzLtLcda7TGaWK1Qj93voPw6jieZ4cBekAINeABi6IiE+MbLgmuDgkmyofpc3Awbme4DgBSEgEeY70MKnwYGOtAWkQZBLs2K54ShKZoSRCCXOy/Y6nhAByUyqEKpb8NR9qtnR7YFMQ3FXHxuYALpsYOeEAEqPtQJYcHov7RlKTaCaSFIadSPR9PSmjaIIVKsuyML/tgvJoMwehCopQQqWpcGaQhQnISJPK2VMlyOcppYuX++7WQGkHIKcUypNWABklrfnQ1AGEYkYCa+q7KuFkVONQ7oJbQSWGCQWFWf6eGVrGqipRpL60Z5a4VSoaglSFZXggAgqQUBHGldUgPRBSdd19AajJ2HseCmynHAsitKorm1Yh4K6cy+m0ogDImat5kVFCnI4aFeHQRwsG9Ut/UiRhJ0tQdbUgAAUjyRocUK7XlgAkmdHkXWuj3PZcb2fd641ySid7fioC1aelwlrsi5YADLBbdNkLI+5GIFD7lvsqADCPI8sjE0gO1rStFjNHnQNpPk0ToOEIgQIwBT2kZSmYhoJcaDM6Nsm4eCkElMQKjOF9OmSmthmbUyZlsrtHKlaSADq0DwAgLMw/Vyoq7AmN0/zIDIuRYga31A1G3e6l84dYP3j+ptUyJt525D+s2yAlbwA730DZ7VsyTJXSMEOoisKW8BcPggyauAquINAdiWPi+IACwAKKPI8KduAAnNwACO7WhDYfA8JiugiCXmCQFAEEAuGei0AAjAADMIYh2DXassRU3pAA

Usage

The rendering engine of C2 offers a simple way of accessing and styling high volumes of data with predefined functions and tools. The engine is used all over C2 and can be accessed in a programmatic way by every Developer using C2. Simply said constists functionality out of 3 Areas; 1. Data, 2. Layout and 3. User Input.

Important!
Take note that this area is still under construction and likely to change!

Minimum Required Data

The minimum amount data that is required to run a basic merging operation would be:

JSON Data Object

Important to note is that the supplied JSON doesnt need to come directly from JS, it can be supplied by any external, internal or file source.

// REQUIRED: data, structured as a json object
[
{"tag":"tag contents 1","url":"http://c2.wtf"},
{"tag":"tag contents 2","url":"http://docs.c2.wtf"},
{"tag":"tag contents 3","url":"http://cdn.c2.wtf"}
]

HTML

<!-- REQUIRED: html data with Tags -->
<strong class="text">{%=xtpl_static.statvar%}</strong><br />
<ul>
{%loop:myLoop%}
<li>
<a href="{%=url%}">{%=tag%}</a>
</li>
{%endloop%}
</ul>

Merge HTML and Data

In order to merge the JSON Data Object with the supplied HTML you'll need to create a render function. This merges all your data and returns a html string containing your data within the set HTML. The _render function accepts an addtional staticdata parameter wich can be used to add more data and not only loops. Depending on your JSON-Source you can use each key as a tag in your HTML.

A example in javascript returning the HTML could look like:

// === data: setup json =============
var renderdata = {
templatestring: '<strong class="text">{%=xtpl_static.statvar%}</strong><br /><ul>{%loop:myLoop%}<li><a href="{%=url%}">{%=tag%}</a></li>{%endloop%}</ul>',
data: [{
myLoop: [{
"tag": "tag contents 1",
"url": "http://c2.wtf"
}, {
"tag": "tag contents 2",
"url": "http://docs.c2.wtf"
}, {
"tag": "tag contents 3",
"url": "http://cdn.c2.wtf"
}]
}],
staticdata: {
"statvar": "static variable"
}
};


// === render data =============
var html = _wf._render(renderdata);

// === output rendered data =============
console.log('html string', html); // as console.log()
$('body').prepend(html); // as jquery

Tags

Any field can be outputed in its simplest form: {%=<tagname>%} The output will be converted to a string using the default Javascript method.
The Whacky Framework has a lot more options and/or rendering methods that you can apply to a field, Multiple functions can be used to transform the output required to your needs.

A simple example is:

{%=<tagname>%}
A more elaborate example could be:
{%=<tagname>|string:trim,lowercase,capitalizefirstletter%}

Modifiers

Tag modifier give you the option to manipulate the output while using our tags.

String

Number

The function has the following parameters:

  • <number of digits behind the seperator>
  • <separator size before the, usually thousand e.g. 3 >
  • <thousand separator character>
  • <comma separator character>

Default: The default settings can be found in the variable: _wf.i18n.number
Note: If no format was specified, the defaults from _wf.i18n are used.

{%=<tagname>|number:2,3,'.',','%}

Date

The data provided can be two types:

  • POSIX number
  • ISO datetime string

Where the format parameters can be:


a predefined format string

{%=<tagname>|date:isoUtcDateTime%} or {%=createdate|date:isoDate%}
see: _wf.i18n.date.masks

Note: If the data is invalid, an empty string will be rendered !


Any format string

{%=<tagname>|date:dd-mm-yyyy%}

see: http://blog.stevenlevithan.com/archives/date-time-format
Note: If no format was specified, the defaults from _wf.i18n are used.

Bytes

This function has NO functions or parameters. it will automatically create a string like 1.5 MB

{%=<tagname>|bytes%}

Statics

Those tags only apply if used inside a loop

the current record which is rendered (0 based)

{%=xtpl_c.xcurrent%}

total nr of data elements (in the parsed data)

{%=xtpl_c.xtotal%}

this is where the html starts (opt.start) (0 based)

{%=xtpl_c.xstart%}

End item that will get rendered (opt.end) (0 based)

{%=xtpl_c.xend%}

Any static variable that you parse through in the options

{%=xtpl_static.XXXXXXXX%}

Statements & Logic

if- / else statements

If- else-statements are used to compare values of variables, check if they are set or require the basic information needed. A simple Logic Statement could be:

{% if}myTag === "foobar"{ if%} 
FOOBAR VAR!: {%=myTag %}
{% endif%}
{% if}myTag === "foobar"{ if%} 
FOOBAR IF!
{% else%}
FOOBAR ELSE!
{% endif%}

custom javascript functions

 {%=( alert(myTag) )%}

logic operands

is equal

{% if}myTag == "foobar"{ if%}FOOBAR VAR!{% endif%}

is not equal

{% if}myTag != "foobar"{ if%}FOOBAR VAR!{% endif%}

is larger than 2

{% if}myTag >= 2{ if%}FOOBAR VAR!{% endif%}

is lower than 2

{% if}myTag <= 2{ if%}FOOBAR VAR!{% endif%}

Loops

{%loop:myLoopName%} 
...
{%endloop%}

Fieldtype: String

The string type has a lot of functions to transform the field into the desired format: Because there are a lot of functions, you can use multiple functions.

name example note
lowercase {%=<field>|string:lowercase%}
uppercase {%=<field>|string:uppercase%}
trim {%=<field>|string:trim%}
capitalizefirstletter {%=<field>|string:capitalizefirstletter%}
strleft {%=<field>|string:strleft(4)%}
strright {%=<field>|string:strright(4)%}
substr {%=<field>|string:substr(2,4)%} "abcdefg" becomes "cdef"
truncate {%=<field>|string:truncate(10)%} which gives the first 10 characters only
striphtml {%=<field>|string:striphtml%}

This uses the function _wf._stripHtmlTags();

encodeURIComponent {%=<field>|string:encodeURIComponent%} uses the javascriptfunction: encodeURIComponent()
decodeURIComponent {%=<field>|string:decodeURIComponent%} uses the javascriptfunction: decodeURIComponent()
htmlspecialchars {%=<field>|string:htmlspecialchars%}

escapes the following characters:

  • " => &quot;
  • ' => &#039;
  • < => &lt;
  • > => &gt;
escapedblquotes {%=<field>|string:escapedblquotes%} javascript: .split('\\"').join('"').split('"').join('&quot;');
unescapedblquote {%=<field>|string:unescapedblquote%} javascript: .split('\\"').join('"');
urlescapedblquotes {%=<field>|string:urlescapedblquotes%} javascript: .split('\\"').join('"').split('"').join('%22');
jsonstring {%=<field>|string:jsonstring%} JSON.stringify(<data>);
b64_encode {%=<field>|string:b64_encode%}

javascript: _wf.calc.b64_encode(<data>);
added in version 3.7.5

b64_decode {%=<field>|string:b64_decode%}

javascript: _wf.calc.b64_decode(<data>);
added in version 3.7.5

Fieldtype: bytes