unify annotations local storage

2019-01-24 17:22:44 +05:30 · 2019-01-24 17:22:44 +05:30 · d4b89137db
parent 3905ddb9fc
commit d4b89137db
4 changed files with 61 additions and 40 deletions
--- a/static/js/annotation.js
+++ b/static/js/annotation.js
@ -1,7 +1,6 @@
 'use strict';

 oml.ui.annotation = function(data, $iframe) {
-    data.created = data.created || (new Date).toISOString();
    var $arrayEditable = Ox.ArrayEditable({
        editing: true,
        type: 'textarea'
--- a/static/js/viewer.js
+++ b/static/js/viewer.js
@ -3,6 +3,7 @@
 oml.ui.viewer = function() {

    var ui = oml.user.ui,
+        annotations = [],

        frame = Ox.Element(),
        that = Ox.Element()
@ -38,6 +39,24 @@ oml.ui.viewer = function() {
            .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();
+            annotations.push(data);
+        }
+        localStorage[item + '.annotations'] = JSON.stringify(annotations)
+    }
+    function removeAnnotation(id) {
+        annotations = annotations.filter(function(annotation) {
+            return annotation.id != id
+        })
+        saveAnnotations()
+    }
+
    that.updateElement = function() {
        item = ui.item;
        if (item && item.length) {
@ -55,18 +74,36 @@ oml.ui.viewer = function() {
                        console.log('got', event, data)
                        if (event == 'addAnnotation') {
                            console.log('adding', data.id)
+                            saveAnnotations(data);
                            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()
+                            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)
+                                    oml.$ui.annotationFolder.append($annotation);
+                                })
+                                // fixme: trigger loaded event from reader instead?
+                                setTimeout(function() {
+                                    that.postMessage('addAnnotations', {
+                                        annotations: annotations
+                                    })
+                                }, 500)
+                            })
                        }
-                        that.triggerEvent(event, data);
                    }).appendTo(frame);
                    $iframe.attr({
                        src: '/' + item + '/reader/'
@ -77,7 +114,7 @@ oml.ui.viewer = function() {
        return that;
    };
    that.postMessage = function(event, data) {
-        $iframe && $iframe.postMesage(event, data)
+        $iframe && $iframe.postMessage(event, data)
    };

    return that.updateElement();
--- a/static/reader/epub.js
+++ b/static/reader/epub.js
@ -1,7 +1,7 @@
 "use strict";
 var reader;
 var id = document.location.pathname.split('/')[1];
-var annotations = JSON.parse(localStorage[id + '.annotations'] || '[]')
+var annotations = [];
 var currentSelection;
 var fontSize = parseInt(localStorage.epubFontSize || '100', 10)

@ -18,23 +18,18 @@ Ox.load({
            if (annotation) {
                reader.rendition.display(annotation.cfiRange)
            }
+        } else if (event == 'addAnnotations') {
+            data.annotations.forEach(function(annotation) {
+                annotations.push(annotation)
+                renderAnnotation(annotation)
+            })
        }
    })
-    setTimeout(function() {
-        annotations.forEach(function(a) {
-            Ox.$parent.postMessage('addAnnotation', a)
-        })
-    }, 1000)
 })

-function saveAnnotations() {
-    localStorage[id + '.annotations'] = JSON.stringify(annotations)
-}
-
 function addAnnotation(annotation) {
    annotations.push(annotation)
    Ox.$parent.postMessage('addAnnotation', annotation)
-    saveAnnotations()
 }

 function selectAnnotation(id) {
@ -57,7 +52,11 @@ function removeAnnotation(a) {
        return annotation.cfiRange != a.dataset.epubcfi
    })
    reader.rendition.annotations.remove(a.dataset.epubcfi)
