Add message format support that can be used on complex localization strings

Add message about new and unread topics at the bottom of topics
move localization helper into lib

Author: SamSaffron

app/assets/javascripts/discourse/templates/topic.js.handlebars

@@ -101,7 +101,7 @@
                     </table>
                   </div>
                   <br/>
-                  <h3>{{{unbound view.browseMoreMessage}}}</h3>
+                  <h3>{{{view.browseMoreMessage}}}</h3>
                 </div>
               {{/if}}
             {{/if}}

app/assets/javascripts/discourse/views/topic_view.js

@@ -402,8 +402,8 @@ Discourse.TopicView = Discourse.View.extend(Discourse.Scrolling, {
     });
 
     this.nonUrgentPositionUpdate({
-        userActive: userActive,
-        currentPost: currentPost || this.getPost($(rows[info.bottom])).get('post_number')
+      userActive: userActive,
+      currentPost: currentPost || this.getPost($(rows[info.bottom])).get('post_number')
     });
 
     offset = window.pageYOffset || $('html').scrollTop();
@@ -440,20 +440,41 @@ Discourse.TopicView = Discourse.View.extend(Discourse.Scrolling, {
     }
   },
 
+  topicTrackingState: function(){
+    return Discourse.TopicTrackingState.current();
+  }.property(),
+
   browseMoreMessage: (function() {
     var category, opts;
 
     opts = {
       latestLink: "<a href=\"/\">" + (Em.String.i18n("topic.view_latest_topics")) + "</a>"
     };
+
     if (category = this.get('controller.content.category')) {
       opts.catLink = Discourse.Utilities.categoryLink(category);
-      return Ember.String.i18n("topic.read_more_in_category", opts);
     } else {
       opts.catLink = "<a href=\"" + Discourse.getURL("/categories") + "\">" + (Em.String.i18n("topic.browse_all_categories")) + "</a>";
+    }
+
+    var tracking = this.get('topicTrackingState');
+
+    var unreadTopics = tracking.countUnread();
+    var newTopics = tracking.countNew();
+
+    if (newTopics + unreadTopics > 0) {
+      if(category) {
+        return I18n.messageFormat("topic.read_more_in_category_MF", {"UNREAD": unreadTopics, "NEW": newTopics, catLink: opts.catLink})
+      } else {
+        return I18n.messageFormat("topic.read_more_MF", {"UNREAD": unreadTopics, "NEW": newTopics, latestLink: opts.latestLink})
+      }
+    }
+    else if (category) {
+      return Ember.String.i18n("topic.read_more_in_category", opts);
+    } else {
       return Ember.String.i18n("topic.read_more", opts);
     }
-  }).property()
+  }).property('topicTrackingState.messageCount')
 
 });
 
@@ -474,7 +495,7 @@ Discourse.TopicView.reopenClass({
         expectedOffset = title.height() - header.find('.contents').height();
 
         if (expectedOffset < 0) {
-            expectedOffset = 0;
+          expectedOffset = 0;
         }
 
         $('html, body').scrollTop(existing.offset().top - (header.outerHeight(true) + expectedOffset));

app/helpers/js_locale_helper.rb

@@ -19,6 +19,7 @@ class Application < Rails::Application
     # -- all .rb files in that directory are automatically loaded.
 
     require 'discourse'
+    require 'js_locale_helper'
 
     # mocha hates us, active_support/testing/mochaing.rb line 2 is requiring the wrong
     #  require, patched in source, on upgrade remove this

config/application.rb

@@ -505,6 +505,11 @@ en:
       toggle_information: "toggle topic details"
       read_more_in_category: "Want to read more? Browse other topics in {{catLink}} or {{latestLink}}."
       read_more: "Want to read more? {{catLink}} or {{latestLink}}."
+
+      # keys ending with _MF use message format, see /spec/components/js_local_helper_spec.rb for samples
+      read_more_in_category_MF: "There {UNREAD, plural, one {is <a href='/unread'>1 unread</a>} other {are <a href='/unread'># unread</a>}} and {NEW, plural, one {<a href='/new'>1 new</a> topic} other {<a href='/new'># new</a> topics}} remaining, or browse other topics in {catLink}"
+      read_more_MF: "There {UNREAD, plural, one {is <a href='/unread'>1 unread</a>} other {are <a href='/unread'># unread</a>}} and {NEW, plural, one {<a href='/new'>1 new</a> topic} other {<a href='/new'># new</a> topics}} remaining, or {latestLink}"
+
       browse_all_categories: Browse all categories
 
       view_latest_topics: view latest topics

config/locales/client.en.yml

@@ -0,0 +1,6 @@
+MessageFormat.locale.af = function ( n ) {
+  if ( n === 1 ) {
+    return "one";
+  }
+  return "other";
+};

lib/javascripts/locale/af.js

@@ -0,0 +1,6 @@
+MessageFormat.locale.am = function(n) {
+  if (n === 0 || n == 1) {
+    return 'one';
+  }
+  return 'other';
+};

lib/javascripts/locale/am.js

@@ -0,0 +1,18 @@
+MessageFormat.locale.ar = function(n) {
+  if (n === 0) {
+    return 'zero';
+  }
+  if (n == 1) {
+    return 'one';
+  }
+  if (n == 2) {
+    return 'two';
+  }
+  if ((n % 100) >= 3 && (n % 100) <= 10 && n == Math.floor(n)) {
+    return 'few';
+  }
+  if ((n % 100) >= 11 && (n % 100) <= 99 && n == Math.floor(n)) {
+    return 'many';
+  }
+  return 'other';
+};

lib/javascripts/locale/ar.js

@@ -0,0 +1,6 @@
+MessageFormat.locale.bg = function ( n ) {
+  if ( n === 1 ) {
+    return "one";
+  }
+  return "other";
+};

lib/javascripts/locale/bg.js

@@ -0,0 +1,6 @@
+MessageFormat.locale.bn = function ( n ) {
+  if ( n === 1 ) {
+    return "one";
+  }
+  return "other";
+};