unify annotations local storage

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

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) {