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

147 lines
5.6 KiB
JavaScript

'use strict';
oml.ui.viewer = function() {
var ui = oml.user.ui,
annotations = [],
frame = Ox.Element(),
that = Ox.Element()
.bindEvent({
oml_itemview: function(data) {
if (ui.item != item && ui.itemView == 'book') {
that.updateElement(ui.item);
}
},
oml_showannotations: function() {
panel.toggleElement(1);
}
}),
panel = Ox.SplitPanel({
elements: [
{
element: frame
},
{
collapsed: !ui.showAnnotations,
collapsible: true,
element: oml.$ui.annotationPanel = oml.ui.annotationPanel(),
resizable: true,
resize: [128, 384],
size: 256,
tooltip: Ox._('Annotations')
+ ' <span class="OxBright">'
+ Ox.SYMBOLS.shift + 'A</span>'
}
],
orientation: 'horizontal'
})
.appendTo(that),
$iframe, item;
function loadAnnotations(callback) {
annotations = JSON.parse(localStorage[item + '.annotations'] || '[]')
annotations.forEach(function(data) {
if (data.comments && !data.notes) {
data.notes = data.comments
delete data.comments
}
data.notes = data.notes || [];
})
callback && callback(annotations)
}
function saveAnnotations(data) {
if (data) {
data.created = data.created || (new Date).toISOString();
if (data.comments && !data.notes) {
data.notes = data.comments
delete data.comments
}
data.notes = data.notes || [];
annotations.push(data);
}
localStorage[item + '.annotations'] = JSON.stringify(annotations)
}
function removeAnnotation(id) {
annotations = annotations.filter(function(annotation) {
return annotation.id != id
})
saveAnnotations()
}
var annotationEvents = {
change: function() {
console.log('change...')
console.log(annotations)
saveAnnotations()
},
'delete': function(data) {
oml.$ui.annotationFolder.find('#a-' + data.id).remove()
that.postMessage('removeAnnotation', data)
}
}
that.updateElement = function() {
item = ui.item;
if (item && item.length) {
oml.api.get({id: item, keys: ['mediastate']}, function(result) {
if (result.data.mediastate == 'available') {
oml.$ui.annotationFolder.empty()
if ($iframe) {
$iframe.remove()
}
$iframe = Ox.Element('<iframe>').css({
width: '100%',
height: '100%',
border: 0
}).onMessage(function(data, event) {
console.log('got', event, data)
if (event == 'addAnnotation') {
console.log('adding', data.id)
saveAnnotations(data);
var $annotation = oml.ui.annotation(data, $iframe).bindEvent(annotationEvents)
oml.$ui.annotationFolder.append($annotation);
$annotation.annotate();
} else if (event == 'removeAnnotation') {
oml.$ui.annotationFolder.find('#a-' + data.id).remove()
removeAnnotation(data.id)
} else if (event == 'selectAnnotation') {
var $annotation = oml.$ui.annotationFolder.find('#a-' + data.id)
$annotation.select()
} else if (event == 'deselectAnnotation') {
var $annotation = oml.$ui.annotationFolder.find('#a-' + data.id)
$annotation.deselect()
} else {
that.triggerEvent(event, data);
}
}).bindEvent({
init: function() {
loadAnnotations(function(annotations) {
annotations.forEach(function(data) {
var $annotation = oml.ui.annotation(data, $iframe).bindEvent(annotationEvents)
oml.$ui.annotationFolder.append($annotation);
})
// fixme: trigger loaded event from reader instead?
setTimeout(function() {
that.postMessage('addAnnotations', {
annotations: annotations
})
}, 500)
})
}
}).appendTo(frame);
$iframe.attr({
src: '/' + item + '/reader/'
});
}
});
}
return that;
};
that.postMessage = function(event, data) {
$iframe && $iframe.postMessage(event, data)
};
return that.updateElement();
};