Fixing bad looping in htruncate (and maybe forever). New truncation f…

…unction is .truncate, and takes an optional 'dir' parameter. (bug 647267)
jbalogh · Apr 1, 2011 · 0a936f9 · 0a936f9
1 parent f3339a7
commit 0a936f9
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 61 deletions.
diff --git a/media/js/zamboni/discovery_pane.js b/media/js/zamboni/discovery_pane.js
@@ -53,9 +53,9 @@ function storePaneLink() {
 
 function initTrunc() {
     // Trim the add-on title and description text to fit.
-    $(".addons h3, .rec-addons h3, p.desc").vtruncate();
+    $(".addons h3, .rec-addons h3, p.desc").truncate({dir: 'v'});
     $(window).resize(debounce(function() {
-        $(".addons h3 a, .rec-addons h3 a, p.desc").vtruncate();
+        $(".addons h3 a, .rec-addons h3 a, p.desc").truncate({dir: 'v'});
     }, 200));
 }
 

diff --git a/media/js/zamboni/mobile.js b/media/js/zamboni/mobile.js
@@ -1,10 +1,12 @@
 $(function() {
     $(window).bind("orientationchange", function(e) {
-        $("details").htruncate({textEl: ".desc"});
+        setTimeout(function() {
+            $("details").truncate({textEl: ".desc"});
+        }, 100);
     });
-    $("details").htruncate({textEl: ".desc"});
+    $("details").truncate({textEl: ".desc"});
 
-    $(".vtruncate").vtruncate();
+    $(".vtruncate").truncate({dir: 'v'});
 
     $('form.go').change(function() { this.submit(); })
         .find('button').hide();

diff --git a/media/js/zamboni/truncation.js b/media/js/zamboni/truncation.js
@@ -1,57 +1,12 @@
-$.fn.vtruncate = function(opts) {
+$.fn.truncate = function(opts) {
     opts = opts || {};
     var showTitle = opts.showTitle || false,
+        dir = (opts.dir && opts.dir[0]) || 'h',
+        scrollProp = dir == "h" ? "scrollWidth" : "scrollHeight",
+        offsetProp = dir == "h" ? "offsetWidth" : "offsetHeight",
         truncText = opts.truncText || "&hellip;",
+        textEl = opts.textEl || false,
         split = [" ",""], counter, success;
-    this.each(function() {
-        var $el = $(this),
-            oldtext = $el.attr("oldtext") || $el.text(),
-            txt, cutoff;
-        if ($el.attr("oldtext")) {
-            oldtext = unescape(oldtext);
-            $el.text(oldtext);
-        }
-        $el.attr("oldtext", escape(oldtext));
-        for (var i in split) {
-            delim = split[i];
-            txt = oldtext.split(delim);
-            cutoff = txt.length;
-            success = false;
-            if ((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) {
-                    success = true;
-                    $el.addClass("truncated");
-                    break;
-                } else if (wid > 1) {
-                    cutoff -= chunk;
-                } else {
-                    cutoff += chunk;
-                }
-                oc = chunk;
-                chunk = Math.ceil(chunk/2);
-            }
-            if (success) break;
-        }
-        if (showTitle) {
-            $el.attr("title", oldtext);
-        }
-    });
-    return this;
-};
-
-$.fn.htruncate = function(opts) {
-    opts = opts || {};
-    var showTitle = opts.showTitle || false,
-        truncText = opts.truncText || "&hellip;",
-        textEl = opts.textEl || false;
-        split = [" ",""];
     this.each(function() {
         var $el = $(this),
             $tel = textEl ? $(textEl, $el) : $el,
@@ -65,13 +20,19 @@ $.fn.htruncate = function(opts) {
             delim = split[i];
             txt = oldtext.split(delim);
             cutoff = txt.length;
-            var done = (this.scrollWidth - this.offsetWidth) < 2,
-                chunk = Math.ceil(txt.length/2), oc=0, wid, delim;
-            while (!done) {
+            success = false;
+            if ((this[scrollProp] - this[offsetProp]) < 2) {
+                $el.removeClass("truncated");
+                break;
+            }
+            var chunk = Math.ceil(txt.length/2), oc=0, wid, delim;
+            for (counter = 0; counter < 10; counter++) {
                 $tel.html(txt.slice(0,cutoff).join(delim)+truncText);
-                wid = (this.scrollWidth - this.offsetWidth);
-                if (wid < 2 && chunk == oc) {
-                   done = true;
+                wid = (this[scrollProp] - this[offsetProp]);
+                if (wid < 2 && chunk == oc || cutoff < 1) {
+                   success = true;
+                   $el.addClass("truncated");
+                   break;
                 } else if (wid > 1) {
                    cutoff -= chunk;
                 } else {
@@ -80,6 +41,7 @@ $.fn.htruncate = function(opts) {
                 oc = chunk;
                 chunk = Math.ceil(chunk/2);
             }
+            if (success) break;
         }
         if (showTitle && oldtext != $tel.text()) {
             $tel.attr("title", oldtext);