unify annotations local storage

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'

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();

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()
                     */
-
+                    renderAnnotation(currentSelection)
-                    rendition.annotations.highlight(currentSelection.cfiRange, {id: currentSelection.id}, onHighlightClicked);
                     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

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()
+    Ox.$parent.postMessage('removeAnnotation', {id: selected.dataset.id})
-}
-
-function saveAnnotations() {
-    localStorage[id + '.annotations'] = JSON.stringify(annotations)
 }
 
 function loadAnnotations(page) {