i18n.js: apply wrappers prior to interpolation

makes for happier handlebars templates

Change-Id: I0f2e9dae3f61700542c253fd6f9e0b4d652397da
Reviewed-on: https://gerrit.instructure.com/6079
Tested-by: Hudson <hudson@instructure.com>
Reviewed-by: Ryan Shaw <ryan@instructure.com>

Author: jenseng

public/javascripts/i18n.js

@@ -87,10 +87,15 @@ I18n.prepareOptions = function() {
 };
 
 I18n.interpolate = function(message, options) {
+  var placeholder, value, name, matches, needsEscaping = false;
+
   options = this.prepareOptions(options);
-  var matches = message.match(this.PLACEHOLDER) || [];
+  if (options.wrapper) {
+    needsEscaping = true;
+    message = this.applyWrappers(message, options.wrapper);
+  }
 
-  var placeholder, value, name, needsEscaping;
+  matches = message.match(this.PLACEHOLDER) || [];
 
   for (var i = 0; placeholder = matches[i]; i++) {
     name = placeholder.replace(this.PLACEHOLDER, "$1");
@@ -118,9 +123,6 @@ I18n.interpolate = function(message, options) {
     message = message.replace(regex, value);
   }
 
-  if (options.wrapper) {
-    message = this.applyWrappers(needsEscaping ? $.raw(message) : message, options.wrapper)
-  }
   return message;
 };
 

spec/lib/handlebars_spec.rb

@@ -30,8 +30,8 @@
     end
 
     it "should extract wrappers" do
-      Handlebars.prepare_i18n('{{#t "test"}}<b>{{person}}</b> is <b>so</b> <b><i>cool</i></b>{{/t}}', 'test').
-        should eql('{{{t "test" "*%{person}* is *so* **cool**" scope="test" w0="<b>$1</b>" w1="<b><i>$1</i></b>"}}}')
+      Handlebars.prepare_i18n('{{#t "test"}}<b>{{person}}</b> is <b>so</b> <b title="{{definition}}"><i>cool</i></b>{{/t}}', 'test').
+        should eql('{{{t "test" "*%{person}* is *so* **cool**" scope="test" w0="<b>$1</b>" w1="<b title=\\"%{definition}\\"><i>$1</i></b>"}}}')
     end
 
     it "should not allow nested helper calls" do

spec/selenium/handlebars_spec.rb

@@ -18,11 +18,11 @@
         <li>{{#t "protip" type=../type}}Important {{type}} tip:{{/t}} {{this}}</li>
         {{/each}}
       </ol>
-      {{#t "bye"}}welp, see you l8r!{{/t}}
+      {{#t "bye"}}welp, see you l8r! dont forget 2 <a href="{{url}}">like us</a> on facebook lol{{/t}}
     HTML
     driver.execute_script Handlebars.compile_template(template, 'test')
 
-    result = driver.execute_script("return Template('test', {title: 'greetings', name: 'katie', type: 'yoga', items: ['dont forget to stretch!!!']})")
+    result = driver.execute_script("return Template('test', {title: 'greetings', name: 'katie', type: 'yoga', items: ['dont forget to stretch!!!'], url: 'http://foo.bar'})")
     result.should eql(<<-RESULT)
       <h1>greetings</h1>
       <p>ohai my name is katie im your <b>yoga</b> instructure!! ;) heres some tips to get you started:</p>
@@ -31,7 +31,7 @@
         <li>Important yoga tip: dont forget to stretch!!!</li>
         
       </ol>
-      welp, see you l8r!
+      welp, see you l8r! dont forget 2 <a href="http://foo.bar">like us</a> on facebook lol
     RESULT
   end
 

spec/selenium/i18n_js_spec.rb

@@ -46,6 +46,15 @@
         return I18n.scoped('foo').translate('bar', '*1 + 1* == *2*', {wrapper: '<i>$1</i>'})
       JS
     end
+
+    it "should interpolate placeholders in wrappers" do
+      # this functionality is primarily useful in handlebars templates where
+      # wrappers are auto-generated ... in normal js you'd probably just
+      # manually concatenate it into your wrapper
+      driver.execute_script(<<-JS).should == 'you need to <a href="http://foo.bar">log in</a>'
+        return I18n.scoped('foo').translate('bar', 'you need to *log in*', {wrapper: '<a href="%{url}">$1</a>', url: 'http://foo.bar'})
+      JS
+    end
   end
 
   context "strftime" do