various improvements for lists

This commit is contained in:
rolux 2011-09-29 17:25:04 +00:00
parent 0eefc3dfd3
commit 31c1ee7fba
17 changed files with 636 additions and 317 deletions

View file

@ -35,7 +35,7 @@ class List(models.Model):
upload_to=lambda i, x: i.path("icon.jpg")) upload_to=lambda i, x: i.path("icon.jpg"))
view = models.TextField(default=settings.CONFIG['user']['ui']['listView']) view = models.TextField(default=settings.CONFIG['user']['ui']['listView'])
sort = TupleField(default=tuple(settings.CONFIG['user']['ui']['listSort']), editable=False) sort = TupleField(default=settings.CONFIG['user']['ui']['listSort'], editable=False)
poster_frames = TupleField(default=[], editable=False) poster_frames = TupleField(default=[], editable=False)

View file

@ -238,6 +238,8 @@ def addList(request):
list.view = data['view'] list.view = data['view']
if 'sort' in data: if 'sort' in data:
list.sort= tuple(data['sort']) list.sort= tuple(data['sort'])
if 'posterFrames' in data:
list.poster_frames = tuple(data['posterFrames'])
list.save() list.save()
@ -245,6 +247,9 @@ def addList(request):
for item in Item.objects.filter(itemId__in=data['items']): for item in Item.objects.filter(itemId__in=data['items']):
list.add(item) list.add(item)
if 'posterFrames' in data:
list.update_icon()
if list.status == 'featured': if list.status == 'featured':
pos, created = models.Position.objects.get_or_create(list=list, pos, created = models.Position.objects.get_or_create(list=list,
user=request.user, section='featured') user=request.user, section='featured')

1
static/favicon.ico Symbolic link
View file

@ -0,0 +1 @@
png/icon16.png

View file

