mirrors/calibre-web
1
0
Fork 0
mirror of https://github.com/janeczku/calibre-web synced 2025-07-04 02:53:08 +00:00
Code Issues Releases Wiki Activity

A little more cleanup & readability optimisations.

Browse Source
This commit is contained in:
Kiera 2023-04-01 02:25:17 +01:00
parent 80315e9f6e
commit b9407b54e0
3 changed files with 45 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -131,15 +131,11 @@ body {
display: none !important; display: none !important;
} }
#scrollWrapper {
overflow: auto;
}
#mainContent { #mainContent {
--edge-margin: 0px; --edge-margin: 0px;
overflow: auto;
white-space: nowrap; white-space: nowrap;
outline: none; outline: none;
margin: auto;
} }
#mainText { #mainText {
@ -162,8 +158,8 @@ body {
vertical-align: middle; vertical-align: middle;
} }
#mainContent.double > canvas { #mainContent.double > canvas,
vertical-align: middle; #mainContent.wide-strip > canvas {
margin-top: auto; margin-top: auto;
margin-bottom: auto; margin-bottom: auto;
margin-left: 2.5px; margin-left: 2.5px;
@ -172,8 +168,6 @@ body {
#mainContent.long-strip > canvas { #mainContent.long-strip > canvas {
display: block; display: block;
margin-top: auto;
margin-bottom: auto;
margin-bottom: 4px; margin-bottom: 4px;
} }
@ -181,11 +175,6 @@ body {
margin-bottom: 0px !important; margin-bottom: 0px !important;
} }
#mainContent.wide-strip > canvas {
margin-left: 2.5px;
margin-right: 2.5px;
}
#mainContent.wide-strip > canvas:first-of-type { #mainContent.wide-strip > canvas:first-of-type {
margin-left: var(--edge-margin); margin-left: var(--edge-margin);
} }
@ -194,37 +183,29 @@ body {
margin-right: var(--edge-margin); margin-right: var(--edge-margin);
} }
#scrollWrapper.reverse-order { #mainContent.reverse-order {
display: flex; display: flex;
flex-direction: row-reverse; flex-direction: row-reverse;
} }
#scrollWrapper.reverse-order > #mainContent { #mainContent.reverse-order > canvas {
display: flex;
flex-direction: row-reverse;
}
#scrollWrapper.reverse-order > #mainContent > canvas {
align-self: flex-start;
object-fit: contain;
flex-grow: 1; flex-grow: 1;
flex-shrink: 0; flex-shrink: 0;
} align-self: flex-end;
object-fit: contain;
#scrollWrapper.reverse-order > #mainContent > canvas {
object-position: right; object-position: right;
} }
#scrollWrapper.reverse-order > #mainContent > canvas.right { #mainContent.reverse-order > canvas.right {
object-position: left; object-position: left;
} }
#scrollWrapper.reverse-order > #mainContent.wide-strip > canvas:first-of-type { #mainContent.reverse-order.wide-strip > canvas:first-of-type {
margin-right: var(--edge-margin); margin-right: var(--edge-margin);
margin-left: 2.5px; margin-left: 2.5px;
} }
#scrollWrapper.reverse-order > #mainContent.wide-strip > canvas:last-of-type { #mainContent.reverse-order.wide-strip > canvas:last-of-type {
margin-left: var(--edge-margin); margin-left: var(--edge-margin);
margin-right: 2.5px; margin-right: 2.5px;
} }

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

