openmedialibrary/static/js/annotation.js

69 lines
2.1 KiB
JavaScript
Raw Normal View History

2019-01-23 15:14:59 +00:00
'use strict';
2019-01-24 12:49:21 +00:00
oml.ui.annotation = function(annotation, $iframe) {
2019-01-25 10:26:45 +00:00
var $quote = Ox.Element().addClass('OxSelectable OMLQuote').css({
2019-01-29 10:42:46 +00:00
backgroundColor: 'white',
2019-01-25 10:26:45 +00:00
color: 'black',
fontFamily: 'Georgia, Palatino, DejaVu Serif, Book Antiqua, Palatino Linotype, Times New Roman, serif',
fontSize: '14px',
lineHeight: '21px',
padding: '8px'
2019-01-29 10:42:46 +00:00
}).html(Ox.encodeHTMLEntities(annotation.text).replace(/\n/g, '<br/>')).on({
2019-01-25 10:26:45 +00:00
click: function(event) {
that.select()
$iframe.postMessage('selectAnnotation', {
2019-01-29 10:42:46 +00:00
id: annotation.id
2019-01-25 10:26:45 +00:00
})
}
})
2019-01-29 10:42:46 +00:00
var $note = Ox.ArrayEditable({
2019-01-24 09:20:25 +00:00
editing: true,
2019-01-24 12:49:21 +00:00
items: (annotation.comments || []).map(function(comment) {
comment.editable = true
return comment
}),
2019-01-24 09:20:25 +00:00
type: 'textarea'
}).css({
2019-01-25 10:26:45 +00:00
margin: '2px',
minHeight: '12px'
2019-01-24 12:49:21 +00:00
}).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')
}
2019-01-24 09:20:25 +00:00
});
2019-01-23 15:14:59 +00:00
var that = Ox.Element().attr({
2019-01-24 12:49:21 +00:00
id: 'a-' + annotation.id
2019-01-24 05:39:09 +00:00
}).addClass(
2019-01-25 10:26:45 +00:00
'OxSelectable OMLAnnotation'
2019-01-24 05:39:09 +00:00
).css({
borderBottom: '1px solid rgb(208, 208, 208)',
2019-01-25 10:26:45 +00:00
}).append($quote).append($note);
2019-01-29 10:42:46 +00:00
2019-01-24 09:20:25 +00:00
that.annotate = function() {
var item = {
id: 'note', value: '', editable: true
}
2019-01-25 10:26:45 +00:00
}
that.deselect = function() {
that.removeClass('selected')
}
that.select = function () {
let selected = document.querySelector('.OMLAnnotation.selected')
selected && selected.classList.remove('selected')
that.addClass('selected')
2019-01-24 09:20:25 +00:00
}
2019-01-23 15:14:59 +00:00
return that;
};