select annotations, edit notes

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/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) {
-            comment.editable = true
-            return comment
-        }),
+        items: notes,
         type: 'textarea'
     }).css({
         margin: '2px',
         minHeight: '12px'
     }).bindEvent({
         submit: function(data) {
-            var comment = Ox.getObjectById(annotation.comments, data.id)
-            if (comment) {
-                comment.value = data.value
-                comment.modified = (new Date).toISOString()
+            var note = Ox.getObjectById(annotation.notes, data.id)
+            if (note) {
+                note.value = data.value
+                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
                 })
             }
@@ -64,6 +67,7 @@ oml.ui.annotation = function(annotation, $iframe) {
     }
     that.deselect = function() {
         that.removeClass('selected')
+        that.loseFocus()
     }
     that.select = function () {
         let selected = document.querySelector('.OMLAnnotation.selected')

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)
@@ -95,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);
                         }