fix fullscreen mode

comic_reader.css

@@ -8,7 +8,7 @@
     flex-direction: column;
 }
 
-#reader-content {
+#reader-content-frame {
     flex: 1;
     position: relative;
     overflow: hidden;

comic_reader.js

@@ -5,6 +5,7 @@
 MOVE_NEXT = "ArrowRight"
 MOVE_BACK = "ArrowLeft"
 TOGGLE_FULLSCREEN = "F"
+TOGGLE_PROGRESSBAR = "P"
 
 
 //========================
@@ -20,9 +21,11 @@ DELAY_BEFORE_HIDDING_CONTROLS = 4000;
 //====================
 
 READER_FRAME = document.getElementById("reader-frame")
+READER_CONTENT_FRAME = document.getElementById("reader-content-frame")
 READER_PAGES = document.getElementById("reader-pages")
 FOCUS_OVERLAY = document.getElementById("focus-overlay")
 HELP_CONTROLS = document.getElementById("help-controls")
+PROGRESS_BAR_CONTAINER = document.getElementById("reader-progress-container")
 PROGRESS_BAR = document.getElementById("reader-progress-bar")
 
 CURRENT_ZOOM = 0
@@ -35,7 +38,6 @@ CURRENT_Y = 0
 IS_PAGE_MODE = false
 MOUSEWHELL_WAIT = false
 
-
 // =============
 //   UTILITIES
 // =============
@@ -111,7 +113,7 @@ function pageOriginalWidth() {
 }
 
 function readerFrameRatio() {
-    return READER_FRAME.clientWidth / READER_FRAME.clientHeight
+    return READER_CONTENT_FRAME.clientWidth / READER_CONTENT_FRAME.clientHeight
 }
 
 function pageRatio() {
@@ -125,9 +127,9 @@ function isFrameRatioWiderThanPage(){
 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_CONTENT_FRAME.clientHeight / pageOriginalHeight()
     }
-    return READER_FRAME.clientWidth / pageOriginalWidth()
+    return READER_CONTENT_FRAME.clientWidth / pageOriginalWidth()
 }
 
 function totalPagesWidth() {
@@ -153,7 +155,7 @@ function initReader(){
                 entry.target.style.visibility = "hidden"
             }
         });
-    }, { root: READER_FRAME, rootMargin: "-10px" });
+    }, { root: READER_CONTENT_FRAME, rootMargin: "-10px" });
     
     for (var i = 0; i < READER_PAGES.children.length; i++) {
         let img = READER_PAGES.children[i];
@@ -189,11 +191,11 @@ function moveReaderDisplayToArea(pageNumber, width, height, posx, posy){
     if (readerFrameRatio() > zoomRatio) {
         // Frame wider than zoom
         var zoomToFrameScaleFactor = pageToFrameScaleFactor(true) * pageOriginalHeight() / height
-        var zoomToFrameCenteringOffset = [(READER_FRAME.clientWidth - width * zoomToFrameScaleFactor) / 2, 0]
+        var zoomToFrameCenteringOffset = [(READER_CONTENT_FRAME.clientWidth - width * zoomToFrameScaleFactor) / 2, 0]
         updateFocusByWidth(width * zoomToFrameScaleFactor)
     } else {
         var zoomToFrameScaleFactor = pageToFrameScaleFactor(false) * pageOriginalWidth() / width
-        var zoomToFrameCenteringOffset = [0, (READER_FRAME.clientHeight - height * zoomToFrameScaleFactor) / 2]
+        var zoomToFrameCenteringOffset = [0, (READER_CONTENT_FRAME.clientHeight - height * zoomToFrameScaleFactor) / 2]
         updateFocusByHeight(height * zoomToFrameScaleFactor)
     }
     
@@ -212,6 +214,9 @@ function moveReaderDisplayToArea(pageNumber, width, height, posx, posy){
     CURRENT_Y = posy
 }
 
+function refreshReaderDisplay() {
+    moveReaderDisplayToArea(CURRENT_PAGE, CURRENT_WIDTH, CURRENT_HEIGHT, CURRENT_X, CURRENT_Y)
+}
 
 function moveReaderDisplayToPage(pageNumber) {
     moveReaderDisplayToArea(pageNumber, 0, 0, 0, 0)
@@ -226,7 +231,7 @@ function moveReaderDisplayToZoom(index) {
 
 function updateFocusByWidth(width){
     
-    side_width = (READER_FRAME.clientWidth - width) / 2
+    side_width = (READER_CONTENT_FRAME.clientWidth - width) / 2
     
     FOCUS_OVERLAY.style.gridTemplateColumns = side_width +"px auto " + side_width + "px"
     FOCUS_OVERLAY.style.gridTemplateRows = "0px auto 0px";
@@ -234,7 +239,7 @@ function updateFocusByWidth(width){
 
 function updateFocusByHeight(height){
     
-    side_width = (READER_FRAME.clientHeight - height) / 2
+    side_width = (READER_CONTENT_FRAME.clientHeight - height) / 2
     
     FOCUS_OVERLAY.style.gridTemplateRows = side_width +"px auto " + side_width + "px"
     FOCUS_OVERLAY.style.gridTemplateColumns = "0px auto 0px";
@@ -331,6 +336,15 @@ function handleKeyPress(key, has_shift){
         
     }
     
+    else if (key.toUpperCase() == TOGGLE_PROGRESSBAR){
+        if (PROGRESS_BAR_CONTAINER.hidden == true) {
+            PROGRESS_BAR_CONTAINER.hidden = false
+        } else {
+            PROGRESS_BAR_CONTAINER.hidden = true
+        }
+        refreshReaderDisplay();
+    }
+
 }
 
 function handleMouseWhell(deltaY){
@@ -362,7 +376,7 @@ window.addEventListener("load", (event) => {
 });
 
 addEventListener("resize", (event) => {
-    moveReaderDisplayToArea(CURRENT_PAGE, CURRENT_WIDTH, CURRENT_HEIGHT, CURRENT_X, CURRENT_Y)
+    refreshReaderDisplay();
 });
 
 addEventListener("keydown", (event) => {

comic_reader_test_high_res.html

@@ -11,7 +11,7 @@
     <body>
     
         <div id="reader-frame">
-            <div id="reader-content">
+            <div id="reader-content-frame">
             
                 <div id="reader-pages" data-pages-width="2481" data-pages-height="3503" hidden>
                     <img loading="lazy" src="https://www.peppercarrot.com/0_sources/ep35_The-Reflection/hi-res/en_Pepper-and-Carrot_by-David-Revoy_E35P01.jpg"/>
@@ -44,6 +44,7 @@
                 <div id="help-menu">
                     <div id="help-controls" style="opacity:1; transform: translate(0,0);">
                         <div><div class="key">F</div>: Toggle fullscreen</div>
+                        <div><div class="key">P</div>: Toggle progress bar</div>
                         <div><div class="key">&larr;</div>/ scroll up / clic left : previous panel</div>
                         <div><div class="key">&rarr;</div>/ scroll down / clic center or right : next panel</div>
                         <div><div class="key">SHIFT</div> + <div class="key">&larr;</div>/<div class="key">&rarr;</div>: previous / next page</div>