merge

static/js/annotation.js

@@ -1,34 +1,56 @@
 'use strict';
 
-oml.ui.annotation = function(data, $iframe) {
+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(data.text).replace(/\n/g, '<br/>')).on({
+    }).html(Ox.encodeHTMLEntities(annotation.text).replace(/\n/g, '<br/>')).on({
         click: function(event) {
             that.select()
             $iframe.postMessage('selectAnnotation', {
-                id: data.id
+                id: annotation.id
             })
         }
     })
-    var $note = Ox.Editable({
+    var $note = Ox.ArrayEditable({
         editing: true,
+        items: (annotation.comments || []).map(function(comment) {
+            comment.editable = true
+            return comment
+        }),
         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()
+            } else {
+                annotation.comments.push({
+                    created: data.created || (new Date).toISOString(),
+                    modified: (new Date).toISOString(),
+                    id: data.id,
+                    value: data.value
+                })
+            }
+            that.triggerEvent('change')
+        }
     });
     var that = Ox.Element().attr({
-        id: 'a-' + data.id
+        id: 'a-' + annotation.id
     }).addClass(
         'OxSelectable OMLAnnotation'
     ).css({
         borderBottom: '1px solid rgb(208, 208, 208)',
     }).append($quote).append($note);
+
     that.annotate = function() {
         var item = {
             id: 'note', value: '', editable: true