better navigation in wide mode
This commit is contained in:
parent
d7ac0f48f8
commit
a236ec253f
1 changed files with 70 additions and 41 deletions
111
cbr.js/cbr.js
111
cbr.js/cbr.js
|
|
@ -1,7 +1,8 @@
|
|||
this.cbrjs = {};
|
||||
|
||||
cbrjs.open = function(url) {
|
||||
var settings = getSettings();
|
||||
cbrjs.url = url
|
||||
cbrjs.loadSettings()
|
||||
Ox.load('UI', function() {
|
||||
var $body = Ox.$('body')
|
||||
.css({
|
||||
|
|
@ -10,9 +11,10 @@ cbrjs.open = function(url) {
|
|||
});
|
||||
window.app = cbrjs.CBRViewer(Ox.extend({
|
||||
url: url,
|
||||
}, settings)
|
||||
}, cbrjs.settings)
|
||||
).bindEvent({
|
||||
page: updateSettings
|
||||
page: cbrjs.updateSettings,
|
||||
fitMode: cbrjs.updateSettings,
|
||||
}).appendTo($body);
|
||||
Ox.$window.on({
|
||||
resize: app.resize
|
||||
|
|
@ -20,24 +22,26 @@ cbrjs.open = function(url) {
|
|||
|
||||
});
|
||||
|
||||
function getSettings() {
|
||||
var settings = {};
|
||||
try {
|
||||
settings = JSON.parse(localStorage['cbrjs.' + url]);
|
||||
} catch(e) {
|
||||
settings.page = 1;
|
||||
}
|
||||
return settings;
|
||||
}
|
||||
|
||||
function updateSettings(data) {
|
||||
Ox.forEach(data, function(value, key) {
|
||||
settings[key] = value;
|
||||
});
|
||||
localStorage['cbrjs.' + url] = JSON.stringify(settings);
|
||||
}
|
||||
};
|
||||
|
||||
cbrjs.loadSettings = function() {
|
||||
var settings = {};
|
||||
try {
|
||||
settings = JSON.parse(localStorage['cbrjs.' + cbrjs.url]);
|
||||
} catch(e) {
|
||||
settings.page = 1;
|
||||
settings.fitMode = 'B';
|
||||
}
|
||||
cbrjs.settings = settings;
|
||||
}
|
||||
|
||||
cbrjs.updateSettings = function(data) {
|
||||
Ox.forEach(data, function(value, key) {
|
||||
cbrjs.settings[key] = value;
|
||||
});
|
||||
localStorage['cbrjs.' + cbrjs.url] = JSON.stringify(cbrjs.settings);
|
||||
}
|
||||
|
||||
cbrjs.CBRViewer = function(options, self) {
|
||||
self = self || {};
|
||||
var that = Ox.Element({}, self)
|
||||
|
|
@ -48,6 +52,10 @@ cbrjs.CBRViewer = function(options, self) {
|
|||
.options(options || {})
|
||||
.update({
|
||||
page: setPage,
|
||||
fitMode: function() {
|
||||
resize()
|
||||
that.triggerEvent('fitMode', {fitMode: self.options.fitMode});
|
||||
},
|
||||
url: loadBook
|
||||
}),
|
||||
moveTimeout,
|
||||
|
|
@ -57,7 +65,6 @@ cbrjs.CBRViewer = function(options, self) {
|
|||
self.rotateTimes = 0;
|
||||
self.hflip = false;
|
||||
self.vflip = false;
|
||||
self.fitMode = 'B';
|
||||
|
||||
self.mimeTypes = {
|
||||
'png': 'image/png',
|
||||
|
|
@ -75,40 +82,50 @@ cbrjs.CBRViewer = function(options, self) {
|
|||
})
|
||||
.bindEvent({
|
||||
key_down: function() {
|
||||
that.options({
|
||||
page: self.pages.length
|
||||
})
|
||||
self.$frame.scrollTop(self.$frame.scrollTop() + self.$frame.height())
|
||||
},
|
||||
key_left: function() {
|
||||
that.options({
|
||||
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() {
|
||||
that.options({
|
||||
page: Math.min(self.options.page + 1, self.pages.length)
|
||||
})
|
||||
},
|
||||
key_up: function() {
|
||||
that.options({
|
||||
page: 1
|
||||
})
|
||||
self.$frame.scrollTop(self.$frame.scrollTop() - self.$frame.height())
|
||||
},
|
||||
key_n: function() {
|
||||
self.fitMode = 'N';
|
||||
resize();
|
||||
that.options({
|
||||
fitMode: 'N'
|
||||
})
|
||||
},
|
||||
key_h: function() {
|
||||
self.fitMode = 'H';
|
||||
resize();
|
||||
that.options({
|
||||
fitMode: 'H'
|
||||
})
|
||||
},
|
||||
key_b: function() {
|
||||
self.fitMode = 'B';
|
||||
resize();
|
||||
that.options({
|
||||
fitMode: 'B'
|
||||
})
|
||||
},
|
||||
key_w: function() {
|
||||
self.fitMode = 'W';
|
||||
resize();
|
||||
that.options({
|
||||
fitMode: 'W'
|
||||
})
|
||||
},
|
||||
key_l: function() {
|
||||
self.rotateTimes--;
|
||||
|
|
@ -128,6 +145,15 @@ cbrjs.CBRViewer = function(options, self) {
|
|||
}
|
||||
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) {
|
||||
if (data.clientX < (that.width() / 2)) {
|
||||
that.options({
|
||||
|
|
@ -218,15 +244,18 @@ cbrjs.CBRViewer = function(options, self) {
|
|||
title: 'fit',
|
||||
tooltip: Ox._('Zoom to fit')
|
||||
})
|
||||
self.fitMode = 'W';
|
||||
that.options({
|
||||
fitMode: 'W'
|
||||
})
|
||||
} else {
|
||||
self.$zoom.options({
|
||||
title: 'fill',
|
||||
tooltip: Ox._('Zoom to fill')
|
||||
})
|
||||
self.fitMode = 'B';
|
||||
that.options({
|
||||
fitMode: 'B'
|
||||
})
|
||||
}
|
||||
resize()
|
||||
event.stopPropagation()
|
||||
event.preventDefault();
|
||||
}
|
||||
|
|
@ -341,14 +370,14 @@ cbrjs.CBRViewer = function(options, self) {
|
|||
canvas.style.maxWidth = '';
|
||||
canvas.style.maxHeight = '';
|
||||
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.maxHeight = maxheight + 'px';
|
||||
} else if (self.fitMode == 'H') {
|
||||
} else if (self.options.fitMode == 'H') {
|
||||
canvas.style.height = maxheight + 'px';
|
||||
} else if (self.fitMode == 'W') {
|
||||
} else if (self.options.fitMode == 'W') {
|
||||
canvas.style.width = '100%';
|
||||
}
|
||||
self.$scrollbar.options({
|
||||
|
|
|
|||
Loading…
Reference in a new issue