oxjs/source/Ox.UI/js/Video/Ox.AnnotationPanel.js

149 lines
4.1 KiB
JavaScript
Raw Normal View History

2011-07-29 18:48:43 +00:00
// vim: et:ts=4:sw=4:sts=4:ft=javascript
2011-05-16 08:24:46 +00:00
/*@
Ox.AnnotationPanel <f:Ox.Element> AnnotationPanel Object
() -> <f> AnnotationPanel Object
(options) -> <f> AnnotationPanel Object
(options, self) -> <f> AnnotationPanel Object
options <o> Options object
2011-05-16 10:49:48 +00:00
id <s> id
items <a|[]> items
2011-05-19 10:18:39 +00:00
title <s> title
type <s|'text'> panel type
2011-05-16 10:49:48 +00:00
width <n|0>
2011-05-16 08:24:46 +00:00
self <o> shared private variable
@*/
2011-04-22 22:03:10 +00:00
Ox.AnnotationPanel = function(options, self) {
self = self || {};
var that = Ox.Element({}, self)
2011-04-22 22:03:10 +00:00
.defaults({
id: '',
items: [],
title: '',
type: 'text',
width: 0
})
.options(options || {});
self.selected = -1;
that.$element = Ox.CollapsePanel({
2011-04-22 22:03:10 +00:00
collapsed: false,
2011-05-19 12:37:19 +00:00
extras: self.options.editable ? [
Ox.Button({
2011-04-22 22:03:10 +00:00
id: 'add',
style: 'symbol',
2011-05-19 10:18:39 +00:00
title: 'add',
tooltip: 'Add',
2011-04-22 22:03:10 +00:00
type: 'image'
}).bindEvent({
click: function(event, data) {
that.triggerEvent('add', {value: ''});
}
})
2011-05-19 12:37:19 +00:00
] : [],
2011-04-22 22:03:10 +00:00
size: 16,
title: self.options.title
})
.addClass('OxAnnotationPanel')
.bindEvent({
toggle: togglePanel
});
that.$content = that.$element.$content;
self.$annotations = Ox.List({
2011-04-22 22:03:10 +00:00
construct: function(data) {
return Ox.Element()
2011-04-22 22:03:10 +00:00
.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({
2011-06-15 14:36:01 +00:00
cancel: function(item) {
//reset in/out points
selectAnnotation({}, {ids: [item.id]});
2011-05-19 10:18:39 +00:00
},
2011-04-22 22:03:10 +00:00
open: function(event, data) {
if (data.ids.length == 1) {
var pos = Ox.getPositionById(self.$annotations.options('items'), data.ids[0]);
self.$annotations.editItem(pos);
}
},
2011-06-15 14:36:01 +00:00
remove: function(event, data) {
2011-05-19 10:18:39 +00:00
that.triggerEvent('remove', data);
2011-04-22 22:03:10 +00:00
},
select: selectAnnotation,
submit: updateAnnotation
})
.appendTo(that.$content);
/*
self.$annotations = Ox.Element()
2011-04-22 22:03:10 +00:00
.appendTo(that.$content);
self.$annotation = [];
self.options.items.forEach(function(item, i) {
self.$annotation[i] = Ox.Element()
2011-04-22 22:03:10 +00:00
.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]);
2011-06-15 14:36:01 +00:00
item && that.triggerEvent('select', {
2011-04-22 22:03:10 +00:00
'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() {
}
2011-05-16 10:49:48 +00:00
/*@
addItem <f> addItem
@*/
2011-04-22 22:03:10 +00:00
that.addItem = function(item) {
var pos = 0;
self.options.items.splice(pos, 0, item);
self.$annotations.addItems(pos, [item]);
self.$annotations.editItem(pos);
2011-06-15 14:36:01 +00:00
};
2011-04-22 22:03:10 +00:00
2011-05-16 10:49:48 +00:00
/*@
removeItems <f> removeItems
@*/
2011-04-22 22:03:10 +00:00
that.removeItems = function(ids) {
self.$annotations.removeItems(ids);
2011-06-15 14:36:01 +00:00
};
2011-05-16 10:49:48 +00:00
/*@
deselectItems <f> deselectItems
@*/
2011-04-22 22:03:10 +00:00
that.deselectItems = function() {
if(self.$annotations.options('selected'))
self.$annotations.options('selected',[]);
};
2011-05-19 10:18:39 +00:00
2011-04-22 22:03:10 +00:00
return that;
};