-    saveAnnotations()
+    Ox.$parent.postMessage('removeAnnotation', {id: a.dataset.id})
+}
+
+function renderAnnotation(annotation) {
+    reader.rendition.annotations.highlight(annotation.cfiRange, {id: annotation.id}, onHighlightClicked);
 }

 function getText(book, cfiRange, cb) {
@ -95,16 +94,11 @@ document.onreadystatechange = function () {
            book = reader.book;

        rendition.themes.fontSize(fontSize + "%");
-        annotations.forEach(function(a) {
-            rendition.annotations.highlight(a.cfiRange, {id: a.id}, onHighlightClicked);
-        })
-

        reader.rendition.on('keydown', function(event) {
            if (event.key == 'Delete') {
                document.querySelectorAll('.epubjs-hl.selected').forEach(function(a) {
                    removeAnnotation(a)
-                    Ox.$parent.postMessage('removeAnnotation', {id: a.dataset.id})
                })
            }
            if (event.key == 'n') {
@ -117,8 +111,7 @@ document.onreadystatechange = function () {
                    )
                    //currentSelection.cfiRange = reader.rendition.book.section().cfiFromRange(range).toString()
                    */
-
-                    rendition.annotations.highlight(currentSelection.cfiRange, {id: currentSelection.id}, onHighlightClicked);
+                    renderAnnotation(currentSelection)
                    currentSelection.contents.window.getSelection().removeAllRanges();
                    delete currentSelection.contents
                    addAnnotation(currentSelection)
@ -153,7 +146,6 @@ document.onreadystatechange = function () {
            getText(book, cfiRange, function(text) {
                currentSelection = {
                    id: Ox.SHA1(cfiRange),
-                    created: (new Date).toISOString(),
                    cfiRange: cfiRange,
                    text: text,
                    contents: contents
--- a/static/reader/pdf.js
+++ b/static/reader/pdf.js
@ -1,5 +1,5 @@
 var id = document.location.pathname.split('/')[1];
-var annotations = JSON.parse(localStorage[id + '.annotations'] || '[]')
+var annotations = [];
 var currentPage = 1, rendered = false

 Ox.load({
@ -20,13 +20,13 @@ Ox.load({
                PDFViewerApplication.pdfViewer.currentPageNumber = annotation.page;
            }
            selectAnnotation(data.id)
+        } else if (event == 'addAnnotations') {
+            data.annotations.forEach(function(annotation) {
+                annotations.push(annotation)
+                renderAnnotation(annotation)
+            })
        }
    })
-    setTimeout(function() {
-        annotations.forEach(function(a) {
-            Ox.$parent.postMessage('addAnnotation', a)
-        })
-    }, 1000)
 })

 window.addEventListener('keydown', function(event) {
@ -34,7 +34,6 @@ window.addEventListener('keydown', function(event) {
        var selected = document.querySelector('.oml-annotation.selected')
        if (selected) {
            removeAnnotation(selected.dataset.id)
-            Ox.$parent.postMessage('removeAnnotation', {id: selected.dataset.id})
        }
    } else if (event.key == 'n') {
        if (!window.getSelection().isCollapsed) {
@ -74,7 +73,6 @@ function getHighlight() {
    });
    var text = selection.toString();
    return {
-        created: (new Date).toISOString(),
        page: pageNumber,
        coords: selected,
        text: text,
@ -85,10 +83,10 @@ function getHighlight() {
 function renderAnnotation(annotation) {
    var pageIndex = annotation.page - 1;
    var page = PDFViewerApplication.pdfViewer.getPageView(pageIndex);
-    if (!page.canvas) {
+    if (!page || !page.canvas) {
        setTimeout(function() {
            renderAnnotation(annotation)
-        }, 10)
+        }, 50)
        return
    }
    var pageElement = page.canvas.parentElement.parentElement;
@ -120,7 +118,6 @@ function renderAnnotation(annotation) {
 function addAnnotation(annotation) {
    annotations.push(annotation)
    Ox.$parent.postMessage('addAnnotation', annotation)
-    saveAnnotations()
 }

 function selectAnnotation(id) {
@ -147,11 +144,7 @@ function removeAnnotation(id) {
    annotations = annotations.filter(function(annotation) {
        return annotation.id != id
    })
-    saveAnnotations()
-}
-
-function saveAnnotations() {
-    localStorage[id + '.annotations'] = JSON.stringify(annotations)
+    Ox.$parent.postMessage('removeAnnotation', {id: selected.dataset.id})
 }

 function loadAnnotations(page) {