353 lines
9.6 KiB
JavaScript
353 lines
9.6 KiB
JavaScript
'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.$menu = Ox.MenuButton({
|
|
items: [
|
|
{group: 'view', min: 1, max: 1, items: [
|
|
{id: 'list', title: Ox._('View as List'), checked: self.options.view == 'list'},
|
|
{id: 'grid', title: Ox._('View as Grid'), checked: self.options.view == 'grid'},
|
|
]},
|
|
{},
|
|
{id: 'split', title: 'Split Clip(s) at Cuts', disabled: true},
|
|
{id: 'join', title: 'Join Clip(s) at Cuts', disabled: true},
|
|
{id: 'dereference', title: 'Make Clip(s) Static', disabled: true}
|
|
],
|
|
title: 'set',
|
|
tooltip: Ox._('Options'),
|
|
type: 'image'
|
|
})
|
|
.css({
|
|
float: 'left',
|
|
margin: '4px 2px 4px 4px'
|
|
})
|
|
.bindEvent({
|
|
change: function(data) {
|
|
if (data.id == 'view') {
|
|
that.replaceElement(1, self.$list = getList());
|
|
that.triggerEvent('view', {view: data.checked[0].id});
|
|
}
|
|
},
|
|
click: function(data) {
|
|
|
|
}
|
|
})
|
|
.appendTo(self.$menubar),
|
|
|
|
self.$sortSelect = Ox.Select({
|
|
items: self.options.sortOptions,
|
|
value: self.options.sort[0].key,
|
|
width: 100 + 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);
|
|
|
|
self.$list = getList();
|
|
|
|
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 getList() {
|
|
var $list = self.options.view == '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: isSortable(),
|
|
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) {
|
|
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;
|
|
|
|
};
|