84 lines
3.1 KiB
JavaScript
84 lines
3.1 KiB
JavaScript
'use strict';
|
|
|
|
oml.ui.viewer = function() {
|
|
|
|
var ui = oml.user.ui,
|
|
|
|
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;
|
|
|
|
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)
|
|
var $annotation = oml.ui.annotation(data, $iframe)
|
|
oml.$ui.annotationFolder.append($annotation);
|
|
$annotation.annotate();
|
|
} else if (event == 'removeAnnotation') {
|
|
console.log('do it ...', data)
|
|
oml.$ui.annotationFolder.find('#a-' + data.id).remove()
|
|
} else if (event == 'selectAnnotation') {
|
|
console.log('select', data)
|
|
} else if (event == 'deselectAnnotation') {
|
|
console.log('deselect', data)
|
|
}
|
|
that.triggerEvent(event, data);
|
|
}).appendTo(frame);
|
|
$iframe.attr({
|
|
src: '/' + item + '/reader/'
|
|
});
|
|
}
|
|
});
|
|
}
|
|
return that;
|
|
};
|
|
that.postMessage = function(event, data) {
|
|
$iframe && $iframe.postMesage(event, data)
|
|
};
|
|
|
|
return that.updateElement();
|
|
};
|