select annotations, edit notes

config.json

@@ -361,7 +361,9 @@
             "showAnnotations": false,
             "showBrowser": true,
             "showDebugMenu": false,
-            "showFolder": {},
+            "showFolder": {
+                "": true
+            },
             "showFilters": true,
             "showIconInfo": true,
             "showInfo": true,

static/css/oml.css

@@ -1,5 +1,9 @@
 .OMLQuote {
+    color: rgb(0, 0, 0);
     background-color: rgb(255, 255, 255);
+    font-family: Georgia, Palatino, DejaVu Serif, Book Antiqua, Palatino Linotype, Times New Roman, serif;
+    font-size: 14px;
+    line-height: 21px;
 }
 
 .OMLAnnotation.selected .OMLQuote {

static/html/oml.html

@@ -4,7 +4,6 @@
         <title>Open Media Library</title>
         <meta charset="UTF-8"/>
         <link href="/static/png/oml.png" rel="icon" type="image/png">
-        <link href="/static/css/oml.css" rel="stylesheet" type="text/css">
         <script src="/static/js/oml.js?1" type="text/javascript"></script>
         <meta name="google" value="notranslate"/>
     </head>

static/js/UI.js

@@ -17,7 +17,8 @@ oml.UI = (function() {
         var ui = oml.user.ui;
 
         function reload() {
-            ui = oml.config.user.ui;
+            Ox.Request.clearCache()
+            oml.user.ui = ui = oml.config.user.ui;
             ui._list = oml.getListState(ui.find);
             ui._filterState = oml.getFilterState(ui.find);
             ui._findState = oml.getFindState(ui.find);

static/js/annotation.js

@@ -2,11 +2,6 @@
 
 oml.ui.annotation = function(annotation, $iframe) {
     var $quote = Ox.Element().addClass('OxSelectable OMLQuote').css({
-        backgroundColor: 'white',
-        color: 'black',
-        fontFamily: 'Georgia, Palatino, DejaVu Serif, Book Antiqua, Palatino Linotype, Times New Roman, serif',
-        fontSize: '14px',
-        lineHeight: '21px',
         padding: '8px'
     }).html(Ox.encodeHTMLEntities(annotation.text).replace(/\n/g, '<br/>')).on({
         click: function(event) {
@@ -16,27 +11,35 @@ oml.ui.annotation = function(annotation, $iframe) {
             })
         }
     })
+    var notes = annotation.notes.length ? annotation.notes.map(function(note) {
+        note.editable = note.user == ''
+        return note
+    }) : [{
+            id: 'A',
+            placeholder: 'Add Note',
+            value: '',
+            editable: true
+        }];
+    console.log(annotation.notes)
     var $note = Ox.ArrayEditable({
         editing: true,
-        items: (annotation.comments || []).map(function(comment) {
+        items: notes,
-            comment.editable = true
-            return comment
-        }),
         type: 'textarea'
     }).css({
         margin: '2px',
         minHeight: '12px'
     }).bindEvent({
         submit: function(data) {
-            var comment = Ox.getObjectById(annotation.comments, data.id)
+            var note = Ox.getObjectById(annotation.notes, data.id)
-            if (comment) {
+            if (note) {
-                comment.value = data.value
+                note.value = data.value
-                comment.modified = (new Date).toISOString()
+                note.modified = (new Date).toISOString()
             } else {
-                annotation.comments.push({
+                annotation.notes.push({
                     created: data.created || (new Date).toISOString(),
                     modified: (new Date).toISOString(),
                     id: data.id,
+                    user: '',
                     value: data.value
                 })
             }
@@ -49,6 +52,12 @@ oml.ui.annotation = function(annotation, $iframe) {
         'OxSelectable OMLAnnotation'
     ).css({
         borderBottom: '1px solid rgb(208, 208, 208)',
+    }).bindEvent({
+        key_delete: function() {
+            that.triggerEvent('delete', {
+                id: annotation.id
+            })
+        }
     }).append($quote).append($note);
 
     that.annotate = function() {
@@ -58,11 +67,13 @@ oml.ui.annotation = function(annotation, $iframe) {
     }
     that.deselect = function() {
         that.removeClass('selected')
+        that.loseFocus()
     }
     that.select = function () {
         let selected = document.querySelector('.OMLAnnotation.selected')
         selected && selected.classList.remove('selected')
         that.addClass('selected')
+        that.gainFocus()
     }
     return that;
 };

static/js/oml.js

@@ -226,7 +226,9 @@
                 data.browserSupported = browserSupported;
                 oml.ui = {};
                 loadOMLFiles(function() {
+                    Ox.getFile('/static/css/oml.css', function() {
                         initOML(data);
+                    })
                 });
             },
             updatestatus: function(data) {

static/js/utils.js

@@ -988,7 +988,7 @@ oml.resizeListFolders = function() {
     // FIXME: does this have to be here?
     var width = oml.getListFoldersWidth(),
         columnWidth = width - 16 - 48;
-    oml.$ui.librariesList
+    oml.$ui.librariesList && oml.$ui.librariesList
         .css({width: width + 'px'})
         .resizeColumn('name', columnWidth);
     Ox.forEach(oml.$ui.folder, function($folder, index) {

static/js/viewer.js

@@ -41,12 +41,23 @@ oml.ui.viewer = function() {
 
     function loadAnnotations(callback) {
         annotations = JSON.parse(localStorage[item + '.annotations'] || '[]')
+        annotations.forEach(function(data) {
+            if (data.comments && !data.notes) {
+                data.notes = data.comments
+                delete data.comments
+            }
+            data.notes = data.notes || [];
+        })
         callback && callback(annotations)
     }
     function saveAnnotations(data) {
         if (data) {
             data.created = data.created || (new Date).toISOString();
-            data.comments = data.comments || [];
+            if (data.comments && !data.notes) {
+                data.notes = data.comments
+                delete data.comments
+            }
+            data.notes = data.notes || [];
             annotations.push(data);
         }
         localStorage[item + '.annotations'] = JSON.stringify(annotations)
@@ -63,6 +74,10 @@ oml.ui.viewer = function() {
             console.log('change...')
             console.log(annotations)
             saveAnnotations()
+        },
+        'delete': function(data) {
+            oml.$ui.annotationFolder.find('#a-' + data.id).remove()
+            that.postMessage('removeAnnotation', data)
         }
     }
 
@@ -91,9 +106,11 @@ oml.ui.viewer = function() {
                             oml.$ui.annotationFolder.find('#a-' + data.id).remove()
                             removeAnnotation(data.id)
                         } else if (event == 'selectAnnotation') {
-                            console.log('select', data)
+                            var $annotation = oml.$ui.annotationFolder.find('#a-' + data.id)
+                            $annotation.select()
                         } else if (event == 'deselectAnnotation') {
-                            console.log('deselect', data)
+                            var $annotation = oml.$ui.annotationFolder.find('#a-' + data.id)
+                            $annotation.deselect()
                         } else {
                             that.triggerEvent(event, data);
                         }

static/reader/epub.js

@@ -23,6 +23,8 @@ Ox.load({
                 annotations.push(annotation)
                 renderAnnotation(annotation)
             })
+        } else if (event == 'removeAnnotation') {
+            removeAnnotation(data.id)
         }
     })
 })
@@ -47,12 +49,15 @@ function deselectAnnotation(id) {
     })
 }
 
-function removeAnnotation(a) {
+function removeAnnotation(id) {
+    var a = annotations.filter(function(a) { return a.id == id })[0]
+    if (a) {
         annotations = annotations.filter(function(annotation) {
-        return annotation.cfiRange != a.dataset.epubcfi
+            return annotation.id != id
         })
-    reader.rendition.annotations.remove(a.dataset.epubcfi)
+        reader.rendition.annotations.remove(a.cfiRange)
-    Ox.$parent.postMessage('removeAnnotation', {id: a.dataset.id})
+    }
+    Ox.$parent.postMessage('removeAnnotation', {id: id})
 }
 
 function renderAnnotation(annotation) {
@@ -98,7 +103,7 @@ document.onreadystatechange = function () {
         reader.rendition.on('keydown', function(event) {
             if (event.key == 'Delete') {
                 document.querySelectorAll('.epubjs-hl.selected').forEach(function(a) {
-                    removeAnnotation(a)
+                    removeAnnotation(a.dataset.id)
                 })
             }
             if (event.key == 'n') {

static/reader/pdf.js

@@ -32,6 +32,8 @@ Ox.load({
                 annotations.push(annotation)
                 renderAnnotation(annotation)
             })
+        } else if (event == 'removeAnnotation') {
+            removeAnnotation(data.id)
         }
     })
 })