enter to add annotation

static/js/annotation.js

@@ -15,7 +15,6 @@ oml.ui.annotation = function(annotation, $iframe) {
         note.editable = !note.user
         return note
     }) : []
-    console.log(annotation.notes)
     var $notes = Ox.ArrayEditable({
         editing: true,
         items: notes,
@@ -25,17 +24,7 @@ oml.ui.annotation = function(annotation, $iframe) {
         margin: '2px',
         minHeight: '12px'
     }).bindEvent({
-        doubleclick: function(data) {
-            if (!$notes.options('items').length) {
-                $notes.addItem(0, {
-                    id: 'A',
-                    value: '',
-                    editable: true
-                }).options({
-                    selected: 'A'
-                }).editItem()
-            }
-        },
+        doubleclick: addNote,
         submit: function(data) {
             var note = Ox.getObjectById(annotation.notes, data.id)
             if (note) {
@@ -67,9 +56,24 @@ oml.ui.annotation = function(annotation, $iframe) {
         }
     }).append($quote).append($notes);
 
+
+    function addNote() {
+        if (!$notes.options('items').length) {
+            that.select()
+            $notes.addItem(0, {
+                id: 'A',
+                value: '',
+                editable: true
+            }).options({
+                selected: 'A'
+            }).editItem()
+        }
+    }
+
+
     that.annotate = function() {
-        var item = {
-            id: 'note', value: '', editable: true
+        if (oml.user.ui.showAnnotations) {
+            addNote()
         }
     }
     that.deselect = function() {
@@ -77,6 +81,9 @@ oml.ui.annotation = function(annotation, $iframe) {
         that.loseFocus()
     }
     that.select = function () {
+        $iframe.postMessage('selectAnnotation', {
+            id: annotation.id
+        })
         let selected = document.querySelector('.OMLAnnotation.selected')
         selected && selected.classList.remove('selected')
         that.addClass('selected')

static/js/viewer.js

@@ -95,7 +95,6 @@ oml.ui.viewer = function() {
                         height: '100%',
                         border: 0
                     }).onMessage(function(data, event) {
-                        console.log('got', event, data)
                         if (event == 'addAnnotation') {
                             console.log('adding', data.id)
                             saveAnnotations(data);
@@ -107,11 +106,12 @@ oml.ui.viewer = function() {
                             removeAnnotation(data.id)
                         } else if (event == 'selectAnnotation') {
                             var $annotation = oml.$ui.annotationFolder.find('#a-' + data.id)
-                            $annotation.select()
+                            $annotation && $annotation.select()
                         } else if (event == 'deselectAnnotation') {
-                            var $annotation = oml.$ui.annotationFolder.find('#a-' + data.id)
-                            $annotation.deselect()
+                            var $annotation = oml.$ui.annotationFolder.find('#a-' + data.id)[0]
+                            $annotation && $annotation.deselect()
                         } else {
+                            console.log('got', event, data)
                             that.triggerEvent(event, data);
                         }
 

static/reader/epub.js

@@ -49,6 +49,18 @@ function deselectAnnotation(id) {
     })
 }
 
+
+function deselectAllAnnotations() {
+    var ids = []
+    document.querySelectorAll('.epubjs-hl.selected').forEach(function(g) {
+        g.classList.remove('selected')
+        if (!Ox.contains(ids, id)) {
+            ids.push(id)
+            Ox.$parent.postMessage('deselectAnnotation', {id: id})
+        }
+    })
+}
+
 function removeAnnotation(id) {
     var a = annotations.filter(function(a) { return a.id == id })[0]
     if (a) {
@@ -83,6 +95,7 @@ function onHighlightClicked(e) {
             other.classList.remove('selected')
         })
         e.target.classList.add('selected')
+        Ox.$parent.postMessage('selectAnnotation', {id: e.target.dataset.id})
     }
 }
 
@@ -106,8 +119,12 @@ document.onreadystatechange = function () {
                     removeAnnotation(a.dataset.id)
                 })
             }
-            if (event.key == 'n') {
+            if (event.key == 'n' || event.keyCode == 13) {
+                var selected = document.querySelector('.epubjs-hl.selected')
                 if (currentSelection) {
+                    if (selected) {
+                        deselectAllAnnotations()
+                    }
                     /*
                     var range = currentSelection.contents.window.getSelection().getRangeAt(0)
                     console.log(
@@ -124,6 +141,9 @@ document.onreadystatechange = function () {
                         other.classList.remove('selected')
                     })
                     currentSelection = null
+                } else if (selected) {
+                    console.log('editNote?', selected.dataset.id)
+
                 }
             }
             if (event.keyCode == 61 && event.shiftKey) {

static/reader/pdf.js

@@ -44,12 +44,18 @@ window.addEventListener('keydown', function(event) {
         if (selected) {
             removeAnnotation(selected.dataset.id)
         }
-    } else if (event.key == 'n') {
+    } else if (event.key == 'n' || event.keyCode == 13) {
+        var selected = document.querySelector('.oml-annotation.selected')
         if (!window.getSelection().isCollapsed) {
+            if (selected) {
+                deselectAllAnnotations()
+            }
             var annot = getHighlight()
             renderAnnotation(annot)
             addAnnotation(annot)
             window.getSelection().removeAllRanges();
+        } else if (selected) {
+            console.log('editNote?', selected.dataset.id)
         }
         event.stopPropagation()
         event.preventDefault()
@@ -139,6 +145,7 @@ function selectAnnotation(id) {
         g.style.backgroundColor = 'blue'
     })
 }
+
 function deselectAnnotation(id) {
     document.querySelectorAll('.oml-annotation.a' + id).forEach(function(g) {
         g.classList.remove('selected')
@@ -146,6 +153,20 @@ function deselectAnnotation(id) {
     })
 }
 
+function deselectAllAnnotations() {
+    var ids = []
+    document.querySelectorAll('.oml-annotation.selected').forEach(function(g) {
+        g.classList.remove('selected')
+        g.style.backgroundColor = 'yellow'
+        var id = $(g).parents('.oml-annotation').data('id')
+        console.log('deselect', g, id)
+        if (!Ox.contains(ids, id)) {
+            ids.push(id)
+            Ox.$parent.postMessage('deselectAnnotation', {id: id})
+        }
+    })
+}
+
 function removeAnnotation(id) {
     document.querySelectorAll('.oml-annotation.a' + id).forEach(function(a) {
         a.remove()