openmedialibrary/static/js/viewer.js

231 lines
8.8 KiB
JavaScript
Raw Normal View History

2014-05-04 17:26:43 +00:00
'use strict';
oml.ui.viewer = function() {
var ui = oml.user.ui,
2019-01-24 11:52:44 +00:00
annotations = [],
2014-05-04 17:26:43 +00:00
2019-01-23 15:14:59 +00:00
frame = Ox.Element(),
2014-05-04 17:26:43 +00:00
that = Ox.Element()
.bindEvent({
oml_itemview: function(data) {
2014-05-25 12:16:04 +00:00
if (ui.item != item && ui.itemView == 'book') {
that.updateElement(ui.item);
}
2019-01-23 15:14:59 +00:00
},
oml_showannotations: function() {
panel.toggleElement(1);
},
oml_sortannotations: function(data) {
that.renderAnnotations()
},
oml_annotationusers: function(data) {
that.renderAnnotations()
2014-05-04 17:26:43 +00:00
}
}),
2019-01-23 15:14:59 +00:00
panel = Ox.SplitPanel({
elements: [
{
element: frame
},
{
collapsed: !ui.showAnnotations,
collapsible: true,
element: oml.$ui.annotationPanel = oml.ui.annotationPanel(),
2019-01-24 07:22:40 +00:00
resizable: true,
resize: [128, 384],
2019-01-23 15:14:59 +00:00
size: 256,
tooltip: Ox._('Annotations')
+ ' <span class="OxBright">'
+ Ox.SYMBOLS.shift + 'A</span>'
}
],
orientation: 'horizontal'
})
.appendTo(that),
2014-05-25 12:16:04 +00:00
$iframe, item;
2014-05-04 17:26:43 +00:00
2019-01-24 11:52:44 +00:00
function loadAnnotations(callback) {
if (localStorage[item + '.annotations']) {
annotations = JSON.parse(localStorage[item + '.annotations'] || '[]')
var ids = []
annotations.forEach(function(data) {
if (data.comments && !data.notes) {
data.notes = data.comments
delete data.comments
}
if (!Ox.contains(ids, data.id)) {
ids.push(data.id)
var note
if (data.notes && data.notes.length) {
note = data.notes[0]
delete data.notes
}
2019-02-10 18:50:26 +00:00
var a = Ox.extend({}, data)
a.created = a.created || (new Date).toISOString();
a.item = ui.item
oml.api.addAnnotation(a)
if (note) {
data.notes = [note]
} else {
data.notes = []
}
if (data.notes.length) {
var note = data.notes[0]
oml.api.editNote({
item: ui.item,
annotation: data.id,
notes: {
created: note.created,
modified: note.modified,
value: note.value
}
})
}
} else {
console.log('ignore second time', data)
}
})
localStorage[oml.user.ui.item + '.annotations_'] = localStorage[oml.user.ui.item + '.annotations']
delete localStorage[oml.user.ui.item + '.annotations']
callback && callback(annotations)
} else {
oml.api.getAnnotations({
id: ui.item
}, function(result) {
2019-02-10 18:55:00 +00:00
if (!result.data.annotations.length && localStorage[oml.user.ui.item + '.annotations_']) {
localStorage[oml.user.ui.item + '.annotations'] = localStorage[oml.user.ui.item + '.annotations_']
loadAnnotations(callback)
} else {
annotations = result.data.annotations
callback && callback(annotations)
}
})
}
2019-01-24 11:52:44 +00:00
}
function addAnnotation(data, save) {
var a = Ox.extend({}, data)
a.created = a.created || (new Date).toISOString();
a.item = ui.item
if (save !== false) {
oml.api.addAnnotation(a)
2019-01-24 11:52:44 +00:00
}
data.notes = data.notes || [];
annotations.push(data);
2019-01-24 11:52:44 +00:00
}
2019-01-24 11:52:44 +00:00
function removeAnnotation(id) {
oml.api.removeAnnotation({
item: ui.item,
annotation: id
}, function(result) {
annotations = annotations.filter(function(annotation) {
return annotation.id != id
})
2019-01-24 11:52:44 +00:00
})
}
2019-01-24 12:49:21 +00:00
var annotationEvents = {
change: function(data) {
// console.log('change', data)
2019-01-31 06:22:19 +00:00
},
'delete': function(data) {
oml.$ui.annotationFolder.find('#a-' + data.id).remove()
that.postMessage('removeAnnotation', data)
2019-01-24 12:49:21 +00:00
}
}
2014-05-17 11:45:57 +00:00
that.updateElement = function() {
2014-05-25 12:16:04 +00:00
item = ui.item;
2014-05-26 16:02:41 +00:00
if (item && item.length) {
2014-05-25 14:10:38 +00:00
oml.api.get({id: item, keys: ['mediastate']}, function(result) {
if (result.data.mediastate == 'available') {
2019-01-24 07:22:40 +00:00
oml.$ui.annotationFolder.empty()
2019-01-23 15:14:59 +00:00
if ($iframe) {
$iframe.remove()
}
$iframe = Ox.Element('<iframe>').css({
2014-05-25 14:10:38 +00:00
width: '100%',
height: '100%',
border: 0
2019-01-23 15:14:59 +00:00
}).onMessage(function(data, event) {
2019-02-09 11:43:24 +00:00
console.log('got', event, data)
2019-01-23 15:14:59 +00:00
if (event == 'addAnnotation') {
addAnnotation(data);
2019-01-24 12:49:21 +00:00
var $annotation = oml.ui.annotation(data, $iframe).bindEvent(annotationEvents)
2019-01-24 09:20:25 +00:00
oml.$ui.annotationFolder.append($annotation);
$annotation.annotate();
2019-02-02 18:01:55 +00:00
oml.$ui.annotationPanel.updateSelection(false)
2019-01-23 15:14:59 +00:00
} else if (event == 'removeAnnotation') {
2019-01-24 07:22:40 +00:00
oml.$ui.annotationFolder.find('#a-' + data.id).remove()
data.id && removeAnnotation(data.id)
2019-01-23 15:14:59 +00:00
} else if (event == 'selectAnnotation') {
if (data.id) {
var $annotation = oml.$ui.annotationFolder.find('#a-' + data.id)
$annotation.length && $annotation.select()
} else {
var $annotation = oml.$ui.annotationFolder.find('.OMLAnnotation.selected')
$annotation.length && $annotation.deselect()
}
2019-02-02 18:01:55 +00:00
oml.$ui.annotationPanel.updateSelection(false)
} else if (event == 'selectText') {
oml.$ui.annotationPanel.updateSelection(data)
2019-01-24 11:52:44 +00:00
} else {
console.log('trigger unknwon event', event, data)
2019-01-24 11:52:44 +00:00
that.triggerEvent(event, data);
}
}).bindEvent({
init: function() {
loadAnnotations(function(annotations) {
2019-02-04 08:53:42 +00:00
that.renderAnnotations()
2019-01-24 11:52:44 +00:00
})
2019-01-23 15:14:59 +00:00
}
}).appendTo(frame);
2014-05-25 14:10:38 +00:00
$iframe.attr({
src: '/' + item + '/reader/'
});
}
2014-05-04 17:26:43 +00:00
});
}
return that;
};
2019-01-23 15:14:59 +00:00
that.postMessage = function(event, data) {
2019-01-24 11:52:44 +00:00
$iframe && $iframe.postMessage(event, data)
2019-01-23 15:14:59 +00:00
};
2019-02-01 09:19:43 +00:00
that.getAnnotations = function() {
return annotations;
}
2019-02-04 08:53:42 +00:00
that.renderAnnotations = function() {
var sortKey = ui.sortAnnotations
if (sortKey == 'date') {
sortKey = 'created'
}
if (sortKey == 'date') {
sortKey = 'created'
}
if (sortKey == 'quote') {
sortKey = 'text'
}
annotations = Ox.sortBy(annotations, sortKey)
2019-02-04 08:53:42 +00:00
oml.$ui.annotationFolder.empty();
var visibleAnnotations = [];
2019-02-04 08:53:42 +00:00
annotations.forEach(function(data) {
//that.postMessage('removeAnnotation', {id: data.id})
if (ui.showAnnotationUsers == 'all' || data.user == oml.user.id) {
var $annotation = oml.ui.annotation(data, $iframe).bindEvent(annotationEvents)
oml.$ui.annotationFolder.append($annotation);
visibleAnnotations.push(data)
}
2019-02-04 08:53:42 +00:00
})
// fixme: trigger loaded event from reader instead?
setTimeout(function() {
that.postMessage('addAnnotations', {
annotations: visibleAnnotations,
replace: true
})
}, 500)
2019-02-04 08:53:42 +00:00
}
2014-05-17 11:45:57 +00:00
return that.updateElement();
2014-05-04 17:26:43 +00:00
};