Move folder name truncation to client (#1485412)

3 files changed, 69 insertions, 2 deletions

diff --git a/skins/default/functions.js b/skins/default/functions.js
index e48203eea..c9d63e9ed 100644
--- a/skins/default/functions.js
+++ b/skins/default/functions.js
@@ -497,6 +497,14 @@ function rcube_init_mail_ui()
     rcmail.addEventListener('aftertoggle-editor', 'resize_compose_body_ev', rcmail_ui);
     rcmail.gui_object('message_dragmenu', 'dragmessagemenu');
 
+    if (rcmail.gui_objects.mailboxlist) {
+      rcmail.addEventListener('responseaftermark', rcube_render_mailboxlist);
+      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')
       rcmail_ui.init_compose_form();
   }
@@ -513,3 +521,58 @@ function iframe_events()
   rcube_event.add_listener({ element: doc, object:rcmail_ui, method:'body_mouseup', event:'mouseup' });
 }
 
+// Abbreviate mailbox names to fit width of the container
+function rcube_render_mailboxlist()
+{
+  if (bw.ie6)  // doesn't work well on IE6
+    return;
+
+  $('#mailboxlist > li a, #mailboxlist ul:visible > li a').each(function(){
+    var elem = $(this);
+    var text = elem.data('text');
+    if (!text) {
+      text = elem.text().replace(/\s+\(.+$/, '');
+      elem.data('text', text);
+    }
+    if (text.length < 6)
+      return;
+
+    var abbrev = fit_string_to_size(text, elem, elem.width() - elem.children('span.unreadcount').width());
+    if (abbrev != text)
+      elem.attr('title', text);
+    elem.contents().filter(function(){ return (this.nodeType == 3); }).get(0).data = abbrev;
+  });
+}
+
+// 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);
+
+    // 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);
+
+            // break loop if string fits size
+            if (span.offsetWidth <= len || offLeft < 3)
+              break;
+
+            cut++;
+        }
+
+        // build resulting string
+        result = str.substring(0,offLeft) + ellip + str.substring(offRight);
+    }
+    
+    span.parentNode.removeChild(span);
+    return result;
+}
diff --git a/skins/default/splitter.js b/skins/default/splitter.js
index e11f9fea5..59ebb5151 100644
--- a/skins/default/splitter.js
+++ b/skins/default/splitter.js
@@ -15,6 +15,7 @@ function rcube_splitter(attrib)
   this.pos = attrib.start ? attrib.start * 1 : 0;
   this.relative = attrib.relative ? true : false;
   this.drag_active = false;
+  this.callback = attrib.callback;
 
   this.init = function()
   {
@@ -168,6 +169,9 @@ function rcube_splitter(attrib)
 
     this.set_cookie();
 
+    if (typeof this.callback == 'function')
+      this.callback(this);
+
     return bw.safari ? true : rcube_event.cancel(e);
   };
 
diff --git a/skins/default/templates/mail.html b/skins/default/templates/mail.html
index 06fdb3354..d3909624e 100644
--- a/skins/default/templates/mail.html
+++ b/skins/default/templates/mail.html
@@ -28,7 +28,7 @@
 <div id="mailboxlist-container">
 <div id="mailboxlist-title" class="boxtitle"><roundcube:label name="mailboxlist" /></div>
 <div class="boxlistcontent">
-<roundcube:object name="mailboxlist" id="mailboxlist" maxlength="25" />
+<roundcube:object name="mailboxlist" id="mailboxlist" />
 </div>
 <div class="boxfooter">
   <roundcube:button name="mailboxmenulink" id="mailboxmenulink" type="link" title="folderactions" class="button groupactions" onclick="rcmail_ui.show_popup('mailboxmenu');return false" content=" " />
@@ -43,7 +43,7 @@
 </div>
 
 <script type="text/javascript">
-  var mailviewsplitv = new rcube_splitter({id:'mailviewsplitterv', p1: 'mailleftcontainer', p2: 'mailrightcontainer', orientation: 'v', relative: true, start: 165});
+  var mailviewsplitv = new rcube_splitter({id:'mailviewsplitterv', p1: 'mailleftcontainer', p2: 'mailrightcontainer', orientation: 'v', relative: true, start: 165, callback: rcube_render_mailboxlist });
   rcmail.add_onload('mailviewsplitv.init()');
 </script>