edit sort
This commit is contained in:
parent
687fa24c53
commit
a85a38d60c
2 changed files with 122 additions and 86 deletions
|
@ -10,6 +10,7 @@ Ox.ClipPanel = function(options, self) {
|
|||
annotationsMapSize: 256,
|
||||
annotationsRange: 'all',
|
||||
annotationsSort: 'position',
|
||||
clipRatio: 16/9,
|
||||
clips: [],
|
||||
clickLink: null,
|
||||
duration: 0,
|
||||
|
@ -34,7 +35,7 @@ Ox.ClipPanel = function(options, self) {
|
|||
clips: function() {
|
||||
self.$list.options({
|
||||
items: self.options.clips,
|
||||
sort: self.options.sort,
|
||||
sort: getListSort(),
|
||||
sortable: isSortable()
|
||||
});
|
||||
updateStatus();
|
||||
|
@ -54,17 +55,97 @@ Ox.ClipPanel = function(options, self) {
|
|||
sort: function() {
|
||||
updateSortElement();
|
||||
self.$list.options({
|
||||
sort: self.options.sort,
|
||||
sort: getListSort(),
|
||||
sortable: isSortable(),
|
||||
});
|
||||
}
|
||||
})
|
||||
.bindEvent({
|
||||
resize: function() {
|
||||
resize: function(data) {
|
||||
self.$sortSelect.options({width: getSortSelectWidth(data.size)});
|
||||
self.$list.size();
|
||||
}
|
||||
});
|
||||
|
||||
self.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, data) {
|
||||
return (
|
||||
isEditable(data) ? ['', '']
|
||||
: ['<span class="OxLight">', '</span>']
|
||||
).join(Ox.formatDuration(value, 3));
|
||||
},
|
||||
id: 'in',
|
||||
operator: '+',
|
||||
title: Ox._('In'),
|
||||
visible: true,
|
||||
width: 90
|
||||
},
|
||||
{
|
||||
align: 'right',
|
||||
editable: isEditable,
|
||||
format: function(value, data) {
|
||||
return (
|
||||
isEditable(data) ? ['', '']
|
||||
: ['<span class="OxLight">', '</span>']
|
||||
).join(Ox.formatDuration(value, 3));
|
||||
},
|
||||
id: 'out',
|
||||
operator: '+',
|
||||
title: Ox._('Out'),
|
||||
visible: true,
|
||||
width: 90
|
||||
},
|
||||
{
|
||||
align: 'right',
|
||||
editable: isEditable,
|
||||
format: function(value, data) {
|
||||
return (
|
||||
isEditable(data) ? ['', '']
|
||||
: ['<span class="OxLight">', '</span>']
|
||||
).join(Ox.formatDuration(value, 3));
|
||||
},
|
||||
id: 'duration',
|
||||
operator: '+',
|
||||
title: Ox._('Duration'),
|
||||
visible: true,
|
||||
width: 90
|
||||
},
|
||||
{
|
||||
align: 'right',
|
||||
id: 'sort',
|
||||
operator: '+',
|
||||
title: Ox._('Sort'),
|
||||
visible: false,
|
||||
width: 60
|
||||
}
|
||||
];
|
||||
|
||||
self.$menubar = Ox.Bar({
|
||||
size: 24
|
||||
})
|
||||
|
@ -84,9 +165,9 @@ Ox.ClipPanel = function(options, self) {
|
|||
{id: 'annotations', title: Ox._('View Annotations'), checked: self.options.view == 'annotations'},
|
||||
]},
|
||||
{},
|
||||
{id: 'split', title: Ox._('Split Selected Clips at Cuts'), disabled: !self.options.editable || !self.options.selected.length},
|
||||
{id: 'join', title: Ox._('Join Selected Clips at Cuts'), disabled: !self.options.editable || !self.options.selected.length},
|
||||
{id: 'replace', title: Ox._('Make Selected Clips Editable'), disabled: !self.options.editable || !self.options.selected.length}
|
||||
{id: 'split', title: Ox._('Split Selected Clips at Cuts'), disabled: !self.options.editable || !self.options.selected.length || self.options.view == 'annotations'},
|
||||
{id: 'join', title: Ox._('Join Selected Clips at Cuts'), disabled: !self.options.editable || !self.options.selected.length || self.options.view == 'annotations'},
|
||||
{id: 'replace', title: Ox._('Make Selected Clips Editable'), disabled: !self.options.editable || !self.options.selected.length || self.options.view == 'annotations'}
|
||||
],
|
||||
title: 'set',
|
||||
tooltip: Ox._('Options'),
|
||||
|
@ -99,7 +180,14 @@ Ox.ClipPanel = function(options, self) {
|
|||
.bindEvent({
|
||||
change: function(data) {
|
||||
if (data.id == 'view') {
|
||||
var action = self.options.editable
|
||||
&& self.options.selected.length
|
||||
&& self.options.view != 'annotations'
|
||||
? 'enableItem' : 'disableItem';
|
||||
self.options.view = data.checked[0].id;
|
||||
self.$menu[action]('split');
|
||||
self.$menu[action]('join');
|
||||
self.$menu[action]('replace');
|
||||
self.$panel.replaceElement(1, self.$list = getList());
|
||||
that.triggerEvent('view', {view: self.options.view});
|
||||
}
|
||||
|
@ -117,7 +205,7 @@ Ox.ClipPanel = function(options, self) {
|
|||
self.$sortSelect = Ox.Select({
|
||||
items: self.options.sortOptions,
|
||||
value: self.options.sort[0].key,
|
||||
width: 100 + Ox.UI.SCROLLBAR_SIZE
|
||||
width: getSortSelectWidth(self.options.width)
|
||||
})
|
||||
.bindEvent({
|
||||
change: function(data) {
|
||||
|
@ -248,76 +336,7 @@ Ox.ClipPanel = function(options, self) {
|
|||
return $list;
|
||||
} else if (self.options.view == 'list') {
|
||||
$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, data) {
|
||||
return (
|
||||
isEditable(data) ? ['', '']
|
||||
: ['<span class="OxLight">', '</span>']
|
||||
).join(Ox.formatDuration(value, 3));
|
||||
},
|
||||
id: 'in',
|
||||
operator: '+',
|
||||
title: Ox._('In'),
|
||||
visible: true,
|
||||
width: 90
|
||||
},
|
||||
{
|
||||
align: 'right',
|
||||
editable: isEditable,
|
||||
format: function(value, data) {
|
||||
return (
|
||||
isEditable(data) ? ['', '']
|
||||
: ['<span class="OxLight">', '</span>']
|
||||
).join(Ox.formatDuration(value, 3));
|
||||
},
|
||||
id: 'out',
|
||||
operator: '+',
|
||||
title: Ox._('Out'),
|
||||
visible: true,
|
||||
width: 90
|
||||
},
|
||||
{
|
||||
align: 'right',
|
||||
editable: isEditable,
|
||||
format: function(value, data) {
|
||||
return (
|
||||
isEditable(data) ? ['', '']
|
||||
: ['<span class="OxLight">', '</span>']
|
||||
).join(Ox.formatDuration(value, 3));
|
||||
},
|
||||
id: 'duration',
|
||||
operator: '+',
|
||||
title: Ox._('Duration'),
|
||||
visible: true,
|
||||
width: 90
|
||||
}
|
||||
],
|
||||
columns: self.columns,
|
||||
columnsMovable: true,
|
||||
columnsRemovable: true,
|
||||
columnsResizable: true,
|
||||
|
@ -325,18 +344,18 @@ Ox.ClipPanel = function(options, self) {
|
|||
items: self.options.clips,
|
||||
scrollbarVisible: true,
|
||||
selected: self.options.selected,
|
||||
sort: self.options.sort,
|
||||
sort: getListSort(),
|
||||
sortable: isSortable(),
|
||||
unique: 'id'
|
||||
});
|
||||
} else {
|
||||
$list = Ox.IconList({
|
||||
draggable: true,
|
||||
fixedRatio: pandora.site.video.previewRatio,
|
||||
fixedRatio: self.options.clipRatio,
|
||||
item: function(data, sort, size) {
|
||||
size = size || 128; // fixme: is this needed?
|
||||
var ratio = data.videoRatio,
|
||||
fixedRatio = pandora.site.video.previewRatio,
|
||||
fixedRatio = self.options.clipRatio,
|
||||
width = ratio > fixedRatio ? size : Math.round(size * ratio / fixedRatio),
|
||||
height = Math.round(width / ratio),
|
||||
info,
|
||||
|
@ -363,7 +382,7 @@ Ox.ClipPanel = function(options, self) {
|
|||
items: self.options.clips,
|
||||
keys: ['id', 'in', 'out'],
|
||||
orientation: 'both',
|
||||
sort: self.options.sort,
|
||||
sort: getListSort(),
|
||||
unique: 'id'
|
||||
});
|
||||
}
|
||||
|
@ -431,6 +450,21 @@ Ox.ClipPanel = function(options, self) {
|
|||
return $list;
|
||||
}
|
||||
|
||||
function getListSort() {
|
||||
var sort = [{key: 'index', operator: '+'}]
|
||||
if (self.options.sort && self.options.sort.length) {
|
||||
sort[0].operator = self.options.sort[0].operator;
|
||||
sort[0].key = Ox.getObjectById(self.columns, self.options.sort[0].key)
|
||||
? self.options.sort[0].key
|
||||
: 'sort';
|
||||
}
|
||||
return sort;
|
||||
}
|
||||
|
||||
function getSortSelectWidth(width) {
|
||||
return Math.min(144, width - 52 + Ox.UI.SCROLLBAR_SIZE);
|
||||
}
|
||||
|
||||
function isEditable(data) {
|
||||
return self.options.editable && !data.annotation;
|
||||
}
|
||||
|
|
|
@ -10,10 +10,9 @@ Ox.VideoEditPanel = function(options, self) {
|
|||
annotationsMapSize: 256,
|
||||
annotationsRange: 'all',
|
||||
annotationsSort: 'position',
|
||||
clipRatio: 16/9,
|
||||
clips: [],
|
||||
clipSize: 256,
|
||||
clipSort: [],
|
||||
clipSortOptions: [],
|
||||
clipTooltip: 'clips',
|
||||
clipView: 'list',
|
||||
clickLink: null,
|
||||
|
@ -43,6 +42,8 @@ Ox.VideoEditPanel = function(options, self) {
|
|||
showTimeline: false,
|
||||
showUsers: false,
|
||||
smallTimelineURL: '',
|
||||
sort: [],
|
||||
sortOptions: [],
|
||||
subtitles: [],
|
||||
timeline: '',
|
||||
timelineTooltip: 'timeline',
|
||||
|
@ -56,7 +57,7 @@ Ox.VideoEditPanel = function(options, self) {
|
|||
clips: function() {
|
||||
self.$clipPanel.options({
|
||||
clips: Ox.clone(self.options.clips),
|
||||
sort: self.options.clipSort
|
||||
sort: self.options.sort
|
||||
});
|
||||
},
|
||||
duration: function() {
|
||||
|
@ -299,6 +300,7 @@ Ox.VideoEditPanel = function(options, self) {
|
|||
annotationsMapSize: self.options.annotationsMapSize,
|
||||
annotationsRange: self.options.annotationsRange,
|
||||
annotationsSort: self.options.annotationsSort,
|
||||
clipRatio: self.options.clipRatio,
|
||||
clips: Ox.clone(self.options.clips),
|
||||
clickLink: self.options.clickLink,
|
||||
duration: self.options.duration,
|
||||
|
@ -313,7 +315,7 @@ Ox.VideoEditPanel = function(options, self) {
|
|||
showAnnotationsMap: self.options.showAnnotationsMap,
|
||||
showLayers: self.options.showLayers,
|
||||
showUsers: self.options.showUsers,
|
||||
sort: self.options.clipSort,
|
||||
sort: self.options.sort,
|
||||
sortOptions: self.options.sortOptions,
|
||||
view: self.options.clipView,
|
||||
width: self.options.clipSize
|
||||
|
@ -356,7 +358,7 @@ Ox.VideoEditPanel = function(options, self) {
|
|||
that.triggerEvent('select', data);
|
||||
},
|
||||
sort: function(data) {
|
||||
self.options.clipSort = data;
|
||||
self.options.sort = data;
|
||||
that.triggerEvent('sort', data);
|
||||
},
|
||||
split: function(data) {
|
||||
|
|
Loading…
Reference in a new issue