openmedialibrary/static/js/annotation.js

114 lines
3.3 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) {
var $quoteText = Ox.Element()
.addClass('OxSelectable OMLQuote')
.html(Ox.encodeHTMLEntities(annotation.text).replace(/\n/g, '<br/>'))
.on({
click: function(event) {
2019-02-09 11:40:52 +00:00
var id
if (event.ctrlKey) {
that.deselect()
id = null
} else {
that.select()
id = annotation.id
}
$iframe.postMessage('selectAnnotation', {
2019-02-09 11:40:52 +00:00
id: id
})
}
});
var $quoteBackground = Ox.Element().addClass('OMLQuoteBackground');
2019-02-01 07:49:11 +00:00
var $quote = Ox.Element()
.addClass('OMLQuoteBox')
.append(
$quoteBackground
).append(
$quoteText
);
2019-01-31 07:07:49 +00:00
var notes = annotation.notes.length ? annotation.notes.map(function(note) {
2019-01-31 16:48:53 +00:00
note.editable = !note.user
2019-01-31 07:07:49 +00:00
return note
}) : [];
2019-01-31 17:32:17 +00:00
var $notes = Ox.ArrayEditable({
2019-01-24 09:20:25 +00:00
editing: true,
2019-01-31 07:07:49 +00:00
items: notes,
2019-01-31 17:32:17 +00:00
placeholder: 'Add note',
2019-01-24 09:20:25 +00:00
type: 'textarea'
}).css({
2019-01-25 10:26:45 +00:00
minHeight: '12px'
2019-01-24 12:49:21 +00:00
}).bindEvent({
2019-01-31 18:42:52 +00:00
doubleclick: addNote,
2019-01-24 12:49:21 +00:00
submit: function(data) {
2019-01-31 07:07:49 +00:00
var note = Ox.getObjectById(annotation.notes, data.id)
if (note) {
note.value = data.value
note.modified = (new Date).toISOString()
2019-01-24 12:49:21 +00:00
} else {
2019-01-31 07:07:49 +00:00
annotation.notes.push({
2019-01-24 12:49:21 +00:00
created: data.created || (new Date).toISOString(),
modified: (new Date).toISOString(),
id: data.id,
2019-01-31 07:07:49 +00:00
user: '',
2019-01-24 12:49:21 +00:00
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-31 06:22:19 +00:00
}).bindEvent({
key_delete: function() {
that.triggerEvent('delete', {
id: annotation.id
})
}
2019-01-31 17:32:17 +00:00
}).append($quote).append($notes);
2019-01-29 10:42:46 +00:00
2019-01-31 18:42:52 +00:00
function addNote() {
if (!$notes.options('items').length) {
that.select()
$notes.addItem(0, {
id: 'A',
value: '',
editable: true
}).options({
selected: 'A'
}).editItem()
}
}
2019-01-24 09:20:25 +00:00
that.annotate = function() {
2019-01-31 18:42:52 +00:00
if (oml.user.ui.showAnnotations) {
addNote()
2019-01-24 09:20:25 +00:00
}
2019-01-25 10:26:45 +00:00
}
2019-02-02 18:01:55 +00:00
that.delete = function() {
that.triggerEvent('delete', {
id: annotation.id
})
}
2019-01-25 10:26:45 +00:00
that.deselect = function() {
that.removeClass('selected')
2019-01-31 07:07:49 +00:00
that.loseFocus()
2019-01-25 10:26:45 +00:00
}
that.select = function () {
2019-01-31 18:42:52 +00:00
$iframe.postMessage('selectAnnotation', {
id: annotation.id
})
2019-01-25 10:26:45 +00:00
let selected = document.querySelector('.OMLAnnotation.selected')
selected && selected.classList.remove('selected')
that.addClass('selected')
2019-01-31 06:22:19 +00:00
that.gainFocus()
2019-02-02 18:01:55 +00:00
oml.$ui.annotationPanel.updateSelection(false)
that[0].scrollIntoViewIfNeeded && that[0].scrollIntoViewIfNeeded()
2019-01-24 09:20:25 +00:00
}
2019-01-23 15:14:59 +00:00
return that;
};