0x2620/oxjs
2
0
Fork 1
Code Issues 172 Pull requests Releases Wiki Activity

edit sort

Browse source
This commit is contained in:
j 2014-02-06 10:27:57 +00:00
parent 687fa24c53
commit a85a38d60c
2 changed files with 122 additions and 86 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

196
source/Ox.UI/js/Video/ClipPanel.js
View file

@ -10,6 +10,7 @@ Ox.ClipPanel = function(options, self) {
annotationsMapSize: 256, annotationsMapSize: 256,
annotationsRange: 'all', annotationsRange: 'all',
annotationsSort: 'position', annotationsSort: 'position',
clipRatio: 16/9,
clips: [], clips: [],
clickLink: null, clickLink: null,
duration: 0, duration: 0,
@ -34,7 +35,7 @@ Ox.ClipPanel = function(options, self) {
clips: function() { clips: function() {
self.$list.options({ self.$list.options({
items: self.options.clips, items: self.options.clips,
sort: self.options.sort, sort: getListSort(),
sortable: isSortable() sortable: isSortable()
}); });
updateStatus(); updateStatus();
@ -54,17 +55,97 @@ Ox.ClipPanel = function(options, self) {
sort: function() { sort: function() {
updateSortElement(); updateSortElement();
self.$list.options({ self.$list.options({
sort: self.options.sort, sort: getListSort(),
sortable: isSortable(), sortable: isSortable(),
}); });
} }
}) })
.bindEvent({ .bindEvent({
resize: function() { resize: function(data) {
self.$sortSelect.options({width: getSortSelectWidth(data.size)});
self.$list.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({ self.$menubar = Ox.Bar({
size: 24 size: 24
}) })
@ -84,9 +165,9 @@ Ox.ClipPanel = function(options, self) {
{id: 'annotations', title: Ox._('View Annotations'), checked: self.options.view == 'annotations'}, {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: '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}, {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} {id: 'replace', title: Ox._('Make Selected Clips Editable'), disabled: !self.options.editable || !self.options.selected.length || self.options.view == 'annotations'}
], ],
title: 'set', title: 'set',
tooltip: Ox._('Options'), tooltip: Ox._('Options'),
@ -99,7 +180,14 @@ Ox.ClipPanel = function(options, self) {
.bindEvent({ .bindEvent({
change: function(data) { change: function(data) {
if (data.id == 'view') { 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.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()); self.$panel.replaceElement(1, self.$list = getList());
that.triggerEvent('view', {view: self.options.view}); that.triggerEvent('view', {view: self.options.view});
} }
@ -117,7 +205,7 @@ Ox.ClipPanel = function(options, self) {
self.$sortSelect = Ox.Select({ self.$sortSelect = Ox.Select({
items: self.options.sortOptions, items: self.options.sortOptions,
value: self.options.sort[0].key, value: self.options.sort[0].key,
width: 100 + Ox.UI.SCROLLBAR_SIZE width: getSortSelectWidth(self.options.width)
}) })
.bindEvent({ .bindEvent({
change: function(data) { change: function(data) {
@ -248,76 +336,7 @@ Ox.ClipPanel = function(options, self) {
return $list; return $list;
} else if (self.options.view == 'list') { } else if (self.options.view == 'list') {
$list = Ox.TableList({ $list = Ox.TableList({
columns: [ columns: 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
}
],
columnsMovable: true, columnsMovable: true,
columnsRemovable: true, columnsRemovable: true,
columnsResizable: true, columnsResizable: true,
@ -325,18 +344,18 @@ Ox.ClipPanel = function(options, self) {
items: self.options.clips, items: self.options.clips,
scrollbarVisible: true, scrollbarVisible: true,
selected: self.options.selected, selected: self.options.selected,
sort: self.options.sort, sort: getListSort(),
sortable: isSortable(), sortable: isSortable(),
unique: 'id' unique: 'id'
}); });
} else { } else {
$list = Ox.IconList({ $list = Ox.IconList({
draggable: true, draggable: true,
fixedRatio: pandora.site.video.previewRatio, fixedRatio: self.options.clipRatio,
item: function(data, sort, size) { item: function(data, sort, size) {
size = size || 128; // fixme: is this needed? size = size || 128; // fixme: is this needed?
var ratio = data.videoRatio, var ratio = data.videoRatio,
fixedRatio = pandora.site.video.previewRatio, fixedRatio = self.options.clipRatio,
width = ratio > fixedRatio ? size : Math.round(size * ratio / fixedRatio), width = ratio > fixedRatio ? size : Math.round(size * ratio / fixedRatio),
height = Math.round(width / ratio), height = Math.round(width / ratio),
info, info,
@ -363,7 +382,7 @@ Ox.ClipPanel = function(options, self) {
items: self.options.clips, items: self.options.clips,
keys: ['id', 'in', 'out'], keys: ['id', 'in', 'out'],
orientation: 'both', orientation: 'both',
sort: self.options.sort, sort: getListSort(),
unique: 'id' unique: 'id'
}); });
} }
@ -431,6 +450,21 @@ Ox.ClipPanel = function(options, self) {
return $list; 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) { function isEditable(data) {
return self.options.editable && !data.annotation; return self.options.editable && !data.annotation;
} }

12
source/Ox.UI/js/Video/VideoEditPanel.js
View file

@ -10,10 +10,9 @@ Ox.VideoEditPanel = function(options, self) {
annotationsMapSize: 256, annotationsMapSize: 256,
annotationsRange: 'all', annotationsRange: 'all',
annotationsSort: 'position', annotationsSort: 'position',
clipRatio: 16/9,
clips: [], clips: [],
clipSize: 256, clipSize: 256,
clipSort: [],
clipSortOptions: [],
clipTooltip: 'clips', clipTooltip: 'clips',
clipView: 'list', clipView: 'list',
clickLink: null, clickLink: null,
@ -43,6 +42,8 @@ Ox.VideoEditPanel = function(options, self) {
showTimeline: false, showTimeline: false,
showUsers: false, showUsers: false,
smallTimelineURL: '', smallTimelineURL: '',
sort: [],
sortOptions: [],
subtitles: [], subtitles: [],
timeline: '', timeline: '',
timelineTooltip: 'timeline', timelineTooltip: 'timeline',
@ -56,7 +57,7 @@ Ox.VideoEditPanel = function(options, self) {
clips: function() { clips: function() {
self.$clipPanel.options({ self.$clipPanel.options({
clips: Ox.clone(self.options.clips), clips: Ox.clone(self.options.clips),
sort: self.options.clipSort sort: self.options.sort
}); });
}, },
duration: function() { duration: function() {
@ -299,6 +300,7 @@ Ox.VideoEditPanel = function(options, self) {
annotationsMapSize: self.options.annotationsMapSize, annotationsMapSize: self.options.annotationsMapSize,
annotationsRange: self.options.annotationsRange, annotationsRange: self.options.annotationsRange,
annotationsSort: self.options.annotationsSort, annotationsSort: self.options.annotationsSort,
clipRatio: self.options.clipRatio,
clips: Ox.clone(self.options.clips), clips: Ox.clone(self.options.clips),
clickLink: self.options.clickLink, clickLink: self.options.clickLink,
duration: self.options.duration, duration: self.options.duration,
@ -313,7 +315,7 @@ Ox.VideoEditPanel = function(options, self) {
showAnnotationsMap: self.options.showAnnotationsMap, showAnnotationsMap: self.options.showAnnotationsMap,
showLayers: self.options.showLayers, showLayers: self.options.showLayers,
showUsers: self.options.showUsers, showUsers: self.options.showUsers,
sort: self.options.clipSort, sort: self.options.sort,
sortOptions: self.options.sortOptions, sortOptions: self.options.sortOptions,
view: self.options.clipView, view: self.options.clipView,
width: self.options.clipSize width: self.options.clipSize
@ -356,7 +358,7 @@ Ox.VideoEditPanel = function(options, self) {
that.triggerEvent('select', data); that.triggerEvent('select', data);
}, },
sort: function(data) { sort: function(data) {
self.options.clipSort = data; self.options.sort = data;
that.triggerEvent('sort', data); that.triggerEvent('sort', data);
}, },
split: function(data) { split: function(data) {