Drive/roundcubemail-plugins-kolab
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Implement auto-scrolling when dragging task items (#2687)

Browse source
This commit is contained in:
Thomas Bruederli 2014-04-17 19:33:06 +02:00
parent 9db4aeaf7e
commit a0806ef886
3 changed files with 59 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
plugins/tasklist/skins/larry/tasklist.css
View file

@ -680,7 +680,7 @@ ul.toolbarmenu li span.delete {
#rootdroppable {
display: none;
position: absolute;
top: 36px;
top: 2px;
left: 1em;
right: 1em;
height: 5px;

2
plugins/tasklist/skins/larry/templates/mainview.html
View file

@ -68,8 +68,8 @@
<div class="scroller">
<roundcube:object name="plugin.tasks" id="thelist" />
<div id="listmessagebox"></div>
<div id="rootdroppable"></div>
</div>
<div id="rootdroppable"></div>
</div>
</div>

57
plugins/tasklist/tasklist.js
View file

@ -67,6 +67,13 @@ function rcube_tasklist_ui(settings)
var completeness_slider;
var task_draghelper;
var tag_draghelper;
var task_drag_active = false;
var list_scroll_top = 0;
var scroll_delay = 400;
var scroll_step = 5;
var scroll_speed = 20;
var scroll_sensitivity = 40;
var scroll_timer;
var me = this;
// general datepicker settings
@ -818,6 +825,7 @@ function rcube_tasklist_ui(settings)
appendTo: 'body',
start: task_draggable_start,
stop: task_draggable_stop,
drag: task_draggable_move,
revertDuration: 300
});
@ -980,12 +988,45 @@ function rcube_tasklist_ui(settings)
$(this).parent().addClass('dragging');
$('#rootdroppable').show();
// enable auto-scrolling of list container
var container = $(rcmail.gui_objects.resultlist);
if (container.height() > container.parent().height()) {
task_drag_active = true;
list_scroll_top = container.parent().scrollTop();
}
}
function task_draggable_move(event, ui)
{
var scroll = 0,
mouse = rcube_event.get_mouse_pos(event),
container = $(rcmail.gui_objects.resultlist);
mouse.y -= container.parent().offset().top;
if (mouse.y < scroll_sensitivity && list_scroll_top > 0) {
scroll = -1; // up
}
else if (mouse.y > container.parent().height() - scroll_sensitivity) {
scroll = 1; // down
}
if (task_drag_active && scroll != 0) {
if (!scroll_timer)
scroll_timer = window.setTimeout(function(){ tasklist_drag_scroll(container, scroll); }, scroll_delay);
}
else if (scroll_timer) {
window.clearTimeout(scroll_timer);
scroll_timer = null;
}
}
function task_draggable_stop(event, ui)
{
$(this).parent().removeClass('dragging');
$('#rootdroppable').hide();
task_drag_active = false;
}
function task_droppable_accept(draggable)
@ -1055,6 +1096,22 @@ function rcube_tasklist_ui(settings)
}
}
/**
* Scroll list container in the given direction
*/
function tasklist_drag_scroll(container, dir)
{
if (!task_drag_active)
return;
var old_top = list_scroll_top;
container.parent().get(0).scrollTop += scroll_step * dir;
list_scroll_top = container.parent().scrollTop();
scroll_timer = null;
if (list_scroll_top != old_top)
scroll_timer = window.setTimeout(function(){ tasklist_drag_scroll(container, dir); }, scroll_speed);
}
/**
* Show task details in a dialog