118 lines
3.4 KiB
JavaScript
118 lines
3.4 KiB
JavaScript
// vim: et:ts=4:sw=4:sts=4:ft=js
|
|
Ox.AnnotationPanel = function(options, self) {
|
|
|
|
var self = self || {},
|
|
that = new Ox.Element('div', self)
|
|
.defaults({
|
|
id: '',
|
|
items: [],
|
|
title: '',
|
|
type: 'text',
|
|
width: 0
|
|
})
|
|
.options(options || {});
|
|
|
|
self.selected = -1;
|
|
|
|
that.$element = new Ox.CollapsePanel({
|
|
collapsed: false,
|
|
extras: [
|
|
new Ox.Button({
|
|
id: 'add',
|
|
style: 'symbol',
|
|
title: '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('div')
|
|
.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({
|
|
open: function(event, data) {
|
|
if (data.ids.length == 1) {
|
|
var pos = Ox.getPositionById(self.$annotations.options('items'), data.ids[0]);
|
|
self.$annotations.editItem(pos);
|
|
|
|
}
|
|
},
|
|
'delete': function(event, data) {
|
|
that.triggerEvent('delete', data);
|
|
},
|
|
select: selectAnnotation,
|
|
submit: updateAnnotation
|
|
})
|
|
.appendTo(that.$content);
|
|
|
|
/*
|
|
self.$annotations = new Ox.Element('div')
|
|
.appendTo(that.$content);
|
|
self.$annotation = [];
|
|
self.options.items.forEach(function(item, i) {
|
|
self.$annotation[i] = new Ox.Element('div')
|
|
.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]);
|
|
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() {
|
|
|
|
}
|
|
|
|
that.addItem = function(item) {
|
|
var pos = 0;
|
|
self.options.items.splice(pos, 0, item);
|
|
self.$annotations.addItems(pos, [item]);
|
|
self.$annotations.editItem(pos);
|
|
}
|
|
|
|
that.removeItems = function(ids) {
|
|
self.$annotations.removeItems(ids);
|
|
}
|
|
that.deselectItems = function() {
|
|
if(self.$annotations.options('selected'))
|
|
self.$annotations.options('selected',[]);
|
|
}
|
|
return that;
|
|
|
|
};
|