'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'] || '[]') callback && callback(annotations) } function saveAnnotations(data) { if (data) { data.created = data.created || (new Date).toISOString(); data.comments = data.comments || []; 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() } } 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') { console.log('select', data) } else if (event == 'deselectAnnotation') { console.log('deselect', data) } 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(); };