diff options
| -rw-r--r-- | program/js/treelist.js | 60 | ||||
| -rw-r--r-- | skins/classic/functions.js | 5 | ||||
| -rw-r--r-- | skins/larry/mail.css | 6 | ||||
| -rw-r--r-- | skins/larry/templates/mail.html | 1 | ||||
| -rw-r--r-- | skins/larry/ui.js | 4 |
5 files changed, 58 insertions, 18 deletions
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); @@ -504,16 +543,33 @@ function rcube_treelist_widget(node, p) } /** + * 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) { diff --git a/skins/classic/functions.js b/skins/classic/functions.js index 4312d57bc..049e4d5d4 100644 --- a/skins/classic/functions.js +++ b/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') { diff --git a/skins/larry/mail.css b/skins/larry/mail.css index d3b09c087..8e6e78e77 100644 --- a/skins/larry/mail.css +++ b/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; diff --git a/skins/larry/templates/mail.html b/skins/larry/templates/mail.html index 8f19b9f7f..ff5f7549c 100644 --- a/skins/larry/templates/mail.html +++ b/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" /> diff --git a/skins/larry/ui.js b/skins/larry/ui.js index add691054..44fc727f6 100644 --- a/skins/larry/ui.js +++ b/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'); |