- Fix fit_string_to_size() renders browser and ui unresponsive (#1488207): ...

alecpl

2011-11-27 79db33098381dd843cd8b9a1932688d3bafd5cc4

 skins/default/functions.js

@@ -570,7 +570,6 @@
      rcmail.addEventListener('responseaftergetunread', rcube_render_mailboxlist);
      rcmail.addEventListener('responseaftercheck-recent', rcube_render_mailboxlist);
      rcmail.addEventListener('aftercollapse-folder', rcube_render_mailboxlist);
      rcube_render_mailboxlist();
    }

    if (rcmail.env.action == 'compose')
@@ -592,12 +591,16 @@
// Abbreviate mailbox names to fit width of the container
function rcube_render_mailboxlist()
{
  if (bw.ie6)  // doesn't work well on IE6
  var list = $('#mailboxlist > li a, #mailboxlist ul:visible > li a');

  // it's too slow with really big number of folders, especially on IE
  if (list.length > 500 * (bw.ie ? 0.2 : 1))
    return;

  $('#mailboxlist > li a, #mailboxlist ul:visible > li a').each(function(){
    var elem = $(this);
    var text = elem.data('text');
  list.each(function(){
    var elem = $(this),
      text = elem.data('text');

    if (!text) {
      text = elem.text().replace(/\s+\(.+$/, '');
      elem.data('text', text);
@@ -615,34 +618,45 @@
// inspired by https://gist.github.com/24261/7fdb113f1e26111bd78c0c6fe515f6c0bf418af5
function fit_string_to_size(str, elem, len)
{
    var result = str;
    var ellip = '...';
    var span = $('<b>').css({ visibility:'hidden', padding:'0px' }).appendTo(elem).get(0);
  var w, span, result = str, ellip = '...';

    // on first run, check if string fits into the length already.
    span.innerHTML = result;
    if (span.offsetWidth > len) {
        var cut = Math.max(1, Math.floor(str.length * ((span.offsetWidth - len) / span.offsetWidth) / 2)),
          mid = Math.floor(str.length / 2);
        var offLeft = mid, offRight = mid;
        while (true) {
            offLeft = mid - cut;
            offRight = mid + cut;
            span.innerHTML = str.substring(0,offLeft) + ellip + str.substring(offRight);
  if (!rcmail.env.tmp_span) {
    // it should be appended to elem to use the same css style
    // but for performance reasons we'll append it to body (once)
    span = $('<b>').css({visibility: 'hidden', padding: '0px'})
      .appendTo($('body', document)).get(0);
    rcmail.env.tmp_span = span;
  }
  else {
    span = rcmail.env.tmp_span;
  }
  span.innerHTML = result;

            // break loop if string fits size
            if (span.offsetWidth <= len || offLeft < 3)
              break;
  // on first run, check if string fits into the length already.
  w = span.offsetWidth;
  if (w > len) {
    var cut = Math.max(1, Math.floor(str.length * ((w - len) / w) / 2)),
      mid = Math.floor(str.length / 2),
      offLeft = mid,
      offRight = mid;

            cut++;
        }
    while (true) {
      offLeft = mid - cut;
      offRight = mid + cut;
      span.innerHTML = str.substring(0,offLeft) + ellip + str.substring(offRight);

        // build resulting string
        result = str.substring(0,offLeft) + ellip + str.substring(offRight);
      // break loop if string fits size
      if (offLeft < 3 || span.offsetWidth)
        break;

      cut++;
    }
    
    span.parentNode.removeChild(span);
    return result;

    // build resulting string
    result = str.substring(0,offLeft) + ellip + str.substring(offRight);
  }

  return result;
}

// Optional parameters used by TinyMCE