Examples: Include compact number formatting

Ref #759

examples/amd-bower/index.html

@@ -23,6 +23,7 @@ <h2>Demo output</h2>
         <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>

examples/amd-bower/main.js

@@ -107,6 +107,11 @@ require([
 	// Use Globalize to format numbers.
 	number = en.numberFormatter();
 	document.getElementById( "number" ).textContent = number( 12345.6789 );
+	document.getElementById( "number-compact" ).textContent = en.formatNumber( 12345.6789, {
+		compact: "short",
+		minimumSignificantDigits: 1,
+		maximumSignificantDigits: 3
+	});
 
 	// Use Globalize to format currencies.
 	document.getElementById( "currency" ).textContent = en.formatCurrency( 69900, "USD" );

examples/amd-bower/package.json

@@ -7,5 +7,8 @@
     "installed on Globalize's root.",
     "",
     "It's analogous to `chroot .` for npm. [:P]"
-  ]
+  ],
+  "dependencies": {
+    "cldr-data-downloader": "^0.3.4"
+  }
 }

examples/app-npm-webpack/app/index.js

@@ -5,6 +5,13 @@ var startTime = new Date();
 var numberFormatter = Globalize.numberFormatter({ maximumFractionDigits: 2 });
 document.getElementById( "number" ).textContent = numberFormatter( 12345.6789 );
 
+var numberCompactFormatter = Globalize.numberFormatter({
+	compact: "short",
+	minimumSignificantDigits: 1,
+	maximumSignificantDigits: 3
+});
+document.getElementById( "number-compact" ).textContent = numberCompactFormatter( 12345.6789 );
+
 var currencyFormatter = Globalize.currencyFormatter( "USD" );
 document.getElementById( "currency" ).textContent = currencyFormatter( 69900 );
 
@@ -41,6 +48,7 @@ document.getElementById( "unit" ).textContent = unitFormatter( 60 );
 // Messages.
 document.getElementById( "intro-1" ).textContent = Globalize.formatMessage( "intro-1" );
 document.getElementById( "number-label" ).textContent = Globalize.formatMessage( "number-label" );
+document.getElementById( "number-compact-label" ).textContent = Globalize.formatMessage( "number-compact-label" );
 document.getElementById( "currency-label" ).textContent = Globalize.formatMessage( "currency-label" );
 document.getElementById( "date-label" ).textContent = Globalize.formatMessage( "date-label" );
 document.getElementById( "date-time-zone-label" ).textContent = Globalize.formatMessage( "date-time-zone-label" );

examples/app-npm-webpack/index-template.html

@@ -25,6 +25,10 @@ <h2>Requirements</h2>
 				<td><span id="number-label">Standalone Number</span></td>
 				<td>"<span id="number"></span>"</td>
 			</tr>
+			<tr>
+				<td><span id="number-compact-label">Standalone Number (compact form)</span></td>
+				<td>"<span id="number-compact"></span>"</td>
+			</tr>
 			<tr>
 				<td><span id="currency-label">Standalone Currency</span></td>
 				<td>"<span id="currency"></span>"</td>

examples/app-npm-webpack/messages/ar.json

@@ -2,6 +2,7 @@
 	"ar": {
 		"intro-1": "‫استخدم Globalize لتدويل تطبيقك.‬",
 		"number-label": "رقم",
+		"number-compact-label": "الرقم (شكل مدمج)",
 		"currency-label": "عملة",
 		"date-label": "تاريخ",
 		"date-time-zone-label": "التاريخ (في منطقة زمنية محددة ل إيانا، على سبيل المثال، America/Sao_Paulo)",

examples/app-npm-webpack/messages/de.json

@@ -2,6 +2,7 @@
 	"de": {
 		"intro-1": "Verwenden Sie Globalize um Ihre Anwendung zu internationalisieren.",
 		"number-label": "Zahl",
+		"number-compact-label": "Zahl (kompakte Form)",
 		"currency-label": "Währung",
 		"date-label": "Datum",
 		"date-time-zone-label": "Datum (in einer bestimmten IANA-Zeitzone, z. B. America/Sao_Paulo)",

examples/app-npm-webpack/messages/en.json

@@ -2,6 +2,7 @@
 	"en": {
 		"intro-1": "Use Globalize to internationalize your application.",
 		"number-label": "Number",
+		"number-compact-label": "Number (compact form)",
 		"currency-label": "Currency",
 		"date-label": "Date",
 		"date-time-zone-label": "Date (in a specific IANA time zone, e.g., America/Sao_Paulo)",

examples/app-npm-webpack/messages/es.json

@@ -2,6 +2,7 @@
 	"es": {
 		"intro-1": "Usa Globalize para internacionalizar tu aplicación.",
 		"number-label": "Número",
+		"number-compact-label": "Número (forma compacta)",
 		"currency-label": "Moneda",
 		"date-label": "Fecha",
 		"date-time-zone-label": "Fecha (en una zona horaria IANA específica, por ejemplo, America/Sao_Paulo)",

examples/app-npm-webpack/messages/pt.json

@@ -2,6 +2,7 @@
 	"pt": {
 		"intro-1": "Use o Globalize para internacionalizar sua aplicação.",
 		"number-label": "Número",
+		"number-compact-label": "Número (forma compacta)",
 		"currency-label": "Moeda",
 		"date-label": "Data",
 		"date-time-zone-label": "Data (em um fuso horário IANA específico, por exemplo, America/Sao_Paulo)",

examples/app-npm-webpack/messages/ru.json

@@ -2,6 +2,7 @@
 	"ru": {
 		"intro-1": "Используйте Globalize для интернационализиции вашего приложения.",
 		"number-label": "Число",
+		"number-compact-label": "Число (компактная форма)",
 		"currency-label": "Валюта",
 		"date-label": "Дата",
 		"date-time-zone-label": "Дата (в определенном часовом поясе IANA, например, America/Sao_Paulo)",

examples/app-npm-webpack/messages/zh.json

@@ -2,6 +2,7 @@
 	"zh": {
 		"intro-1": "使用Globalize的国际化应用程序",
 		"number-label": "号码",
+		"number-compact-label": "编号（紧凑形式）",
 		"currency-label": "币",
 		"date-label": "迄今",
 		"date-time-zone-label": "日期（在特定的IANA时区，例如America / Sao_Paulo）",

examples/globalize-compiler/app.js

@@ -26,6 +26,11 @@ document.getElementById( "dateToParts" ).innerHTML = Globalize.formatDateToParts
 // Use Globalize to format numbers.
 number = Globalize.numberFormatter();
 document.getElementById( "number" ).textContent = number( 12345.6789 );
+document.getElementById( "number-compact" ).textContent = Globalize.formatNumber( 12345.6789, {
+	compact: "short",
+	minimumSignificantDigits: 1,
+	maximumSignificantDigits: 3
+});
 
 // Use Globalize to format currencies.
 document.getElementById( "currency" ).textContent = Globalize.formatCurrency( 69900, "USD" );

examples/globalize-compiler/development.html

@@ -20,6 +20,7 @@ <h2>Demo output</h2>
         <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>

examples/globalize-compiler/production.html

@@ -21,6 +21,7 @@ <h2>Demo output</h2>
         <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>
@@ -65,6 +66,9 @@ <h2>Demo output</h2>
     <script src="compiled-formatters.js"></script>
 
     <!-- Our App -->
+    <script>
+    Globalize.locale("en");
+    </script>
     <script src="app.js"></script>
 
 </body>

examples/node-npm/main.js

@@ -38,6 +38,13 @@ console.log( Globalize.formatDateToParts( new Date(), { datetime: "medium" } ) )
 // Use Globalize to format numbers.
 console.log( Globalize.formatNumber( 12345.6789 ) );
 
+// Use Globalize to format numbers (compact form).
+console.log( Globalize.formatNumber( 12345.6789, {
+	compact: "short",
+	minimumSignificantDigits: 1,
+	maximumSignificantDigits: 3
+}));
+
 // Use Globalize to format currencies.
 console.log( Globalize.formatCurrency( 69900, "USD" ) );
 

examples/plain-javascript/index.html

@@ -10,7 +10,7 @@ <h1>Globalize Hello World (plain javascript)</h1>
     <div id="requirements">
         <h2>Requirements</h2>
         <ul>
-            <li>You need to download the `cldrjs` dependency yourself. Read README.md for instructions.
+            <li>You need to download `cldrjs` and `globalize` dependencies yourself. Read README.md for instructions.
             </li>
         </ul>
     </div>
@@ -21,6 +21,7 @@ <h2>Demo output</h2>
         <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>
@@ -199,7 +200,35 @@ <h2>Demo output</h2>
               "timeSeparator": ":"
             },
             "decimalFormats-numberSystem-latn": {
-              "standard": "#,##0.###"
+              "standard": "#,##0.###",
+              "short": {
+                "decimalFormat": {
+                  "1000-count-one": "0K",
+                  "1000-count-other": "0K",
+                  "10000-count-one": "00K",
+                  "10000-count-other": "00K",
+                  "100000-count-one": "000K",
+                  "100000-count-other": "000K",
+                  "1000000-count-one": "0M",
+                  "1000000-count-other": "0M",
+                  "10000000-count-one": "00M",
+                  "10000000-count-other": "00M",
+                  "100000000-count-one": "000M",
+                  "100000000-count-other": "000M",
+                  "1000000000-count-one": "0B",
+                  "1000000000-count-other": "0B",
+                  "10000000000-count-one": "00B",
+                  "10000000000-count-other": "00B",
+                  "100000000000-count-one": "000B",
+                  "100000000000-count-other": "000B",
+                  "1000000000000-count-one": "0T",
+                  "1000000000000-count-other": "0T",
+                  "10000000000000-count-one": "00T",
+                  "10000000000000-count-other": "00T",
+                  "100000000000000-count-one": "000T",
+                  "100000000000000-count-other": "000T"
+                }
+              }
             },
             "currencyFormats-numberSystem-latn": {
               "currencySpacing": {
@@ -379,6 +408,11 @@ <h2>Demo output</h2>
     // Use Globalize to format numbers.
     number = en.numberFormatter();
     document.getElementById( "number" ).textContent = number( 12345.6789 );
+    document.getElementById( "number-compact" ).textContent = en.formatNumber( 12345.6789, {
+      compact: "short",
+      minimumSignificantDigits: 1,
+      maximumSignificantDigits: 3
+    });
 
     // Use Globalize to format currencies.
     document.getElementById( "currency" ).textContent = en.formatCurrency( 69900, "USD" );