148 lines
4.1 KiB
JavaScript
148 lines
4.1 KiB
JavaScript
// vim: et:ts=4:sw=4:sts=4:ft=javascript
|
|
|
|
/*@
|
|
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) {
|
|
|
|
self = self || {};
|
|
var that = Ox.Element({}, self)
|
|
.defaults({
|
|
id: '',
|
|
items: [],
|
|
title: '',
|
|
type: 'text',
|
|
width: 0
|
|
})
|
|
.options(options || {});
|
|
|
|
self.selected = -1;
|
|
|
|
that.$element = Ox.CollapsePanel({
|
|
collapsed: false,
|
|
extras: self.options.editable ? [
|
|
Ox.Button({
|
|
id: 'add',
|
|
style: 'symbol',
|
|
title: 'add',
|
|
tooltip: 'Add',
|
|
type: 'image'
|
|
}).bindEvent({
|
|
click: function(data) {
|
|
that.triggerEvent('add', {value: ''});
|
|
}
|
|
})
|
|
] : [],
|
|
size: 16,
|
|
title: self.options.title
|
|
})
|
|
.addClass('OxAnnotationPanel')
|
|
.bindEvent({
|
|
toggle: togglePanel
|
|
});
|
|
that.$content = that.$element.$content;
|
|
|
|
self.$annotations = Ox.List({
|
|
construct: function(data) {
|
|
return Ox.Element()
|
|
.addClass('OxAnnotation OxEditable OxTarget')
|
|
.html(Ox.parseHTML(data.value));
|
|
},
|
|
items: self.options.items.map(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(data) {
|
|
if (data.ids.length == 1) {
|
|
var pos = Ox.getPositionById(self.$annotations.options('items'), data.ids[0]);
|
|
self.$annotations.editItem(pos);
|
|
}
|
|
},
|
|
remove: function(data) {
|
|
that.triggerEvent('remove', data);
|
|
},
|
|
select: selectAnnotation,
|
|
submit: updateAnnotation
|
|
})
|
|
.appendTo(that.$content);
|
|
|
|
/*
|
|
self.$annotations = Ox.Element()
|
|
.appendTo(that.$content);
|
|
self.$annotation = [];
|
|
self.options.items.forEach(function(item, i) {
|
|
self.$annotation[i] = Ox.Element()
|
|
.addClass('OxAnnotation')
|
|
.html(item.value.replace(/\n/g, '<br/>'))
|
|
.click(function() {
|
|
clickAnnotation(i);
|
|
})
|
|
.appendTo(self.$annotations);
|
|
});
|
|
*/
|
|
function selectAnnotation(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(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;
|
|
|
|
};
|