add annotation panel

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;
+};

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;
+};

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});
         },

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')
+                            + ' <span class="OxBright">'
+                            + Ox.SYMBOLS.shift + 'A</span>'
+                    }
+                ],
+                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('<iframe>').css({
+                    oml.$ui.annotationPanel.empty()
+                    if ($iframe) {
+                        $iframe.remove()
+                    }
+                    $iframe = Ox.Element('<iframe>').css({
                         width: '100%',
                         height: '100%',
                         border: 0
-                    }).appendTo(that);
+                    }).onMessage(function(data, event) {
+                        console.log('got', event, data)
+                        if (event == 'addAnnotation') {
+                            console.log('adding', data.id)
+                            oml.$ui.annotationPanel.append(oml.ui.annotation(data, $iframe));
+                        } else if (event == 'removeAnnotation') {
+                            console.log('do it ...', data)
+                            oml.$ui.annotationPanel.find('#a-' + data.id).remove()
+                        } else if (event == 'selectAnnotation') {
+                            console.log('select', data)
+                        } else if (event == 'deselectAnnotation') {
+                            console.log('deselect', data)
+                        }
+                        that.triggerEvent(event, data);
+                    }).appendTo(frame);
                     $iframe.attr({
                         src: '/' + item + '/reader/'
                     });
@@ -33,7 +72,9 @@ oml.ui.viewer = function() {
         }
         return that;
     };
+    that.postMessage = function(event, data) {
+        $iframe && $iframe.postMesage(event, data)
+    };
 
     return that.updateElement();
-
 };