Menu
diff --git a/static/js/annotation.js b/static/js/annotation.js
new file mode 100644
index 0000000..f19ec3a
--- /dev/null
+++ b/static/js/annotation.js
@@ -0,0 +1,16 @@
+'use strict';
+
+oml.ui.annotation = function(data, $iframe) {
+ var that = Ox.Element().attr({
+ id: 'a-' + data.id
+ }).css({
+ padding: '16px'
+ }).html(data.text).on({
+ click: function(event) {
+ $iframe.postMessage('selectAnnotation', {
+ id: data.id
+ })
+ }
+ });
+ return that;
+};
diff --git a/static/js/annotationPanel.js b/static/js/annotationPanel.js
new file mode 100644
index 0000000..cd4ad94
--- /dev/null
+++ b/static/js/annotationPanel.js
@@ -0,0 +1,11 @@
+'use strict';
+
+oml.ui.annotationPanel = function() {
+
+ var ui = oml.user.ui,
+ that = Ox.Element().css({
+ overflowY: 'auto',
+ });
+
+ return that;
+};
diff --git a/static/js/mainMenu.js b/static/js/mainMenu.js
index 454bc0f..e8c4c35 100644
--- a/static/js/mainMenu.js
+++ b/static/js/mainMenu.js
@@ -232,6 +232,12 @@ oml.ui.mainMenu = function() {
keyboard: 'shift b',
disabled: !ui.item
},
+ {
+ id: 'showannotations',
+ title: Ox._((ui.showAnnotations ? 'Hide' : 'Show') + ' Annotations'),
+ keyboard: 'shift a',
+ disabled: !ui.item
+ },
{},
{
id: 'preview',
@@ -539,6 +545,8 @@ oml.ui.mainMenu = function() {
oml.UI.set({showFilters: !ui.showFilters});
} else if (id == 'showbrowser') {
oml.UI.set({showBrowser: !ui.showBrowser});
+ } else if (id == 'showannotations') {
+ oml.UI.set({showAnnotations: !ui.showAnnotations});
} else if (id == 'preview') {
that.setItemTitle(
'preview',
@@ -613,6 +621,9 @@ oml.ui.mainMenu = function() {
oml_listview: function(data) {
that.checkItem('viewMenu_listviewSubmenu_' + data.value);
},
+ oml_showannotations: function(data) {
+ that.setItemTitle('showannotations', Ox._((data.value ? 'Hide' : 'Show') + ' Annotations'));
+ },
oml_showbrowser: function(data) {
that.setItemTitle('showbrowser', Ox._((data.value ? 'Hide' : 'Show') + ' Browser'));
},
@@ -705,6 +716,9 @@ oml.ui.mainMenu = function() {
key_control_z: function() {
oml.undoHistory();
},
+ key_shift_a: function() {
+ ui.item && oml.UI.set({showAnnotations: !ui.showAnnotations});
+ },
key_shift_b: function() {
ui.item && oml.UI.set({showBrowser: !ui.showBrowser});
},
diff --git a/static/js/viewer.js b/static/js/viewer.js
index bb32c1a..d792913 100644
--- a/static/js/viewer.js
+++ b/static/js/viewer.js
@@ -4,15 +4,36 @@ oml.ui.viewer = function() {
var ui = oml.user.ui,
+ frame = Ox.Element(),
that = Ox.Element()
.bindEvent({
oml_itemview: function(data) {
if (ui.item != item && ui.itemView == 'book') {
that.updateElement(ui.item);
}
+ },
+ oml_showannotations: function() {
+ panel.toggleElement(1);
}
}),
-
+ panel = Ox.SplitPanel({
+ elements: [
+ {
+ element: frame
+ },
+ {
+ collapsed: !ui.showAnnotations,
+ collapsible: true,
+ element: oml.$ui.annotationPanel = oml.ui.annotationPanel(),
+ size: 256,
+ tooltip: Ox._('Annotations')
+ + ' '
+ + Ox.SYMBOLS.shift + 'A'
+ }
+ ],
+ orientation: 'horizontal'
+ })
+ .appendTo(that),
$iframe, item;
that.updateElement = function() {
@@ -20,11 +41,29 @@ oml.ui.viewer = function() {
if (item && item.length) {
oml.api.get({id: item, keys: ['mediastate']}, function(result) {
if (result.data.mediastate == 'available') {
- $iframe = $iframe || Ox.Element('