diff --git a/media/js/zamboni/discovery_pane.js b/media/js/zamboni/discovery_pane.js index 58ae9c3ab61..1ec76390988 100644 --- 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 index 60b7ce2ba38..1f3dcc7a2aa 100644 --- 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 index 99ab6a1b526..3a258ef7b61 100644 --- 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 || "…", + 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 || "…", - 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);