From 72975e14970ec4eeac927b80754ee3a5c6ada58e Mon Sep 17 00:00:00 2001 From: Thomas Bruederli Date: Sun, 5 Jan 2014 15:45:43 +0100 Subject: 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 | 60 ++++++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 58 insertions(+), 2 deletions(-) (limited to 'program/js/treelist.js') diff --git a/program/js/treelist.js b/program/js/treelist.js index 5913f44b4..d940e396c 100644 --- a/program/js/treelist.js +++ b/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) { -- cgit v1.2.3