0x2620/pandora
2
1
Fork 1
Code Issues 1.3k Pull requests Releases Wiki Activity

scroll folders during drag and drop

Browse source
This commit is contained in:
rolux 2011-09-05 02:20:38 +00:00
parent 02582aa432
commit cf9b8c34e8
1 changed files with 55 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

74
static/js/pandora/pandora.js
View file

@ -2,14 +2,14 @@
pandora.enableDragAndDrop = function($list, canMove) { pandora.enableDragAndDrop = function($list, canMove) {
var drag = {}, var $tooltip = Ox.Tooltip({
$tooltip = Ox.Tooltip({
animate: false animate: false
}); }),
drag = {},
scrollInterval;
$list.bindEvent({ $list.bindEvent({
draganddropstart: function(data) { draganddropstart: function(data) {
Ox.print('DRAGSTART', pandora.getListData());
drag.action = 'copy'; drag.action = 'copy';
drag.ids = $list.options('selected'), drag.ids = $list.options('selected'),
drag.item = drag.ids.length == 1 drag.item = drag.ids.length == 1
@ -41,22 +41,27 @@ pandora.enableDragAndDrop = function($list, canMove) {
}); });
}, },
draganddrop: function(data) { draganddrop: function(data) {
Ox.print(pandora.$ui.folders.$element.scrollTop(0)); var event = data._event;
$tooltip.options({ $tooltip.options({
title: getTitle(data._event) title: getTitle(event)
}).show(data._event); }).show(event);
if (scrollInterval && !isAtListsTop(event) && !isAtListsBottom(event)) {
clearInterval(scrollInterval);
scrollInterval = 0;
}
}, },
draganddroppause: function(data) { draganddroppause: function(data) {
var event = data._event, var event = data._event, scroll,
$parent, $grandparent, $panel, $bar, title; $parent, $grandparent, $panel, $bar, title;
if ( // fixme: should be named showLists in the user ui prefs!
// fixme: should be named showLists in the user ui prefs! if (!pandora.user.ui.showSidebar) {
!pandora.user.ui.showSidebar && event.clientX < 16 if (event.clientX < 16 && event.clientY >= 44
&& event.clientY >= 44 && event.clientY < window.innerHeight - 16 && event.clientY < window.innerHeight - 16
) { ) {
pandora.$ui.mainPanel.toggle(0); pandora.$ui.mainPanel.toggle(0);
}
} else { } else {
$parent = $(data._event.target).parent(); $parent = $(event.target).parent();
$grandparent = $parent.parent(); $grandparent = $parent.parent();
$panel = $parent.is('.OxCollapsePanel') ? $parent $panel = $parent.is('.OxCollapsePanel') ? $parent
: $grandparent.is('.OxCollapsePanel') ? $grandparent : null; : $grandparent.is('.OxCollapsePanel') ? $grandparent : null;
@ -66,6 +71,17 @@ pandora.enableDragAndDrop = function($list, canMove) {
.html().split(' ')[0].toLowerCase(); .html().split(' ')[0].toLowerCase();
!pandora.user.ui.showFolder.items[title] && $bar.trigger('dblclick'); !pandora.user.ui.showFolder.items[title] && $bar.trigger('dblclick');
} }
if (!scrollInterval) {
scroll = isAtListsTop(event) ? -16
: isAtListsBottom(event) ? 16 : 0
if (scroll) {
scrollInterval = setInterval(function() {
pandora.$ui.folders.$element.scrollTop(
pandora.$ui.folders.$element.scrollTop() + scroll
);
}, 100);
}
}
} }
}, },
draganddropenter: function(data) { draganddropenter: function(data) {
@ -129,6 +145,8 @@ pandora.enableDragAndDrop = function($list, canMove) {
} }
function cleanup(ms) { function cleanup(ms) {
drag = {}; drag = {};
clearInterval(scrollInterval);
scrollInterval = 0;
setTimeout(function() { setTimeout(function() {
$('.OxDroppable').removeClass('OxDroppable'); $('.OxDroppable').removeClass('OxDroppable');
$('.OxDrop').removeClass('OxDrop'); $('.OxDrop').removeClass('OxDrop');
@ -200,6 +218,19 @@ pandora.enableDragAndDrop = function($list, canMove) {
) )
} }
function isAtListsTop(e) {
return pandora.user.ui.showSidebar
&& e.clientX < pandora.user.ui.sidebarSize
&& e.clientY >= 44 && e.clientY < 60;
}
function isAtListsBottom(e) {
var listsBottom = window.innerHeight - pandora.getInfoHeight();
return pandora.user.ui.showSidebar
&& e.clientX < pandora.user.ui.sidebarSize
&& e.clientY >= listsBottom - 16 && e.clientY < listsBottom;
}
function keydown(e) { function keydown(e) {
if (e.metaKey) { if (e.metaKey) {
drag.action = 'move'; drag.action = 'move';
@ -245,7 +276,7 @@ pandora.getFoldersHeight = function() {
height += 16 + pandora.user.ui.showFolder[pandora.user.ui.section][folder.id] * ( height += 16 + pandora.user.ui.showFolder[pandora.user.ui.section][folder.id] * (
!!folder.showBrowser * 40 + folder.items * 16 !!folder.showBrowser * 40 + folder.items * 16
); );
Ox.print('h', height); // // // Ox.print('h', height);
}); });
/* /*
$.each(pandora.user.ui.showFolder[pandora.user.ui.section], function(id, show) { $.each(pandora.user.ui.showFolder[pandora.user.ui.section], function(id, show) {
@ -262,7 +293,7 @@ pandora.getFoldersHeight = function() {
pandora.getFoldersWidth = function() { pandora.getFoldersWidth = function() {
var width = pandora.user.ui.sidebarSize; var width = pandora.user.ui.sidebarSize;
// fixme: don't use height(), look up in splitpanels // fixme: don't use height(), look up in splitpanels
Ox.print(pandora.getFoldersHeight(), '>', pandora.$ui.leftPanel.height() - 24 - 1 - pandora.$ui.info.height()); // // // Ox.print(pandora.getFoldersHeight(), '>', pandora.$ui.leftPanel.height() - 24 - 1 - pandora.$ui.info.height());
if (pandora.getFoldersHeight() > pandora.$ui.leftPanel.height() - 24 - 1 - pandora.$ui.info.height()) { if (pandora.getFoldersHeight() > pandora.$ui.leftPanel.height() - 24 - 1 - pandora.$ui.info.height()) {
width -= Ox.UI.SCROLLBAR_SIZE; width -= Ox.UI.SCROLLBAR_SIZE;
} }
@ -275,6 +306,11 @@ pandora.getGroupsSizes = function() {
) )
}; };
pandora.getInfoHeight = function() {
// fixme: new, check if it can be used more
return pandora.user.ui.showInfo * pandora.user.ui.sidebarSize / pandora.user.infoRatio;
}
pandora.getListData = function() { pandora.getListData = function() {
var data = {}, folder; var data = {}, folder;
if (pandora.user.ui.list) { if (pandora.user.ui.list) {
@ -287,7 +323,7 @@ pandora.getListData = function() {
// the one case where folder is undefinded is when on page load // the one case where folder is undefinded is when on page load
// the folderLists call getListData to determine which list is selected // the folderLists call getListData to determine which list is selected
if (folder) { if (folder) {
Ox.print('gLD f', folder) //Ox.print('gLD f', folder)
data = pandora.$ui.folderList[folder].value(pandora.user.ui.list); data = pandora.$ui.folderList[folder].value(pandora.user.ui.list);
data.editable = data.user == pandora.user.username && data.type == 'static'; data.editable = data.user == pandora.user.username && data.type == 'static';
data.folder = folder; data.folder = folder;
@ -439,7 +475,7 @@ pandora.resizeFolders = function() {
columnWidth.name = (width - 96) - columnWidth.user; columnWidth.name = (width - 96) - columnWidth.user;
} }
//Ox.print('sectionsWidth', width) //Ox.print('sectionsWidth', width)
$.each(pandora.$ui.folderList, function(id, $list) { Ox.forEach(pandora.$ui.folderList, function($list, id) {
var i = Ox.getPositionById(pandora.site.sectionFolders[pandora.user.ui.section], id); var i = Ox.getPositionById(pandora.site.sectionFolders[pandora.user.ui.section], id);
pandora.$ui.folder[i].css({width: width + 'px'}); pandora.$ui.folder[i].css({width: width + 'px'});
$list.css({width: width + 'px'}); $list.css({width: width + 'px'});