forked from 0x2620/pandora
minimal edits with a sortable list interface and 'add selected item/in/out support'
This commit is contained in:
parent
27877df0cd
commit
cfdaaa4464
17 changed files with 1363 additions and 120 deletions
200
static/js/pandora/editPanel.js
Normal file
200
static/js/pandora/editPanel.js
Normal file
|
|
@ -0,0 +1,200 @@
|
|||
'use strict';
|
||||
|
||||
pandora.ui.editPanel = function() {
|
||||
|
||||
var that = Ox.SplitPanel({
|
||||
elements: [
|
||||
{element: Ox.Element(), size: 24},
|
||||
{element: Ox.Element()},
|
||||
{element: Ox.Element(), size: 16}
|
||||
],
|
||||
orientation: 'vertical'
|
||||
});
|
||||
|
||||
pandora.user.ui.edit && render();
|
||||
|
||||
function render() {
|
||||
pandora.api.getEdit({id: pandora.user.ui.edit}, function(result) {
|
||||
|
||||
var edit = result.data;
|
||||
|
||||
var $toolbar = Ox.Bar({size: 24}),
|
||||
|
||||
$editMenu,
|
||||
|
||||
|
||||
$statusbar = Ox.Bar({size: 16}),
|
||||
|
||||
$panel = Ox.SplitPanel({
|
||||
elements: [
|
||||
{
|
||||
element: pandora.$ui.edit = pandora.ui.editList(edit)
|
||||
},
|
||||
{
|
||||
element: Ox.Element(),
|
||||
size: 0,
|
||||
resizable: false
|
||||
}
|
||||
],
|
||||
orientation: 'horizontal'
|
||||
});
|
||||
|
||||
that.replaceElement(0, $toolbar);
|
||||
that.replaceElement(1, $panel);
|
||||
that.replaceElement(2, $statusbar);
|
||||
});
|
||||
}
|
||||
|
||||
that.reload = function() {
|
||||
render();
|
||||
}
|
||||
|
||||
return that;
|
||||
|
||||
};
|
||||
|
||||
pandora.ui.editList = function(edit) {
|
||||
|
||||
var height = getHeight(),
|
||||
width = getWidth(),
|
||||
|
||||
that = Ox.Element()
|
||||
.css({
|
||||
'overflow-y': 'auto'
|
||||
});
|
||||
|
||||
self.$list = Ox.TableList({
|
||||
columns: [
|
||||
{
|
||||
align: 'left',
|
||||
id: 'index',
|
||||
operator: '+',
|
||||
title: Ox._('Index'),
|
||||
visible: false,
|
||||
width: 60
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
id: 'id',
|
||||
operator: '+',
|
||||
title: Ox._('ID'),
|
||||
visible: false,
|
||||
width: 60
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
id: 'item',
|
||||
operator: '+',
|
||||
title: Ox._(pandora.site.itemName.singular),
|
||||
visible: true,
|
||||
width: 360
|
||||
},
|
||||
{
|
||||
editable: true,
|
||||
id: 'in',
|
||||
operator: '+',
|
||||
title: Ox._('In'),
|
||||
visible: true,
|
||||
width: 60
|
||||
},
|
||||
{
|
||||
editable: true,
|
||||
id: 'out',
|
||||
operator: '+',
|
||||
title: Ox._('Out'),
|
||||
visible: true,
|
||||
width: 60
|
||||
},
|
||||
{
|
||||
id: 'duration',
|
||||
operator: '+',
|
||||
title: Ox._('Duration'),
|
||||
visible: true,
|
||||
width: 60
|
||||
}
|
||||
],
|
||||
columnsMovable: true,
|
||||
columnsRemovable: true,
|
||||
columnsResizable: true,
|
||||
columnsVisible: true,
|
||||
items: edit.clips,
|
||||
scrollbarVisible: true,
|
||||
sort: [{key: 'index', operator: '+'}],
|
||||
sortable: true,
|
||||
unique: 'id'
|
||||
})
|
||||
.appendTo(that)
|
||||
.bindEvent({
|
||||
add: function(data) {
|
||||
if(pandora.user.ui.item) {
|
||||
pandora.api.addClip({
|
||||
edit: pandora.user.ui.edit,
|
||||
item: pandora.user.ui.item,
|
||||
'in': pandora.user.ui.videoPoints[pandora.user.ui.item]['in'],
|
||||
out: pandora.user.ui.videoPoints[pandora.user.ui.item].out,
|
||||
}, function(result) {
|
||||
Ox.Request.clearCache();
|
||||
pandora.$ui.rightPanel.reload()
|
||||
});
|
||||
}
|
||||
},
|
||||
'delete': function(data) {
|
||||
if (data.ids.length > 0 && edit.editable) {
|
||||
pandora.api.removeClip({
|
||||
ids: data.ids,
|
||||
edit: pandora.user.ui.edit
|
||||
}, function(result) {
|
||||
Ox.Request.clearCache();
|
||||
pandora.$ui.rightPanel.reload()
|
||||
});
|
||||
}
|
||||
},
|
||||
move: function(data) {
|
||||
Ox.Request.clearCache();
|
||||
pandora.api.sortClips({
|
||||
edit: pandora.user.ui.edit,
|
||||
ids: data.ids
|
||||
})
|
||||
},
|
||||
select: function(data) {
|
||||
},
|
||||
submit: function(data) {
|
||||
var value = self.$list.value(data.id, data.key);
|
||||
if (data.value != value && !(data.value === '' && value === null)) {
|
||||
self.$list.value(data.id, data.key, data.value || null);
|
||||
var edit = {
|
||||
id: data.id,
|
||||
};
|
||||
edit[data.key] = parseFloat(data.value);
|
||||
pandora.api.editClip(edit, function(result) {
|
||||
self.$list.value(data.id, data.key, result.data[data.key]);
|
||||
self.$list.value(data.id, 'duration', result.data.duration);
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
function getHeight() {
|
||||
// 24 menu + 24 toolbar + 16 statusbar + 32 title + 32 margins
|
||||
// + 1px to ge trid of scrollbar
|
||||
return window.innerHeight - 128 -1;
|
||||
}
|
||||
|
||||
function getWidth() {
|
||||
return window.innerWidth
|
||||
- pandora.user.ui.showSidebar * pandora.user.ui.sidebarSize - 1
|
||||
- pandora.user.ui.embedSize - 1
|
||||
- 32;
|
||||
}
|
||||
|
||||
that.update = function() {
|
||||
$text.options({
|
||||
maxHeight: getHeight(),
|
||||
width: getWidth()
|
||||
});
|
||||
return that;
|
||||
};
|
||||
|
||||
return that;
|
||||
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue