caribaud/melpomene
1
0
Fork 0
Code Issues 9 Pull requests 1 Releases 3 Wiki Activity

Initial scaling fix to prevent massive loading

Browse source
This commit is contained in:
Christian Aribaud 2023-04-15 17:30:49 +02:00
parent f2b4cceb72
commit e0194fd06d
3 changed files with 59 additions and 47 deletions
Download patch file Download diff file Expand all files Collapse all files

2
comic_reader.css
View file

@ -5,11 +5,9 @@
#reader-pages {
position: absolute;
display: flex;
flex-direction: row;
left: 0px;
right: 0px;
height: 100%;
transition: all 1.5s ease;
}

102
comic_reader.js
View file

@ -22,6 +22,9 @@ IS_PAGE_MODE = false
// UTILITIES
// ===========
// Zooms utilites
// --------------
function getFirstZoomOfPage(pageNumber){
for (var zoom_idx = 0; zoom_idx < zooms.length; zoom_idx++){
@ -47,26 +50,45 @@ function getLastZoomOfPage(pageNumber){
return res
}
function getReaderFrameRatio() {
return READER_FRAME.clientWidth / READER_FRAME.clientHeight
}
// Dimensions utilites
// -------------------
function getPagesCount() {
return READER_PAGES.childElementCount
}
function getPagesHeight() {
return READER_PAGES.dataset.pagesHeight
function pageOriginalHeight() {
return parseInt(READER_PAGES.dataset.pagesHeight)
}
function getPagesWidth() {
return READER_PAGES.dataset.pagesWidth
function pageOriginalWidth() {
return parseInt(READER_PAGES.dataset.pagesWidth)
}
function getPagesRatio() {
function readerFrameRatio() {
return READER_FRAME.clientWidth / READER_FRAME.clientHeight
}
function pageRatio() {
return READER_PAGES.dataset.pagesWidth / READER_PAGES.dataset.pagesHeight
}
function isFrameRatioWiderThanPage(){
return readerFrameRatio() > pageRatio()
}
function pageToFrameScaleFactor(useHeight){
// The scale factor to apply to a page so it exactly fit in the reader frame
if (useHeight) {
return READER_FRAME.clientHeight / pageOriginalHeight()
}
return READER_FRAME.clientWidth / pageOriginalWidth()
}
function totalPagesWidth() {
// The width of all cumuled pages with scale factor applied
return pageOriginalWidth() * getPagesCount()
}
// =========
// ACTIONS
@ -74,57 +96,49 @@ function getPagesRatio() {
function initReader(){
moveReaderDisplayToZoom(0)
for (var i = 0; i < READER_PAGES.children.length; i++) {
let img = READER_PAGES.children[i];
img.style.width = 100 / getPagesCount() + "%"
}
READER_PAGES.style.display = "flex"
READER_PAGES.hidden = false
}
function moveReaderDisplayToArea(pageNumber, width, height, posx, posy){
if (width == 0){
width = getPagesWidth()
width = pageOriginalWidth()
}
if (height == 0){
height = getPagesHeight()
height = pageOriginalHeight()
}
ratio = width / height
base_scale_factor = getPagesHeight() / READER_FRAME.clientHeight // This is the factor at 100% height
if (ratio < getReaderFrameRatio()) {
scale_factor = READER_FRAME.clientHeight / height
centering_padding = (READER_FRAME.clientWidth - width * scale_factor) / 2
pages_negative_padding = getPagesWidth() * scale_factor * (pageNumber - 1)
READER_PAGES.style.height = base_scale_factor * scale_factor * 100 + "%"
READER_PAGES.style.left = (- posx * scale_factor + centering_padding - pages_negative_padding) + "px"
READER_PAGES.style.top = -posy * scale_factor + "px"
updateFocusByWidth(width * scale_factor)
zoomRatio = width / height
if (readerFrameRatio() > zoomRatio) {
// Frame wider than zoom
var zoomToFrameScaleFactor = pageToFrameScaleFactor(true) * pageOriginalHeight() / height
var zoomToFrameCenteringOffset = [(READER_FRAME.clientWidth - width * zoomToFrameScaleFactor) / 2, 0]
updateFocusByWidth(width * zoomToFrameScaleFactor)
} else {
scale_factor = READER_FRAME.clientWidth / width
pages_negative_padding = getPagesWidth() * scale_factor * (pageNumber - 1)
scaled_height = height * scale_factor
READER_PAGES.style.height = base_scale_factor * scale_factor * 100 + "%"
READER_PAGES.style.left = (- posx * scale_factor - pages_negative_padding) + "px"
READER_PAGES.style.top = -posy * scale_factor + (READER_FRAME.clientHeight - scaled_height)/2 + "px"
updateFocusByHeight(scaled_height)
var zoomToFrameScaleFactor = pageToFrameScaleFactor(false) * pageOriginalWidth() / width
var zoomToFrameCenteringOffset = [0, (READER_FRAME.clientHeight - height * zoomToFrameScaleFactor) / 2]
updateFocusByHeight(height * zoomToFrameScaleFactor)
}
previousPagesOffset = pageOriginalWidth() * (pageNumber - 1) * zoomToFrameScaleFactor
READER_PAGES.style.width = totalPagesWidth() * zoomToFrameScaleFactor + "px"
READER_PAGES.style.height = pageOriginalHeight() * zoomToFrameScaleFactor + "px"
READER_PAGES.style.left = (- posx * zoomToFrameScaleFactor + zoomToFrameCenteringOffset[0] - previousPagesOffset) + "px"
READER_PAGES.style.top = (- posy * zoomToFrameScaleFactor + zoomToFrameCenteringOffset[1]) + "px"
CURRENT_PAGE = pageNumber
CURRENT_WIDTH = width
CURRENT_HEIGHT = height

2
comic_reader_test_high_res.html
View file

@ -11,7 +11,7 @@
<body>
<div id="reader-frame">
<div id="reader-pages" data-pages-width="2481" data-pages-height="3503">
<div id="reader-pages" data-pages-width="2481" data-pages-height="3503" hidden>
<img loading="lazy" onload="event.target.style.opacity=1" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P01.jpg"/>
<img loading="lazy" onload="event.target.style.opacity=1" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P02.jpg"/>
<img loading="lazy" onload="event.target.style.opacity=1" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P03.jpg"/>