From 4f3d5f5ee17475305ddde2680cbfc22d927be219 Mon Sep 17 00:00:00 2001
From: j <j@mailb.org>
Date: Wed, 23 Jan 2019 20:44:59 +0530
Subject: [PATCH] add annotation panel

---
 config.json                  |  1 +
 static/html/epub.html        |  3 +-
 static/js/annotation.js      | 16 ++++++++
 static/js/annotationPanel.js | 11 ++++++
 static/js/mainMenu.js        | 14 +++++++
 static/js/viewer.js          | 49 ++++++++++++++++++++++--
 static/json/js.json          |  2 +
 static/reader/epub.js        | 74 +++++++++++++++++++++++++++++-------
 static/reader/pdf.js         | 67 +++++++++++++++++++++++---------
 9 files changed, 201 insertions(+), 36 deletions(-)
 create mode 100644 static/js/annotation.js
 create mode 100644 static/js/annotationPanel.js

diff --git a/config.json b/config.json
index 2cbdf65..0f4e28e 100644
--- a/config.json
+++ b/config.json
@@ -358,6 +358,7 @@
                 "help": "introduction"
             },
             "section": "books",
+            "showAnnotations": false,
             "showBrowser": true,
             "showDebugMenu": false,
             "showFolder": {},
diff --git a/static/html/epub.html b/static/html/epub.html
index d0f2838..7bc353f 100644
--- a/static/html/epub.html
+++ b/static/html/epub.html
@@ -92,6 +92,7 @@
             }
         </style>
 
+        <script src="/static/oxjs/min/Ox.js?3"></script>
         <script src="/static/epub.js/js/libs/jquery.min.js?3"></script>
         <script src="/static/epub.js/js/libs/zip.min.js?3"></script>
         <script src="/static/reader/epub.js?3"></script>
@@ -136,7 +137,7 @@
         </div>
       </div>
       <div id="main">
-        
+
         <div id="titlebar">
           <div id="opener">
             <a id="slider" class="icon-menu">Menu</a>
diff --git a/static/js/annotation.js b/static/js/annotation.js
new file mode 100644
index 0000000..f19ec3a
--- /dev/null
+++ b/static/js/annotation.js
@@ -0,0 +1,16 @@
+'use strict';
+
+oml.ui.annotation = function(data, $iframe) {
+    var that = Ox.Element().attr({
+        id: 'a-' + data.id
+    }).css({
+        padding: '16px'
+    }).html(data.text).on({
+        click: function(event) {
+            $iframe.postMessage('selectAnnotation', {
+                id: data.id
+            })
+        }
+    });
+    return that;
+};
diff --git a/static/js/annotationPanel.js b/static/js/annotationPanel.js
new file mode 100644
index 0000000..cd4ad94
--- /dev/null
+++ b/static/js/annotationPanel.js
@@ -0,0 +1,11 @@
+'use strict';
+
+oml.ui.annotationPanel = function() {
+
+    var ui = oml.user.ui,
+        that = Ox.Element().css({
+            overflowY: 'auto',
+        });
+
+    return that;
+};
diff --git a/static/js/mainMenu.js b/static/js/mainMenu.js
index 454bc0f..e8c4c35 100644
--- a/static/js/mainMenu.js
+++ b/static/js/mainMenu.js
@@ -232,6 +232,12 @@ oml.ui.mainMenu = function() {
                             keyboard: 'shift b',
                             disabled: !ui.item
                         },