@ -267,16 +267,12 @@ function updatePage() {
function setTheme() { function setTheme() {
$("body").toggleClass("dark-theme", settings.theme === "dark"); $("body").toggleClass("dark-theme", settings.theme === "dark");
$("#scrollWrapper").toggleClass("disabled-scrollbar", settings.scrollbar === 0); $("#mainContent").toggleClass("disabled-scrollbar", settings.scrollbar === 0);
} }
function pageDisplayUpdate() { function pageDisplayUpdate() {
$(".mainImage").removeClass("hide"); $(".mainImage").removeClass(["hide", "right"]);
$(".mainImage").removeClass("right"); $("#mainContent").removeClass(["double", "long-strip", "wide-strip", "reverse-order"]);
$("#mainContent").removeClass("double");
$("#mainContent").removeClass("long-strip");
$("#mainContent").removeClass("wide-strip");
$("#scrollWrapper").removeClass("reverse-order");
if(settings.pageDisplay <= 1) { if(settings.pageDisplay <= 1) {
$(".mainImage").addClass("hide"); $(".mainImage").addClass("hide");
@ -285,7 +281,7 @@ function pageDisplayUpdate() {
if (settings.pageDisplay === 1) { if (settings.pageDisplay === 1) {
if (settings.direction === 1) { if (settings.direction === 1) {
$(".mainImage").eq(currentImage).addClass("right"); $(".mainImage").eq(currentImage).addClass("right");
$("#scrollWrapper").addClass("reverse-order") $("#mainContent").addClass("reverse-order")
} }
$("#mainContent").addClass("double"); $("#mainContent").addClass("double");
$(".mainImage").eq(currentImage+1).removeClass("hide"); $(".mainImage").eq(currentImage+1).removeClass("hide");
@ -294,7 +290,7 @@ function pageDisplayUpdate() {
$("#mainContent").addClass("long-strip"); $("#mainContent").addClass("long-strip");
scrollCurrentImageIntoView(); scrollCurrentImageIntoView();
} else if (settings.pageDisplay === 3) { } else if (settings.pageDisplay === 3) {
if (settings.direction != 0) { $("#scrollWrapper").addClass("reverse-order") } if (settings.direction != 0) { $("#mainContent").addClass("reverse-order") }
$("#mainContent").addClass("wide-strip"); $("#mainContent").addClass("wide-strip");
scrollCurrentImageIntoView(); scrollCurrentImageIntoView();
} }
@ -460,16 +456,16 @@ function showNextPage() {
function scrollCurrentImageIntoView() { function scrollCurrentImageIntoView() {
if(settings.pageDisplay <= 1) { if(settings.pageDisplay <= 1) {
// This will scroll all the way up when Single Page is selected // This will scroll all the way up when Single Page is selected
$("#scrollWrapper").scrollTop(0); $("#mainContent").scrollTop(0);
} else if (settings.pageDisplay === 2) { } else if (settings.pageDisplay === 2) {
// This will scroll to the image when Long Strip is selected // This will scroll to the image when Long Strip is selected
$("#scrollWrapper").stop().animate({ $("#mainContent").stop().animate({
scrollTop: $(".mainImage").eq(currentImage).offset().top + $("#scrollWrapper").scrollTop() - $("#scrollWrapper").offset().top scrollTop: $(".mainImage").eq(currentImage).offset().top + $("#mainContent").scrollTop() - $("#mainContent").offset().top
}, 200); }, 200);
} else if (settings.pageDisplay === 3) { } else if (settings.pageDisplay === 3) {
var padding = (innerWidth - $(".mainImage").eq(currentImage).width()) / 2 var padding = (innerWidth - $(".mainImage").eq(currentImage).width()) / 2
$("#scrollWrapper").stop().animate({ $("#mainContent").stop().animate({
scrollLeft: $(".mainImage").eq(currentImage).offset().left + $("#scrollWrapper").scrollLeft() - $("#scrollWrapper").offset().left - padding scrollLeft: $(".mainImage").eq(currentImage).offset().left + $("#mainContent").scrollLeft() - $("#mainContent").offset().left - padding
}, 200); }, 200);
} }
} }
@ -705,7 +701,7 @@ function init(filename) {
// We need this in a timeout because if we call it during the CSS transition, IE11 shakes the page ¯\_(ツ)_/¯ // We need this in a timeout because if we call it during the CSS transition, IE11 shakes the page ¯\_(ツ)_/¯
setTimeout(function() { setTimeout(function() {
// Focus on the TOC or the main content area, depending on which is open // Focus on the TOC or the main content area, depending on which is open
$("#main:not(.closed) #scrollWrapper, #sidebar.open #tocView").focus(); $("#main:not(.closed) #mainContent, #sidebar.open #tocView").focus();
scrollTocToActive(); scrollTocToActive();
}, 500); }, 500);
}); });
@ -738,7 +734,7 @@ function init(filename) {
// Close modal // Close modal
$(".closer, .overlay").click(function() { $(".closer, .overlay").click(function() {
$(".md-show").removeClass("md-show"); $(".md-show").removeClass("md-show");
$("#scrollWrapper").focus(); // focus back on the main container so you use up/down keys without having to click on it $("#mainContent").focus(); // focus back on the main container so you use up/down keys without having to click on it
}); });
// TOC thumbnail pagination // TOC thumbnail pagination
@ -752,7 +748,7 @@ function init(filename) {
$("#fullscreen").click(function() { $("#fullscreen").click(function() {
screenfull.toggle($("#container")[0]); screenfull.toggle($("#container")[0]);
// Focus on main container so you can use up/down keys immediately after fullscreen // Focus on main container so you can use up/down keys immediately after fullscreen
$("#scrollWrapper").focus(); $("#mainContent").focus();
}); });
if (screenfull.raw) { if (screenfull.raw) {
@ -766,9 +762,9 @@ function init(filename) {
} }
// Focus the scrollable area so that keyboard scrolling work as expected // Focus the scrollable area so that keyboard scrolling work as expected
$("#scrollWrapper").focus(); $("#mainContent").focus();
$("#scrollWrapper").swipe( { $("#mainContent").swipe( {
swipeRight:function() { swipeRight:function() {
showLeftPage(); showLeftPage();
}, },
@ -779,8 +775,8 @@ function init(filename) {
$(".mainImage").click(function(evt) { $(".mainImage").click(function(evt) {
// Firefox does not support offsetX/Y so we have to manually calculate // Firefox does not support offsetX/Y so we have to manually calculate
// where the user clicked in the image. // where the user clicked in the image.
var mainContentWidth = $("#scrollWrapper").width(); var mainContentWidth = $("#mainContent").width();
var mainContentHeight = $("#scrollWrapper").height(); var mainContentHeight = $("#mainContent").height();
var comicWidth = evt.target.clientWidth; var comicWidth = evt.target.clientWidth;
var comicHeight = evt.target.clientHeight; var comicHeight = evt.target.clientHeight;
var offsetX = (mainContentWidth - comicWidth) / 2; var offsetX = (mainContentWidth - comicWidth) / 2;
@ -813,19 +809,18 @@ function init(filename) {
}); });
// Scrolling up/down will update current image if a new image is into view (for Long Strip Display) // Scrolling up/down will update current image if a new image is into view (for Long Strip Display)
$("#scrollWrapper").scroll(function(){ $("#mainContent").scroll(function(){
if (settings.pageDisplay <= 1) return if (settings.pageDisplay <= 1) return
var scroll = $("#scrollWrapper").scrollTop(); var scroll = $("#mainContent").scrollTop();
if (settings.pageDisplay === 3) { if (settings.pageDisplay === 3) {
scroll = Math.abs($("#scrollWrapper").scrollLeft()); scroll = Math.abs($("#mainContent").scrollLeft());
} }
if (scroll > prevScrollPosition) { if (scroll > prevScrollPosition) {
//Scroll Down //Scroll Down
if(currentImage + 1 < imageFiles.length) { if(currentImage + 1 < imageFiles.length) {
if(currentImageOffset(currentImage + 1) <= scroll) { if(currentImageOffset(currentImage + 1) <= 0) {
currentImage++; currentImage++;
scrollTocToActive(); scrollTocToActive();
updateProgress(); updateProgress();
@ -834,7 +829,7 @@ function init(filename) {
} else { } else {
//Scroll Up //Scroll Up
if(currentImage - 1 > -1 ) { if(currentImage - 1 > -1 ) {
if(currentImageOffset(currentImage - 1) >= scroll) { if(currentImageOffset(currentImage - 1) > 0) {
currentImage--; currentImage--;
scrollTocToActive(); scrollTocToActive();
updateProgress(); updateProgress();
@ -847,12 +842,17 @@ function init(filename) {
}); });
// Scroll Wheel up/down increments/decrements page on Wide Strip view // Scroll Wheel up/down increments/decrements page on Wide Strip view
$("#scrollWrapper").get(0).addEventListener("wheel", (event) => { $("#mainContent").get(0).addEventListener("wheel", (event) => {
if (settings.pageDisplay != 3) return if (settings.pageDisplay != 3) return
var maxScrollHeight = $("#mainContent").get(0).scrollHeight - $("#mainContent").outerHeight()
$("#scrollWrapper").animate({ if (
scrollLeft: "+="+event.deltaY event.deltaY > 0 && $("#mainContent").scrollTop() == maxScrollHeight
}, 20, "linear", false); || event.deltaY < 0 && $("#mainContent").scrollTop() == 0
) {
$("#mainContent").animate({
scrollLeft: "+="+event.deltaY
}, 25, "swing", false);
}
}) })
} }
@ -860,7 +860,7 @@ function currentImageOffset(imageIndex) {
var imgOffset = $(".mainImage").eq(imageIndex).offset() var imgOffset = $(".mainImage").eq(imageIndex).offset()
var scrollPos = $("#mainContent").position() var scrollPos = $("#mainContent").position()
if (settings.pageDisplay===3) { if (settings.pageDisplay===3) {
var centerPoint = ($("#scrollWrapper").width() - $(".mainImage").eq(imageIndex).width()) / 2 var centerPoint = ($("#mainContent").width() - $(".mainImage").eq(imageIndex).width()) / 2
if (settings.direction === 1) { if (settings.direction === 1) {
scrollPos.right = scrollPos.left + $("#mainContent").width() scrollPos.right = scrollPos.left + $("#mainContent").width()
return Math.abs(imgOffset.left - scrollPos.right) - $(".mainImage").eq(imageIndex).width() - centerPoint return Math.abs(imgOffset.left - scrollPos.right) - $(".mainImage").eq(imageIndex).width() - centerPoint

6
cps/templates/readcbr.html
View File

@ -73,10 +73,8 @@
</div> </div>
</div> </div>
</div> </div>
<div id="scrollWrapper"> <div id="mainContent" tabindex="-1">
<div id="mainContent" tabindex="-1"> <div id="mainText" style="display:none"></div>
<div id="mainText" style="display:none"></div>
</div>
</div> </div>
<div id="left" class="arrow" onclick="showLeftPage()">‹</div> <div id="left" class="arrow" onclick="showLeftPage()">‹</div>
<div id="right" class="arrow" onclick="showRightPage()">›</div> <div id="right" class="arrow" onclick="showRightPage()">›</div>