245 lines
9.4 KiB
JavaScript
245 lines
9.4 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);
|
|
},
|
|
oml_sortannotations: function(data) {
|
|
that.renderAnnotations()
|
|
},
|
|
oml_annotationusers: function(data) {
|
|
that.renderAnnotations()
|
|
}
|
|
}),
|
|
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) {
|
|
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
|
|
}
|
|
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) {
|
|
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)
|
|
}
|
|
})
|
|
}
|
|
}
|
|
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)
|
|
}
|
|
data.user = a.user || oml.user.id
|
|
data.notes = data.notes || [];
|
|
annotations.push(data);
|
|
}
|
|
|
|
function removeAnnotation(id) {
|
|
oml.api.removeAnnotation({
|
|
item: ui.item,
|
|
annotation: id
|
|
}, function(result) {
|
|
annotations = annotations.filter(function(annotation) {
|
|
return annotation.id != id
|
|
})
|
|
})
|
|
}
|
|
|
|
var annotationEvents = {
|
|
change: function(data) {
|
|
// console.log('change', data)
|
|
},
|
|
'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') {
|
|
addAnnotation(data);
|
|
var $annotation = oml.ui.annotation(data, $iframe).bindEvent(annotationEvents)
|
|
oml.$ui.annotationFolder.append($annotation);
|
|
$annotation.annotate();
|
|
oml.$ui.annotationPanel.updateSelection(false)
|
|
oml.$ui.annotationPanel.options({hasAnnotations: true})
|
|
} else if (event == 'removeAnnotation') {
|
|
oml.$ui.annotationFolder.find('#a-' + data.id).remove()
|
|
data.id && removeAnnotation(data.id)
|
|
oml.$ui.annotationPanel.options({hasAnnotations: annotations.filter(function(a) {
|
|
return a.user == oml.user.id
|
|
}).length > 0})
|
|
} 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()
|
|
}
|
|
oml.$ui.annotationPanel.updateSelection(false)
|
|
} else if (event == 'selectText') {
|
|
oml.$ui.annotationPanel.updateSelection(data)
|
|
} else {
|
|
console.log('trigger unknwon event', event, data)
|
|
that.triggerEvent(event, data);
|
|
}
|
|
}).bindEvent({
|
|
init: function() {
|
|
loadAnnotations(function(annotations) {
|
|
that.renderAnnotations()
|
|
})
|
|
}
|
|
}).appendTo(frame);
|
|
$iframe.attr({
|
|
src: '/' + item + '/reader/'
|
|
});
|
|
}
|
|
});
|
|
}
|
|
return that;
|
|
};
|
|
that.postMessage = function(event, data) {
|
|
$iframe && $iframe.postMessage(event, data)
|
|
};
|
|
that.getAnnotations = function() {
|
|
return annotations;
|
|
}
|
|
that.renderAnnotations = function(load=false) {
|
|
var sortKey = ui.sortAnnotations
|
|
if (sortKey == 'date') {
|
|
sortKey = 'created'
|
|
}
|
|
if (sortKey == 'quote') {
|
|
sortKey = 'text'
|
|
}
|
|
if (load) {
|
|
loadAnnotations(function() {
|
|
that.renderAnnotations()
|
|
})
|
|
return
|
|
}
|
|
annotations = Ox.sortBy(annotations, sortKey)
|
|
oml.$ui.annotationFolder.empty();
|
|
var visibleAnnotations = [];
|
|
var hasAnnotations = false;
|
|
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)
|
|
}
|
|
if (data.user == oml.user.id) {
|
|
hasAnnotations = true
|
|
}
|
|
})
|
|
oml.$ui.annotationPanel.options({hasAnnotations: hasAnnotations})
|
|
// fixme: trigger loaded event from reader instead?
|
|
setTimeout(function() {
|
|
that.postMessage('addAnnotations', {
|
|
annotations: visibleAnnotations,
|
|
replace: true
|
|
})
|
|
}, 500)
|
|
|
|
}
|
|
return that.updateElement();
|
|
};
|