config.json

@@ -358,7 +358,6 @@
                 "help": "introduction"
             },
             "section": "books",
-            "showAnnotations": false,
             "showBrowser": true,
             "showDebugMenu": false,
             "showFolder": {},

static/html/epub.html

@@ -92,7 +92,6 @@
             }
         </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>
@@ -137,7 +136,7 @@
         </div>
       </div>
       <div id="main">
-
+        
         <div id="titlebar">
           <div id="opener">
             <a id="slider" class="icon-menu">Menu</a>

static/js/annotation.js

@@ -1,16 +0,0 @@
-'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;
-};

static/js/annotationPanel.js

@@ -1,11 +0,0 @@
-'use strict';
-
-oml.ui.annotationPanel = function() {
-
-    var ui = oml.user.ui,
-        that = Ox.Element().css({
-            overflowY: 'auto',
-        });
-
-    return that;
-};

static/js/mainMenu.js

@@ -232,12 +232,6 @@ 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',
@@ -545,8 +539,6 @@ 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',
@@ -621,9 +613,6 @@ 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'));
             },
@@ -716,9 +705,6 @@ 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});
         },

static/js/viewer.js

@@ -4,36 +4,15 @@ 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() {
@@ -41,29 +20,11 @@ oml.ui.viewer = function() {
         if (item && item.length) {
             oml.api.get({id: item, keys: ['mediastate']}, function(result) {
                 if (result.data.mediastate == 'available') {
-                    oml.$ui.annotationPanel.empty()
+                    $iframe = $iframe || Ox.Element('<iframe>').css({
-                    if ($iframe) {
-                        $iframe.remove()
-                    }
-                    $iframe = Ox.Element('<iframe>').css({
                         width: '100%',
                         height: '100%',
                         border: 0
-                    }).onMessage(function(data, event) {
+                    }).appendTo(that);
-                        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/'
                     });
@@ -72,9 +33,7 @@ oml.ui.viewer = function() {
         }
         return that;
     };
-    that.postMessage = function(event, data) {
-        $iframe && $iframe.postMesage(event, data)
-    };
 
     return that.updateElement();
+
 };

static/json/js.json

@@ -3,8 +3,6 @@
     "UI.js",
     "URL.js",
     "allItems.js",
-    "annotation.js",
-    "annotationPanel.js",
     "appDialog.js",
     "appPanel.js",
     "backButton.js",

static/reader/epub.js

@@ -5,61 +5,10 @@ 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;
@@ -96,15 +45,18 @@ document.onreadystatechange = function () {
 
         rendition.themes.fontSize(fontSize + "%");
         annotations.forEach(function(a) {
-            rendition.annotations.highlight(a.cfiRange, {id: a.id}, onHighlightClicked);
+            rendition.annotations.highlight(a.cfiRange, a.data || {}, onHighlightClicked);
         })
 
 
         reader.rendition.on('keydown', function(event) {
             if (event.key == 'Delete') {
                 document.querySelectorAll('.epubjs-hl.selected').forEach(function(a) {
-                    removeAnnotation(a)
+                    annotations = annotations.filter(function(annotation) {
-                    Ox.$parent.postMessage('removeAnnotation', {id: a.dataset.id})
+                        return annotation.cfiRange != a.dataset.epubcfi
+                    })
+                    rendition.annotations.remove(a.dataset.epubcfi)
+                    saveAnnotations()
                 })
             }
             if (event.key == 'n') {
@@ -118,10 +70,11 @@ document.onreadystatechange = function () {
                     //currentSelection.cfiRange = reader.rendition.book.section().cfiFromRange(range).toString()
                     */
 
-                    rendition.annotations.highlight(currentSelection.cfiRange, {id: currentSelection.id}, onHighlightClicked);
+                    rendition.annotations.highlight(currentSelection.cfiRange, currentSelection.data, onHighlightClicked);
                     currentSelection.contents.window.getSelection().removeAllRanges();
                     delete currentSelection.contents
-                    addAnnotation(currentSelection)
+                    annotations.push(currentSelection)
+                    saveAnnotations()
                     document.querySelectorAll('.epubjs-hl.selected').forEach(function(other) {
                         other.classList.remove('selected')
                     })
@@ -150,12 +103,13 @@ document.onreadystatechange = function () {
             console.log('!! mark', cfiRange)
         })
         rendition.on("selected", function(cfiRange, contents) {
-            getText(book, cfiRange, function(text) {
+            console.log('!! selected', cfiRange)
+            getText(book, cfiRange, function(quote) {
                 currentSelection = {
-                    id: Ox.SHA1(cfiRange),
-                    created: (new Date).toISOString(),
                     cfiRange: cfiRange,
-                    text: text,
+                    data: {
+                        quote: quote
+                    },
                     contents: contents
                 }
             })

static/reader/pdf.js

@@ -2,39 +2,21 @@ var id = document.location.pathname.split('/')[1];
 var annotations = JSON.parse(localStorage[id + '.annotations'] || '[]')
 var currentPage = 1, rendered = false
 
-Ox.load({
+function getID() {
-    'UI': {
+    var id = 0;
-        loadCSS: false
+    while (annotations.filter(function(a) {
+        return a.id == id
+    }).length) {
+        id++
     }
-}, function() {
+    return id
-    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) {
@@ -48,42 +30,25 @@ window.addEventListener('keydown', function(event) {
     }
 })
 
-function bindEvents() {
+window.addEventListener('pagerendered', function (event) {
-    if (!window.PDFViewerApplication || !window.PDFViewerApplication.eventBus) {
+    loadAnnotations(event.detail.pageNumber - 1)
-        setTimeout(bindEvents, 10)
+})
-        return
-    }
-    PDFViewerApplication.eventBus.on('pagerendered', function(event) {
-        loadAnnotations(event.pageNumber)
-    })
-}
-
-bindEvents()
 
 function getHighlight() {
-    var pageNumber = PDFViewerApplication.pdfViewer.currentPageNumber;
+    var pageIndex = PDFViewerApplication.pdfViewer.currentPageNumber - 1; 
-    var pageIndex = pageNumber - 1;
     var page = PDFViewerApplication.pdfViewer.getPageView(pageIndex);
     var pageRect = page.canvas.getClientRects()[0];
-    var selection = window.getSelection()
+    var selectionRects = window.getSelection().getRangeAt(0).getClientRects();
-    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)); 
     });
-    var text = selection.toString();
+    return {page: pageIndex, coords: selected, id: getID()};
-    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 - 1;
+    var pageIndex = annotation.page;
     var page = PDFViewerApplication.pdfViewer.getPageView(pageIndex);
     if (!page.canvas) {
         setTimeout(function() {
@@ -107,10 +72,8 @@ 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);
@@ -119,15 +82,10 @@ 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'