@ -137,7 +137,6 @@ Ox.load({
Ox.Theme(pandora.user.ui.theme); Ox.Theme(pandora.user.ui.theme);
pandora.$ui.appPanel = pandora.ui.appPanel().display(); pandora.$ui.appPanel = pandora.ui.appPanel().display();
Ox.Request.requests() && pandora.$ui.loadingIcon.start(); Ox.Request.requests() && pandora.$ui.loadingIcon.start();
pandora.$ui.body.ajaxStart(pandora.$ui.loadingIcon.start); pandora.$ui.body.ajaxStart(pandora.$ui.loadingIcon.start);
pandora.$ui.body.ajaxStop(pandora.$ui.loadingIcon.stop); pandora.$ui.body.ajaxStop(pandora.$ui.loadingIcon.stop);

View file

@ -116,7 +116,7 @@ pandora.URL = (function() {
pandora.$ui.helpDialog = pandora.ui.helpDialog().open(); pandora.$ui.helpDialog = pandora.ui.helpDialog().open();
} else if (['signup', 'signin'].indexOf(state.page) > -1) { } else if (['signup', 'signin'].indexOf(state.page) > -1) {
if (pandora.user.level == 'guest') { if (pandora.user.level == 'guest') {
pandora.ui.accountDialog(state.page).open(); pandora.$ui.accountDialog = pandora.ui.accountDialog(state.page).open();
} else { } else {
pandora.URL.replace('/'); pandora.URL.replace('/');
} }

View file

@ -1,14 +1,14 @@
// vim: et:ts=4:sw=4:sts=4:ft=javascript // vim: et:ts=4:sw=4:sts=4:ft=javascript
pandora.autovalidateCode = function(value, blur, callback) { pandora.autovalidateCode = function(value, blur, callback) {
value = value.toUpperCase().split('').map(function(v) { value = value.toUpperCase().split('').map(function(v) {
return /[0-9A-Z]/(v) ? v : null; return /[0-9A-Z]/.test(v) ? v : null;
}).join(''); }).join('');
callback(value); callback(value);
}; };
pandora.autovalidateEmail = function(value, blur, callback) { pandora.autovalidateEmail = function(value, blur, callback) {
value = value.toLowerCase().split('').map(function(v, i) { value = value.toLowerCase().split('').map(function(v, i) {
return /[0-9a-z\.\+\-_@]/(v) ? v : null; return /[0-9a-z\.\+\-_@]/.test(v) ? v : null;
}).join(''); }).join('');
callback(value); callback(value);
}; };

View file

@ -174,7 +174,7 @@ pandora.ui.accountForm = function(action, value) {
}, },
validate: function(data) { validate: function(data) {
//Ox.print('FORM VALIDATE', data) Ox.print('FORM VALIDATE', data, action, 'submit' + Ox.toTitleCase(action));
pandora.$ui.accountDialog[ pandora.$ui.accountDialog[
(data.valid ? 'enable' : 'disable') + 'Button' (data.valid ? 'enable' : 'disable') + 'Button'
]('submit' + Ox.toTitleCase(action)); ]('submit' + Ox.toTitleCase(action));

View file

@ -0,0 +1,54 @@
// vim: et:ts=4:sw=4:sts=4:ft=javascript
pandora.ui.deleteListDialog = function() {
var listData = pandora.getListData(),
$folderList = pandora.$ui.folderList[listData.folder],
that = Ox.Dialog({
buttons: [
Ox.Button({
id: 'cancel',
title: 'Cancel'
}).bindEvent({
click: function() {
that.close();
}
}),
Ox.Button({
id: 'delete',
title: 'Delete'
}).bindEvent({
click: function() {
that.close();
pandora.api.removeList({
id: listData.id
}, function(result) {
Ox.Request.clearCache('findLists');
Ox.Request.clearCache(listData.id);
$folderList
.options({selected: []})
.bindEventOnce({
load: function() {
pandora.UI.set('lists.' + listData.id, null);
pandora.UI.set({
find: pandora.site.user.ui.find
});
}
})
.reloadList();
});
}
})
],
content: $('<div>')
.css({margin: '16px'})
.html('Do you want to delete the list "' + listData.id + '"?'),
height: 128,
keys: {enter: 'delete', escape: 'cancel'},
title: 'Delete List',
width: 304
});
return that;
}

View file

@ -11,13 +11,14 @@ pandora.ui.folderList = function(id) {
clickable: function(data) { clickable: function(data) {
return data.user == pandora.user.username; return data.user == pandora.user.username;
}, },
format: function() { format: function(value, data) {
return $('<img>').attr({ return $('<img>').attr({
src: Ox.UI.getImageURL('symbolIcon') src: '/list/' + data.id + '/icon16.jpg'
}).css({ }).css({
width: '10px', width: '14px',
height: '10px', height: '14px',
padding: '3px' borderRadius: '4px',
margin: '0 0 0 -3px'
}); });
}, },
id: 'user', id: 'user',
@ -297,11 +298,11 @@ pandora.ui.folderList = function(id) {
click: function(data) { click: function(data) {
//var $list = pandora.$ui.folderList[id]; //var $list = pandora.$ui.folderList[id];
if (data.key == 'user') { if (data.key == 'user') {
pandora.$ui.filterDialog = pandora.ui.listDialog(that.value(data.id), 'icon').open(); pandora.$ui.listDialog = pandora.ui.listDialog('icon').open();
} else if (data.key == 'type') { } else if (data.key == 'type') {
if (that.value(data.id, 'type') == 'smart') { if (that.value(data.id, 'type') == 'smart') {
pandora.$ui.filterDialog = pandora.ui.listDialog(that.value(data.id), 'query').open(); pandora.$ui.listDialog = pandora.ui.listDialog('query').open();
} }
} else if (data.key == 'status') { } else if (data.key == 'status') {
pandora.api.editList({ pandora.api.editList({
@ -318,44 +319,7 @@ pandora.ui.folderList = function(id) {
}, },
'delete': function(data) { 'delete': function(data) {
if (id == 'personal') { if (id == 'personal') {
var $dialog = Ox.Dialog({ pandora.ui.deleteListDialog().open();
buttons: [
Ox.Button({
id: 'cancel',
title: 'Cancel'
}).bindEvent({
click: function() {
$dialog.close();
}
}),
Ox.Button({
id: 'delete',
title: 'Delete'
}).bindEvent({
click: function() {
$dialog.close();
that.options({selected: []});
pandora.api.removeList({
id: data.ids[0]
}, function(result) {
pandora.UI.set('lists.' + data.ids[0], null);
pandora.UI.set({
find: pandora.site.user.ui.find
});
Ox.Request.clearCache(); // fixme: remove
that.reloadList();
});
}
})
],
content: $('<div>')
.css({margin: '16px'})
.html('Do you want to delete the list ' + data.ids[0] + '?'),
height: 128,
keys: {enter: 'delete', escape: 'cancel'},
title: 'Delete List',
width: 304
}).open();
} else if (id == 'favorite') { } else if (id == 'favorite') {
that.options({selected: []}); that.options({selected: []});
pandora.api.unsubscribeFromList({ pandora.api.unsubscribeFromList({

View file

@ -23,11 +23,11 @@ pandora.ui.folders = function() {
} else { } else {
extras = [Ox.Select({ extras = [Ox.Select({
items: [ items: [
{ id: 'new', title: 'New List...' }, { id: 'newlist', title: 'New List...' },
{ id: 'newfromselection', title: 'New List from Current Selection...', disabled: true }, { id: 'newlistfromselection', title: 'New List from Current Selection...', disabled: true },
{}, {},
{ id: 'newsmart', title: 'New Smart List...' }, { id: 'newsmartlist', title: 'New Smart List...' },
{ id: 'newfromresults', title: 'New Smart List from Current Results...', disabled: true }, { id: 'newsmartlistfromresults', title: 'New Smart List from Current Results...', disabled: true },
{}, {},
{ id: 'duplicate', title: 'Duplicate List' }, { id: 'duplicate', title: 'Duplicate List' },
{ id: 'copyselection', title: 'Copy Selection to List...' }, { id: 'copyselection', title: 'Copy Selection to List...' },
@ -56,7 +56,7 @@ pandora.ui.folders = function() {
operator: '&' operator: '&'
} }
}); });
Ox.Request.clearCache(); // fixme: remove Ox.Request.clearCache('"findLists"');
$list.reloadList().bindEventOnce({ $list.reloadList().bindEventOnce({
load: function(data) { load: function(data) {
$list.gainFocus() $list.gainFocus()
@ -152,7 +152,9 @@ pandora.ui.folders = function() {
pandora.$ui.folderList.favorite.options({selected: [listData.id]}); pandora.$ui.folderList.favorite.options({selected: [listData.id]});
} else { } else {
// and nowhere else // and nowhere else
pandora.URL.set(''); pandora.UI.set({
find: pandora.site.user.ui.find
});
} }
} }
pandora.$ui.folderBrowser.featured.replaceWith( pandora.$ui.folderBrowser.featured.replaceWith(

View file

@ -35,7 +35,28 @@ pandora.ui.info = function() {
height: pandora.getInfoHeight(), height: pandora.getInfoHeight(),
id: id, id: id,
width: pandora.user.ui.sidebarSize width: pandora.user.ui.sidebarSize
}).appendTo(pandora.$ui.info); })
.bindEvent({
click: function(data) {
pandora.UI.set(
'videoPoints.' + id,
{'in': 0, out: 0, position: data.position}
);
if (pandora.user.ui.item && ['video', 'timeline'].indexOf(pandora.user.ui.itemView) > -1) {
pandora.$ui[
pandora.user.ui.itemView == 'video' ? 'player' : 'editor'
].options({
position: data.position
});
} else {
pandora.UI.set({
item: id,
itemView: pandora.user.ui.videoView
});
}
}
})
.appendTo(pandora.$ui.info);
} }
}); });
} }
@ -66,7 +87,7 @@ pandora.ui.info = function() {
pandora.$ui.videoPreview.options({ pandora.$ui.videoPreview.options({
height: pandora.getInfoHeight(), height: pandora.getInfoHeight(),
width: pandora.user.ui.sidebarSize width: pandora.user.ui.sidebarSize
}) });
} }
}; };
return that; return that;
@ -75,14 +96,22 @@ pandora.ui.info = function() {
pandora.ui.listInfo = function(data) { pandora.ui.listInfo = function(data) {
var that = $('<div>').css({padding: '16px', textAlign: 'center'}); var that = $('<div>').css({padding: '16px', textAlign: 'center'});
var $icon = $('<img>') var $icon = $('<img>')
.attr({src: !pandora.user.ui._list ? '/static/png/icon256.png' : Ox.UI.getImageURL('symbolIcon')}) .attr({
src: !pandora.user.ui._list
? '/static/png/icon256.png'
: '/list/' + pandora.user.ui._list + '/icon256.jpg?' + Ox.uid()
})
.css(getIconCSS()) .css(getIconCSS())
.appendTo(that); .appendTo(that);
$('<div>').css({padding: '16px 0 16px 0', fontWeight: 'bold'}).html(!pandora.user.ui._list ? 'All Movies' : pandora.user.ui._list.replace(':', ': ')).appendTo(that); $('<div>').css({padding: '16px 0 16px 0', fontWeight: 'bold'}).html(!pandora.user.ui._list ? 'All Movies' : pandora.user.ui._list.replace(':', ': ')).appendTo(that);
$('<div>').css({textAlign: 'left'}).html(Ox.repeat('This is the list info text. ', 10)).appendTo(that); $('<div>').css({textAlign: 'left'}).html(Ox.repeat('This is the list info text. ', 10)).appendTo(that);
function getIconCSS() { function getIconCSS() {
var size = Math.round(pandora.user.ui.sidebarSize / 2); var size = Math.round(pandora.user.ui.sidebarSize / 2);
return {width: size + 'px', height: size + 'px'}; return {
width: size + 'px',
height: size + 'px',
borderRadius: Math.round(size / 4) + 'px'
};
} }
that.resizeIcon = function() { that.resizeIcon = function() {
$icon.css(getIconCSS()); $icon.css(getIconCSS());

View file

@ -1,43 +1,81 @@
// vim: et:ts=4:sw=4:sts=4:ft=javascript // vim: et:ts=4:sw=4:sts=4:ft=javascript
pandora.ui.listDialog = function(list, section) { pandora.ui.listDialog = function(section) {
var tabs = Ox.merge([ section = section || 'general';
var width = getWidth(section);
var listData = pandora.getListData(),
tabs = Ox.merge([
{id: 'general', title: 'General'}, {id: 'general', title: 'General'},
{id: 'icon', title: 'Icon'} {id: 'icon', title: 'Icon'}
], list.type == 'smart' ], listData.type == 'smart'
? {id: 'query', title: 'Query'} ? [{id: 'query', title: 'Query'}]
: [] : []
); );
Ox.getObjectById(tabs, section).selected = true; Ox.getObjectById(tabs, section).selected = true;
var $tabPanel = Ox.TabPanel({ var $tabPanel = Ox.TabPanel({
content: function(id) { content: function(id) {
if (id == 'general') { if (id == 'general') {
return Ox.Element({}).css({padding: '16px'}).html('General'); return pandora.ui.listGeneralPanel(listData);
} else if (id == 'icon') { } else if (id == 'icon') {
return pandora.ui.listIconPanel(list); return pandora.ui.listIconPanel(listData);
} else if (id == 'query') { } else if (id == 'query') {
return pandora.$ui.filter = pandora.ui.filter(list); return pandora.$ui.filter = pandora.ui.filter(listData);
} }
}, },
tabs: tabs tabs: tabs
}) })
.bindEvent({ .bindEvent({
change: function(data) { change: function(data) {
var width = getWidth(data.selected);
$dialog.options({ $dialog.options({
title: 'Smart List - ' + list.name + ' - ' maxWidth: width,
minWidth: width,
title: 'Smart List - ' + listData.name + ' - '
+ Ox.getObjectById(tabs, data.selected).title + Ox.getObjectById(tabs, data.selected).title
}); });
if (data.selected == 'icon') { $dialog.setSize(width, 312);
$dialog.options({ $findElement[data.selected == 'icon' ? 'show' : 'hide']();
maxWidth: 704 + Ox.UI.SCROLLBAR_SIZE,
minWidth: 704 + Ox.UI.SCROLLBAR_SIZE,
width: 704 + Ox.UI.SCROLLBAR_SIZE
});
}
} }
}); });
var $findElement = Ox.FormElementGroup({
elements: [
pandora.$ui.findIconItemSelect = Ox.Select({
items: pandora.site.findKeys,
overlap: 'right',
type: 'image'
})
.bindEvent({
change: function(data) {
}
}),
pandora.$ui.findIconItemInput = Ox.Input({
changeOnKeypress: true,
clear: true,
placeholder: 'Find: Foo',
width: 120 + Ox.UI.SCROLLBAR_SIZE
})
.bindEvent({
change: function(data) {
}
})
],
})
.css({
float: 'right',
margin: '4px',
align: 'right'
});
if (section != 'icon') {
$findElement.hide();
}
$findElement.appendTo($tabPanel.children('.OxBar'));
var $dialog = Ox.Dialog({ var $dialog = Ox.Dialog({
buttons: [ buttons: [
Ox.Button({ Ox.Button({
@ -49,59 +87,154 @@ pandora.ui.listDialog = function(list, section) {
alert(JSON.stringify(pandora.$ui.filter.options('query'))); alert(JSON.stringify(pandora.$ui.filter.options('query')));
} }
}), }),
/*
Ox.Button({
id: 'cancel',
title: 'Cancel'
})
.bindEvent({
click: function() {
pandora.$ui.filterDialog.close();
}
}),
*/
Ox.Button({ Ox.Button({
id: 'done', id: 'done',
title: 'Done' title: 'Done'
}) })
.bindEvent({ .bindEvent({
click: function() { click: function() {
pandora.$ui.filterDialog.close(); $dialog.close();
} }
}) })
], ],
content: $tabPanel, content: $tabPanel,
maxWidth: (section == 'icon' ? 704 : 648) + Ox.UI.SCROLLBAR_SIZE, maxWidth: width,
minHeight: 312, minHeight: 312,
minWidth: (section == 'icon' ? 704 : 648) + Ox.UI.SCROLLBAR_SIZE, minWidth: width,
height: 312, height: 312,
// keys: {enter: 'save', escape: 'cancel'}, // keys: {enter: 'save', escape: 'cancel'},
//title: list ? 'Smart List - ' + list.name : 'Advanced Find', title: 'Smart List - ' + listData.name,
title: 'Smart List - ' + list.name + ' - ' width: width
+ Ox.getObjectById(tabs, section).title,
width: (section == 'icon' ? 704 : 648) + Ox.UI.SCROLLBAR_SIZE
}); });
function getWidth(section) {
return section == 'general' ? 496
: (section == 'icon' ? 696 : 648) + Ox.UI.SCROLLBAR_SIZE;
}
return $dialog; return $dialog;
}; };
pandora.ui.listIconPanel = function(list) { pandora.ui.listGeneralPanel = function(listData) {
var that = Ox.Element({}),
$icon = $('<img>')
.attr({src: '/list/' + listData.id + '/icon256.jpg?' + Ox.uid()})
.css({position: 'absolute', left: '16px', top: '16px', width: '128px', height: '128px', borderRadius: '32px'})
.appendTo(that);
$nameInput = Ox.Input({
label: 'Name',
labelWidth: 80,
value: listData.name,
width: 320
})
.css({position: 'absolute', left: '160px', top: '16px'})
.appendTo(that);
$itemsInput = Ox.Input({
disabled: true,
label: 'Items',
labelWidth: 80,
value: listData.items,
width: 320
})
.css({position: 'absolute', left: '160px', top: '40px'})
.appendTo(that);
$statusSelect = Ox.Select({
items: [
{id: 'private', title: 'Private', selected: listData.status == 'private'},
{id: 'public', title: 'Public', selected: listData.status == 'public'},
{id: 'featured', title: 'Featured', selected: listData.status == 'featured'},
],
label: 'Status',
labelWidth: 80,
width: 320
})
.css({position: 'absolute', left: '160px', top: '64px'})
.appendTo(that);
$subscribersInput = Ox.Input({
disabled: true,
label: 'Subscribers',
labelWidth: 80,
value: 0,
width: 320
})
.css({position: 'absolute', left: '160px', top: '88px'})
.appendTo(that);
return that;
};
var quarter = 'top-left'; pandora.ui.listIconPanel = function(listData) {
var $interface = Ox.Element({ var quarter = 0,
quarters = ['top-left', 'top-right', 'bottom-left', 'bottom-right'],
$iconPanel = Ox.Element(),
$icon = $('<img>')
.attr({src: '/list/' + listData.id + '/icon256.jpg?' + Ox.uid()})
.css({position: 'absolute', borderRadius: '64px', margin: '16px'})
.appendTo($iconPanel),
$previewPanel = Ox.Element(),
$preview,
$list = Ox.Element(),
that = Ox.SplitPanel({
elements: [
{
element: $iconPanel,
size: 280
},
{
element: $previewPanel
},
{
element: $list,
size: 144 + Ox.UI.SCROLLBAR_SIZE
}
],
orientation: 'horizontal'
});
pandora.api.findLists({
query: {
conditions: [{key: 'id', value: listData.id, operator: '=='}],
operator: '&'
},
keys: ['posterFrames']
}, function(result) {
var posterFrames = result.data.items[0].posterFrames,
posterFrame = posterFrames[quarter],
$interface = Ox.Element({
tooltip: function(e) { tooltip: function(e) {
return 'Edit ' + $(e.target).attr('id').replace('-', ' ') + ' image'; return 'Edit ' + $(e.target).attr('id').replace('-', ' ') + ' image';
} }
}) })
.css({position: 'absolute', width: '256px', height: '256px', margin: '16px', cursor: 'pointer'}) .css({
.click(function(e) { position: 'absolute',
quarter = $(e.target).attr('id'); width: '256px',
renderQuarters(); height: '256px',
}); marginLeft: '16px',
marginTop: '16px',
cursor: 'pointer'
})
.bind({
click: function(e) {
clickIcon(e);
},
dblclick: function(e) {
clickIcon(e, true);
}
})
.appendTo($iconPanel);
var $list = Ox.IconList({ renderQuarters();
$list = Ox.IconList({
borderRadius: 16, borderRadius: 16,
item: function(data, sort) { item: function(data, sort) {
var size = 128; var size = 128;
@ -118,51 +251,81 @@ pandora.ui.listIconPanel = function(list) {
//Ox.print('data, pandora.Query.toObject', data, pandora.Query.toObject()) //Ox.print('data, pandora.Query.toObject', data, pandora.Query.toObject())
pandora.api.find(Ox.extend(data, { pandora.api.find(Ox.extend(data, {
query: { query: {
conditions: [{key: 'list', value: list.id, operator: '='}], conditions: [{key: 'list', value: listData.id, operator: '='}],
operator: '&' operator: '&'
} }
}), callback); }), callback);
}, },
keys: ['director', 'duration', 'id', 'title', 'videoRatio', 'year'], keys: ['director', 'duration', 'id', 'posterFrame', 'title', 'videoRatio', 'year'],
max: 1, max: 1,
min: 1, min: 1,
orientation: 'vertical', //orientation: 'vertical',
selected: posterFrame ? [posterFrame.item] : [],
size: 128, size: 128,
sort: pandora.user.ui.listSort, sort: pandora.user.ui.listSort,
unique: 'id' unique: 'id'
}) })
.css({width: '144px'}) //.css({width: '144px'})
.bindEvent({ .bindEvent({
open: function(data) {
setPosterFrame(data.ids[0], $list.value(data.ids[0], 'posterFrame'))
},
select: function(data) { select: function(data) {
var value = $list.value(data.ids[0]); renderPreview($list.value(data.ids[0]));
//frameCSS['border-' + quarter + '-radius'] = '120px';
Ox.print("$$$", value)
$preview.empty().append(
pandora.ui.videoPreview({
duration: value.duration,
frameRatio: value.videoRatio,
height: 256,
id: value.id,
width: 240
})
.css({margin: '16px', overflow: 'hidden'})
);
} }
}) })
.bindEventOnce({
load: function() {
var itemData;
if (!posterFrame) {
itemData = $list.value(0);
$list.options({selected: [itemData.id]});
} else {
itemData = $list.value(posterFrame.item);
}
renderPreview(itemData);
}
})
.gainFocus();
var $preview = Ox.Element() that.replaceElement(2, $list);
.css({width: '256px', height: '256px'});
function clickIcon(e, isDoubleClick) {
quarter = quarters.indexOf($(e.target).attr('id'));
renderQuarters(); renderQuarters();
if (isDoubleClick) {
var item = posterFrames[quarter].item;
$list.options({selected: [item]});
renderPreview($list.value(item), posterFrames[quarter].position);
}
}
function renderFrame() { function renderPreview(itemData, position) {
$frame.css({borderRadius: 0}); $preview = pandora.ui.videoPreview({
$frame.css('border-' + quarter + '-radius', '128px'); duration: itemData.duration,
frameRatio: itemData.videoRatio,
height: 256,
id: itemData.id,
position: position,
width: 256
})
.css({marginLeft: '8px', marginTop: '16px', overflow: 'hidden'})
.bindEvent({
click: function(data) {
setPosterFrame(itemData.id, data.position);
}
});
/*
// fixme: need canvas for this
$($preview.children('.OxFrame')[0])
.css('border-' + quarter + '-radius', '128px');
*/
$previewPanel.empty().append($preview);
} }
function renderQuarters() { function renderQuarters() {
$interface.empty(); $interface.empty();
['top-left', 'top-right', 'bottom-left', 'bottom-right'].forEach(function(q) { quarters.forEach(function(q, i) {
$interface.append( $interface.append(
$('<div>') $('<div>')
.attr({id: q}) .attr({id: q})
@ -170,75 +333,38 @@ pandora.ui.listIconPanel = function(list) {
float: 'left', float: 'left',
width: '126px', width: '126px',
height: '126px', height: '126px',
border: '1px solid rgba(255, 255, 255, ' + (q == quarter ? 0.75 : 0) + ')', border: '1px solid rgba(255, 255, 255, ' + (i == quarter ? 0.75 : 0) + ')',
background: 'rgba(0, 0, 0, ' + (q == quarter ? 0 : 0.75) + ')' background: 'rgba(0, 0, 0, ' + (i == quarter ? 0 : 0.75) + ')'
}) })
.css('border-' + q + '-radius', '64px') .css('border-' + q + '-radius', '64px')
); );
}); });
} }
var that = Ox.SplitPanel({ function setPosterFrame(item, position) {
elements: [ var posterFrame = {item: item, position: position};
{ if (posterFrames.length) {
element: Ox.Element({}).append( posterFrames[quarter] = posterFrame;
$('<img>').css({position: 'absolute', margin: '16px'}).attr({src: '/static/png/icon256.png'}) } else {
).append( posterFrames = Ox.repeat([posterFrame], 4);
$interface }
), pandora.api.editList({
size: 288 id: listData.id,
}, posterFrames: posterFrames
{ }, function() {
element: Ox.SplitPanel({ $icon.attr({src: '/list/' + listData.id + '/icon256.jpg?' + Ox.uid()});
elements: [ });
{ $preview.options({position: position});
element: Ox.Bar({size: 24}).append( }
Ox.FormElementGroup({
elements: [
pandora.$ui.findIconItemSelect = Ox.Select({
items: pandora.site.findKeys,
overlap: 'right',
type: 'image'
})
.bindEvent({
change: function(data) {
} });
}),
pandora.$ui.findIconItemInput = Ox.Input({
changeOnKeypress: true,
clear: true,
placeholder: 'Find: Foo',
width: 120
})
.bindEvent({
change: function(data) {
function renderFrame() {
$frame.css({borderRadius: 0});
$frame.css('border-' + quarters[quarter] + '-radius', '128px');
} }
})
],
})
.css({
float: 'right',
margin: '4px',
align: 'right'
})
),
size: 24
},
{
element: $list
}
],
orientation: 'vertical'
})
},
{
element: $preview,
size: 272
}
],
orientation: 'horizontal'
})
return that; return that;
} }

View file

@ -203,6 +203,16 @@ pandora.ui.mainMenu = function() {
'signup', 'signin', 'signout', 'preferences', 'help' 'signup', 'signin', 'signout', 'preferences', 'help'
].indexOf(data.id) > -1) { ].indexOf(data.id) > -1) {
pandora.URL.push('/' + data.id); pandora.URL.push('/' + data.id);
} else if ([
'newlist', 'newlistfromselection', 'newsmartlist', 'newsmartlistfromresults'
].indexOf(data.id) > -1) {
pandora.addList(data.id.indexOf('smart') > -1, data.id.indexOf('from') > -1);
} else if (data.id == 'duplicatelist') {
pandora.addList(pandora.user.ui._list);
} else if (data.id == 'editlist') {
pandora.ui.listDialog().open();
} else if (data.id == 'deletelist') {
pandora.ui.deleteListDialog().open();
} else if (data.id == 'stills') { } else if (data.id == 'stills') {
var id = pandora.user.ui.item || pandora.user.ui.listItem; var id = pandora.user.ui.item || pandora.user.ui.listItem;
pandora.$ui.postersDialog = pandora.ui.framesDialog(id).open(); pandora.$ui.postersDialog = pandora.ui.framesDialog(id).open();
@ -230,7 +240,19 @@ pandora.ui.mainMenu = function() {
Ox.Request.clearCache(); Ox.Request.clearCache();
} }
}, },
pandora_listView: function(data) { pandora_find: function() {
var action = ui._list
&& pandora.getListData(ui._list).user == pandora.user.username
? 'enableItem' : 'disableItem';
that[action]('editlist');
that[action]('duplicatelist');
that[action]('deletelist');
that[pandora.user.ui.listSelection.length ? 'enableItem' : 'disableItem']('newlistfromselection');
},
pandora_listselection: function(data) {
that[data.value.length ? 'enableItem' : 'disableItem']('newlistfromselection');
},
pandora_listview: function(data) {
if (pandora.isClipView() != pandora.isClipView(data.previousValue)) { if (pandora.isClipView() != pandora.isClipView(data.previousValue)) {
that.replaceMenu('sortMenu', getSortMenu()); that.replaceMenu('sortMenu', getSortMenu());
} }
@ -259,15 +281,14 @@ pandora.ui.mainMenu = function() {
}), }),
[ [
{}, {},
{ id: 'newlist', title: 'New List...', keyboard: 'control n' }, { id: 'newlist', title: 'New List', keyboard: 'control n' },
{ id: 'newlistfromselection', title: 'New List from Selection...', disabled: true, keyboard: 'shift control n' }, { id: 'newlistfromselection', title: 'New List from Selection', disabled: ui.listSelection.length == 0, keyboard: 'shift control n' },
{ id: 'newsmartlist', title: 'New Smart List...', keyboard: 'alt control n' }, { id: 'newsmartlist', title: 'New Smart List', keyboard: 'alt control n' },
{ id: 'newsmartlistfromresults', title: 'New Smart List from Results...', keyboard: 'shift alt control n' }, { id: 'newsmartlistfromresults', title: 'New Smart List from Results', keyboard: 'shift alt control n' },
{ id: 'duplicatelist', title: 'Duplicate Selected List', keyboard: 'control d' },
{}, {},
{ id: 'addmovietolist', title: ['Add Selected ' + pandora.site.itemName.singular + ' to List...', 'Add Selected ' + pandora.site.itemName.plural + ' to List...'], disabled: true }, { id: 'duplicatelist', title: 'Duplicate Selected List', disabled: !pandora.user.ui._list, keyboard: 'control d' },
{}, { id: 'editlist', title: 'Edit Selected List...', disabled: !pandora.user.ui._list, keyboard: 'control e' },
{ id: 'setposterframe', title: 'Set Poster Frame', disabled: true } { id: 'deletelist', title: 'Delete Selected List...', disabled: !pandora.user.ui._list, keyboard: 'delete' },
] ]
)}; )};
}; };

View file

@ -14,29 +14,10 @@ pandora.ui.videoPreview = function(data) {
frameCSS: data.frameCSS, frameCSS: data.frameCSS,
frameRatio: data.frameRatio, frameRatio: data.frameRatio,
height: data.height, height: data.height,
position: data.position,
scaleToFill: true, scaleToFill: true,
timeline: '/' + data.id + '/timeline16p.png', timeline: '/' + data.id + '/timeline16p.png',
width: data.width width: data.width
})
.bindEvent({
click: function(event) {
pandora.UI.set(
'videoPoints.' + data.id,
{'in': 0, out: 0, position: event.position}
);
if (pandora.user.ui.item && ['video', 'timeline'].indexOf(pandora.user.ui.itemView) > -1) {
pandora.$ui[
pandora.user.ui.itemView == 'video' ? 'player' : 'editor'
].options({
position: event.position
});
} else {
pandora.UI.set({
item: data.id,
itemView: pandora.user.ui.videoView
});
}
}
}); });
return that; return that;
}; };

View file

@ -1,5 +1,139 @@
// vim: et:ts=4:sw=4:sts=4:ft=javascript // vim: et:ts=4:sw=4:sts=4:ft=javascript
pandora.addList = function() {
// addList(isSmart, isFrom) or addList(list) [=duplicate]
var $folderList = pandora.$ui.folderList.personal,
isDuplicate = arguments.length == 1,
isSmart, isFrom, list, listData, data;
if (!isDuplicate) {
isSmart = arguments[0];
isFrom = arguments[1];
data = {
name: 'Untitled',
status: 'private',
type: !isSmart ? 'static' : 'smart'
};
if (isFrom) {
if (!isSmart) {
data.items = pandora.user.ui.listSelection;
} else {
data.query = pandora.user.ui.find;
}
}
} else {
list = arguments[0];
listData = pandora.getListData();
data = {
name: listData.name,
status: listData.status,
type: listData.type
};
if (data.type == 'smart') {
data.query = listData.query;
}
}
if (isDuplicate && listData.type == 'static') {
var query = {
conditions: [{key: 'list', value: list, operator: '=='}],
operator: '&'
};
pandora.api.find({
query: query
}, function(result) {
if (result.data.items) {
pandora.api.find({
query: query,
keys: ['id'],
sort: [{key: 'id', operator: ''}]
}, function(result) {
var items = result.data.items.map(function(item) {
return item.id;
});
addList(items);
})
} else {
addList();
}
})
} else {
addList();
}
function addList(items) {
pandora.api.addList(data, function(result) {
var newList = result.data.id;
if (items) {
pandora.api.addListItems({
list: newList,
items: items
}, function() {
getPosterFrames(newList);
})
} else {
getPosterFrames(newList);
}
});
}
function getPosterFrames(newList) {
if (!isDuplicate) {
pandora.api.find({
query: {
conditions: [{key: 'list', value: newList, operator: '=='}],
operator: '&'
},
keys: ['id', 'posterFrame'],
sort: [{key: 'votes', operator: ''}], // fixme: may not always exist
range: [0, 4]
}, function(result) {
var posterFrames = result.data.items.map(function(item) {
return {item: item.id, position: item.posterFrame};
});
posterFrames = posterFrames.length == 1
? Ox.repeat([posterFrames[0]], 4)
: posterFrames.length == 2
? [posterFrames[0], posterFrames[1], posterFrames[1], posterFrames[0]]
: posterFrames.length == 3
? [posterFrames[0], posterFrames[1], posterFrames[2], posterFrames[0]]
: posterFrames;
setPosterFrames(newList, posterFrames);
})
} else {
pandora.api.findLists({
query: {
conditions: [{key: 'id', value: list, operator: '=='}],
operator: '&'
},
keys: ['posterFrames']
}, function(result) {
setPosterFrames(newList, result.data.items[0].posterFrames);
});
}
}
function setPosterFrames(newList, posterFrames) {
pandora.api.editList({
id: newList,
posterFrames: posterFrames
}, function() {
reloadFolder(newList);
});
}
function reloadFolder(newList) {
Ox.Request.clearCache('findLists');
$folderList.bindEventOnce({
load: function(data) {
$folderList.gainFocus()
.options({selected: [list]})
.editCell(newList, 'name');
pandora.UI.set({
find: {
conditions: [{key: 'list', value: newList, operator: '=='}],
operator: '&'
}
});
}
}).reloadList();
}
};
pandora.enableDragAndDrop = function($list, canMove) { pandora.enableDragAndDrop = function($list, canMove) {
var $tooltip = Ox.Tooltip({ var $tooltip = Ox.Tooltip({
@ -482,6 +616,7 @@ pandora.signin = function(data) {
pandora.user = data.user; pandora.user = data.user;
pandora.Query.updateGroups(); pandora.Query.updateGroups();
Ox.Theme(pandora.user.ui.theme); Ox.Theme(pandora.user.ui.theme);
pandora.UI.set({find: pandora.user.ui.find})
pandora.$ui.appPanel.reload(); pandora.$ui.appPanel.reload();
}; };
@ -489,6 +624,7 @@ pandora.signout = function(data) {
pandora.user = data.user; pandora.user = data.user;
pandora.Query.updateGroups(); pandora.Query.updateGroups();
Ox.Theme(pandora.site.user.ui.theme); Ox.Theme(pandora.site.user.ui.theme);
pandora.UI.set({find: pandora.user.ui.find})
pandora.$ui.appPanel.reload(); pandora.$ui.appPanel.reload();
}; };

View file

@ -1,51 +1,52 @@
[ [
"js/pandora/pandora.js",
"js/pandora/URL.js",
"js/pandora/Query.js", "js/pandora/Query.js",
"js/pandora/autovalidate.js",
"js/pandora/UI.js", "js/pandora/UI.js",
"js/pandora/ui/info.js", "js/pandora/URL.js",
"js/pandora/ui/rightPanel.js", "js/pandora/autovalidate.js",
"js/pandora/ui/folderBrowserList.js", "js/pandora/utils.js",
"js/pandora/ui/homePage.js",
"js/pandora/ui/group.js",
"js/pandora/ui/toolbar.js",
"js/pandora/ui/statusbar.js",
"js/pandora/ui/sectionButtons.js",
"js/pandora/ui/item.js",
"js/pandora/ui/folderBrowser.js",
"js/pandora/ui/publicLists.js",
"js/pandora/ui/filter.js",
"js/pandora/ui/status.js",
"js/pandora/ui/sectionbar.js",
"js/pandora/ui/folders.js",
"js/pandora/ui/mainPanel.js",
"js/pandora/ui/viewSelect.js",
"js/pandora/ui/sortSelect.js",
"js/pandora/ui/orderButton.js",
"js/pandora/ui/menu.js",
"js/pandora/ui/Ox.FilesView.js", "js/pandora/ui/Ox.FilesView.js",
"js/pandora/ui/browser.js",
"js/pandora/ui/list.js",
"js/pandora/ui/folderList.js",
"js/pandora/ui/findElement.js",
"js/pandora/ui/filterDialog.js",
"js/pandora/ui/account.js", "js/pandora/ui/account.js",
"js/pandora/ui/folderBrowserBar.js",
"js/pandora/ui/sectionSelect.js",
"js/pandora/ui/placesDialog.js",
"js/pandora/ui/contentPanel.js",
"js/pandora/ui/backButton.js",
"js/pandora/ui/leftPanel.js",
"js/pandora/ui/appPanel.js", "js/pandora/ui/appPanel.js",
"js/pandora/ui/videoPreview.js", "js/pandora/ui/backButton.js",
"js/pandora/ui/browser.js",
"js/pandora/ui/contentPanel.js",
"js/pandora/ui/deleteListDialog.js",
"js/pandora/ui/editor.js", "js/pandora/ui/editor.js",
"js/pandora/ui/infoView.js",
"js/pandora/ui/mediaView.js",
"js/pandora/ui/home.js",
"js/pandora/ui/preferencesDialog.js",
"js/pandora/ui/listDialog.js",
"js/pandora/ui/siteDialog.js",
"js/pandora/ui/eventsDialog.js", "js/pandora/ui/eventsDialog.js",
"js/pandora/ui/usersDialog.js" "js/pandora/ui/filter.js",
"js/pandora/ui/filterDialog.js",
"js/pandora/ui/findElement.js",
"js/pandora/ui/folderBrowser.js",
"js/pandora/ui/folderBrowserBar.js",
"js/pandora/ui/folderBrowserList.js",
"js/pandora/ui/folderList.js",
"js/pandora/ui/folders.js",
"js/pandora/ui/group.js",
"js/pandora/ui/home.js",
"js/pandora/ui/homePage.js",
"js/pandora/ui/info.js",
"js/pandora/ui/infoView.js",
"js/pandora/ui/item.js",
"js/pandora/ui/leftPanel.js",
"js/pandora/ui/list.js",
"js/pandora/ui/listDialog.js",
"js/pandora/ui/mainPanel.js",
"js/pandora/ui/mediaView.js",
"js/pandora/ui/menu.js",
"js/pandora/ui/orderButton.js",
"js/pandora/ui/placesDialog.js",
"js/pandora/ui/preferencesDialog.js",
"js/pandora/ui/publicLists.js",
"js/pandora/ui/rightPanel.js",
"js/pandora/ui/sectionButtons.js",
"js/pandora/ui/sectionSelect.js",
"js/pandora/ui/sectionbar.js",
"js/pandora/ui/siteDialog.js",
"js/pandora/ui/sortSelect.js",
"js/pandora/ui/status.js",
"js/pandora/ui/statusbar.js",
"js/pandora/ui/toolbar.js",
"js/pandora/ui/usersDialog.js",
"js/pandora/ui/videoPreview.js",
"js/pandora/ui/viewSelect.js"
] ]

BIN
static/png/list256.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 270 B