diff --git a/static/js/annotation.js b/static/js/annotation.js
index d0d26b1..f524b34 100644
--- a/static/js/annotation.js
+++ b/static/js/annotation.js
@@ -1,41 +1,46 @@
'use strict';
oml.ui.annotation = function(data, $iframe) {
- var $arrayEditable = Ox.ArrayEditable({
+ 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',
+ lineHeight: '21px',
+ padding: '8px'
+ }).html(Ox.encodeHTMLEntities(data.text).replace(/\n/g, '
')).on({
+ click: function(event) {
+ that.select()
+ $iframe.postMessage('selectAnnotation', {
+ id: data.id
+ })
+ }
+ })
+ var $note = Ox.Editable({
editing: true,
type: 'textarea'
}).css({
- minHeight: '16px'
+ margin: '2px',
+ minHeight: '12px'
});
var that = Ox.Element().attr({
id: 'a-' + data.id
}).addClass(
- 'OxSelectable'
+ 'OxSelectable OMLAnnotation'
).css({
borderBottom: '1px solid rgb(208, 208, 208)',
- }).append(
- Ox.Element().addClass('OxSelectable').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, '
')).on({
- click: function(event) {
- $iframe.postMessage('selectAnnotation', {
- id: data.id
- })
- }
- })
- ).append($arrayEditable);
+ }).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;
};
diff --git a/static/js/annotationPanel.js b/static/js/annotationPanel.js
index 7754a4d..428afcc 100644
--- a/static/js/annotationPanel.js
+++ b/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);