mirrors/calibre-web
1
0
Fork 0
mirror of https://github.com/janeczku/calibre-web synced 2024-12-01 05:49:58 +00:00
Code Issues Releases Wiki Activity

Merge remote-tracking branch 'comic_reader/master' into master

Browse Source
This commit is contained in:
Ozzie Isaacs 2021-04-18 12:02:21 +02:00
commit 3be5b5f919
3 changed files with 40 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
cps/static/css/kthoom.css
View File

@ -84,15 +84,24 @@ body {
#progress .bar-load, #progress .bar-load,
#progress .bar-read { #progress .bar-read {
display: flex; display: flex;
align-items: flex-end;
justify-content: flex-end;
position: absolute; position: absolute;
top: 0; top: 0;
left: 0;
bottom: 0; bottom: 0;
transition: width 150ms ease-in-out; transition: width 150ms ease-in-out;
} }
#progress .from-left {
left: 0;
align-items: flex-end;
justify-content: flex-end;
}
#progress .from-right {
right: 0;
align-items: flex-start;
justify-content: flex-start;
}
#progress .bar-load { #progress .bar-load {
color: #000; color: #000;
background-color: #ccc; background-color: #ccc;

34
cps/static/js/kthoom.js
View File

@ -171,7 +171,10 @@ kthoom.ImageFile = function(file) {
function initProgressClick() { function initProgressClick() {
$("#progress").click(function(e) { $("#progress").click(function(e) {
var page = Math.max(1, Math.ceil((e.offsetX / $(this).width()) * totalImages)) - 1; var offset = $(this).offset();
var x = e.pageX - offset.left;
var rate = settings.direction === 0 ? x / $(this).width() : 1 - x / $(this).width();
var page = Math.max(1, Math.ceil(rate * totalImages)) - 1;
currentImage = page; currentImage = page;
updatePage(); updatePage();
}); });
@ -285,6 +288,22 @@ function updatePage() {
} }
function updateProgress(loadPercentage) { function updateProgress(loadPercentage) {
if (settings.direction === 0) {
$("#progress .bar-read")
.removeClass("from-right")
.addClass("from-left");
$("#progress .bar-load")
.removeClass("from-right")
.addClass("from-left");
} else {
$("#progress .bar-read")
.removeClass("from-left")
.addClass("from-right");
$("#progress .bar-load")
.removeClass("from-left")
.addClass("from-right");
}
// Set the load/unzip progress if it's passed in // Set the load/unzip progress if it's passed in
if (loadPercentage) { if (loadPercentage) {
$("#progress .bar-load").css({ width: loadPercentage + "%" }); $("#progress .bar-load").css({ width: loadPercentage + "%" });
@ -526,18 +545,17 @@ function keyHandler(evt) {
break; break;
case kthoom.Key.SPACE: case kthoom.Key.SPACE:
var container = $("#mainContent"); var container = $("#mainContent");
var atTop = container.scrollTop() === 0; // var atTop = container.scrollTop() === 0;
var atBottom = container.scrollTop() >= container[0].scrollHeight - container.height(); // var atBottom = container.scrollTop() >= container[0].scrollHeight - container.height();
if (evt.shiftKey && atTop) { if (evt.shiftKey) {
evt.preventDefault(); evt.preventDefault();
// If it's Shift + Space and the container is at the top of the page // If it's Shift + Space and the container is at the top of the page
showLeftPage(); showPrevPage();
} else if (!evt.shiftKey && atBottom) { } else {
evt.preventDefault(); evt.preventDefault();
// If you're at the bottom of the page and you only pressed space // If you're at the bottom of the page and you only pressed space
showRightPage(); showNextPage();
container.scrollTop(0);
} }
break; break;
default: default:

4
cps/templates/readcbr.html
View File

@ -60,12 +60,12 @@
<a id="fullscreen" class="icon-resize-full">Fullscreen</a> <a id="fullscreen" class="icon-resize-full">Fullscreen</a>
</div> </div>
<div id="progress" role="progressbar" class="loading"> <div id="progress" role="progressbar" class="loading">
<div class="bar-load"> <div class="bar-load from-left">
<div class="text load"> <div class="text load">
Loading... Loading...
</div> </div>
</div> </div>
<div class="bar-read"> <div class="bar-read from-left">
<div class="text page"></div> <div class="text page"></div>
</div> </div>
</div> </div>