oxjs/source/js/Ox.AnnotationPanel.js
2011-04-23 18:45:50 +02:00

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;
};