From 30548547b8ca364f55ab6607c1b60bae24699d62 Mon Sep 17 00:00:00 2001 From: j <0x006A@0x2620.org> Date: Mon, 15 Jul 2013 11:39:23 +0000 Subject: [PATCH] drag and drop clips into edits --- static/js/pandora/allItems.js | 21 +- static/js/pandora/clipList.js | 2 + static/js/pandora/folderBrowser.js | 6 +- static/js/pandora/folderBrowserBar.js | 5 +- static/js/pandora/folderBrowserList.js | 25 +-- static/js/pandora/folderList.js | 27 +-- static/js/pandora/folders.js | 45 ++--- static/js/pandora/leftPanel.js | 10 +- static/js/pandora/sectionButtons.js | 4 +- static/js/pandora/sectionSelect.js | 4 +- static/js/pandora/sectionbar.js | 6 +- static/js/pandora/utils.js | 254 +++++++++++++++++++++++++ 12 files changed, 335 insertions(+), 74 deletions(-) diff --git a/static/js/pandora/allItems.js b/static/js/pandora/allItems.js index 1cc7ac8a4..66edf07dc 100644 --- a/static/js/pandora/allItems.js +++ b/static/js/pandora/allItems.js @@ -1,6 +1,7 @@ 'use strict'; -pandora.ui.allItems = function() { +pandora.ui.allItems = function(section) { + section = section || pandora.user.ui.section; var canAddItems = !pandora.site.itemRequiresVideo && pandora.site.capabilities.canAddItems[pandora.user.level], canUploadVideo = pandora.site.capabilities.canAddItems[pandora.user.level], @@ -14,10 +15,10 @@ pandora.ui.allItems = function() { .on({ click: function() { that.gainFocus(); - if (pandora.user.ui.section == 'items') { + if (section == 'items') { pandora.user.ui._list && pandora.UI.set({find: {conditions: [], operator: '&'}}); } else { - pandora.UI.set(pandora.user.ui.section.slice(0, -1), ''); + pandora.UI.set(section.slice(0, -1), ''); } } }) @@ -41,14 +42,14 @@ pandora.ui.allItems = function() { whiteSpace: 'nowrap' }) .html( - pandora.user.ui.section == 'items' + section == 'items' ? Ox._('All {0}', [Ox._(pandora.site.itemName.plural)]) - : Ox._('{0} ' + Ox.toTitleCase(pandora.user.ui.section), [pandora.site.site.name]) + : Ox._('{0} ' + Ox.toTitleCase(section), [pandora.site.site.name]) ) .appendTo(that), $items; - if (pandora.user.ui.section == 'items') { + if (section == 'items') { $items = $('
') .css({ float: 'left', @@ -86,7 +87,7 @@ pandora.ui.allItems = function() { }, function(result) { that.update(result.data.items); }); - } else if (pandora.user.ui.section == 'texts') { + } else if (section == 'texts') { Ox.Button({ style: 'symbol', title: 'file', @@ -112,9 +113,9 @@ pandora.ui.allItems = function() { function updateSelected() { that[ - (pandora.user.ui.section == 'items' && pandora.user.ui._list) - || (pandora.user.ui.section == 'edits' && pandora.user.ui.edit) - || (pandora.user.ui.section == 'texts' && pandora.user.ui.text) + (section == 'items' && pandora.user.ui._list) + || (section == 'edits' && pandora.user.ui.edit) + || (section == 'texts' && pandora.user.ui.text) ? 'removeClass' : 'addClass' ]('OxSelected'); } diff --git a/static/js/pandora/clipList.js b/static/js/pandora/clipList.js index ddda31d09..6c9fc6ac3 100644 --- a/static/js/pandora/clipList.js +++ b/static/js/pandora/clipList.js @@ -10,6 +10,7 @@ pandora.ui.clipList = function(videoRatio) { isClipView = !ui.item ? ui.listView == 'clip' : ui.itemView == 'clips', isEmbed = pandora.isEmbedURL(), that = Ox.IconList({ + draggable: true, find: !ui.item ? pandora.getItemFind(ui.find) : ui.itemFind, fixedRatio: fixedRatio, item: function(data, sort, size) { @@ -269,6 +270,7 @@ pandora.ui.clipList = function(videoRatio) { } }); + pandora.enableDragAndDropClip(that, true); return that; } diff --git a/static/js/pandora/folderBrowser.js b/static/js/pandora/folderBrowser.js index 4275ab4e4..02fe195d4 100644 --- a/static/js/pandora/folderBrowser.js +++ b/static/js/pandora/folderBrowser.js @@ -1,14 +1,14 @@ // vim: et:ts=4:sw=4:sts=4:ft=javascript 'use strict'; -pandora.ui.folderBrowser = function(id) { +pandora.ui.folderBrowser = function(id, section) { var that = Ox.SplitPanel({ elements: [ { - element: pandora.ui.folderBrowserBar(id), + element: pandora.ui.folderBrowserBar(id, section), size: 24 }, { - element: pandora.$ui.folderList[id] = pandora.ui.folderBrowserList(id) + element: pandora.$ui.folderList[id] = pandora.ui.folderBrowserList(id, section) } ], orientation: 'vertical' diff --git a/static/js/pandora/folderBrowserBar.js b/static/js/pandora/folderBrowserBar.js index 5bf479683..df5221242 100644 --- a/static/js/pandora/folderBrowserBar.js +++ b/static/js/pandora/folderBrowserBar.js @@ -1,8 +1,9 @@ // vim: et:ts=4:sw=4:sts=4:ft=javascript 'use strict'; -pandora.ui.folderBrowserBar = function(id) { +pandora.ui.folderBrowserBar = function(id, section) { + section = section || pandora.user.ui.section; var ui = pandora.user.ui, - folderItems = ui.section == 'items' ? 'Lists' : Ox.toTitleCase(ui.section), + folderItems = section == 'items' ? 'Lists' : Ox.toTitleCase(section), folderItem = folderItems.slice(0, -1), that = Ox.Bar({ size: 24 diff --git a/static/js/pandora/folderBrowserList.js b/static/js/pandora/folderBrowserList.js index ddcdaa824..2bca49fa0 100644 --- a/static/js/pandora/folderBrowserList.js +++ b/static/js/pandora/folderBrowserList.js @@ -1,12 +1,13 @@ // vim: et:ts=4:sw=4:sts=4:ft=javascript 'use strict'; -pandora.ui.folderBrowserList = function(id) { +pandora.ui.folderBrowserList = function(id, section) { // fixme: user and name are set to the same width here, // but resizeFolders will set them to different widths + section = pandora.user.ui.section; var ui = pandora.user.ui, - columnWidth = (ui.sidebarSize - Ox.UI.SCROLLBAR_SIZE - (ui.section == 'items' ? 96 : 48)) / 2, - i = Ox.getIndexById(pandora.site.sectionFolders[ui.section], id), - folderItems = ui.section == 'items' ? 'Lists' : Ox.toTitleCase(ui.section), + columnWidth = (ui.sidebarSize - Ox.UI.SCROLLBAR_SIZE - (section == 'items' ? 96 : 48)) / 2, + i = Ox.getIndexById(pandora.site.sectionFolders[section], id), + folderItems = section == 'items' ? 'Lists' : Ox.toTitleCase(section), folderItem = folderItems.slice(0, -1), that = Ox.TableList({ columns: [ @@ -65,12 +66,12 @@ pandora.ui.folderBrowserList = function(id) { format: {type: 'number'}, operator: '-', title: Ox._('Items'), - visible: ui.section == 'items', + visible: section == 'items', width: 48 }, { clickable: function(data) { - return ui.section == 'items' && ( + return section == 'items' && ( data.type == 'smart' || data.user == pandora.user.username ); }, @@ -88,7 +89,7 @@ pandora.ui.folderBrowserList = function(id) { width: '10px', height: '10px', padding: '3px', - opacity: ui.section == 'texts' || data.user == pandora.user.username ? 1 : 0.25 + opacity: section == 'texts' || data.user == pandora.user.username ? 1 : 0.25 }); }, id: 'type', @@ -151,7 +152,7 @@ pandora.ui.folderBrowserList = function(id) { // not-featured list may be in the user's favorites folder keys: id == 'featured' ? ['subscribed'] : [], pageLength: 1000, - selected: pandora.getListData().folder == id ? [ui.section == 'items' ? ui._list : ui[ui.section.slice(0, -1)]] : [], + selected: pandora.getListData().folder == id ? [section == 'items' ? ui._list : ui[section.slice(0, -1)]] : [], sort: [{key: 'name', operator: '+'}], unique: 'id' }) @@ -187,7 +188,7 @@ pandora.ui.folderBrowserList = function(id) { } }, init: function(data) { - pandora.site.sectionFolders[ui.section][i].items = data.items; + pandora.site.sectionFolders[section][i].items = data.items; pandora.$ui.folder[i].$content.css({ height: 40 + data.items * 16 + 'px' }); @@ -197,7 +198,7 @@ pandora.ui.folderBrowserList = function(id) { pandora.resizeFolders(); }, paste: function(data) { - if (ui.section == 'items') { + if (section == 'items') { pandora.$ui.list.triggerEvent('paste', data); } }, @@ -209,7 +210,7 @@ pandora.ui.folderBrowserList = function(id) { id != id_ && $list.options('selected', []); }); } - if (ui.section == 'items') { + if (section == 'items') { pandora.UI.set({ find: { conditions: list ? [ @@ -219,7 +220,7 @@ pandora.ui.folderBrowserList = function(id) { } }); } else { - pandora.UI.set(ui.section.slice(0, -1), list); + pandora.UI.set(section.slice(0, -1), list); } } }); diff --git a/static/js/pandora/folderList.js b/static/js/pandora/folderList.js index 20c929353..a76dd17d1 100644 --- a/static/js/pandora/folderList.js +++ b/static/js/pandora/folderList.js @@ -1,10 +1,11 @@ // vim: et:ts=4:sw=4:sts=4:ft=javascript 'use strict'; -pandora.ui.folderList = function(id) { +pandora.ui.folderList = function(id, section) { + section = section || pandora.user.section; var ui = pandora.user.ui, - i = Ox.getIndexById(pandora.site.sectionFolders[ui.section], id), - folderItems = ui.section == 'items' ? 'Lists' : Ox.toTitleCase(ui.section), + i = Ox.getIndexById(pandora.site.sectionFolders[section], id), + folderItems = section == 'items' ? 'Lists' : Ox.toTitleCase(section), folderItem = folderItems.slice(0, -1), canEditFeatured = pandora.site.capabilities['canEditFeatured' + folderItems][pandora.user.level], that; @@ -45,7 +46,7 @@ pandora.ui.folderList = function(id) { visible: id == 'favorite', // fixme: user and name are set to the same width here, // but resizeFolders will set them to different widths - width: ui.sidebarWidth - (ui.section == 'items' ? 96 : 48) + width: ui.sidebarWidth - (section == 'items' ? 96 : 48) }, { editable: function(data) { @@ -64,19 +65,19 @@ pandora.ui.folderList = function(id) { return Ox.decodeHTMLEntities(value); }, visible: id != 'favorite', - width: ui.sidebarWidth - (ui.section == 'items' ? 96 : 48) + width: ui.sidebarWidth - (section == 'items' ? 96 : 48) }, { align: 'right', id: 'items', format: {type: 'number'}, operator: '-', - visible: ui.section == 'items', + visible: section == 'items', width: 48 }, { clickable: function(data) { - return ui.section == 'items' && ( + return section == 'items' && ( data.type == 'smart' || data.user == pandora.user.username ); }, @@ -94,7 +95,7 @@ pandora.ui.folderList = function(id) { width: '10px', height: '10px', padding: '3px', - opacity: ui.section == 'texts' || data.user == pandora.user.username ? 1 : 0.25 + opacity: section == 'texts' || data.user == pandora.user.username ? 1 : 0.25 }); }, id: 'type', @@ -253,7 +254,7 @@ pandora.ui.folderList = function(id) { that = Ox.TableList({ columns: columns, items: items, - keys: ['modified'].concat(ui.section == 'items' ? ['query'] : ['rightslevel']), + keys: ['modified'].concat(section == 'items' ? ['query'] : ['rightslevel']), max: 1, min: 0, pageLength: 1000, @@ -363,8 +364,8 @@ pandora.ui.folderList = function(id) { }, */ init: function(data) { - if (pandora.site.sectionFolders[ui.section][i]) { - pandora.site.sectionFolders[ui.section][i].items = data.items; + if (pandora.site.sectionFolders[section][i]) { + pandora.site.sectionFolders[section][i].items = data.items; pandora.$ui.folder[i].$content.css({ height: data.items * 16 + 'px' }); @@ -392,7 +393,7 @@ pandora.ui.folderList = function(id) { id != id_ && $list.options('selected', []); }); } - if (ui.section == 'items') { + if (section == 'items') { pandora.UI.set({ find: { conditions: list ? [ @@ -402,7 +403,7 @@ pandora.ui.folderList = function(id) { } }); } else { - pandora.UI.set(ui.section.slice(0, -1), list); + pandora.UI.set(section.slice(0, -1), list); } }, submit: function(data) { diff --git a/static/js/pandora/folders.js b/static/js/pandora/folders.js index 86b9c8cd6..2615575b9 100644 --- a/static/js/pandora/folders.js +++ b/static/js/pandora/folders.js @@ -1,6 +1,7 @@ // vim: et:ts=4:sw=4:sts=4:ft=javascript 'use strict'; -pandora.ui.folders = function() { +pandora.ui.folders = function(section) { + section = section || pandora.user.ui.section; var ui = pandora.user.ui, counter = 0, that = Ox.Element() @@ -8,11 +9,11 @@ pandora.ui.folders = function() { .bindEvent({ resize: pandora.resizeFolders }), - folderItems = ui.section == 'items' ? 'Lists' : Ox.toTitleCase(ui.section), + folderItems = section == 'items' ? 'Lists' : Ox.toTitleCase(section), folderItem = folderItems.slice(0, -1); //var $sections = []; - pandora.$ui.allItems = pandora.ui.allItems().appendTo(that); + pandora.$ui.allItems = pandora.ui.allItems(section).appendTo(that); pandora.$ui.folder = []; pandora.$ui.folderBrowser = {}; pandora.$ui.folderList = {}; @@ -20,17 +21,17 @@ pandora.ui.folders = function() { pandora.$ui.findListSelect = {}; pandora.$ui.findListInput = {}; pandora.$ui.manageListsButton = {}; - pandora.site.sectionFolders[ui.section].forEach(function(folder, i) { + pandora.site.sectionFolders[section].forEach(function(folder, i) { var extras, $select; if (folder.id == 'personal') { if (pandora.user.level == 'guest') { extras = [ infoButton(Ox._('Personal {0}', [Ox._(folderItems)]), Ox._('To create and share your own list of {0} please sign up or sign in.', [Ox._(pandora.site.itemName.plural.toLowerCase())]), - Ox._('To create and share your own {0} please sign up or sign in.', [ui.section])) + Ox._('To create and share your own {0} please sign up or sign in.', [section])) ]; } else { - if (ui.section == 'items') { + if (section == 'items') { extras = [ pandora.$ui.personalListsMenu = Ox.MenuButton({ items: [ @@ -82,7 +83,7 @@ pandora.ui.folders = function() { } }) ]; - } else if (ui.section == 'texts') { + } else if (section == 'texts') { extras = [ pandora.$ui.personalListsMenu = Ox.MenuButton({ items: [ @@ -113,7 +114,7 @@ pandora.ui.folders = function() { ]('deletetext'); }) ]; - } else if (ui.section == 'edits') { + } else if (section == 'edits') { extras = [ pandora.$ui.personalListsMenu = Ox.MenuButton({ items: [ @@ -161,11 +162,11 @@ pandora.ui.folders = function() { change: function(data) { var listData; Ox.Request.clearCache(); // fixme: remove - pandora.site.sectionFolders[ui.section][i].showBrowser = !pandora.site.sectionFolders[ui.section][i].showBrowser; + pandora.site.sectionFolders[section][i].showBrowser = !pandora.site.sectionFolders[section][i].showBrowser; this.options({tooltip: data.value ? Ox._('Done') : Ox._('Manage Favorite {0}', [Ox._(folderItems)])}); - if (pandora.site.sectionFolders[ui.section][i].showBrowser) { + if (pandora.site.sectionFolders[section][i].showBrowser) { pandora.$ui.folderList.favorite.replaceWith( - pandora.$ui.folderBrowser.favorite = pandora.ui.folderBrowser('favorite') + pandora.$ui.folderBrowser.favorite = pandora.ui.folderBrowser('favorite', section) ); } else { listData = pandora.getListData(); @@ -175,7 +176,7 @@ pandora.ui.folders = function() { ) { // the selected list in the favorites browser is not in the favorites folder pandora.$ui.folderList.favorite.options({selected: []}); - if (Ox.getObjectById(pandora.site.sectionFolders[ui.section], 'featured').showBrowser) { + if (Ox.getObjectById(pandora.site.sectionFolders[section], 'featured').showBrowser) { // but in the featured browser pandora.$ui.folderList.featured.options({selected: [listData.id]}); } else { @@ -186,7 +187,7 @@ pandora.ui.folders = function() { } } pandora.$ui.folderBrowser.favorite.replaceWith( - pandora.$ui.folderList.favorite = pandora.ui.folderList('favorite') + pandora.$ui.folderList.favorite = pandora.ui.folderList('favorite', section) ); } pandora.resizeFolders(); @@ -210,11 +211,11 @@ pandora.ui.folders = function() { change: function(data) { var listData; Ox.Request.clearCache(); // fixme: remove - pandora.site.sectionFolders[ui.section][i].showBrowser = !pandora.site.sectionFolders[ui.section][i].showBrowser; + pandora.site.sectionFolders[section][i].showBrowser = !pandora.site.sectionFolders[section][i].showBrowser; this.options({tooltip: data.value ? Ox._('Done') : Ox._('Manage Favorite {0}', [Ox._(folderItems)])}); - if (pandora.site.sectionFolders[ui.section][i].showBrowser) { + if (pandora.site.sectionFolders[section][i].showBrowser) { pandora.$ui.folderList.featured.replaceWith( - pandora.$ui.folderBrowser.featured = pandora.ui.folderBrowser('featured') + pandora.$ui.folderBrowser.featured = pandora.ui.folderBrowser('featured', section) ); } else { listData = pandora.getListData(); @@ -230,7 +231,7 @@ pandora.ui.folders = function() { pandora.$ui.folderList.personal.options({selected: [listData.id]}); } else if ( listData.subscribed - || Ox.getObjectById(pandora.site.sectionFolders[ui.section], 'favorite').showBrowser + || Ox.getObjectById(pandora.site.sectionFolders[section], 'favorite').showBrowser ) { // but in the favorites folder or browser pandora.$ui.folderList.favorite.options({selected: [listData.id]}); @@ -242,7 +243,7 @@ pandora.ui.folders = function() { } } pandora.$ui.folderBrowser.featured.replaceWith( - pandora.$ui.folderList.featured = pandora.ui.folderList('featured') + pandora.$ui.folderList.featured = pandora.ui.folderList('featured', section) ); } pandora.resizeFolders(); @@ -305,7 +306,7 @@ pandora.ui.folders = function() { } else if (data.id == 'browse') { // alert('??') /* - pandora.$ui.sectionList[1].replaceWith(pandora.$ui.publicLists = pandora.ui.publicLists()); + pandora.$sectionList[1].replaceWith(pandora.$ui.publicLists = pandora.ui.publicLists()); pandora.site.showAllPublicLists = true; */ } @@ -316,8 +317,8 @@ pandora.ui.folders = function() { pandora.resizeFolders(); } }); - //$sections.push(pandora.$ui.section[i]); - pandora.$ui.folderList[folder.id] = pandora.ui.folderList(folder.id) + //$sections.push(pandora.$section[i]); + pandora.$ui.folderList[folder.id] = pandora.ui.folderList(folder.id, section) .bindEvent({ selectnext: function() { // ... @@ -328,7 +329,7 @@ pandora.ui.folders = function() { }) .bindEventOnce({ init: function(data) { - if (++counter == pandora.site.sectionFolders[ui.section].length) { + if (++counter == pandora.site.sectionFolders[section].length) { pandora.$ui.folder.forEach(function($folder) { that.append($folder); }); diff --git a/static/js/pandora/leftPanel.js b/static/js/pandora/leftPanel.js index d431fd57a..0c3b37c6e 100644 --- a/static/js/pandora/leftPanel.js +++ b/static/js/pandora/leftPanel.js @@ -1,14 +1,14 @@ // vim: et:ts=4:sw=4:sts=4:ft=javascript 'use strict'; -pandora.ui.leftPanel = function() { +pandora.ui.leftPanel = function(section) { var that = Ox.SplitPanel({ elements: [ { - element: pandora.$ui.sectionbar = pandora.ui.sectionbar('buttons'), + element: pandora.$ui.sectionbar = pandora.ui.sectionbar('buttons', section), size: 24 }, { - element: pandora.$ui.folders = pandora.ui.folders() + element: pandora.$ui.folders = pandora.ui.folders(section) }, { collapsed: !pandora.user.ui.showInfo, @@ -29,11 +29,11 @@ pandora.ui.leftPanel = function() { if (data.size < pandora.site.sectionButtonsWidth && pandora.$ui.sectionButtons) { pandora.$ui.sectionButtons.remove(); delete pandora.$ui.sectionButtons; - pandora.$ui.sectionbar.append(pandora.$ui.sectionSelect = pandora.ui.sectionSelect()); + pandora.$ui.sectionbar.append(pandora.$ui.sectionSelect = pandora.ui.sectionSelect(section)); } else if (data.size >= pandora.site.sectionButtonsWidth && pandora.$ui.sectionSelect) { pandora.$ui.sectionSelect.remove(); delete pandora.$ui.sectionSelect; - pandora.$ui.sectionbar.append(pandora.$ui.sectionButtons = pandora.ui.sectionButtons()); + pandora.$ui.sectionbar.append(pandora.$ui.sectionButtons = pandora.ui.sectionButtons(section)); } pandora.$ui.leftPanel.size(2, infoHeight); !pandora.user.ui.showInfo && pandora.$ui.leftPanel.css({bottom: -infoHeight + 'px'}); diff --git a/static/js/pandora/sectionButtons.js b/static/js/pandora/sectionButtons.js index 33910ff19..94dc16e20 100644 --- a/static/js/pandora/sectionButtons.js +++ b/static/js/pandora/sectionButtons.js @@ -1,6 +1,6 @@ // vim: et:ts=4:sw=4:sts=4:ft=javascript 'use strict'; -pandora.ui.sectionButtons = function() { +pandora.ui.sectionButtons = function(section) { var that = Ox.ButtonGroup({ buttons: [ {id: 'items', title: Ox._(pandora.site.itemName.plural)}, @@ -9,7 +9,7 @@ pandora.ui.sectionButtons = function() { ], id: 'sectionButtons', selectable: true, - value: pandora.user.ui.section + value: section || pandora.user.ui.section }).css({ float: 'left', margin: '4px' diff --git a/static/js/pandora/sectionSelect.js b/static/js/pandora/sectionSelect.js index d41523261..90a99105c 100644 --- a/static/js/pandora/sectionSelect.js +++ b/static/js/pandora/sectionSelect.js @@ -1,6 +1,6 @@ // vim: et:ts=4:sw=4:sts=4:ft=javascript 'use strict'; -pandora.ui.sectionSelect = function() { +pandora.ui.sectionSelect = function(section) { // fixme: duplicated var that = Ox.Select({ id: 'sectionSelect', @@ -9,7 +9,7 @@ pandora.ui.sectionSelect = function() { {id: 'edits', title: Ox._('Edits'), disabled: pandora.user.level != 'admin'}, {id: 'texts', title: Ox._('Texts'), disabled: pandora.user.level != 'admin'} ], - value: pandora.user.ui.section + value: section || pandora.user.ui.section }).css({ float: 'left', margin: '4px' diff --git a/static/js/pandora/sectionbar.js b/static/js/pandora/sectionbar.js index 5aaf34e58..77a88061c 100644 --- a/static/js/pandora/sectionbar.js +++ b/static/js/pandora/sectionbar.js @@ -1,13 +1,13 @@ // vim: et:ts=4:sw=4:sts=4:ft=javascript 'use strict'; -pandora.ui.sectionbar = function(mode) { +pandora.ui.sectionbar = function(mode, isDragAndDrop) { var that = Ox.Bar({ size: 24 }) .append( mode == 'buttons' - ? pandora.$ui.sectionButtons = pandora.ui.sectionButtons() - : pandora.$ui.sectionSelect = pandora.ui.sectionSelect() + ? pandora.$ui.sectionButtons = pandora.ui.sectionButtons(isDragAndDrop) + : pandora.$ui.sectionSelect = pandora.ui.sectionSelect(isDragAndDrop) ) .bindEvent({ doubleclick: function(e) { diff --git a/static/js/pandora/utils.js b/static/js/pandora/utils.js index 972cad8e9..d40798015 100644 --- a/static/js/pandora/utils.js +++ b/static/js/pandora/utils.js @@ -526,6 +526,260 @@ pandora.enableDragAndDrop = function($list, canMove) { } } +}; +pandora.enableDragAndDropClip = function($list, canMove) { + var $tooltip = Ox.Tooltip({ + animate: false + }), + drag = {}, + scrollInterval; + + $list.bindEvent({ + draganddropstart: function(data) { + pandora.$ui.mainPanel.replaceElement(0, pandora.$ui.leftPanel = pandora.ui.leftPanel('edits')); + drag.action = 'copy'; + drag.ids = $list.options('selected'), + drag.item = drag.ids.length == 1 + ? $list.value(drag.ids[0], 'title') + : drag.ids.length; + drag.source = pandora.getListData(), + drag.targets = {}; + + //fixme instead of a fixed timeout, + //bind to lists and update if they get new items + setTimeout(function() { + Ox.forEach(pandora.$ui.folderList, function($list) { + $list.addClass('OxDroppable').find('.OxItem').each(function() { + var $item = $(this), + id = $item.data('id'), + data = $list.value(id); + drag.targets[id] = Ox.extend({ + editable: data.user == pandora.user.username + && data.type == 'static', + selected: $item.is('.OxSelected') + }, data); + if (!drag.targets[id].selected && drag.targets[id].editable) { + $item.addClass('OxDroppable'); + } + }); + }); + }, 2000); + + $tooltip.options({title: getTitle()}).show(data.event); + canMove && Ox.UI.$window.on({ + keydown: keydown, + keyup: keyup + }); + }, + draganddrop: function(data) { + var event = data.event; + $tooltip.options({ + title: getTitle(event) + }).show(event); + if (scrollInterval && !isAtListsTop(event) && !isAtListsBottom(event)) { + clearInterval(scrollInterval); + scrollInterval = 0; + } + }, + draganddroppause: function(data) { + var event = data.event, scroll, + $parent, $grandparent, $panel, title; + // fixme: should be named showLists in the user ui prefs! + if (!pandora.user.ui.showSidebar) { + if (event.clientX < 16 && event.clientY >= 44 + && event.clientY < window.innerHeight - 16 + ) { + pandora.$ui.mainPanel.toggle(0); + } + } else { + $parent = $(event.target).parent(); + $grandparent = $parent.parent(); + $panel = $parent.is('.OxCollapsePanel') ? $parent + : $grandparent.is('.OxCollapsePanel') ? $grandparent : null; + if ($panel) { + title = $panel.children('.OxBar').children('.OxTitle') + .html().split(' ')[0].toLowerCase(); + if (!pandora.user.ui.showFolder.items[title]) { + Ox.UI.elements[$panel.data('oxid')].options({collapsed: false}); + } + } + if (!scrollInterval) { + scroll = isAtListsTop(event) ? -16 + : isAtListsBottom(event) ? 16 : 0 + if (scroll) { + scrollInterval = setInterval(function() { + pandora.$ui.folders.scrollTop( + pandora.$ui.folders.scrollTop() + scroll + ); + }, 100); + } + } + } + }, + draganddropenter: function(data) { + var $parent = $(data.event.target).parent(), + $item = $parent.is('.OxItem') ? $parent : $parent.parent(), + $list = $item.parent().parent().parent().parent(); + if ($list.is('.OxDroppable')) { + $item.addClass('OxDrop'); + drag.target = drag.targets[$item.data('id')]; + } else { + drag.target = null; + } + }, + draganddropleave: function(data) { + var $parent = $(data.event.target).parent(), + $item = $parent.is('.OxItem') ? $parent : $parent.parent(); + if ($item.is('.OxDroppable')) { + $item.removeClass('OxDrop'); + drag.target = null; + } + }, + draganddropend: function(data) { + var clips; + Ox.Log('', data, drag, '------------'); + canMove && Ox.UI.$window.off({ + keydown: keydown, + keyup: keyup + }); + if (drag.target && drag.target.editable && !drag.target.selected) { + if (drag.action == 'copy' || ( + drag.action == 'move' && drag.source.editable + )) { + clips = data.ids.map(function(id) { + var split = id.split('/'), + item = split[0]; + split = split[1].split('-'); + return { + item: item, + 'in': parseFloat(split[0]), + out: parseFloat(split[1]), + } + }); + if (drag.action == 'move') { + pandora.api.removeClips({ + edit: pandora.user.ui.edit, + items: clips + }, function() { + Ox.print('FIXME, reload clipslist') + }); + } + console.log('adding clips', clips); + pandora.api.addClips({ + edit: drag.target.id, + clips: clips + }, function() { + Ox.Request.clearCache('Edit'); + cleanup(250); + }); + } + } else { + cleanup(0); + } + + function cleanup(ms) { + drag = {}; + clearInterval(scrollInterval); + scrollInterval = 0; + setTimeout(function() { + $('.OxDroppable').removeClass('OxDroppable'); + $('.OxDrop').removeClass('OxDrop'); + $tooltip.hide(); + setTimeout(function() { + pandora.$ui.mainPanel.replaceElement(0, pandora.$ui.leftPanel = pandora.ui.leftPanel()); + }, 500); + }, ms); + } + } + }); + + function getTitle() { + var image, text; + if (drag.action == 'move' && drag.source.user != pandora.user.username) { + image = 'symbolClose'; + text = Ox._('You can only remove {0}
from your own edits.', + [pandora.site.itemName.plural.toLowerCase()]); + } else if (drag.action == 'move' && drag.source.type == 'smart') { + image = 'symbolClose'; + text = Ox._('You can\'t remove clips
from smart edits.'); + } else if (drag.target && drag.target.user != pandora.user.username) { + image = 'symbolClose'; + text = Ox._('You can only {0} clips
to your own edits', + [drag.action]); + } else if (drag.target && drag.target.type == 'smart') { + image = 'symbolClose'; + text = Ox._('You can\'t {0} clips
to smart lists', + [drag.action]); + } else { + image = drag.action == 'copy' ? 'symbolAdd' : 'symbolRemove'; + text = Ox._(Ox.toTitleCase(drag.action)) + ' ' + ( + Ox.isString(drag.item) + ? '"' + drag.item + '"' + : drag.item + ' ' + pandora.site.itemName[ + drag.item == 1 ? 'singular' : 'plural' + ].toLowerCase() + ) + '
' + ( + drag.target && !drag.target.selected + ? Ox._('to the edit "{0}"', [Ox.encodeHTMLEntities(drag.target.name)]) + : Ox._('to an edit') + ); + } + return $('
') + .append( + $('
') + .css({ + float: 'left', + width: '16px', + height: '16px', + padding: '2px', + border: '2px solid rgb(' + Ox.Theme.getThemeData().symbolDefaultColor.join(', ') + ')', + borderRadius: '12px', + margin: '3px 2px 2px 2px' + }) + .append( + $('') + .attr({src: Ox.UI.getImageURL(image)}) + .css({width: '16px', height: '16px'}) + ) + ) + .append( + $('
') + .css({ + float: 'left', + margin: '1px 2px 2px 2px', + fontSize: '11px', + whiteSpace: 'nowrap' + }) + .html(text) + ) + } + + 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) { + if (e.metaKey) { + drag.action = 'move'; + $tooltip.options({title: getTitle()}).show(); + } + } + function keyup(e) { + if (drag.action == 'move') { + drag.action = 'copy'; + $tooltip.options({title: getTitle()}).show(); + } + } + }; pandora.enterFullscreen = function() {