diff --git a/cbr.js/cbr.js b/cbr.js/cbr.js index 4e82002..bec9e05 100644 --- a/cbr.js/cbr.js +++ b/cbr.js/cbr.js @@ -17,6 +17,7 @@ cbrjs.open = function(url) { Ox.$window.on({ resize: app.resize }); + }); function getSettings() { @@ -49,6 +50,7 @@ cbrjs.CBRViewer = function(options, self) { page: setPage, url: loadBook }), + moveTimeout, canvas; self.pages = []; @@ -66,6 +68,7 @@ cbrjs.CBRViewer = function(options, self) { self.$frame = Ox.Element() .on({ + mousemove: showMenu, mousedown: function() { self.$frame.gainFocus(); }, @@ -191,6 +194,45 @@ cbrjs.CBRViewer = function(options, self) { .start() .appendTo(that); + self.$menu = Ox.Element().css({ + position: 'fixed', + right: (Ox.UI.SCROLLBAR_SIZE + 4) + 'px', + top: '4px', + opacity: 0 + }) + .addClass('menu') + .appendTo(that); + + self.$zoom = Ox.Button({ + style: 'symbol', + title: 'fill', + tooltip: Ox._('Zoom to fill'), + type: 'image' + }).css({ + width: '16px', + height: '16px', + }).on({ + mousedown: function(event) { + if (self.$zoom.options('title') == 'fill') { + self.$zoom.options({ + title: 'fit', + tooltip: Ox._('Zoom to fit') + }) + self.fitMode = 'W'; + } else { + self.$zoom.options({ + title: 'fill', + tooltip: Ox._('Zoom to fill') + }) + self.fitMode = 'B'; + } + resize() + event.stopPropagation() + event.preventDefault(); + } + }) + .appendTo(self.$menu); + loadBook(); function createURLFromArray(array, mimeType) { @@ -372,6 +414,17 @@ cbrjs.CBRViewer = function(options, self) { self.$scrollbar.options({value: self.options.page}); that.triggerEvent('page', {page: self.options.page}); } + function showMenu() { + if (moveTimeout) { + clearTimeout(moveTimeout); + } else { + self.$menu.animate({opacity: 1}, 250) + } + moveTimeout = setTimeout(function() { + self.$menu.animate({opacity: 0}, 250) + moveTimeout = null + }, 5000); + } that.resize = function() { resize();