Changeset 4663 in subversion

Timestamp:

Apr 15, 2011 12:21:23 PM (2 years ago)

Author:

thomasb

Message:

Move folder name truncation to client (#1485412)

Location:

trunk/roundcubemail/skins/default

Files:

• functions.js (modified) (2 diffs)
• splitter.js (modified) (2 diffs)
• templates/mail.html (modified) (2 diffs)

trunk/roundcubemail/skins/default/functions.js

@@ -498 +498 @@
     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();
@@ -514 +522 @@
 }
 
+// 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;
+}

trunk/roundcubemail/skins/default/splitter.js

@@ -16 +16 @@
   this.relative = attrib.relative ? true : false;
   this.drag_active = false;
+  this.callback = attrib.callback;
 
   this.init = function()
@@ -169 +170 @@
     this.set_cookie();
 
+    if (typeof this.callback == 'function')
+      this.callback(this);
+
     return bw.safari ? true : rcube_event.cancel(e);
   };

trunk/roundcubemail/skins/default/templates/mail.html

@@ -29 +29 @@
 <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">
@@ -44 +44 @@
 
 <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>