update annotation & panel

static/js/annotation.js

@@ -1,21 +1,7 @@
 'use strict';
 
 oml.ui.annotation = function(data, $iframe) {
-    var $arrayEditable = Ox.ArrayEditable({
-        editing: true,
-        type: 'textarea'
-    }).css({
-        minHeight: '16px'
-    });
-    var that = Ox.Element().attr({
-        id: 'a-' + data.id
-    }).addClass(
-        'OxSelectable'
-    ).css({
-        borderBottom: '1px solid rgb(208, 208, 208)',
-    }).append(
-        Ox.Element().addClass('OxSelectable').css({
-            backgroundColor: 'white',
+    var $quote = Ox.Element().addClass('OxSelectable OMLQuote').css({
         color: 'black',
         fontFamily: 'Georgia, Palatino, DejaVu Serif, Book Antiqua, Palatino Linotype, Times New Roman, serif',
         fontSize: '14px',
@@ -23,19 +9,38 @@ oml.ui.annotation = function(data, $iframe) {
         padding: '8px'
     }).html(Ox.encodeHTMLEntities(data.text).replace(/\n/g, '<br/>')).on({
         click: function(event) {
+            that.select()
             $iframe.postMessage('selectAnnotation', {
                 id: data.id
             })
         }
     })
-    ).append($arrayEditable);
+    var $note = Ox.Editable({
+        editing: true,
+        type: 'textarea'
+    }).css({
+        margin: '2px',
+        minHeight: '12px'
+    });
+    var that = Ox.Element().attr({
+        id: 'a-' + data.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
         }
-        $arrayEditable.addItem(0, item)
-            .options({selected: item.id})
-            .editItem();
+    }
+    that.deselect = function() {
+        that.removeClass('selected')
+    }
+    that.select = function () {
+        let selected = document.querySelector('.OMLAnnotation.selected')
+        selected && selected.classList.remove('selected')
+        that.addClass('selected')
     }
     return that;
 };

static/js/annotationPanel.js

@@ -8,18 +8,31 @@ oml.ui.annotationPanel = function() {
         disabled: true,
         style: 'symbol',
         title: 'add',
+        tooltip: Ox._('Add Quote'),
         type: 'image'
     }).appendTo($bar);
 
     var $menuButton = Ox.MenuButton({
         items: [
-            {id: 'sortAnnotations', title: 'Sort Annotations', disabled: true}
+            {id: 'showAnnotations', title: Ox._('Show Annotations'), disabled: true},
+            {group: 'sort', min: 1, max: 1, items: [
+                {id: 'all', title: Ox._('All Annotations'), checked: true},
+                {id: 'my', title: Ox._('My Annotations'), checked: false},
+            ]},
+            {},
+            {id: 'sortAnnotations', title: Ox._('Sort Annotations'), disabled: true},
+            {group: 'sort', min: 1, max: 1, items: [
+                {id: 'position', title: Ox._('By Position'), checked: true},
+                {id: 'text', title: Ox._('By Note Text'), checked: false},
+                {id: 'date', title: Ox._('By Date Added'), checked: false}
+            ]},
         ],
         style: 'square',
         title: 'set',
         type: 'image',
         width: 16
     }).css({
+        // borderColor: 'transparent',
         float: 'right'
     }).appendTo($bar);