121 lines
5.4 KiB
HTML
121 lines
5.4 KiB
HTML
<!doctype html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<title>Basic Globalize Compiler example (development mode)</title>
|
|
</head>
|
|
<body>
|
|
<h1>Basic Globalize Compiler example (development mode)</h1>
|
|
|
|
<div id="requirements">
|
|
<h2>Requirements</h2>
|
|
<ul>
|
|
<li>Read README.md for instructions.</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div id="demo" style="display: none">
|
|
<h2>Demo output</h2>
|
|
<p>Now: <span id="date"></span></p>
|
|
<p>Now: <span id="dateToParts"></span> (note the highlighted month, the markup was added using formatDateToParts)</p>
|
|
<p>Now (in America/Sao_Paulo): <span id="zonedDate"></span></p>
|
|
<p>A number: <span id="number"></span></p>
|
|
<p>A number (compact form): <span id="number-compact"></span></p>
|
|
<p>A currency: <span id="currency"></span></p>
|
|
<p>Plural form of <span id="plural-number"></span> is <span id="plural-form"></span></p>
|
|
<p>Messages:</p>
|
|
<ul>
|
|
<li><span id="message-0"></span></li>
|
|
<li><span id="message-1"></span></li>
|
|
<li><span id="message-2"></span></li>
|
|
<li><span id="message-3"></span></li>
|
|
</ul>
|
|
<p>Something happened: <span id="relative-time"></span></p>
|
|
<p>Speed limit: <span id="unit"></span></p>
|
|
</div>
|
|
|
|
<!--
|
|
First, we load Globalize's dependencies (`cldrjs` and its supplemental
|
|
module).
|
|
-->
|
|
<script src="node_modules/globalize/node_modules/cldrjs/dist/cldr.js"></script>
|
|
<script src="node_modules/globalize/node_modules/cldrjs/dist/cldr/event.js"></script>
|
|
<script src="node_modules/globalize/node_modules/cldrjs/dist/cldr/supplemental.js"></script>
|
|
<!--
|
|
npm@3 installs flat by default differently from npm@1 and npm@2, so either
|
|
the below or the above will work. Don't do this at your application, pick
|
|
one.
|
|
-->
|
|
<script src="node_modules/cldrjs/dist/cldr.js"></script>
|
|
<script src="node_modules/cldrjs/dist/cldr/event.js"></script>
|
|
<script src="node_modules/cldrjs/dist/cldr/supplemental.js"></script>
|
|
|
|
<!--
|
|
Next, we load Globalize and its modules. Note they are already available on
|
|
this repository. If it's not, read Usage on Getting Started on the root's
|
|
README.md.
|
|
-->
|
|
<script src="node_modules/globalize/dist/globalize.js"></script>
|
|
<script src="node_modules/globalize/dist/globalize/message.js"></script>
|
|
<script src="node_modules/globalize/dist/globalize/number.js"></script>
|
|
<script src="node_modules/globalize/dist/globalize/plural.js"></script>
|
|
|
|
<!-- Load after globalize/number.js -->
|
|
<script src="node_modules/globalize/dist/globalize/date.js"></script>
|
|
<script src="node_modules/globalize/dist/globalize/currency.js"></script>
|
|
|
|
<!-- Load after globalize/number.js and globalize/plural.js-->
|
|
<script src="node_modules/globalize/dist/globalize/relative-time.js"></script>
|
|
<script src="node_modules/globalize/dist/globalize/unit.js"></script>
|
|
|
|
<!-- Load jQuery to fetch the CLDR and message JSONs -->
|
|
<script src="node_modules/jquery/dist/jquery.js"></script>
|
|
|
|
<script>
|
|
|
|
// At this point, we have Globalize loaded. But, before we can use it, we
|
|
// need to feed it on the appropriate I18n content (Unicode CLDR). In order
|
|
// to do so, we use `Globalize.load()` and pass the content. On this demo,
|
|
// we made the things a little easier for you: we've embedded static JSON
|
|
// into the demo. So, you don't need to actually fetch it elsewhere.
|
|
$.when(
|
|
$.getJSON( "node_modules/cldr-data/main/en/ca-gregorian.json" ),
|
|
$.getJSON( "node_modules/cldr-data/main/en/currencies.json" ),
|
|
$.getJSON( "node_modules/cldr-data/main/en/dateFields.json" ),
|
|
$.getJSON( "node_modules/cldr-data/main/en/numbers.json" ),
|
|
$.getJSON( "node_modules/cldr-data/main/en/timeZoneNames.json" ),
|
|
$.getJSON( "node_modules/cldr-data/main/en/units.json" ),
|
|
$.getJSON( "node_modules/cldr-data/supplemental/currencyData.json" ),
|
|
$.getJSON( "node_modules/cldr-data/supplemental/likelySubtags.json" ),
|
|
$.getJSON( "node_modules/cldr-data/supplemental/metaZones.json" ),
|
|
$.getJSON( "node_modules/cldr-data/supplemental/plurals.json" ),
|
|
$.getJSON( "node_modules/cldr-data/supplemental/timeData.json" ),
|
|
$.getJSON( "node_modules/cldr-data/supplemental/weekData.json" ),
|
|
$.getJSON( "messages.json" ),
|
|
$.getJSON( "node_modules/iana-tz-data/iana-tz-data.json" )
|
|
).then(function( enCaGregorian, enCurrencies, enDateFields, enNumbers, enTimeZoneNames, enUnits,
|
|
currencyData, likelySubtags, metaZones, plurals, timeData, weekData, messages, ianaTzData ) {
|
|
|
|
Globalize.load( enCaGregorian[ 0 ] );
|
|
Globalize.load( enCurrencies[ 0 ] );
|
|
Globalize.load( enDateFields[ 0 ] );
|
|
Globalize.load( enNumbers[ 0 ] );
|
|
Globalize.load( enTimeZoneNames[ 0 ] );
|
|
Globalize.load( enUnits[ 0 ] );
|
|
Globalize.load( currencyData[ 0 ] );
|
|
Globalize.load( likelySubtags[ 0 ] );
|
|
Globalize.load( metaZones[ 0 ] );
|
|
Globalize.load( plurals[ 0 ] );
|
|
Globalize.load( timeData[ 0 ] );
|
|
Globalize.load( weekData[ 0 ] );
|
|
Globalize.loadMessages( messages[ 0 ] );
|
|
Globalize.loadTimeZone( ianaTzData[ 0 ] );
|
|
Globalize.locale("en");
|
|
|
|
// Load and execute our App.
|
|
$.getScript( "app.js" );
|
|
})
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|