oxjs/source/Ox.UI/js/Video/Ox.AnnotationPanel.js
2011-06-15 16:36:01 +02:00

148 lines
4.2 KiB
JavaScript

// vim: et:ts=4:sw=4:sts=4:ft=js
/*@
Ox.AnnotationPanel <f:Ox.Element> AnnotationPanel Object
() -> <f> AnnotationPanel Object
(options) -> <f> AnnotationPanel Object
(options, self) -> <f> AnnotationPanel Object
options <o> Options object
id <s> id
items <a|[]> items
title <s> title
type <s|'text'> panel type
width <n|0>
self <o> shared private variable
@*/
Ox.AnnotationPanel = function(options, self) {
var self = self || {},
that = new Ox.Element({}, self)
.defaults({
id: '',
items: [],
title: '',
type: 'text',
width: 0
})
.options(options || {});
self.selected = -1;
that.$element = new Ox.CollapsePanel({
collapsed: false,
extras: self.options.editable ? [
new Ox.Button({
id: 'add',
style: 'symbol',
title: 'add',
tooltip: 'Add',
type: 'image'
}).bindEvent({
click: function(event, data) {
that.triggerEvent('add', {value: ''});
}
})
] : [],
size: 16,
title: self.options.title
})
.addClass('OxAnnotationPanel')
.bindEvent({
toggle: togglePanel
});
that.$content = that.$element.$content;
self.$annotations = new Ox.List({
construct: function(data) {
return new Ox.Element()
.addClass('OxAnnotation OxEditable OxTarget')
.html(Ox.parseHTML(data.value));
},
items: $.map(self.options.items, function(v, i) {
return {
id: v.id || i + '',
value: v.value
};
}),
unique: 'id'
})
.bindEvent({
cancel: function(item) {
//reset in/out points
selectAnnotation({}, {ids: [item.id]});
},
open: function(event, data) {
if (data.ids.length == 1) {
var pos = Ox.getPositionById(self.$annotations.options('items'), data.ids[0]);
self.$annotations.editItem(pos);
}
},
remove: function(event, data) {
that.triggerEvent('remove', data);
},
select: selectAnnotation,
submit: updateAnnotation
})
.appendTo(that.$content);
/*
self.$annotations = new Ox.Element()
.appendTo(that.$content);
self.$annotation = [];
self.options.items.forEach(function(item, i) {
self.$annotation[i] = new Ox.Element()
.addClass('OxAnnotation')
.html(item.value.replace(/\n/g, '<br/>'))
.click(function() {
clickAnnotation(i);
})
.appendTo(self.$annotations);
});
*/
function selectAnnotation(event, data) {
var item = Ox.getObjectById(self.options.items, data.ids[0]);
item && that.triggerEvent('select', {
'in': item['in'],
'out': item.out,
'layer': self.options.id
});
}
function updateAnnotation(event, data) {
var item = Ox.getObjectById(self.options.items, data.id);
item.value = data.value;
that.triggerEvent('submit', item);
}
function togglePanel() {
}
/*@
addItem <f> addItem
@*/
that.addItem = function(item) {
var pos = 0;
self.options.items.splice(pos, 0, item);
self.$annotations.addItems(pos, [item]);
self.$annotations.editItem(pos);
};
/*@
removeItems <f> removeItems
@*/
that.removeItems = function(ids) {
self.$annotations.removeItems(ids);
};
/*@
deselectItems <f> deselectItems
@*/
that.deselectItems = function() {
if(self.$annotations.options('selected'))
self.$annotations.options('selected',[]);
}
return that;
};