Automatically format interpolated numbers, fixes CNVS-34757

On the front-end, automatically localize numbers that are part of a
localized string even if the developer has forgotten to do so
explicitly. We already did this for the %{count} placeholder, now
do it for any interpolated number. Any explicitly localized numbers
will be unaffected.

This makes localizing numbers in handlebars-land a lot easier, e.g.
just do: {{#t}}User count: {{num}}{{/t}}

Test plan:
* Confirm localization works as per usual
* Confirm this new behavior works in places where we don't explicitly
  localize the number, e.g. set a group's max membership to 1000, and
  confirm this string has "1,000" in the UI:
    "%{member_count} members out of maximum of %{max_membership}"

Change-Id: I388407fbccb04a26e7da7e3ec82b68ce9f5985f9
Reviewed-on: https://gerrit.instructure.com/101076
Reviewed-by: Michael Brewer-Davis <mbd@instructure.com>
Tested-by: Jenkins
QA-Review: Cemal Aktas <caktas@instructure.com>
Product-Review: Jon Jensen <jon@instructure.com>

Author: jenseng

public/javascripts/i18nObj.js

@@ -7,6 +7,28 @@ define([
   'vendor/date' /* Date.parse, Date.UTC */
 ], function(I18n, $, _, htmlEscape, i18nLolcalize) {
 
+/*
+ * Overridden interpolator that localizes any interpolated numbers.
+ * Defaults to localizeNumber behavior (precision 9, but strips
+ * insignificant digits). If you want a different format, do it
+ * before you interpolate.
+ */
+var interpolate = I18n.interpolate;
+I18n.interpolate = function(message, origOptions) {
+  var options = $.extend(true, {}, origOptions);
+  var matches = message.match(this.PLACEHOLDER) || [];
+
+  var placeholder, name;
+
+  for (var i = 0; placeholder = matches[i]; i++) {
+    name = placeholder.replace(this.PLACEHOLDER, '$1');
+    if (typeof options[name] === 'number') {
+      options[name] = this.localizeNumber(options[name]);
+    }
+  }
+  return interpolate.call(this, message, options);
+};
+
 I18n.locale = document.documentElement.getAttribute('lang');
 
 I18n.lookup = function(scope, options) {
@@ -211,6 +233,7 @@ I18n.strftime = function(date, format) {
   return f;
 };
 
+// like the original, except it formats count
 I18n.pluralize = function(count, scope, options) {
   var translation;
 
@@ -229,8 +252,8 @@ I18n.pluralize = function(count, scope, options) {
   switch(Math.abs(count)) {
     case 0:
       message = this.isValidNode(translation, "zero") ? translation.zero :
-          this.isValidNode(translation, "none") ? translation.none :
-              this.isValidNode(translation, "other") ? translation.other :
+              this.isValidNode(translation, "none") ? translation.none :
+                this.isValidNode(translation, "other") ? translation.other :
                   this.missingTranslation(scope, "zero");
       break;
     case 1:

spec/coffeescripts/i18nSpec.coffee

@@ -10,6 +10,7 @@ define [
 
   scope = I18n.scoped('foo')
   t = (args...) -> scope.t(args...)
+  interpolate = (args...) -> I18n.interpolate(args...)
 
   QUnit.module "I18n",
     setup: ->
@@ -77,6 +78,17 @@ define [
     equal t('bar', 'you need to *log in*', {wrapper: '<a href="%{url}">$1</a>', url: 'http://foo.bar'}),
       'you need to <a href="http://foo.bar">log in</a>'
 
+  test "interpolate: should format numbers", ->
+    equal interpolate("user count: %{foo}", {foo: 1500}), "user count: 1,500"
+
+  test "interpolate: should not format numbery strings", ->
+    equal interpolate("user count: %{foo}", {foo: "1500"}), "user count: 1500"
+
+  test "interpolate: should not mutate the options", ->
+    options = {foo: 1500}
+    interpolate("user count: %{foo}", options)
+    equal options.foo, 1500
+
   test "pluralize: should format the number", ->
     equal t({one: "1 thing", other: "%{count} things"}, {count: 1500}), '1,500 things'