fontsReady
Font chack and preloader with callbacks
Functions
Util.fontsReady
Definition
- Name
- Util.fontsReady
- Syntax
- Void = Util.fontsReady( Node|String|JSON template , JSON json [, JSON _options ] );
Description
If HTML (node or string) is passed as template, it creates HTML nodes from json based on template.
If JSON (Object or string) is passed as template, it creates new Array of JSON Object from json based on template.
Parameters
- template
-
Node HTML node to be used as template.
- template
-
StringText, HTML or JSON string to be used as template.
- template
-
JSON JSON object to be used as template.
- json
-
JSON Array of JSON objects to use as values.
- _options
-
JSON Optional options for parsing
Options
Return values
ChildNodes|Array|JSON If HTML is passed as template it returns list of created nodes as ChildNodes reference or Array of nodes if the append option is used to append nodes automatically. If JSON is passed as template it returns Array of JSON Objects.
Examples
HTML templating, Simplest usage
<ul>
<li class="template">
<h3>{name}</h3>
<p>{description}</p>
<a href="{url}">link</a>
</li>
</ul>
<script>
var data = [
{
"name":"Manipulator",
"description":"JavaScript framework",
"url":"http://manipulator.parentnode.dk"
},
{
"name":"Detector",
"description":"Device detection"
"url":"http://detector.parentnode.dk"
}
];
var template = u.qs("li.template");
var nodes = u.template(template, data);
</script>
Returns nodeList with 2 html nodes, shown below:
<li>
<h3>Manipulator</h3>
<p>JavaScript framework</p>
<a href="http://manipulator.parentnode.dk">link</a>
</li>
<li>
<h3>Detector</h3>
<p>Device detection</p>
<a href="http://detector.parentnode.dk">link</a>
</li>
With automatic appending
<ul>
<li class="template">
<h3>{name}</h3>
<p>{description}</p>
<a href="{url}">link</a>
</li>
</ul>
<script>
var data = [
{
"name":"Manipulator",
"description":"JavaScript framework",
"url":"http://manipulator.parentnode.dk"
},
{
"name":"Detector",
"description":"Device detection"
"url":"http://detector.parentnode.dk"
}
];
var list = u.qs("ul");
var template = u.qs("li.template");
var nodes = u.template(template, data, {"append":list});
</script>
Adds two new nodes to the UL, making the ul look like:
<ul>
<li class="template">
<h3>{name}</h3>
<p>{description}</p>
<a href="{url}">link</a>
</li>
<li>
<h3>Manipulator</h3>
<p>JavaScript framework</p>
<a href="http://manipulator.parentnode.dk">link</a>
</li>
<li>
<h3>Detector</h3>
<p>Device detection</p>
<a href="http://detector.parentnode.dk">link</a>
</li>
</ul>
JSON conversion
var template = {
"name":{res1},
"description":{res2},
"url":{res3}
};
var data = [
{
"res1":"Manipulator",
"res2":"JavaScript framework",
"res3":"http://manipulator.parentnode.dk"
"meta":{
"key":"{1231-BFED-12312-21231}",
"signature":"Xew-12345"
},
},
{
"res1":"Detector",
"res2":"Device detection"
"res3":"http://detector.parentnode.dk"
"meta":{
"key":"{1231-BFED-12312-21231}",
"signature":"Xew-12345"
},
}
];
var new_json = u.template(template, data);
Returns lean JSON object with custom keys:
[
{
"name":"Manipulator",
"description":"JavaScript framework",
"url":"http://manipulator.parentnode.dk"
},
{
"name":"Detector",
"description":"Device detection"
"url":"http://detector.parentnode.dk"
}
];
Dependencies
JavaScript
- switch ... case
- document.createElement
- Node.cloneNode
- Node.appendChild
- decodeURIComponent
- String.replace
- String.toLowerCase
- Array.push
Manipulator
- None
Files
Main file
- u-fontsready.js
Segment support files
- u-timer.js
Segment dependencies
- desktop_edge
- u-fontsready.js
- desktop_ie11
- u-fontsready.js
- desktop
- u-fontsready.js
- desktop_ie10
- u-fontsready.js
- desktop_ie9
- u-fontsready.js
- desktop_light
- u-fontsready.js
- tablet
- u-fontsready.js
- tablet_light
- u-fontsready.js
- smartphone
- u-fontsready.js
- mobile
- not tested
- mobile_light
- not supported
- tv
- u-fontsready.js
- seo
- not supported