truncate long opengraph description to 250 chars in mobile and stream view

app/assets/javascripts/app/helpers/open_graph.js

@@ -3,10 +3,10 @@
 (function(){
   app.helpers.openGraph = {
     html : function (open_graph_cache) {
-      if (!open_graph_cache) { return "" }
-      return '<img src="' + open_graph_cache.image + '" />'
-    }
-  }
+      if (!open_graph_cache) { return ""; }
+      return '<img src="' + open_graph_cache.image + '" />';
+    },
+  };
 })();
 // @license-end
 

app/assets/javascripts/app/helpers/truncate.js

@@ -0,0 +1,10 @@
+(function() {
+  app.helpers.truncate = function(passedString, length) {
+    if (passedString.length > length) {
+      var lastBlank = passedString.lastIndexOf(' ', length);
+      var trimstring = passedString.substring(0, Math.min(length, lastBlank));
+      return new Handlebars.SafeString(trimstring + " ...");
+    }
+    return new Handlebars.SafeString(passedString);
+  };
+})();

app/assets/javascripts/app/views/content_view.js

@@ -116,7 +116,25 @@ app.views.OEmbed = app.views.Base.extend({
 });
 
 app.views.OpenGraph = app.views.Base.extend({
-  templateName : "opengraph"
+  templateName : "opengraph",
+
+  initialize: function() {
+    this.truncateDescription();
+  },
+
+  truncateDescription: function() {
+    // truncate opengraph description to 250 for stream view
+    if(this.model.has('open_graph_cache')) {
+      var ogdesc = this.model.get('open_graph_cache');
+      ogdesc.description = app.helpers.truncate(ogdesc.description, 250);
+    }
+  }
+});
+
+app.views.SPVOpenGraph = app.views.OpenGraph.extend({
+  truncateDescription: function () {
+    // override with nothing
+  }
 });
 // @license-end
 

app/assets/javascripts/app/views/single-post-viewer/single_post_content_view.js

@@ -16,7 +16,7 @@ app.views.SinglePostContent = app.views.Base.extend({
   initialize : function() {
     this.singlePostActionsView = new app.views.SinglePostActions({model: this.model});
     this.oEmbedView = new app.views.OEmbed({model : this.model});
-    this.openGraphView = new app.views.OpenGraph({model : this.model});
+    this.openGraphView = new app.views.SPVOpenGraph({model : this.model});
     this.postContentView = new app.views.ExpandedStatusMessage({model: this.model});
     this.pollView = new app.views.Poll({ model: this.model });
   },

app/helpers/open_graph_helper.rb

@@ -45,7 +45,7 @@ module OpenGraphHelper
     "  <div>" +
     "    <img src=\"#{cache.image}\" />" +
     "    <strong>#{cache.title}</strong>" +
-    "    <p>#{cache.description}</p>" +
+    "    <p>#{truncate(cache.description, length: 250, separator: ' ')}</p>" +
     "  </div>" +
     "</a>"
   end

spec/javascripts/app/views/stream_post_spec.js

@@ -42,6 +42,14 @@ describe("app.views.StreamPost", function(){
       "ob_type": "article"
     };
 
+    var open_graph_cache_extralong = {
+      "url": "http://example.com/articles/123",
+      "title": "Example title",
+      "description": Array(62).join("Test description"), // 992 chars
+      "image": "http://example.com/thumb.jpg",
+      "ob_type": "article"
+    };
+
     beforeEach(function(){
       loginAs({name: "alice", avatar : {small : "http://avatar.com/photo.jpg"}});
 
@@ -114,6 +122,12 @@ describe("app.views.StreamPost", function(){
         var view = new app.views.StreamPost({model : this.statusMessage}).render();
         expect(view.$el.html()).not.toContain(open_graph_cache.title)
       })
+      it("truncates long opengraph descriptions in stream view to be 250 chars or less", function() {
+        this.statusMessage.set({"open_graph_cache" : open_graph_cache_extralong});
+
+        var view = new app.views.StreamPost({model : this.statusMessage}).render();
+        expect(view.$el.find('.og-description').html().length).toBeLessThan(251);
+      });
     })
 
     context("user not signed in", function(){