From e83f89df63dd370b395ba9927ac547199cb3f4dc Mon Sep 17 00:00:00 2001 From: rlx <0x0073@0x2620.org> Date: Sun, 28 Aug 2011 06:24:01 +0000 Subject: [PATCH] some item/list drag&drop (works in firefox, buggy in safari, fails in chrome) --- static/js/pandora/ui/folderBrowserList.js | 10 +- static/js/pandora/ui/foldersList.js | 10 +- static/js/pandora/ui/list.js | 131 +++++++++++++++++++++- static/js/pandora/ui/siteDialog.js | 4 +- 4 files changed, 139 insertions(+), 16 deletions(-) diff --git a/static/js/pandora/ui/folderBrowserList.js b/static/js/pandora/ui/folderBrowserList.js index ca3e83b..9873c9d 100644 --- a/static/js/pandora/ui/folderBrowserList.js +++ b/static/js/pandora/ui/folderBrowserList.js @@ -189,6 +189,7 @@ pandora.ui.folderBrowserList = function(id) { return that; }; +/* pandora.ui.folderList = function(id) { var i = Ox.getPositionById(pandora.site.sectionFolders[pandora.user.ui.section], id), that; @@ -424,11 +425,9 @@ pandora.ui.folderList = function(id) { pandora.resizeFolders(); }, move: function(event, data) { - /* data.ids.forEach(function(id, pos) { pandora.user.ui.lists[id].position = pos; }); - */ pandora.api.sortLists({ section: id, ids: data.ids @@ -627,10 +626,8 @@ pandora.ui.folders = function() { }); } else if (data.id == 'browse') { alert('??') - /* - pandora.$ui.sectionList[1].replaceWith(pandora.$ui.publicLists = pandora.ui.publicLists()); - pandora.site.showAllPublicLists = true; - */ + //pandora.$ui.sectionList[1].replaceWith(pandora.$ui.publicLists = pandora.ui.publicLists()); + //pandora.site.showAllPublicLists = true; } }, toggle: function(event, data) { @@ -661,4 +658,5 @@ pandora.ui.folders = function() { } return that; }; +*/ diff --git a/static/js/pandora/ui/foldersList.js b/static/js/pandora/ui/foldersList.js index e5fb798..ee0e6eb 100644 --- a/static/js/pandora/ui/foldersList.js +++ b/static/js/pandora/ui/foldersList.js @@ -149,7 +149,7 @@ pandora.ui.folderList = function(id) { } else if (id == 'featured') { query = {conditions: [{key: 'status', value: 'featured', operator: '='}], operator: '&'}; } - return pandora.api.findLists($.extend(data, { + return pandora.api.findLists(Ox.extend(data, { query: query }), callback); }, @@ -187,16 +187,14 @@ pandora.ui.folderList = function(id) { }, 'delete': function(event, data) { var $list = pandora.$ui.folderList[id]; - pandora.user.ui.listQuery.conditions = []; - pandora.URL.set(pandora.Query.toString()); + pandora.URL.set('?find='); $list.options({selected: []}); if (id == 'personal') { pandora.api.removeList({ id: data.ids[0] }, function(result) { - // fixme: is this the best way to delete a ui preference? - delete pandora.user.ui.lists[data.ids[0]]; - pandora.UI.set({lists: pandora.user.ui.lists}); + pandora.UI.set(['lists', data.ids[0]].join('|'), null); + Ox.print('SHOULD BE DELETED:', pandora.user.ui.lists) Ox.Request.clearCache(); // fixme: remove $list.reloadList(); }); diff --git a/static/js/pandora/ui/list.js b/static/js/pandora/ui/list.js index 8ae84a3..836c2de 100644 --- a/static/js/pandora/ui/list.js +++ b/static/js/pandora/ui/list.js @@ -456,16 +456,143 @@ pandora.ui.list = function() { // fixme: remove view argument }); } + var $tooltip = Ox.Tooltip({ + animate: false + }).css({ + textAlign: 'center' + }); + ['list', 'icons'].indexOf(view) > -1 && that.bind({ dragstart: function(e) { + var editable = pandora.getListData().editable, + ids = that.options('selected'), + item = ids.length == 1 ? that.value(ids[0], 'title') : ids.length; Ox.forEach(pandora.$ui.folderList, function($list, i) { - $list.addClass('OxDrop'); + $list.find('.OxItem').each(function() { + var $item = $(this), + data = $list.value($item.data('id')); + if ( + data.user == pandora.user.username + && data.type == 'static' + && !$item.is('.OxSelected') + ) { + pandora.api.find({ + query: { + conditions: [ + {key: 'list', value: data.id, operator: '='}, + { + conditions: ids.map(function(id) { + return {key: 'id', value: id, operator: '='}; + }), + operator: '|' + } + ], + operator: '&' + } + }, function(result) { + var items = ids.length - result.data.items; + items && $item.addClass('OxDrop').bind({ + dragenter: function(e) { + $(this).addClass('OxDragover'); + }, + dragover: function(e) { + $tooltip.options({ + title: getTitle(e, ids.length == 1 ? item : items, data.id.split('/').pop()) + + (editable && e.shiftKey && result.data.items + ? '
and remove ' + result.data.items + ' ' + + pandora.site.itemName[result.data.items == 1 ? 'singular' : 'plural'].toLowerCase() + + '
from the list "' + pandora.user.ui.list.split('/').pop() + '"' + : '') + }).show(e); + //e.originalEvent.dataTransfer.dropEffect = 'none'; + e.originalEvent.preventDefault(); + return false; + }, + dragleave: function(e) { + $(this).removeClass('OxDragover'); + }, + drop: function(e) { + Ox.print('DROP', data); + var $this = $(this), folder, listData; + if (editable && e.shiftKey) { + pandora.api.removeListItems({ + list: pandora.user.ui.list, + items: ids + }, pandora.reloadList); + listData = pandora.getListData(); + folder = listData.status == 'private' ? 'personal' : data.status; + pandora.$ui.folderList[folder].value( + listData.id, 'items', + pandora.$ui.folderList[folder].value(listData.id, 'items') - ids.length + ); + } + pandora.api.addListItems({ + list: data.id, + items: ids + }); + folder = data.status == 'private' ? 'personal' : data.status; + pandora.$ui.folderList[folder].value( + data.id, 'items', + pandora.$ui.folderList[folder].value(data.id, 'items') + items + ); + Ox.Request.clearCache(); // fixme: remove + setTimeout(function() { + $this.removeClass('OxDragover'); + }, 250); + e.originalEvent.stopPropagation(); + return false; + } + }); + }); + } + }); }); + e.originalEvent.dataTransfer.setDragImage( + $('').attr({src: Ox.UI.PATH + 'png/transparent.png'})[0], 0, 0 + ); + Ox.UI.$document.bind({ + dragover: function(e) { + $tooltip.options({ + title: getTitle(e, item) + }).show(e); + e.originalEvent.preventDefault(); + return false; + } + }); + function getTitle(e, item, list) { + return (editable && e.shiftKey ? 'Move' : 'Copy') + ' ' + + (Ox.isString(item) ? '"' + item + '"' : item + ' ' + pandora.site.itemName[item == 1 ? 'singular' : 'plural'].toLowerCase()) + + (list ? '
to the list "' + list + '"' : ''); + } + //e.originalEvent.dataTransfer.setData('text/plain', JSON.stringify(that.options('selected'))); }, dragend: function(e) { + Ox.print('DRAGEND') + $tooltip.hide(); + Ox.UI.$document.unbind('dragover'); + $('.OxDrop').removeClass('OxDrop') + .unbind('dragenter') + .unbind('dragover') + .unbind('dragleave') + .unbind('drop'); + /* Ox.forEach(pandora.$ui.folderList, function($list, i) { - $list.removeClass('OxDrop'); + $list.find('.OxItem').each(function() { + var $item = $(this), id = $item.data('id'); + if ( + $list.value(id, 'user') == pandora.user.username + && $list.value(id, 'type') == 'static' + && !$item.is('.OxSelected') + ) { + $item.removeClass('OxDrop') + .unbind('dragenter') + .unbind('dragover') + .unbind('dragleave') + .unbind('drop'); + } + }); }); + */ } }).bindEvent({ closepreview: function(data) { diff --git a/static/js/pandora/ui/siteDialog.js b/static/js/pandora/ui/siteDialog.js index 96f91c0..4acc326 100644 --- a/static/js/pandora/ui/siteDialog.js +++ b/static/js/pandora/ui/siteDialog.js @@ -22,9 +22,9 @@ pandora.ui.siteDialog = function(section) { .attr({src: '/static/png/' + ( id == 'software' ? 'pandora' : 'logo' ) + '256.png'}) - .css({width: '128px'}) + .css({width: '256px'}) ), - size: 144 + size: 272 }, { element: Ox.Element()