Adding progress bar

comic_reader.css

@@ -1,3 +1,8 @@
+:root {
+  --reader-progressbar-height: 0.3em;
+}
+
+
 #reader-frame {
     overflow: hidden;
     position: relative;
@@ -121,3 +126,17 @@
     padding: 0 0.1em;
     border-radius: 0.2em;
 }
+
+#reader-progress-container {
+    height: var(--reader-progressbar-height);
+    bottom: var(--reader-progressbar-height);
+    position: relative;
+    background-color: dimgray;
+}
+
+#reader-progress-bar{
+    background-color: whitesmoke;
+    height: 100%;
+    width: 0%;
+    transition: all 0.5s ease-in-out;
+}

comic_reader.js

@@ -23,6 +23,7 @@ READER_FRAME = document.getElementById("reader-frame")
 READER_PAGES = document.getElementById("reader-pages")
 FOCUS_OVERLAY = document.getElementById("focus-overlay")
 HELP_CONTROLS = document.getElementById("help-controls")
+PROGRESS_BAR = document.getElementById("reader-progress-bar")
 
 CURRENT_ZOOM = 0
 CURRENT_PAGE = 1
@@ -67,6 +68,33 @@ function getLastZoomOfPage(pageNumber){
     return res
 }
 
+function getZoomCountForPage(pageNumber) {
+    return zooms.filter(zoom => zoom[0] == pageNumber).length
+}
+
+function getCurrentZoomIndexForPage() {
+    previousZoomsCount = zooms.filter(zoom => zoom[0] < CURRENT_PAGE).length
+    return CURRENT_ZOOM - previousZoomsCount + 1
+}
+
+function getReadingProgressPercent() {
+    progressPerPage = 1 / getPagesCount()
+    
+    if (IS_PAGE_MODE){
+        return 100 * progressPerPage * CURRENT_PAGE
+    }
+    
+    progressPerZoom = progressPerPage / getZoomCountForPage(CURRENT_PAGE)
+    
+    readingProgress = (CURRENT_PAGE - 1) * progressPerPage + getCurrentZoomIndexForPage() * progressPerZoom
+    
+    return 100 * readingProgress
+}
+
+function updateProgressBar(){
+    PROGRESS_BAR.style.width = getReadingProgressPercent() + "%"
+}
+
 // Dimensions utilites
 // -------------------
 
@@ -274,6 +302,8 @@ function moveReader(to_next, move_page) {
         }
     }
     
+    updateProgressBar()
+    
 }
 
 

comic_reader_test_high_res.html

@@ -47,6 +47,10 @@
                     <div><div class="key">SHIFT</div> + <div class="key">&larr;</div>/<div class="key">&rarr;</div>: previous / next page</div>
                 </div>
             </div>
+            
+            <div id="reader-progress-container">
+                <div id="reader-progress-bar"></div>
+            </div>
         </div>
     
     </body>