diff --git a/cps/static/css/kthoom.css b/cps/static/css/kthoom.css index 233cfe94..267a2a84 100644 --- a/cps/static/css/kthoom.css +++ b/cps/static/css/kthoom.css @@ -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; diff --git a/cps/static/js/kthoom.js b/cps/static/js/kthoom.js index 56038fc6..f6c1e4d7 100644 --- a/cps/static/js/kthoom.js +++ b/cps/static/js/kthoom.js @@ -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 - showLeftPage(); - } else if (!evt.shiftKey && atBottom) { + showPrevPage(); + } else { evt.preventDefault(); // If you're at the bottom of the page and you only pressed space - showRightPage(); - container.scrollTop(0); + showNextPage(); } break; default: diff --git a/cps/templates/readcbr.html b/cps/templates/readcbr.html index 35943b34..5723947e 100644 --- a/cps/templates/readcbr.html +++ b/cps/templates/readcbr.html @@ -60,12 +60,12 @@ Fullscreen
-
+
Loading...
-
+