207 lines
6 KiB
JavaScript
207 lines
6 KiB
JavaScript
// vim: et:ts=4:sw=4:sts=4:ft=javascript
|
|
|
|
'use strict';
|
|
|
|
/*@
|
|
Ox.AnnotationPanel <f:Ox.Element> AnnotationPanel Object
|
|
() -> <f> AnnotationPanel Object
|
|
(options) -> <f> AnnotationPanel Object
|
|
(options, self) -> <f> AnnotationPanel Object
|
|
options <o> Options object
|
|
editable <b|false> If true, annotations can be added
|
|
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({
|
|
editable: false,
|
|
id: '',
|
|
items: [],
|
|
range: 'all',
|
|
title: '',
|
|
type: 'text',
|
|
width: 0
|
|
})
|
|
.options(options || {});
|
|
|
|
self.selected = -1;
|
|
|
|
that.setElement(
|
|
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) {
|
|
var $item = Ox.Element()
|
|
.addClass('OxAnnotation OxTarget')
|
|
.css({padding: '4px 4px 0 4px'})
|
|
.append(
|
|
Ox.Editable({
|
|
type: 'textarea',
|
|
width: self.options.width - 8,
|
|
value: data.value
|
|
})
|
|
.bindEvent({
|
|
edit: function() {
|
|
$item.removeClass('OxTarget');
|
|
},
|
|
submit: function(data) {
|
|
$item.addClass('OxTarget')
|
|
}
|
|
})
|
|
)
|
|
.append($('<div>').css({height: '4px'}));
|
|
return $item;
|
|
},
|
|
items: getAnnotations(),
|
|
max: 1,
|
|
min: 0,
|
|
sort: [{key: 'in', operator: '+'}],
|
|
type: 'none', // fixme
|
|
unique: 'id'
|
|
})
|
|
.bindEvent({
|
|
cancel: function(item) {
|
|
//reset in/out points
|
|
selectAnnotation({}, {ids: [item.id]});
|
|
},
|
|
open: function(data) {
|
|
return;
|
|
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 getAnnotations() {
|
|
return self.options.items.filter(function(item) {
|
|
return self.options.range == 'all' || (
|
|
self.options.range == 'selection'
|
|
&& item['in'] < self.options.out
|
|
&& item.out > self.options['in']
|
|
) || (
|
|
self.options.range == 'position'
|
|
&& item['in'] <= self.options.position
|
|
&& item.out > self.options.position
|
|
);
|
|
});
|
|
}
|
|
|
|
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() {
|
|
|
|
}
|
|
|
|
self.setOption = function(key, value) {
|
|
if (key == 'in') {
|
|
self.options.range == 'selection' && self.$annotations.options({
|
|
items: getAnnotations()
|
|
});
|
|
} else if (key == 'out') {
|
|
self.options.range == 'selection' && self.$annotations.options({
|
|
items: getAnnotations()
|
|
});
|
|
} else if (key == 'position') {
|
|
self.options.range == 'position' && self.$annotations.options({
|
|
items: getAnnotations()
|
|
});
|
|
} else if (key == 'range') {
|
|
self.$annotations.options({
|
|
items: getAnnotations()
|
|
});
|
|
}
|
|
};
|
|
|
|
/*@
|
|
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() {
|
|
self.$annotations.options('selected', []);
|
|
};
|
|
|
|
return that;
|
|
|
|
};
|