openmedialibrary/static/js/viewer.js

'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
        }
        var map = {}
        map[sortKey] = function(value) {
            return value.toString();
        }
        annotations = Ox.sortBy(annotations, sortKey, map)
        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();
};