From c84c6812778469880c56b4bb809c44405b5c79bd Mon Sep 17 00:00:00 2001
From: Christian Aribaud <christian@aribaud.net>
Date: Mon, 17 Apr 2023 19:33:41 +0200
Subject: [PATCH] Adding progress bar

---
 comic_reader.css                | 19 +++++++++++++++++++
 comic_reader.js                 | 30 ++++++++++++++++++++++++++++++
 comic_reader_test_high_res.html |  4 ++++
 3 files changed, 53 insertions(+)

diff --git a/comic_reader.css b/comic_reader.css
index fa1ce00..3593da9 100644
--- a/comic_reader.css
+++ b/comic_reader.css
@@ -1,3 +1,8 @@
+:root {
+  --reader-progressbar-height: 0.3em;
+}
+
+
 #reader-frame {
     overflow: hidden;
     position: relative;
@@ -120,4 +125,18 @@
     border: 1px white solid;
     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;
 }
\ No newline at end of file
diff --git a/comic_reader.js b/comic_reader.js
index 84a1f9b..ee2aec8 100644
--- a/comic_reader.js
+++ b/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()
+    
 }
 
 
diff --git a/comic_reader_test_high_res.html b/comic_reader_test_high_res.html
index 0e98627..fb48a5b 100644
--- a/comic_reader_test_high_res.html
+++ b/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>