Merge remote-tracking branch 'epub_progress/progress_indicator'

cps/static/css/main.css

@@ -826,3 +826,10 @@ input:-moz-placeholder { color: #454545; }
 .icon-columns::before { content: '\e810'; } /* '' */
 .icon-list::before { content: '\e800'; } /* '' */
 .icon-resize-small::before { content: '\e808'; } /* '' */
+
+#progress{
+    right: 4rem;
+    bottom: 4rem;
+    width: fit-content;
+    position: absolute;
+}

cps/static/js/reading/epub-progress.js

@@ -0,0 +1,54 @@
+/**
+ * waits until queue is finished, meaning the book is done loading
+ * @param callback
+ */
+function qFinished(callback){
+    let timeout=setInterval(()=>{
+        if(reader.rendition.q.running===undefined)
+            clearInterval(timeout);
+            callback();
+        },300
+    )
+}
+
+function calculateProgress(){
+    let data=reader.rendition.location.end;
+    return Math.round(epub.locations.percentageFromCfi(data.cfi)*100);
+}
+
+// register new event emitter locationchange that fires on urlchange
+// source: https://stackoverflow.com/a/52809105/21941129
+(() => {
+    let oldPushState = history.pushState;
+    history.pushState = function pushState() {
+        let ret = oldPushState.apply(this, arguments);
+        window.dispatchEvent(new Event('locationchange'));
+        return ret;
+    };
+
+    let oldReplaceState = history.replaceState;
+    history.replaceState = function replaceState() {
+        let ret = oldReplaceState.apply(this, arguments);
+        window.dispatchEvent(new Event('locationchange'));
+        return ret;
+    };
+
+    window.addEventListener('popstate', () => {
+        window.dispatchEvent(new Event('locationchange'));
+    });
+})();
+
+window.addEventListener('locationchange',()=>{
+    let newPos=calculateProgress();
+    progressDiv.textContent=newPos+"%";
+});
+
+var epub=ePub(calibre.bookUrl)
+
+let progressDiv=document.getElementById("progress");
+
+qFinished(()=>{
+    epub.locations.generate().then(()=> {
+    window.dispatchEvent(new Event('locationchange'))
+});
+})

cps/static/js/reading/epub.js

@@ -82,5 +82,3 @@ var reader;
     const theme = localStorage.getItem("calibre.reader.theme") ?? Object.keys(themes)[0];
     selectTheme(theme);
 })();
-
-

cps/templates/read.html

@@ -70,7 +70,7 @@
 	    <div id="prev" class="arrow">‹</div>
 	    <div id="viewer"></div>
 	    <div id="next" class="arrow">›</div>
-
+	    <div id="progress">0%</div>
 	    <div id="loader"><img src="{{ url_for('static', filename='img/loader.gif') }}"></div>
 	</div>
     <div class="modal md-effect-1" id="settings-modal">
@@ -210,5 +210,6 @@
       <script src="{{ url_for('static', filename='js/libs/screenfull.min.js') }}"></script>
       <script src="{{ url_for('static', filename='js/libs/reader.min.js') }}"></script>
       <script src="{{ url_for('static', filename='js/reading/epub.js') }}"></script>
+      <script src="{{ url_for('static', filename='js/reading/epub-progress.js') }}"></script>      
     </body>
 </html>