Fix progress bar direction
This commit is contained in:
parent
0138294b36
commit
755eb1405b
|
@ -84,15 +84,24 @@ body {
|
|||
#progress .bar-load,
|
||||
#progress .bar-read {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: flex-end;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
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 {
|
||||
color: #000;
|
||||
background-color: #ccc;
|
||||
|
|
|
@ -171,7 +171,10 @@ kthoom.ImageFile = function(file) {
|
|||
|
||||
function initProgressClick() {
|
||||
$("#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;
|
||||
updatePage();
|
||||
});
|
||||
|
@ -285,6 +288,22 @@ function updatePage() {
|
|||
}
|
||||
|
||||
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
|
||||
if (loadPercentage) {
|
||||
$("#progress .bar-load").css({ width: loadPercentage + "%" });
|
||||
|
@ -526,18 +545,17 @@ function keyHandler(evt) {
|
|||
break;
|
||||
case kthoom.Key.SPACE:
|
||||
var container = $("#mainContent");
|
||||
var atTop = container.scrollTop() === 0;
|
||||
var atBottom = container.scrollTop() >= container[0].scrollHeight - container.height();
|
||||
// var atTop = container.scrollTop() === 0;
|
||||
// var atBottom = container.scrollTop() >= container[0].scrollHeight - container.height();
|
||||
|
||||
if (evt.shiftKey && atTop) {
|
||||
if (evt.shiftKey) {
|
||||
evt.preventDefault();
|
||||
// If it's Shift + Space and the container is at the top of the page
|
||||
showPrevPage();
|
||||
} else if (!evt.shiftKey && atBottom) {
|
||||
} else {
|
||||
evt.preventDefault();
|
||||
// If you're at the bottom of the page and you only pressed space
|
||||
showNextPage();
|
||||
container.scrollTop(0);
|
||||
}
|
||||
break;
|
||||
default:
|
||||
|
|
|
@ -60,12 +60,12 @@
|
|||
<a id="fullscreen" class="icon-resize-full">Fullscreen</a>
|
||||
</div>
|
||||
<div id="progress" role="progressbar" class="loading">
|
||||
<div class="bar-load">
|
||||
<div class="bar-load from-left">
|
||||
<div class="text load">
|
||||
Loading...
|
||||
</div>
|
||||
</div>
|
||||
<div class="bar-read">
|
||||
<div class="bar-read from-left">
|
||||
<div class="text page"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
Loading…
Reference in New Issue
Block a user