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

@@ -55,24 +55,24 @@
                 <a id="slider" class="icon-menu">Menu</a>
             </div>
             <div id="metainfo">
-                <span id="book-title"></span>
+	            <span id="book-title"></span>
-                <span id="title-seperator">&nbsp;&nbsp;–&nbsp;&nbsp;</span>
+	            <span id="title-seperator">&nbsp;&nbsp;–&nbsp;&nbsp;</span>
-                <span id="chapter-title"></span>
+	            <span id="chapter-title"></span>
-            </div>
+	        </div>
-            <div id="title-controls">
+	        <div id="title-controls">
-                <a id="bookmark" class="icon-bookmark-empty">Bookmark</a>
+	            <a id="bookmark" class="icon-bookmark-empty">Bookmark</a>
-                <a id="setting" class="icon-cog">Settings</a>
+	            <a id="setting" class="icon-cog">Settings</a>
-                <a id="fullscreen" class="icon-resize-full">Fullscreen</a>
+	            <a id="fullscreen" class="icon-resize-full">Fullscreen</a>            
-            </div>
+	        </div>
-        </div>
+	    </div>
 
-        <div id="divider"></div>
+	    <div id="divider"></div>
-        <div id="prev" class="arrow">‹</div>
+	    <div id="prev" class="arrow">‹</div>
-        <div id="viewer"></div>
+	    <div id="viewer"></div>
-        <div id="next" class="arrow">›</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 id="loader"><img src="{{ url_for('static', filename='img/loader.gif') }}"></div>
-    </div>
+	</div>
     <div class="modal md-effect-1" id="settings-modal">
         <div class="md-content">
             <h3>{{_('Settings')}}</h3>
@@ -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>