Merge 5e15cac598 into e591211b57

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

@@ -79,5 +79,3 @@ var reader;
         });
     }
 })();
-
-

cps/templates/read.html

@@ -68,7 +68,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">
@@ -78,14 +78,19 @@
             Choose a theme below: <br/>
 
             <!-- Hardcoded a tick in the light theme button because it is the "default" theme. Need to find a way to do this dynamically on startup-->
-                  <button type="button" id="lightTheme" class="lightTheme" onclick="selectTheme(this.id)"><span id="lightSelected">✓</span>{{_('Light')}}</button> 
-                  <button type="button" id="darkTheme" class="darkTheme" onclick="selectTheme(this.id)"><span id="darkSelected"> </span>{{_('Dark')}}</button>
-                  <button type="button" id="sepiaTheme" class="sepiaTheme" onclick="selectTheme(this.id)"><span id="sepiaSelected"> </span>{{_('Sepia')}}</button>
-                  <button type="button" id="blackTheme" class="blackTheme" onclick="selectTheme(this.id)"><span id="blackSelected"> </span>{{_('Black')}}</button>
+            <button type="button" id="lightTheme" class="lightTheme" onclick="selectTheme(this.id)"><span
+                    id="lightSelected">✓</span>{{ _('Light') }}</button>
+            <button type="button" id="darkTheme" class="darkTheme" onclick="selectTheme(this.id)"><span
+                    id="darkSelected"> </span>{{ _('Dark') }}</button>
+            <button type="button" id="sepiaTheme" class="sepiaTheme" onclick="selectTheme(this.id)"><span
+                    id="sepiaSelected"> </span>{{ _('Sepia') }}</button>
+            <button type="button" id="blackTheme" class="blackTheme" onclick="selectTheme(this.id)"><span
+                    id="blackSelected"> </span>{{ _('Black') }}</button>
         </div>
         <div>
             <p>
-                    <input type="checkbox" id="sidebarReflow" name="sidebarReflow">{{_('Reflow text when sidebars are open.')}}
+                <input type="checkbox" id="sidebarReflow"
+                       name="sidebarReflow">{{ _('Reflow text when sidebars are open.') }}
             </p>
         </div>
         <div class="fontSizeWrapper">
@@ -99,8 +104,8 @@
 </div>
 <div class="overlay"></div>
 <script src="{{ url_for('static', filename='js/libs/jquery.min.js') }}"></script>
-      <script src="{{ url_for('static', filename='js/compress/jszip_epub.min.js') }}">
-      </script> <script src="{{ url_for('static', filename='js/libs/epub.min.js') }}"></script>
+<script src="{{ url_for('static', filename='js/compress/jszip_epub.min.js') }}"></script>
+<script src="{{ url_for('static', filename='js/libs/epub.min.js') }}"></script>
 <script type="text/javascript">
     window.calibre = {
         filePath: "{{ url_for('static', filename='js/libs/') }}",
@@ -128,14 +133,11 @@
         // Apply theme to rest of the page. TODO - Do this smarter
         if (id == "darkTheme") {
             document.getElementById("main").style.backgroundColor = "#202124";
-            }
-            else if (id == "lightTheme") {
+        } else if (id == "lightTheme") {
             document.getElementById("main").style.backgroundColor = "white";
-            }
-            else if (id == "sepiaTheme") {
+        } else if (id == "sepiaTheme") {
             document.getElementById("main").style.backgroundColor = "#ece1ca";
-            }
-            else if (id == "blackTheme") {
+        } else if (id == "blackTheme") {
             document.getElementById("main").style.backgroundColor = "black";
         }
 
@@ -150,5 +152,8 @@
 <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/libs/epub.min.js') }}"></script>
+<script src="{{ url_for('static', filename='js/reading/epub-progress.js') }}"></script>
+
 </body>
 </html>