Comment embeds: Add a "read more" link for long comments

Truncate long comments using CSS and add a "read more" link to
expand the embedded comment in place.

r2/r2/lib/embeds.py

@@ -90,6 +90,7 @@ def set_up_embed(embed_key, sr, thing, showedits):
             "edited": edited_after(thing, iso_timestamp, showedits),
             "deleted": thing.deleted or author._deleted,
         },
+        "comment_max_height": 200,
     }
 
     c.render_style = "iframe"

r2/r2/public/static/css/reddit-embed.less

@@ -127,3 +127,30 @@ p {
     padding: 48px 18px;
     text-align: center;
 }
+
+.reddit-embed-comment-more {
+    display: none;
+}
+
+.reddit-embed-comment-fade {
+    .reddit-embed-comment-body {
+        position: relative;
+        overflow: hidden;
+        margin-bottom: 8px;
+
+        &:before {
+            content:'';
+            position: absolute;
+            left: 0;
+            bottom: 0;
+            width: 100%;
+            height: 40px;
+
+            .linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
+        }
+    }
+
+    .reddit-embed-comment-more {
+        display: inline;
+    }
+}

r2/r2/public/static/js/embed/embed.js

@@ -19,6 +19,33 @@
     }
   }
 
+  function clipComments() {
+    var height = config.comment_max_height;
+    var flex = 30;
+
+    if (!height) {
+      return;
+    }
+
+    function expandComment(e) {
+      var el = this;
+
+      el.previousSibling.style.maxHeight = '';
+      el.parentNode.className =
+        el.parentNode.className.replace(' reddit-embed-comment-fade', '');
+    }
+
+    var blockquotes = document.getElementsByTagName('blockquote');
+
+    for (var i = 0, l = blockquotes.length; i < l; i++) {
+      if (blockquotes[i].clientHeight > height + flex) {
+        blockquotes[i].style.maxHeight = height + 'px';
+        blockquotes[i].parentNode.className += ' reddit-embed-comment-fade';
+        blockquotes[i].nextSibling.addEventListener('click', expandComment, false);
+      }
+    }
+  }
+
   function createPayloadFactory(location) {
     return function payloadFactory(type, action, payload) {
       var now = new Date();
@@ -57,6 +84,8 @@
     var location = e.detail.location;
     var createPayload = createPayloadFactory(location);
 
+    clipComments();
+
     if (options.track === false) {
       return;
     }
@@ -86,7 +115,7 @@
 
       if (el.href.indexOf(config.event_clicktracker_url) === -1) {
         // Use a DOM object for easier query manipulation
-        var tmpLink = document.createElement('a')
+        var tmpLink = document.createElement('a');
         tmpLink.href = config.event_clicktracker_url;
         tmpLink.search = '?' + App.utils.serialize(redirectParams);
 
@@ -101,13 +130,24 @@
       return newTab;
     }
 
+    function trackAction(e) {
+      var el = this;
+      var action = el.getAttribute('data-track-action');
+
+      tracker.send(createPayload(type, action), {anonymous: true});
+
+      return false;
+    }
+
     var trackLinks = document.getElementsByTagName('a');
 
     for (var i = 0, l = trackLinks.length; i < l; i++) {
       var link = trackLinks[i];
 
       if (link.getAttribute('data-redirect-type')) {
         trackLinks[i].addEventListener('click', trackLink, false);
+      } else if (link.getAttribute('data-track-action')) {
+        trackLinks[i].addEventListener('click', trackAction, false);
       }
     }
 

r2/r2/templates/comment.iframe

@@ -106,6 +106,10 @@
         <blockquote class="reddit-embed-comment-body">
           ${unsafe(safemarkdown(thing.body, nofollow=thing.nofollow))}
         </blockquote>
+        <a class="reddit-embed-comment-more" href="javascript:;" target="_self"
+           data-track-action="read_more">
+          ${_("Read more")}
+        </a>
       %endif
     %endif
   </article>