forked from 0x2620/oxjs
update VideoEditor/AnnotationPanel/Editable/...; update OxJS array functions
This commit is contained in:
rlx
parent
d64e39c5b2
commit
85652471c6
8 changed files with 280 additions and 120 deletions
|
|
@ -26,13 +26,27 @@ Ox.AnnotationPanel = function(options, self) {
|
|||
id: '',
|
||||
items: [],
|
||||
range: 'all',
|
||||
selected: -1,
|
||||
sort: 'position',
|
||||
title: '',
|
||||
type: 'text',
|
||||
width: 0
|
||||
})
|
||||
.options(options || {});
|
||||
|
||||
self.selected = -1;
|
||||
self.sort = self.options.sort == 'duration' ? [
|
||||
{key: 'duration', operator: '-'},
|
||||
{key: 'position', operator: '+'},
|
||||
{key: 'value', operator: '+'}
|
||||
] : self.options.sort == 'position' ? [
|
||||
{key: 'position', operator: '+'},
|
||||
{key: 'duration', operator: '-'},
|
||||
{key: 'value', operator: '+'}
|
||||
] : [ // 'text'
|
||||
{key: 'value', operator: '+'},
|
||||
{key: 'position', operator: '+'},
|
||||
{key: 'duration', operator: '-'}
|
||||
];
|
||||
|
||||
that.setElement(
|
||||
Ox.CollapsePanel({
|
||||
|
|
@ -60,59 +74,86 @@ Ox.AnnotationPanel = function(options, self) {
|
|||
);
|
||||
that.$content = that.$element.$content;
|
||||
|
||||
self.$annotations = Ox.List({
|
||||
construct: function(data) {
|
||||
var $item = Ox.Element()
|
||||
.addClass('OxAnnotation OxTarget')
|
||||
.css({padding: '4px 4px 0 4px'})
|
||||
.append(
|
||||
Ox.Editable({
|
||||
type: 'textarea',
|
||||
width: self.options.width - 8,
|
||||
value: data.value
|
||||
})
|
||||
.bindEvent({
|
||||
edit: function() {
|
||||
$item.removeClass('OxTarget');
|
||||
},
|
||||
submit: function(newData) {
|
||||
$item.addClass('OxTarget');
|
||||
updateAnnotation({
|
||||
id: data.id,
|
||||
value: newData.value
|
||||
});
|
||||
}
|
||||
})
|
||||
)
|
||||
.append($('<div>').css({height: '4px'}));
|
||||
return $item;
|
||||
},
|
||||
items: getAnnotations(),
|
||||
max: 1,
|
||||
min: 0,
|
||||
sort: [{key: 'in', operator: '+'}],
|
||||
type: 'none', // fixme
|
||||
unique: 'id'
|
||||
})
|
||||
.bindEvent({
|
||||
cancel: function(item) {
|
||||
//reset in/out points
|
||||
selectAnnotation({}, {ids: [item.id]});
|
||||
},
|
||||
open: function(data) {
|
||||
return;
|
||||
if (data.ids.length == 1) {
|
||||
var pos = Ox.getPositionById(self.$annotations.options('items'), data.ids[0]);
|
||||
self.$annotations.editItem(pos);
|
||||
}
|
||||
},
|
||||
'delete': function(data) {
|
||||
that.triggerEvent('remove', {id: data.ids[0]});
|
||||
},
|
||||
select: selectAnnotation,
|
||||
submit: updateAnnotation
|
||||
})
|
||||
.appendTo(that.$content);
|
||||
if (self.options.type == 'event') {
|
||||
self.$annotations = Ox.Element();
|
||||
} else if (self.options.type == 'place') {
|
||||
self.$annotations = Ox.Element();
|
||||
} else if (self.options.type == 'string') {
|
||||
self.$annotations = Ox.ArrayEditable({
|
||||
editable: self.options.editable,
|
||||
items: getAnnotations(),
|
||||
sort: self.sort,
|
||||
width: pandora.user.ui.annotationsSize - Ox.UI.SCROLLBAR_SIZE
|
||||
})
|
||||
.bindEvent({
|
||||
add: function(data) {
|
||||
that.triggerEvent('add', {
|
||||
value: data.value || ''
|
||||
});
|
||||
},
|
||||
'delete': function(data) {
|
||||
that.triggerEvent('remove', {id: data.id});
|
||||
},
|
||||
select: function(data) {
|
||||
selectAnnotation({ids: [data.id]});
|
||||
},
|
||||
submit: updateAnnotation
|
||||
});
|
||||
} else if (self.options.type == 'text') {
|
||||
self.$annotations = Ox.List({
|
||||
construct: function(data) {
|
||||
var $item = Ox.Element()
|
||||
.addClass('OxAnnotation OxTarget')
|
||||
.css({padding: '4px 4px 0 4px'})
|
||||
.append(
|
||||
Ox.Editable({
|
||||
type: 'textarea',
|
||||
width: self.options.width - 8,
|
||||
value: data.value
|
||||
})
|
||||
.bindEvent({
|
||||
edit: function() {
|
||||
$item.removeClass('OxTarget');
|
||||
},
|
||||
submit: function(newData) {
|
||||
$item.addClass('OxTarget');
|
||||
updateAnnotation({
|
||||
id: data.id,
|
||||
value: newData.value
|
||||
});
|
||||
}
|
||||
})
|
||||
)
|
||||
.append($('<div>').css({height: '4px'}));
|
||||
return $item;
|
||||
},
|
||||
items: getAnnotations(),
|
||||
max: 1,
|
||||
min: 0,
|
||||
sort: self.sort,
|
||||
type: 'none', // fixme
|
||||
unique: 'id'
|
||||
})
|
||||
.bindEvent({
|
||||
cancel: function(item) {
|
||||
//reset in/out points
|
||||
selectAnnotation({ids: [item.id]});
|
||||
},
|
||||
open: function(data) {
|
||||
return;
|
||||
if (data.ids.length == 1) {
|
||||
var pos = Ox.getPositionById(self.$annotations.options('items'), data.ids[0]);
|
||||
self.$annotations.editItem(pos);
|
||||
}
|
||||
},
|
||||
'delete': function(data) {
|
||||
that.triggerEvent('remove', {id: data.ids[0]});
|
||||
},
|
||||
select: selectAnnotation,
|
||||
submit: updateAnnotation
|
||||
});
|
||||
}
|
||||
self.$annotations.appendTo(that.$content);
|
||||
|
||||
/*
|
||||
self.$annotations = Ox.Element()
|
||||
|
|
@ -139,7 +180,7 @@ Ox.AnnotationPanel = function(options, self) {
|
|||
self.options.range == 'position'
|
||||
&& item['in'] <= self.options.position
|
||||
&& item.out > self.options.position
|
||||
);
|
||||
)
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -180,6 +221,8 @@ Ox.AnnotationPanel = function(options, self) {
|
|||
self.$annotations.options({
|
||||
items: getAnnotations()
|
||||
});
|
||||
} else if (key == 'sort') {
|
||||
self.$annotations.options({sort: value});
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -189,7 +232,11 @@ Ox.AnnotationPanel = function(options, self) {
|
|||
that.addItem = function(item) {
|
||||
var pos = 0;
|
||||
self.options.items.splice(pos, 0, item);
|
||||
self.$annotations.addItems(pos, [item]);
|
||||
if (self.$annotations.addItem) {
|
||||
self.$annotations.addItem(pos, item);
|
||||
} else {
|
||||
self.$annotations.addItems(pos, [item]);
|
||||
}
|
||||
self.$annotations.editItem(pos);
|
||||
};
|
||||
|
||||
|
|
@ -204,7 +251,9 @@ Ox.AnnotationPanel = function(options, self) {
|
|||
removeItems <f> removeItems
|
||||
@*/
|
||||
that.removeItem = function(id) {
|
||||
self.$annotations.removeItems([id]);
|
||||
var pos = Ox.getPositionById(self.options.items, id);
|
||||
self.options.items.splice(pos, 1);
|
||||
self.$annotations.removeItems && self.$annotations.removeItems([id]);
|
||||
};
|
||||
|
||||
return that;
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@ Ox.VideoEditor = function(options, self) {
|
|||
annotationsFont: 'small',
|
||||
annotationsRange: 'all',
|
||||
annotationsSize: 0,
|
||||
annotationsSort: 'position',
|
||||
censored: [],
|
||||
cuts: [],
|
||||
duration: 0,
|
||||
|
|
@ -312,6 +313,7 @@ Ox.VideoEditor = function(options, self) {
|
|||
out: self.options.out,
|
||||
position: self.options.position,
|
||||
range: self.options.annotationsRange,
|
||||
sort: self.options.annotationsSort,
|
||||
width: self.options.annotationsSize - Ox.UI.SCROLLBAR_SIZE
|
||||
}, layer)
|
||||
)
|
||||
|
|
@ -637,6 +639,13 @@ Ox.VideoEditor = function(options, self) {
|
|||
{id: 'all', title: 'All', checked: self.options.annotationsRange == 'all'}
|
||||
]},
|
||||
{},
|
||||
{id: 'sortannotations', title: 'Sort Annotations', disabled: true},
|
||||
{group: 'sort', min: 1, max: 1, items: [
|
||||
{id: 'position', title: 'By Position', checked: self.options.annotationsSort == 'position'},
|
||||
{id: 'duration', title: 'By Duration', checked: self.options.annotationsSort == 'duration'},
|
||||
{id: 'text', title: 'By Text', checked: self.options.annotationsSort == 'text'}
|
||||
]},
|
||||
{},
|
||||
{id: 'fontsize', title: 'Font Size', disabled: true},
|
||||
{group: 'font', min: 1, max: 1, items: [
|
||||
{id: 'small', title: 'Small', checked: self.options.annotationsFont == 'small'},
|
||||
|
|
@ -911,7 +920,7 @@ Ox.VideoEditor = function(options, self) {
|
|||
}
|
||||
|
||||
function selectAnnotation(data) {
|
||||
setPosition(data['in']);
|
||||
//setPosition(data['in']);
|
||||
setPoint('in', data['in']);
|
||||
setPoint('out', data.out);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue