Move folder/directory list auto-scrolling functionality to treelist widget (same as auto-expand) and make it work without list header/footer blocks

program/js/treelist.js

@@ -28,6 +28,9 @@ function rcube_treelist_widget(node, p)
     id_prefix: '',
     autoexpand: 1000,
     selectable: false,
+    scroll_delay: 500,
+    scroll_step: 5,
+    scroll_speed: 20,
     check_droptarget: function(node){ return !node.virtual }
   }, p || {});
 
@@ -42,6 +45,7 @@ function rcube_treelist_widget(node, p)
     autoexpand_item,
     body_scroll_top = 0,
     list_scroll_top = 0,
+    scroll_timer,
     me = this;
 
 
@@ -461,6 +465,7 @@ function rcube_treelist_widget(node, p)
 
     body_scroll_top = bw.ie ? 0 : window.pageYOffset;
     list_scroll_top = container.parent().scrollTop();
+    pos.top += list_scroll_top;
 
     drag_active = true;
     box_coords = {
@@ -476,6 +481,7 @@ function rcube_treelist_widget(node, p)
       item = li.children().first().get(0);
       if (height = item.offsetHeight) {
         pos = $(item).offset();
+        pos.top += list_scroll_top;
         item_coords[id] = {
           x1: pos.left,
           y1: pos.top,
@@ -485,6 +491,38 @@ function rcube_treelist_widget(node, p)
         };
       }
     }
+
+    // enable auto-scrolling of list container
+    if (container.height() > container.parent().height()) {
+      container.parent()
+        .mousemove(function(e) {
+          var scroll = 0,
+            mouse = rcube_event.get_mouse_pos(e);
+          mouse.y -= container.parent().offset().top;
+
+          if (mouse.y < 25 && list_scroll_top > 0) {
+            scroll = -1; // up
+          }
+          else if (mouse.y > container.parent().height() - 25) {
+            scroll = 1; // down
+          }
+
+          if (drag_active && scroll != 0) {
+            if (!scroll_timer)
+              scroll_timer = window.setTimeout(function(){ drag_scroll(scroll); }, p.scroll_delay);
+          }
+          else if (scroll_timer) {
+            window.clearTimeout(scroll_timer);
+            scroll_timer = null;
+          }
+        })
+        .mouseleave(function() {
+          if (scroll_timer) {
+            window.clearTimeout(scroll_timer);
+            scroll_timer = null;
+          }
+        });
+    }
   }
 
   /**
@@ -493,6 +531,7 @@ function rcube_treelist_widget(node, p)
   function drag_end()
   {
     drag_active = false;
+    scroll_timer = null;
 
     if (autoexpand_timer) {
       clearTimeout(autoexpand_timer);
@@ -503,6 +542,23 @@ function rcube_treelist_widget(node, p)
     $('li.droptarget', container).removeClass('droptarget');
   }
 
+  /**
+   * Scroll list container in the given direction
+   */
+  function drag_scroll(dir)
+  {
+    if (!drag_active)
+      return;
+
+    var old_top = list_scroll_top;
+    container.parent().get(0).scrollTop += p.scroll_step * dir;
+    list_scroll_top = container.parent().scrollTop();
+    scroll_timer = null;
+
+    if (list_scroll_top != old_top)
+      scroll_timer = window.setTimeout(function(){ drag_scroll(dir); }, p.scroll_speed);
+  }
+
   /**
    * Determine if the given mouse coords intersect the list and one if its items
    */
@@ -510,10 +566,10 @@ function rcube_treelist_widget(node, p)
   {
     // offsets to compensate for scrolling while dragging a message
     var boffset = bw.ie ? -document.documentElement.scrollTop : body_scroll_top,
-      moffset = list_scroll_top - container.parent().scrollTop(),
+      moffset = container.parent().scrollTop(),
       result = null;
 
-    mouse.top = mouse.y + -moffset - boffset;
+    mouse.top = mouse.y + moffset - boffset;
 
     // no intersection with list bounding box
     if (mouse.x < box_coords.x1 || mouse.x >= box_coords.x2 || mouse.top < box_coords.y1 || mouse.top >= box_coords.y2) {

skins/classic/functions.js

@@ -976,8 +976,6 @@ function rcube_init_mail_ui()
         rcmail.addEventListener('responseaftercheck-recent', rcube_render_mailboxlist);
         rcmail.addEventListener('responseafterrefresh', rcube_render_mailboxlist);
         rcmail.addEventListener('afterimport-messages', function(){ rcmail_ui.show_popup('uploadform', false); });
-
-        new rcmail_scroller('#mailboxlist-content', '#mailboxlist-title', '#mailboxlist-footer');
       }
 
       if (rcmail.env.action == 'compose')
@@ -991,9 +989,6 @@ function rcube_init_mail_ui()
     else if (rcmail.env.task == 'addressbook') {
       rcmail.addEventListener('afterupload-photo', function(){ rcmail_ui.show_popup('uploadform', false); });
 
-      if (rcmail.gui_objects.folderlist)
-       new rcmail_scroller('#directorylist-content', '#directorylist-title', '#directorylist-footer');
-
       rcmail.gui_object('dragmenu', 'dragmenu');
     }
     else if (rcmail.env.task == 'settings') {

skins/larry/mail.css

@@ -55,12 +55,6 @@
 	border-radius: 0 0 4px 4px;
 }
 
-#folderlist-header {
-	width: 100%;
-	height: 12px;
-	top: 32px;
-}
-
 #mailboxcontainer,
 #messagelistcontainer {
 	position: absolute;

skins/larry/templates/mail.html

@@ -27,7 +27,6 @@
 <div id="mailview-left">
 
 <!-- folders list -->
-<div id="folderlist-header"></div>
 <div id="mailboxcontainer" class="uibox listbox">
 <div id="folderlist-content" class="scroller withfooter">
 <roundcube:object name="mailboxlist" id="mailboxlist" class="treelist listing" folder_filter="mail" unreadwrap="%s" />

skins/larry/ui.js

@@ -216,8 +216,6 @@ function rcube_mail_ui()
         if (previewframe)
           mailviewsplit.init();
 
-        new rcube_scroller('#folderlist-content', '#folderlist-header', '#folderlist-footer');
-
         rcmail.addEventListener('setquota', update_quota)
           .addEventListener('enable-command', enable_command)
           .addEventListener('afterimport-messages', show_uploadform);
@@ -284,8 +282,6 @@ function rcube_mail_ui()
           orientation:'v', relative:true, start:226, min:150, size:12, render:resize_leftcol }).init();
         new rcube_splitter({ id:'addressviewsplitter', p1:'#addresslist', p2:'#contacts-box',
           orientation:'v', relative:true, start:286, min:270, size:12 }).init();
-
-        new rcube_scroller('#directorylist-content', '#directorylist-header', '#directorylist-footer');
       }
 
       var dragmenu = $('#dragcontactmenu');