minimal support for cbr/cbz documents

static/js/CBRViewer.js

@@ -0,0 +1,100 @@
+'use strict';
+
+/*@
+Ox.CBRViewer <f> CBR 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')
+        cbrjsURL <s|'/static/cbr.js/'> URL to cbr.js
+        url <s|''> CBR 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> CBR Viewer
+        center <!> Center changed
+            center <[n]|s> Center
+        zoom <!> Zoom changed
+            zoom <n|s> Zoom
+        page <!> Page changed
+            page <n|s> Page
+@*/
+Ox.CBRViewer = 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('cbr', {cbr: self.options.url});
+            },
+            width: updateSize,
+            zoom: function() {
+                setCenterAndZoom();
+            }
+        })
+        .addClass('OxCBRViewer')
+        .on({
+        })
+        .bindEvent({
+        });
+
+    self.$iframe = Ox.Element('<iframe>')
+            .attr({
+                frameborder: 0,
+                height: self.options.height + 'px',
+                src: '/static/cbr.js/?' + pandora.getVersion() + '&file=' + encodeURIComponent(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 cbr.js
+    @*/
+    that.postMessage = function(event, data) {
+        self.$iframe.postMessage(event, data);
+    }
+
+    return that;
+};
+
+

static/js/document.js

@@ -97,6 +97,16 @@ pandora.ui.document = function() {
                     width: that.width(),
                     zoom: 'fit'
                 })
+                : Ox.contains(['cbr', 'cbz'], item.extension)
+                ? Ox.CBRViewer({
+                    height: that.height() - 16,
+                    page: pandora.user.ui.documents[item.id]
+                        ? pandora.user.ui.documents[item.id].position
+                        : 1,
+                    url: '/documents/' + item.id + '/' + pandora.safeDocumentName(item.title) + '.' + item.extension + '?' + item.modified,
+                    width: that.width(),
+                    zoom: 'fit'
+                })
                 : item.extension == 'html'
                 ? pandora.$ui.textPanel = pandora.ui.textPanel(item, $toolbar)
                 : Ox.ImageViewer({

static/js/documentDialog.js

@@ -220,6 +220,16 @@ pandora.ui.documentDialog = function(options) {
                     width: dialogWidth,
                     zoom: 'fit'
                 })
+                : Ox.contains(['cbr', 'cbz'], item.extension)
+                ? Ox.CBRViewer({
+                    height: dialogHeight,
+                    page: pandora.user.ui.documents[item.id]
+                        ? pandora.user.ui.documents[item.id].position
+                        : 1,
+                    url: '/documents/' + item.id + '/' + pandora.safeDocumentName(item.title) + '.' + item.extension + '?' + item.modified,
+                    width: dialogWidth,
+                    zoom: 'fit'
+                })
                 : item.extension == 'html'
                 ? pandora.$ui.textPanel = pandora.ui.textPanel(item)
                 : Ox.ImageViewer({

static/js/utils.js

@@ -434,7 +434,7 @@ pandora.imageExtensions = [
 ];
 
 pandora.documentExtensions = [
-    'pdf', 'epub', 'txt'
+    'pdf', 'epub', 'txt', 'cbr', 'cbz'
 ].concat(pandora.imageExtensions);
 
 pandora.uploadDroppedFiles = function(files) {
@@ -2140,7 +2140,7 @@ pandora.getSpan = function(state, val, callback) {
                 var dimensions = result.data.dimensions,
                     extension = result.data.extension,
                 values;
-                if (Ox.contains(['epub', 'pdf', 'txt'], extension)) {
+                if (Ox.contains(['epub', 'pdf', 'txt', 'cbr', 'cbz'], extension)) {
                     state.span = Ox.limit(parseInt(val), 1, dimensions);
                 } else if (Ox.contains(['html'], extension)) {
                     if (pandora.isNumericalSpan(val)) {