Initial scaling fix to prevent massive loading

comic_reader.css

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

comic_reader.js

@@ -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() {
+// Dimensions utilites
-    return READER_FRAME.clientWidth / READER_FRAME.clientHeight
+// -------------------
-}
 
 function getPagesCount() {
     return READER_PAGES.childElementCount
 }
 
-function getPagesHeight() {
+function pageOriginalHeight() {
-    return READER_PAGES.dataset.pagesHeight
+    return parseInt(READER_PAGES.dataset.pagesHeight)
 }
 
-function getPagesWidth() {
+function pageOriginalWidth() {
-    return READER_PAGES.dataset.pagesWidth
+    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
+    zoomRatio = width / height
     
-    base_scale_factor = getPagesHeight() / READER_FRAME.clientHeight // This is the factor at 100% height
+    if (readerFrameRatio() > zoomRatio) {
-    
+        // Frame wider than zoom
-    if (ratio < getReaderFrameRatio()) {
+        var zoomToFrameScaleFactor = pageToFrameScaleFactor(true) * pageOriginalHeight() / height
-        
+        var zoomToFrameCenteringOffset = [(READER_FRAME.clientWidth - width * zoomToFrameScaleFactor) / 2, 0]
-        scale_factor = READER_FRAME.clientHeight / height
+        updateFocusByWidth(width * zoomToFrameScaleFactor)
-        
-        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)
-        
     } else {
-        
+        var zoomToFrameScaleFactor = pageToFrameScaleFactor(false) * pageOriginalWidth() / width
-        scale_factor = READER_FRAME.clientWidth / width
+        var zoomToFrameCenteringOffset = [0, (READER_FRAME.clientHeight - height * zoomToFrameScaleFactor) / 2]
-        
+        updateFocusByHeight(height * zoomToFrameScaleFactor)
-        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)
-        
     }
     
+    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

comic_reader_test_high_res.html

@@ -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"/>