openmedialibrary/static/js/annotationPanel.js

143 lines
5.2 KiB
JavaScript
Raw Normal View History

2019-01-23 15:14:59 +00:00
'use strict';
oml.ui.annotationPanel = function(options, self) {
self = self || {};
var ui = oml.user.ui;
2019-01-23 15:14:59 +00:00
2019-02-04 08:29:34 +00:00
var ui = oml.user.ui;
2019-01-24 12:02:33 +00:00
var $bar = Ox.Bar({size: 16});
2019-02-02 18:01:55 +00:00
var $addQuote = Ox.Button({
2019-01-24 12:02:33 +00:00
disabled: true,
style: 'symbol',
title: 'add',
2019-01-25 10:26:45 +00:00
tooltip: Ox._('Add Quote'),
2019-01-24 12:02:33 +00:00
type: 'image'
}).bindEvent({
click: function() {
oml.$ui.viewer.postMessage('addAnnotation', {})
}
2019-01-24 12:02:33 +00:00
}).appendTo($bar);
2019-02-02 18:01:55 +00:00
var $deleteQuote = Ox.Button({
disabled: true,
style: 'symbol',
title: 'remove',
tooltip: Ox._('Delete Quote'),
type: 'image'
}).bindEvent({
click: function() {
var $annotation = oml.$ui.annotationFolder.find('.OMLAnnotation.selected')
$annotation.length && $annotation.delete()
that.updateSelection()
2019-02-02 18:01:55 +00:00
}
}).appendTo($bar);
2019-01-24 12:02:33 +00:00
var $menuButton = Ox.MenuButton({
items: [
{id: 'addAnnotation', title: 'Add Annotation', disabled: true, keyboard: 'return'},
{id: 'removeAnnotation', title: 'Remove Annotation', disabled: true, keyboard: 'delete'},
{id: 'removeAnnotations', title: 'Remove All Annotation', disabled: true},
2019-02-04 08:29:34 +00:00
{},
2019-02-04 08:53:42 +00:00
{id: 'show', title: Ox._('Show Annotations'), disabled: true},
{group: 'showAnnotationUsers', min: 1, max: 1, items: [
2019-02-04 08:29:34 +00:00
{id: 'all', title: Ox._('All Annotations'), checked: ui.showAnnotationUsers == 'all'},
{id: 'me', title: Ox._('My Annotations'), checked: ui.showAnnotationUsers == 'me'},
2019-01-25 10:26:45 +00:00
]},
{},
2019-02-04 08:53:42 +00:00
{id: 'sort', title: Ox._('Sort Annotations'), disabled: true},
{group: 'sortAnnotations', min: 1, max: 1, items: [
2019-02-04 08:29:34 +00:00
{id: 'position', title: Ox._('By Position'), checked: ui.sortAnnotations == 'position'},
{id: 'quote', title: Ox._('By Quote Text'), checked: ui.sortAnnotations == 'quote'},
{id: 'note', title: Ox._('By Note Text'), checked: ui.sortAnnotations == 'note'},
{id: 'date', title: Ox._('By Date Added'), checked: ui.sortAnnotations == 'date'}
2019-01-25 10:26:45 +00:00
]},
2019-02-01 09:19:43 +00:00
{},
{id: 'exportAnnotations', title: Ox._('Export Annotations')},
2019-01-24 12:02:33 +00:00
],
style: 'square',
title: 'set',
type: 'image',
width: 16
}).css({
2019-01-25 10:26:45 +00:00
// borderColor: 'transparent',
2019-01-24 12:02:33 +00:00
float: 'right'
2019-02-04 08:53:42 +00:00
}).bindEvent({
change: function(data) {
if (data.id == 'showAnnotationUsers') {
var value = data.checked[0].id;
oml.UI.set('showAnnotationUsers', value);
oml.$ui.viewer.renderAnnotations();
} else if (data.id == 'sortAnnotations') {
var value = data.checked[0].id;
oml.UI.set('sortAnnotations', value);
oml.$ui.viewer.renderAnnotations();
}
},
2019-02-01 09:19:43 +00:00
click: function(data) {
var id = data.id;
if (id == 'exportAnnotations') {
oml.api.get({
id: oml.user.ui.item,
keys: []
}, function(result) {
oml.ui.exportAnnotationsDialog(result.data).open()
})
} else if (id =='addAnnotation') {
oml.$ui.viewer.postMessage('addAnnotation', {})
} else if (id =='removeAnnotation') {
var $annotation = oml.$ui.annotationFolder.find('.OMLAnnotation.selected')
$annotation.length && $annotation.delete()
that.updateSelection()
} else if (id =='removeAnnotations') {
oml.ui.removeAnnotationsDialog().open()
} else {
console.log('click', id, data)
}
},
change: function(data) {
var id = data.id;
console.log('change', data)
if (id == 'show') {
console.log('show', data)
oml.UI.set({annotationsShow: data.checked[0].id});
} else if (id == 'sort') {
console.log('sort', data)
oml.UI.set({annotationsSort: data.checked[0].id});
} else {
console.log('change', id, data)
2019-02-01 09:19:43 +00:00
}
}
2019-02-04 08:53:42 +00:00
}).appendTo($bar);
2019-01-24 12:02:33 +00:00
var ui = oml.user.ui;
var that = Ox.SplitPanel({
elements: [
{
element: $bar,
size: 16
},
{
element: oml.$ui.annotationFolder = oml.ui.annotationFolder()
}
],
orientation: 'vertical'
}, self).update({
hasAnnotations: function() {
$menuButton[self.options.hasAnnotations ? 'enableItem' : 'disableItem']('removeAnnotations')
}
2019-01-24 12:02:33 +00:00
});
2019-01-23 15:14:59 +00:00
that.updateSelection = function(selection) {
2019-02-02 18:01:55 +00:00
var $annotation = oml.$ui.annotationFolder.find('.OMLAnnotation.selected')
$addQuote.options({disabled: !selection})
$deleteQuote.options({disabled: !$annotation.length})
$menuButton[selection ? 'enableItem' : 'disableItem']('addAnnotation')
$menuButton[$annotation.length ? 'enableItem' : 'disableItem']('removeAnnotation')
}
2019-01-23 15:14:59 +00:00
return that;
2019-01-24 07:22:40 +00:00
2019-01-23 15:14:59 +00:00
};