minimal support for epub documents

static/js/EpubViewer.js

@@ -0,0 +1,99 @@
+'use strict';
+
+/*@
+Ox.EpubViewer <f> Epub Viewer
+    options <o> Options
+        center <[n]|s|'auto'> Center ([x, y] or 'auto')
+        height <n|384> Viewer height in px
+        maxZoom <n|16> Maximum zoom (minimum zoom is 'fit')
+        epubjsURL <s|'/static/epub.js/'> URL to epub.js
+        url <s|''> Epub URL
+        width <n|512> Viewer width in px
+        zoom <n|s|'fit'> Zoom (number or 'fit' or 'fill')
+    self <o> Shared private variable
+    ([options[, self]]) -> <o:OxElement> Epub Viewer
+        center <!> Center changed
+            center <[n]|s> Center
+        zoom <!> Zoom changed
+            zoom <n|s> Zoom
+        page <!> Page changed
+            page <n|s> Page
+@*/
+Ox.EpubViewer = function(options, self) {
+
+    self = self || {};
+    var that = Ox.Element({}, self)
+        .defaults({
+            center: 'auto',
+            height: 384,
+            page: 1,
+            maxZoom: 16,
+            url: '',
+            width: 512,
+            zoom: 'fit'
+        })
+        .options(options || {})
+        .update({
+            center: function() {
+                setCenterAndZoom();
+            },
+            page: updatePage,
+            // allow for setting height and width at the same time
+            height: updateSize,
+            url: function() {
+                self.$iframe.postMessage('epub', {epub: self.options.url});
+            },
+            width: updateSize,
+            zoom: function() {
+                setCenterAndZoom();
+            }
+        })
+        .addClass('OxEpubViewer')
+        .on({
+        })
+        .bindEvent({
+        });
+
+    self.$iframe = Ox.Element('<iframe>')
+            .attr({
+                frameborder: 0,
+                height: self.options.height + 'px',
+                src: self.options.url,
+                width: self.options.width + 'px'
+            })
+            .onMessage(function(data, event) {
+                that.triggerEvent(event, data);
+            })
+            .appendTo(that);
+
+    updateSize();
+
+    function setCenterAndZoom() {
+    }
+
+    function updatePage() {
+        self.$iframe.postMessage('page', {page: self.options.page});
+    }
+
+    function updateSize() {
+        that.css({
+            height: self.options.height + 'px',
+            width: self.options.width + 'px',
+        });
+        self.$iframe.css({
+            height: self.options.height + 'px',
+            width: self.options.width + 'px',
+        });
+    }
+
+    /*@
+    postMessage <f> postMessage
+        (event, data) -> <o>  post message to epub.js
+    @*/
+    that.postMessage = function(event, data) {
+        self.$iframe.postMessage(event, data);
+    }
+
+    return that;
+};
+

static/js/document.js

@@ -77,6 +77,16 @@ pandora.ui.document = function() {
                     width: that.width(),
                     zoom: 'fit'
                 })
+                : item.extension == 'epub'
+                ? Ox.EpubViewer({
+                    height: that.height() - 16,
+                    page: pandora.user.ui.documents[item.id]
+                        ? pandora.user.ui.documents[item.id].position
+                        : 1,
+                    url: '/documents/' + item.id + '/epub/',
+                    width: that.width(),
+                    zoom: 'fit'
+                })
                 : item.extension == 'html'
                 ? pandora.$ui.textPanel = pandora.ui.textPanel(item, $toolbar)
                 : Ox.ImageViewer({

static/js/utils.js

@@ -434,7 +434,7 @@ pandora.imageExtensions = [
 ];
 
 pandora.documentExtensions = [
-    'pdf', /* 'epub', 'txt', */
+    'pdf', 'epub' /* , 'txt', */
 ].concat(pandora.imageExtensions);
 
 pandora.uploadDroppedFiles = function(files) {