Truncating lengthy reviews, and fixing yet another truncation bug (bu…

…g 637803)
jbalogh · Mar 12, 2011 · 05208a2 · 05208a2
1 parent eebc735
commit 05208a2
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 7 deletions.
diff --git a/apps/reviews/templates/reviews/mobile/review_list.html b/apps/reviews/templates/reviews/mobile/review_list.html
@@ -34,7 +34,8 @@ <h3>{{ review.title }}</h3>
     {% trans user=review.user.name %}
       by {{ user }}
     {% endtrans %}
-    <p>{{ review.body|nl2br }}</p>
+    <p class="vtruncate">{{ review.body|nl2br }}</p>
+    <a href="#" class="readmore">{{ _('Read More&nbsp;&raquo;') }}</a>
     {% if review.version_id and review.version_id != addon._current_version_id %}
       {# L10n: {0} is a version number (like 1.01) #}
       <aside class="old-version">{{ _('This review is for a previous version of the add-on ({0}).')|f(review.version.version) }}&nbsp;</aside>

diff --git a/media/css/zamboni/mobile.css b/media/css/zamboni/mobile.css
@@ -1307,6 +1307,11 @@ td .versions li a {
     height: 12px;
 }
 
+.review p {
+    max-height: 6.2em;
+    overflow: hidden;
+}
+
 /* rtl */
 .html-rtl .grouped_ratings .rating_bar {
     border-left: 0;
@@ -1439,6 +1444,12 @@ a.expando {
     -moz-transition: .5s height ease;
     -webkit-transition: .5s height ease;
 }
+.readmore {
+    padding: 10px 20px;
+    color: #447BC4;
+    text-align: right;
+    display: none;
+}
 
 /************************************/
 /*              FOOTER              */

diff --git a/media/js/zamboni/mobile.js b/media/js/zamboni/mobile.js
@@ -4,6 +4,8 @@ $(function() {
     });
     $("details").htruncate({textEl: ".desc"});
 
+    $(".vtruncate").vtruncate();
+
     $('form.go').change(function() { this.submit(); })
         .find('button').hide();
 
@@ -196,6 +198,24 @@ $(function() {
 
     $("#eula .negative").click(_pd(z.eula.dismiss));
     $("#eula .affirmative").click(_pd(z.eula.dismiss));
+
+    //review truncation
+    if ($(".review").length) {
+        $(".review p").each(function() {
+            var $el = $(this);
+            if ($el.hasClass("truncated")) {
+                $el.closest(".review").find(".readmore").css("display", "block");
+            }
+        });
+        $("#content").delegate(".review .readmore", "click", _pd(function(e) {
+            var $el = $(this),
+                $revBody = $el.closest(".review").find("p");
+            $el.hide();
+            $revBody.removeClass("truncated")
+                    .html(unescape($revBody.attr("oldtext")))
+                    .css("max-height", "none");
+        }));
+    }
 });
 
 $(".desktop-link").attr("href", window.location).click(function() {

diff --git a/media/js/zamboni/truncation.js b/media/js/zamboni/truncation.js
@@ -2,7 +2,7 @@ $.fn.vtruncate = function(opts) {
     opts = opts || {};
     var showTitle = opts.showTitle || false,
         truncText = opts.truncText || "&hellip;",
-        split = [" ",""], counter;
+        split = [" ",""], counter, success;
     this.each(function() {
         var $el = $(this),
             oldtext = $el.attr("oldtext") || $el.text(),
@@ -16,21 +16,28 @@ $.fn.vtruncate = function(opts) {
             delim = split[i];
             txt = oldtext.split(delim);
             cutoff = txt.length;
-            var done = (this.scrollHeight - this.offsetHeight) < 2,
-                chunk = Math.ceil(txt.length/2), oc=0, wid, delim;
+            success = false
+            if (done = (this.scrollHeight - this.offsetHeight) < 2) {
+                $el.removeClass("truncated");
+                break;
+            }
+            var chunk = Math.ceil(txt.length/2), oc=0, wid, delim;
             for (counter = 0; counter < 10; counter++) {
                 $el.html(txt.slice(0,cutoff).join(delim)+truncText);
                 wid = (this.scrollHeight - this.offsetHeight);
                 if ((wid < 2 && chunk == oc) || cutoff < 1) {
-                   break;
+                    success = true;
+                    $el.addClass("truncated");
+                    break;
                 } else if (wid > 1) {
-                   cutoff -= chunk;
+                    cutoff -= chunk;
                 } else {
-                   cutoff += chunk;
+                    cutoff += chunk;
                 }
                 oc = chunk;
                 chunk = Math.ceil(chunk/2);
             }
+            if (success) break;
         }
         if (showTitle) {
             $el.attr("title", oldtext);