openmedialibrary/static/js/annotation.js
2019-01-31 12:37:49 +05:30

79 lines
2.3 KiB
JavaScript

'use strict';
oml.ui.annotation = function(annotation, $iframe) {
var $quote = Ox.Element().addClass('OxSelectable OMLQuote').css({
padding: '8px'
}).html(Ox.encodeHTMLEntities(annotation.text).replace(/\n/g, '<br/>')).on({
click: function(event) {
that.select()
$iframe.postMessage('selectAnnotation', {
id: annotation.id
})
}
})
var notes = annotation.notes.length ? annotation.notes.map(function(note) {
note.editable = note.user == ''
return note
}) : [{
id: 'A',
placeholder: 'Add Note',
value: '',
editable: true
}];
console.log(annotation.notes)
var $note = Ox.ArrayEditable({
editing: true,
items: notes,
type: 'textarea'
}).css({
margin: '2px',
minHeight: '12px'
}).bindEvent({
submit: function(data) {
var note = Ox.getObjectById(annotation.notes, data.id)
if (note) {
note.value = data.value
note.modified = (new Date).toISOString()
} else {
annotation.notes.push({
created: data.created || (new Date).toISOString(),
modified: (new Date).toISOString(),
id: data.id,
user: '',
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)',
}).bindEvent({
key_delete: function() {
that.triggerEvent('delete', {
id: annotation.id
})
}
}).append($quote).append($note);
that.annotate = function() {
var item = {
id: 'note', value: '', editable: true
}
}
that.deselect = function() {
that.removeClass('selected')
that.loseFocus()
}
that.select = function () {
let selected = document.querySelector('.OMLAnnotation.selected')
selected && selected.classList.remove('selected')
that.addClass('selected')
that.gainFocus()
}
return that;
};