sanj/oxjs
1
0
Fork 0
forked from 0x2620/oxjs
Code Pull requests Activity

add VideoEditPanel, ClipPanel

Browse source
This commit is contained in:
j 2013-07-13 23:07:25 +00:00
commit 72f1b47e1c
2 changed files with 695 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

297
source/Ox.UI/js/Video/ClipPanel.js Normal file
View file

@ -0,0 +1,297 @@
'use strict';
Ox.ClipPanel = function(options, self) {
self = self || {};
var that = Ox.Element({}, self)
.defaults({
clips: [],
editable: false,
'in': 0,
out: 0,
position: 0,
selected: '',
sort: [],
sortOptions: [],
view: 'list',
width: 0
})
.options(options || {})
.update({
clips: function() {
self.$list.options({items: self.options.clips});
}
});
self.$menubar = Ox.Bar({
size: 24
})
.bindEvent({
doubleclick: function(e) {
if ($(e.target).is('.OxBar')) {
self.$list.animate({scrollTop: 0}, 250);
}
}
});
self.$viewElement = Ox.ButtonGroup({
buttons: [
{id: 'list', title: 'list', tooltip: Ox._('View as List')},
{id: 'grid', title: 'grid', tooltip: Ox._('View as Grid')}
],
selectable: true,
type: 'image',
value: self.options.view
})
.css({
float: 'left',
margin: '4px 2px 4px 4px'
})
.bindEvent({
change: function(data) {
Ox.print(data);
}
})
.appendTo(self.$menubar);
self.$sortSelect = Ox.Select({
items: self.options.sortOptions,
value: self.options.sort[0].key,
width: 84 + Ox.UI.SCROLLBAR_SIZE
})
.bindEvent({
change: function(data) {
that.triggerEvent('sort', {
key: data.value,
operator: Ox.getObjectById(
self.options.sortOptions, data.value
).operator
});
}
});
self.$orderButton = Ox.Button({
overlap: 'left',
title: getButtonTitle(),
tooltip: getButtonTooltip(),
type: 'image'
})
.bindEvent({
click: function() {
that.triggerEvent('sort', {
key: self.options.sort[0].key,
operator: self.options.sort[0].operator == '+' ? '-' : '+'
});
}
});
self.$sortElement = Ox.FormElementGroup({
elements: [self.$sortSelect, self.$orderButton],
float: 'right'
})
.css({
float: 'right',
margin: '4px 4px 4px 2px'
})
.appendTo(self.$menubar);
if (self.options.view == 'list') {
self.$list = Ox.TableList({
columns: [
{
align: 'right',
id: 'index',
operator: '+',
title: Ox._('Index'),
visible: false,
width: 60
},
{
id: 'id',
operator: '+',
title: Ox._('ID'),
unique: true,
visible: false,
width: 60
},
{
id: 'item',
operator: '+',
title: Ox._(pandora.site.itemName.singular),
visible: true,
width: 60
},
{
align: 'right',
editable: isEditable,
format: function(value) {
return Ox.formatDuration(value, 3);
},
id: 'in',
operator: '+',
title: Ox._('In'),
visible: true,
width: 90
},
{
align: 'right',
editable: isEditable,
format: function(value) {
return Ox.formatDuration(value, 3);
},
id: 'out',
operator: '+',
title: Ox._('Out'),
visible: true,
width: 90
},
{
align: 'right',
editable: isEditable,
format: function(value) {
return Ox.formatDuration(value, 3);
},
id: 'duration',
operator: '+',
title: Ox._('Duration'),
visible: true,
width: 90
}
],
columnsMovable: true,
columnsRemovable: true,
columnsResizable: true,
columnsVisible: true,
items: self.options.clips,
scrollbarVisible: true,
sort: self.options.sort,
sortable: self.options.editable && self.options.sort[0].key == 'index',
unique: 'id'
});
} else {
self.$list = Ox.IconList({
});
}
self.$list.bindEvent({
copy: function(data) {
that.triggerEvent('copy', data);
},
cut: function(data) {
that.triggerEvent('cut', data);
},
'delete': function(data) {
that.triggerEvent('remove', data);
},
move: function(data) {
data.ids.forEach(function(id, index) {
Ox.print('????', id, index);
self.$list.value(id, 'index', index);
});
that.triggerEvent('move', data);
},
open: function(data) {
that.triggerEvent('open', data);
},
paste: function() {
that.triggerEvent('paste');
},
select: function(data) {
that.triggerEvent('select', data);
},
sort: function(data) {
self.options.sort = self.$list.options('sort');
self.$list.options({sortable: isSortable()});
that.triggerEvent('sort', data);
},
submit: function(data) {
data.value = Ox.parseDuration(data.value);
self.$list.value(data.id, data.key, data.value);
that.triggerEvent('edit', data);
}
});
self.$statusbar = Ox.Bar({
size: 16
});
that.setElement(
Ox.SplitPanel({
elements: [
{
element: self.$menubar,
size: 24
},
{
element: self.$list
},
{
element: self.$statusbar,
size: 16
}
],
orientation: 'vertical'
})
);
function cutClips() {
}
function editClip(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);
that.triggerEvent('edit', data);
}
}
function getButtonTitle() {
return self.options.sort[0].operator == '+' ? 'up' : 'down';
}
function getButtonTooltip() {
return Ox._(self.options.sort[0].operator == '+' ? 'Ascending' : 'Descending');
}
function isEditable(data) {
return self.options.editable && !data.annotation;
}
function isSortable() {
return self.options.editable && self.options.sort[0].key == 'index';
}
function moveClips(data) {
Ox.Request.clearCache();
pandora.api.sortClips({
edit: pandora.user.ui.edit,
ids: data.ids
})
}
function openClips(data) {
}
function pasteClips() {
}
function removeClips() {
}
function updateSortElement() {
}
that.updateItem = function(id, data) {
['in', 'out', 'duration'].forEach(function(key) {
self.$list.value(id, key, data[key]);
});
};
return that;
};