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
append
Node to append results to

Returns

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" } ];

Uses

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