From b7548893a7a5cc61e4614f489dfdfb3e73f0de0f Mon Sep 17 00:00:00 2001 From: alecpl Date: Mon, 8 Dec 2008 18:01:43 +0000 Subject: #1485444: drag-n-drop performance fix: read folders position only once --- program/js/app.js | 77 ++++++++++++++++++++++++++++++++++++++++++++----------- 1 file changed, 62 insertions(+), 15 deletions(-) (limited to 'program') diff --git a/program/js/app.js b/program/js/app.js index 22d2b47f1..2795ccc59 100644 --- a/program/js/app.js +++ b/program/js/app.js @@ -133,7 +133,7 @@ function rcube_webmail() this.message_list.addEventListener('dblclick', function(o){ p.msglist_dbl_click(o); }); this.message_list.addEventListener('keypress', function(o){ p.msglist_keypress(o); }); this.message_list.addEventListener('select', function(o){ p.msglist_select(o); }); - this.message_list.addEventListener('dragstart', function(o){ p.drag_active = true; if (p.preview_timer) clearTimeout(p.preview_timer); }); + this.message_list.addEventListener('dragstart', function(o){ p.drag_start(o); }); this.message_list.addEventListener('dragmove', function(o, e){ p.drag_move(e); }); this.message_list.addEventListener('dragend', function(o){ p.drag_active = false; }); @@ -249,7 +249,7 @@ function rcube_webmail() this.contact_list = new rcube_list_widget(this.gui_objects.contactslist, {multiselect:true, draggable:true, keyboard:true}); this.contact_list.addEventListener('keypress', function(o){ p.contactlist_keypress(o); }); this.contact_list.addEventListener('select', function(o){ p.contactlist_select(o); }); - this.contact_list.addEventListener('dragstart', function(o){ p.drag_active = true; }); + this.contact_list.addEventListener('dragstart', function(o){ p.drag_start(o); }); this.contact_list.addEventListener('dragmove', function(o, e){ p.drag_move(e); }); this.contact_list.addEventListener('dragend', function(o){ p.drag_active = false; }); this.contact_list.init(); @@ -1173,29 +1173,76 @@ function rcube_webmail() } // handle mouse release when dragging - if (this.drag_active && model) { - for (var k in model) { - if ((li = this.get_folder_li(k)) && rcube_mouse_is_over(e, li.firstChild) && this.check_droptarget(k)) { - this.set_classname(li, 'droptarget', false); - this.command('moveto', model[k].id); - break; - } - } + if (this.drag_active && model && this.env.last_folder_target) { + this.set_classname(this.get_folder_li(this.env.last_folder_target), 'droptarget', false); + this.command('moveto', model[this.env.last_folder_target].id); + this.env.last_folder_target = null; } }; - this.drag_move = function(e) + this.drag_start = function(list) { - var li; var model = this.task == 'mail' ? this.env.mailboxes : this.env.address_sources; + + this.drag_active = true; + if (this.preview_timer) + clearTimeout(this.preview_timer); - if (this.gui_objects.folderlist && model) { + // save folderlist and folders location/sizes for droptarget calculation in drag_move() + if (this.gui_objects.folderlist && model) + { + var li, pos, list, height; + list = rcube_find_object(this.task == 'mail' ? 'mailboxlist' : 'folderlist'); + pos = rcube_get_object_pos(list); + this.env.folderlist_coords = {x1:pos.x, y1:pos.y, x2:pos.x + list.offsetWidth, y2:pos.y + list.offsetHeight}; + + this.env.folder_coords = new Array(); for (var k in model) { if (li = this.get_folder_li(k)) - this.set_classname(li, 'droptarget', (rcube_mouse_is_over(e, li.firstChild) && this.check_droptarget(k))); + { + pos = rcube_get_object_pos(li.firstChild); + // only visible folders + if (height = li.firstChild.offsetHeight) + this.env.folder_coords[k] = {x1:pos.x, y1:pos.y, x2:pos.x + li.firstChild.offsetWidth, y2:pos.y + height}; + } + } } - } }; + + this.drag_move = function(e) + { + if (this.gui_objects.folderlist && this.env.folder_coords) + { + var li, pos, mouse; + mouse = rcube_event.get_mouse_pos(e); + pos = this.env.folderlist_coords; + + // if mouse pointer is outside of folderlist + if (mouse.x < pos.x1 || mouse.x >= pos.x2 + || mouse.y < pos.y1 || mouse.y >= pos.y2) + { + if (this.env.last_folder_target) { + this.set_classname(this.get_folder_li(this.env.last_folder_target), 'droptarget', false); + this.env.last_folder_target = null; + } + return; + } + + // over the folders + for (var k in this.env.folder_coords) + { + pos = this.env.folder_coords[k]; + if (this.check_droptarget(k) && ((mouse.x >= pos.x1) && (mouse.x < pos.x2) + && (mouse.y >= pos.y1) && (mouse.y < pos.y2))) + { + this.set_classname(this.get_folder_li(k), 'droptarget', true); + this.env.last_folder_target = k; + } + else + this.set_classname(this.get_folder_li(k), 'droptarget', false); + } + } + }; this.collapse_folder = function(id) { -- cgit v1.2.3