openmedialibrary/static/js/annotationPanel.js
2019-03-05 18:31:21 +01:00

137 lines
5 KiB
JavaScript

'use strict';
oml.ui.annotationPanel = function(options, self) {
self = self || {};
var ui = oml.user.ui;
var ui = oml.user.ui;
var $bar = Ox.Bar({size: 16});
var $addQuote = Ox.Button({
disabled: true,
style: 'symbol',
title: 'add',
tooltip: Ox._('Add Quote'),
type: 'image'
}).bindEvent({
click: function() {
oml.$ui.viewer.postMessage('addAnnotation', {})
}
}).appendTo($bar);
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()
}
}).appendTo($bar);
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},
{},
{id: 'show', title: Ox._('Show Annotations'), disabled: true},
{group: 'showAnnotationUsers', min: 1, max: 1, items: [
{id: 'all', title: Ox._('All Annotations'), checked: ui.showAnnotationUsers == 'all'},
{id: 'me', title: Ox._('My Annotations'), checked: ui.showAnnotationUsers == 'me'},
]},
{},
{id: 'sort', title: Ox._('Sort Annotations'), disabled: true},
{group: 'sortAnnotations', min: 1, max: 1, items: [
{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'}
]},
{},
{id: 'exportAnnotations', title: Ox._('Export Annotations')},
],
style: 'square',
title: 'set',
type: 'image',
width: 16
}).css({
// borderColor: 'transparent',
float: 'right'
}).bindEvent({
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;
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);
} else 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)
}
}
}).appendTo($bar);
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')
}
});
that.updateSelection = function(selection) {
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')
}
return that;
};