+                        {
+                            id: 'showannotations',
+                            title: Ox._((ui.showAnnotations ? 'Hide' : 'Show') + ' Annotations'),
+                            keyboard: 'shift a',
+                            disabled: !ui.item
+                        },
                         {},
                         {
                             id: 'preview',
@@ -539,6 +545,8 @@ oml.ui.mainMenu = function() {
                     oml.UI.set({showFilters: !ui.showFilters});
                 } else if (id == 'showbrowser') {
                     oml.UI.set({showBrowser: !ui.showBrowser});
+                } else if (id == 'showannotations') {
+                    oml.UI.set({showAnnotations: !ui.showAnnotations});
                 } else if (id == 'preview') {
                     that.setItemTitle(
                         'preview',
@@ -613,6 +621,9 @@ oml.ui.mainMenu = function() {
             oml_listview: function(data) {
                 that.checkItem('viewMenu_listviewSubmenu_' + data.value);
             },
+            oml_showannotations: function(data) {
+                that.setItemTitle('showannotations', Ox._((data.value ? 'Hide' : 'Show') + ' Annotations'));
+            },
             oml_showbrowser: function(data) {
                 that.setItemTitle('showbrowser', Ox._((data.value ? 'Hide' : 'Show') + ' Browser'));
             },
@@ -705,6 +716,9 @@ oml.ui.mainMenu = function() {
         key_control_z: function() {
             oml.undoHistory();
         },
+        key_shift_a: function() {
+            ui.item && oml.UI.set({showAnnotations: !ui.showAnnotations});
+        },
         key_shift_b: function() {
             ui.item && oml.UI.set({showBrowser: !ui.showBrowser});
         },
diff --git a/static/js/viewer.js b/static/js/viewer.js
index bb32c1a..d792913 100644
--- a/static/js/viewer.js
+++ b/static/js/viewer.js
@@ -4,15 +4,36 @@ oml.ui.viewer = function() {
 
     var ui = oml.user.ui,
 
+        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(),
+                        size: 256,
+                        tooltip: Ox._('Annotations')
+                            + ' <span class="OxBright">'
+                            + Ox.SYMBOLS.shift + 'A</span>'
+                    }
+                ],
+                orientation: 'horizontal'
+            })
+            .appendTo(that),
         $iframe, item;
 
     that.updateElement = function() {
@@ -20,11 +41,29 @@ oml.ui.viewer = function() {
         if (item && item.length) {
             oml.api.get({id: item, keys: ['mediastate']}, function(result) {
                 if (result.data.mediastate == 'available') {
-                    $iframe = $iframe || Ox.Element('<iframe>').css({
+                    oml.$ui.annotationPanel.empty()
+                    if ($iframe) {
+                        $iframe.remove()
+                    }
+                    $iframe = Ox.Element('<iframe>').css({
                         width: '100%',
                         height: '100%',
                         border: 0
-                    }).appendTo(that);
+                    }).onMessage(function(data, event) {
+                        console.log('got', event, data)
+                        if (event == 'addAnnotation') {
+                            console.log('adding', data.id)
+                            oml.$ui.annotationPanel.append(oml.ui.annotation(data, $iframe));
+                        } else if (event == 'removeAnnotation') {
+                            console.log('do it ...', data)
+                            oml.$ui.annotationPanel.find('#a-' + data.id).remove()
+                        } else if (event == 'selectAnnotation') {
+                            console.log('select', data)
+                        } else if (event == 'deselectAnnotation') {
+                            console.log('deselect', data)
+                        }
+                        that.triggerEvent(event, data);
+                    }).appendTo(frame);
                     $iframe.attr({
                         src: '/' + item + '/reader/'
                     });
@@ -33,7 +72,9 @@ oml.ui.viewer = function() {
         }
         return that;
     };
+    that.postMessage = function(event, data) {
+        $iframe && $iframe.postMesage(event, data)
+    };
 
     return that.updateElement();
-
 };
diff --git a/static/json/js.json b/static/json/js.json
index 1aabee6..0478da7 100644
--- a/static/json/js.json
+++ b/static/json/js.json
@@ -3,6 +3,8 @@
     "UI.js",
     "URL.js",
     "allItems.js",
+    "annotation.js",
+    "annotationPanel.js",
     "appDialog.js",
     "appPanel.js",
     "backButton.js",
diff --git a/static/reader/epub.js b/static/reader/epub.js
index 08f209d..d0387fc 100644
--- a/static/reader/epub.js
+++ b/static/reader/epub.js
@@ -5,10 +5,61 @@ var annotations = JSON.parse(localStorage[id + '.annotations'] || '[]')
 var currentSelection;
 var fontSize = parseInt(localStorage.epubFontSize || '100', 10)
 
+Ox.load({
+    'UI': {
+        loadCSS: false
+    }
+}, function() {
+    Ox.$parent.bindMessage(function(data, event) {
+        console.log('got', event, 'data', data)
+        if (event == 'selectAnnotation') {
+            selectAnnotation(data.id)
+            var annotation = annotations.filter(function(a) { return a.id == data.id })[0]
+            if (annotation) {
+                reader.rendition.display(annotation.cfiRange)
+            }
+        }
+    })
+    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) {
+    $('.epubjs-hl.selected').each(function(i, g) {
+        g.classList.remove('selected')
+    })
+    $('.epubjs-hl[data-id='+id+']').each(function(i, g) {
+        g.classList.add('selected')
+    })
+}
+
+function deselectAnnotation(id) {
+    $('.epubjs-hl[data-id='+id+']').each(function(i, g) {
+        g.classList.remove('selected')
+    })
+}
+
+function removeAnnotation(a) {
+    annotations = annotations.filter(function(annotation) {
+        return annotation.cfiRange != a.dataset.epubcfi
+    })
+    reader.rendition.annotations.remove(a.dataset.epubcfi)
+    saveAnnotations()
+}
+
 function getText(book, cfiRange, cb) {
     book.getRange(cfiRange).then(function (range) {
         var text;
@@ -45,18 +96,15 @@ document.onreadystatechange = function () {
 
         rendition.themes.fontSize(fontSize + "%");
         annotations.forEach(function(a) {
-            rendition.annotations.highlight(a.cfiRange, a.data || {}, onHighlightClicked);
+            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) {
-                    annotations = annotations.filter(function(annotation) {
-                        return annotation.cfiRange != a.dataset.epubcfi
-                    })
-                    rendition.annotations.remove(a.dataset.epubcfi)
-                    saveAnnotations()
+                    removeAnnotation(a)
+                    Ox.$parent.postMessage('removeAnnotation', {id: a.dataset.id})
                 })
             }
             if (event.key == 'n') {
@@ -70,11 +118,10 @@ document.onreadystatechange = function () {
                     //currentSelection.cfiRange = reader.rendition.book.section().cfiFromRange(range).toString()
                     */
 
-                    rendition.annotations.highlight(currentSelection.cfiRange, currentSelection.data, onHighlightClicked);
+                    rendition.annotations.highlight(currentSelection.cfiRange, {id: currentSelection.id}, onHighlightClicked);
                     currentSelection.contents.window.getSelection().removeAllRanges();
                     delete currentSelection.contents
-                    annotations.push(currentSelection)
-                    saveAnnotations()
+                    addAnnotation(currentSelection)
                     document.querySelectorAll('.epubjs-hl.selected').forEach(function(other) {
                         other.classList.remove('selected')
                     })
@@ -103,13 +150,12 @@ document.onreadystatechange = function () {
             console.log('!! mark', cfiRange)
         })
         rendition.on("selected", function(cfiRange, contents) {
-            console.log('!! selected', cfiRange)
-            getText(book, cfiRange, function(quote) {
+            getText(book, cfiRange, function(text) {
                 currentSelection = {
+                    id: Ox.SHA1(cfiRange),
+                    created: (new Date).toISOString(),
                     cfiRange: cfiRange,
-                    data: {
-                        quote: quote
-                    },
+                    text: text,
                     contents: contents
                 }
             })
diff --git a/static/reader/pdf.js b/static/reader/pdf.js
index 82da720..595e1b2 100644
--- a/static/reader/pdf.js
+++ b/static/reader/pdf.js
@@ -2,21 +2,39 @@ var id = document.location.pathname.split('/')[1];
 var annotations = JSON.parse(localStorage[id + '.annotations'] || '[]')
 var currentPage = 1, rendered = false
 
-function getID() {
-    var id = 0;
-    while (annotations.filter(function(a) {
-        return a.id == id
-    }).length) {
-        id++
+Ox.load({
+    'UI': {
+        loadCSS: false
     }
-    return id
-}
+}, function() {
+    Ox.$parent.bindMessage(function(data, event) {
+        console.log('got', event, 'data', data)
+        if (event == 'selectAnnotation') {
+            var annotation = annotations.filter(function(a) { return a.id == data.id })[0]
+            if (
+                annotation &&
+                annotation.page &&
+                PDFViewerApplication.pdfViewer.currentPageNumber != annotation.page
+            ) {
+                //FIXME: scroll into view
+                PDFViewerApplication.pdfViewer.currentPageNumber = annotation.page;
+            }
+            selectAnnotation(data.id)
+        }
+    })
+    setTimeout(function() {
+        annotations.forEach(function(a) {
+            Ox.$parent.postMessage('addAnnotation', a)
+        })
+    }, 1000)
+})
 
 window.addEventListener('keydown', function(event) {
     if (event.key == 'Delete') {
         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) {
@@ -36,28 +54,36 @@ function bindEvents() {
         return
     }
     PDFViewerApplication.eventBus.on('pagerendered', function(event) {
-        var pageIndex = event.pageNumber - 1
-        loadAnnotations(pageIndex)
+        loadAnnotations(event.pageNumber)
     })
 }
 
 bindEvents()
 
 function getHighlight() {
-    var pageIndex = PDFViewerApplication.pdfViewer.currentPageNumber - 1; 
+    var pageNumber = PDFViewerApplication.pdfViewer.currentPageNumber;
+    var pageIndex = pageNumber - 1;
     var page = PDFViewerApplication.pdfViewer.getPageView(pageIndex);
     var pageRect = page.canvas.getClientRects()[0];
-    var selectionRects = window.getSelection().getRangeAt(0).getClientRects();
+    var selection = window.getSelection()
+    var selectionRects = selection.getRangeAt(0).getClientRects();
     var viewport = page.viewport;
     var selected = Array.from(selectionRects).map(function (r) {
       return viewport.convertToPdfPoint(r.left - pageRect.x, r.top - pageRect.y).concat(
          viewport.convertToPdfPoint(r.right - pageRect.x, r.bottom - pageRect.y)); 
     });
-    return {page: pageIndex, coords: selected, id: getID()};
+    var text = selection.toString();
+    return {
+        created: (new Date).toISOString(),
+        page: pageNumber,
+        coords: selected,
+        text: text,
+        id: Ox.SHA1(pageNumber.toString() + JSON.stringify(selected))
+    };
 }
 
 function renderAnnotation(annotation) {
-    var pageIndex = annotation.page;
+    var pageIndex = annotation.page - 1;
     var page = PDFViewerApplication.pdfViewer.getPageView(pageIndex);
     if (!page.canvas) {
         setTimeout(function() {
@@ -81,8 +107,10 @@ function renderAnnotation(annotation) {
         el.addEventListener('click', function() {
             if (el.classList.contains('selected')) {
                 deselectAnnotation(annotation.id)
+                Ox.$parent.postMessage('deselectAnnotation', {id: annotation.id})
             } else {
                 selectAnnotation(annotation.id)
+                Ox.$parent.postMessage('selectAnnotation', {id: annotation.id})
             }
         });
         pageElement.appendChild(el);
@@ -91,10 +119,15 @@ function renderAnnotation(annotation) {
 
 function addAnnotation(annotation) {
     annotations.push(annotation)
+    Ox.$parent.postMessage('addAnnotation', annotation)
     saveAnnotations()
 }
 
 function selectAnnotation(id) {
+    document.querySelectorAll('.oml-annotation.selected').forEach(function(g) {
+        g.classList.remove('selected')
+        g.style.backgroundColor = 'yellow'
+    })
     document.querySelectorAll('.oml-annotation.a' + id).forEach(function(g) {
         g.classList.add('selected')
         g.style.backgroundColor = 'blue'
@@ -121,12 +154,12 @@ function saveAnnotations() {
     localStorage[id + '.annotations'] = JSON.stringify(annotations)
 }
 
-function loadAnnotations(pageIndex) {
-    document.querySelectorAll('.oml-annotation.page' + pageIndex).forEach(function(e) {
+function loadAnnotations(page) {
+    document.querySelectorAll('.oml-annotation.page' + page).forEach(function(e) {
         e.remove()
     })
     annotations.filter(function(a) {
-        return a.page == pageIndex
+        return a.page == page
     }).forEach(function(annot) {
         renderAnnotation(annot)
     })