68 lines
2.1 KiB
JavaScript
68 lines
2.1 KiB
JavaScript
'use strict';
|
|
|
|
oml.ui.annotation = function(annotation, $iframe) {
|
|
var $quote = Ox.Element().addClass('OxSelectable OMLQuote').css({
|
|
backgroundColor: 'white',
|
|
color: 'black',
|
|
fontFamily: 'Georgia, Palatino, DejaVu Serif, Book Antiqua, Palatino Linotype, Times New Roman, serif',
|
|
fontSize: '14px',
|
|
lineHeight: '21px',
|
|
padding: '8px'
|
|
}).html(Ox.encodeHTMLEntities(annotation.text).replace(/\n/g, '<br/>')).on({
|
|
click: function(event) {
|
|
that.select()
|
|
$iframe.postMessage('selectAnnotation', {
|
|
id: annotation.id
|
|
})
|
|
}
|
|
})
|
|
var $note = Ox.ArrayEditable({
|
|
editing: true,
|
|
items: (annotation.comments || []).map(function(comment) {
|
|
comment.editable = true
|
|
return comment
|
|
}),
|
|
type: 'textarea'
|
|
}).css({
|
|
margin: '2px',
|
|
minHeight: '12px'
|
|
}).bindEvent({
|
|
submit: function(data) {
|
|
var comment = Ox.getObjectById(annotation.comments, data.id)
|
|
if (comment) {
|
|
comment.value = data.value
|
|
comment.modified = (new Date).toISOString()
|
|
} else {
|
|
annotation.comments.push({
|
|
created: data.created || (new Date).toISOString(),
|
|
modified: (new Date).toISOString(),
|
|
id: data.id,
|
|
value: data.value
|
|
})
|
|
}
|
|
that.triggerEvent('change')
|
|
}
|
|
});
|
|
var that = Ox.Element().attr({
|
|
id: 'a-' + annotation.id
|
|
}).addClass(
|
|
'OxSelectable OMLAnnotation'
|
|
).css({
|
|
borderBottom: '1px solid rgb(208, 208, 208)',
|
|
}).append($quote).append($note);
|
|
|
|
that.annotate = function() {
|
|
var item = {
|
|
id: 'note', value: '', editable: true
|
|
}
|
|
}
|
|
that.deselect = function() {
|
|
that.removeClass('selected')
|
|
}
|
|
that.select = function () {
|
|
let selected = document.querySelector('.OMLAnnotation.selected')
|
|
selected && selected.classList.remove('selected')
|
|
that.addClass('selected')
|
|
}
|
|
return that;
|
|
};
|