Move folder/directory list auto-scrolling functionality to treelist widget ...

Thomas Bruederli

2014-01-05 72975e14970ec4eeac927b80754ee3a5c6ada58e

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 @@
    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 @@
    autoexpand_item,
    body_scroll_top = 0,
    list_scroll_top = 0,
    scroll_timer,
    me = this;


@@ -461,6 +465,7 @@

    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 @@
      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 @@
        };
      }
    }

    // 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 drag_end()
  {
    drag_active = false;
    scroll_timer = null;

    if (autoexpand_timer) {
      clearTimeout(autoexpand_timer);
@@ -504,16 +543,33 @@
  }

  /**
   * 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
   */
  function intersects(mouse, highlight)
  {
    // 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 @@
        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')
@@ -990,9 +988,6 @@
    }
    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');
    }

 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 @@
        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 @@
          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');