openmedialibrary/static/js/viewer.js

81 lines
2.9 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-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);
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(),
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
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-23 15:14:59 +00:00
oml.$ui.annotationPanel.empty()
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) {
console.log('got', event, data)
if (event == 'addAnnotation') {
console.log('adding', data.id)
oml.$ui.annotationPanel.append(oml.ui.annotation(data, $iframe));
} else if (event == 'removeAnnotation') {
console.log('do it ...', data)
oml.$ui.annotationPanel.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);
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) {
$iframe && $iframe.postMesage(event, data)
};
2014-05-04 17:26:43 +00:00
2014-05-17 11:45:57 +00:00
return that.updateElement();
2014-05-04 17:26:43 +00:00
};