0x2620/openmedialibrary_reader
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

better navigation in wide mode

Browse source
This commit is contained in:
j 2019-02-11 14:42:17 +05:30
parent d7ac0f48f8
commit a236ec253f
1 changed files with 70 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

97
cbr.js/cbr.js
View file

@ -1,7 +1,8 @@
this.cbrjs = {}; this.cbrjs = {};
cbrjs.open = function(url) { cbrjs.open = function(url) {
var settings = getSettings(); cbrjs.url = url
cbrjs.loadSettings()
Ox.load('UI', function() { Ox.load('UI', function() {
var $body = Ox.$('body') var $body = Ox.$('body')
.css({ .css({
@ -10,9 +11,10 @@ cbrjs.open = function(url) {
}); });
window.app = cbrjs.CBRViewer(Ox.extend({ window.app = cbrjs.CBRViewer(Ox.extend({
url: url, url: url,
}, settings) }, cbrjs.settings)
).bindEvent({ ).bindEvent({
page: updateSettings page: cbrjs.updateSettings,
fitMode: cbrjs.updateSettings,
}).appendTo($body); }).appendTo($body);
Ox.$window.on({ Ox.$window.on({
resize: app.resize resize: app.resize
@ -20,23 +22,25 @@ cbrjs.open = function(url) {
}); });
function getSettings() { };
cbrjs.loadSettings = function() {
var settings = {}; var settings = {};
try { try {
settings = JSON.parse(localStorage['cbrjs.' + url]); settings = JSON.parse(localStorage['cbrjs.' + cbrjs.url]);
} catch(e) { } catch(e) {
settings.page = 1; settings.page = 1;
settings.fitMode = 'B';
} }
return settings; cbrjs.settings = settings;
} }
function updateSettings(data) { cbrjs.updateSettings = function(data) {
Ox.forEach(data, function(value, key) { Ox.forEach(data, function(value, key) {
settings[key] = value; cbrjs.settings[key] = value;
}); });
localStorage['cbrjs.' + url] = JSON.stringify(settings); localStorage['cbrjs.' + cbrjs.url] = JSON.stringify(cbrjs.settings);
} }
};
cbrjs.CBRViewer = function(options, self) { cbrjs.CBRViewer = function(options, self) {
self = self || {}; self = self || {};
@ -48,6 +52,10 @@ cbrjs.CBRViewer = function(options, self) {
.options(options || {}) .options(options || {})
.update({ .update({
page: setPage, page: setPage,
fitMode: function() {
resize()
that.triggerEvent('fitMode', {fitMode: self.options.fitMode});
},
url: loadBook url: loadBook
}), }),
moveTimeout, moveTimeout,
@ -57,7 +65,6 @@ cbrjs.CBRViewer = function(options, self) {
self.rotateTimes = 0; self.rotateTimes = 0;
self.hflip = false; self.hflip = false;
self.vflip = false; self.vflip = false;
self.fitMode = 'B';
self.mimeTypes = { self.mimeTypes = {
'png': 'image/png', 'png': 'image/png',
@ -75,40 +82,50 @@ cbrjs.CBRViewer = function(options, self) {
}) })
.bindEvent({ .bindEvent({
key_down: function() { key_down: function() {
that.options({ self.$frame.scrollTop(self.$frame.scrollTop() + self.$frame.height())
page: self.pages.length
})
}, },
key_left: function() { key_left: function() {
that.options({ that.options({
page: Math.max(self.options.page - 1, 1) page: Math.max(self.options.page - 1, 1)
}) })
}, },
key_pagedown: function() {
that.options({
page: self.pages.length
})
},
key_pageup: function() {
that.options({
page: 1
})
},
key_right: function() { key_right: function() {
that.options({ that.options({
page: Math.min(self.options.page + 1, self.pages.length) page: Math.min(self.options.page + 1, self.pages.length)
}) })
}, },
key_up: function() { key_up: function() {
that.options({ self.$frame.scrollTop(self.$frame.scrollTop() - self.$frame.height())
page: 1
})
}, },
key_n: function() { key_n: function() {
self.fitMode = 'N'; that.options({
resize(); fitMode: 'N'
})
}, },
key_h: function() { key_h: function() {
self.fitMode = 'H'; that.options({
resize(); fitMode: 'H'
})
}, },
key_b: function() { key_b: function() {
self.fitMode = 'B'; that.options({
resize(); fitMode: 'B'
})
}, },
key_w: function() { key_w: function() {
self.fitMode = 'W'; that.options({
resize(); fitMode: 'W'
})
}, },
key_l: function() { key_l: function() {
self.rotateTimes--; self.rotateTimes--;
@ -128,6 +145,15 @@ cbrjs.CBRViewer = function(options, self) {
} }
setPage(); setPage();
}, },
key_space: function() {
var old = self.$frame.scrollTop()
self.$frame.scrollTop(self.$frame.scrollTop() + self.$frame.height())
if (self.$frame.scrollTop() == old) {
that.options({
page: Math.min(self.options.page + 1, self.pages.length)
})
}
},
singleclick: function(data) { singleclick: function(data) {
if (data.clientX < (that.width() / 2)) { if (data.clientX < (that.width() / 2)) {
that.options({ that.options({
@ -218,15 +244,18 @@ cbrjs.CBRViewer = function(options, self) {
title: 'fit', title: 'fit',
tooltip: Ox._('Zoom to fit') tooltip: Ox._('Zoom to fit')
}) })
self.fitMode = 'W'; that.options({
fitMode: 'W'
})
} else { } else {
self.$zoom.options({ self.$zoom.options({
title: 'fill', title: 'fill',
tooltip: Ox._('Zoom to fill') tooltip: Ox._('Zoom to fill')
}) })
self.fitMode = 'B'; that.options({
fitMode: 'B'
})
} }
resize()
event.stopPropagation() event.stopPropagation()
event.preventDefault(); event.preventDefault();
} }
@ -341,14 +370,14 @@ cbrjs.CBRViewer = function(options, self) {
canvas.style.maxWidth = ''; canvas.style.maxWidth = '';
canvas.style.maxHeight = ''; canvas.style.maxHeight = '';
var maxheight = self.$frame.height() - 4; var maxheight = self.$frame.height() - 4;
if (clear || self.fitMode == 'N') { if (clear || self.options.fitMode == 'N') {
} else if (self.fitMode == 'B') { } else if (self.options.fitMode == 'B') {
canvas.style.maxWidth = '100%'; canvas.style.maxWidth = '100%';
canvas.style.maxHeight = maxheight + 'px'; canvas.style.maxHeight = maxheight + 'px';
} else if (self.fitMode == 'H') { } else if (self.options.fitMode == 'H') {
canvas.style.height = maxheight + 'px'; canvas.style.height = maxheight + 'px';
} else if (self.fitMode == 'W') { } else if (self.options.fitMode == 'W') {
canvas.style.width = '100%'; canvas.style.width = '100%';
} }
self.$scrollbar.options({ self.$scrollbar.options({