Added stats

pgaskin · Aug 14, 2016 · ef3cc80 · ef3cc80
1 parent cb5cddb
commit ef3cc80
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 14 deletions.
diff --git a/index.html b/index.html
@@ -124,6 +124,16 @@ <h1 class="title">Book Info</h1>
                             </div>
                         </div>
                     </fieldset>
+                    <fieldset>
+                        <legend>Stats</legend>
+                        <div class="stats">
+                            <div id="currentchapter"></div>
+                            <div id="bookprogress"><span id="bookprogresstext"></span>
+                                <progress value="0" max="100" id="bookprogressbar"></progress>
+                            </div>
+                            <div id="bookcurrentcfi"></div>
+                        </div>
+                    </fieldset>
                 </div>
             </aside>
             <div id="bookwrap">
@@ -157,20 +167,27 @@ <h1 class="title">Book Info</h1>
     <script src="epubjs/epub.js"></script>
 
     <script src="reader.js"></script>
-        <!-- Google Analytics -->
-	<script>
-		(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
-		(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
-		m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
-		})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+    <!-- Google Analytics -->
+    <script>
+        (function(i, s, o, g, r, a, m) {
+            i['GoogleAnalyticsObject'] = r;
+            i[r] = i[r] || function() {
+                (i[r].q = i[r].q || []).push(arguments)
+            }, i[r].l = 1 * new Date();
+            a = s.createElement(o),
+                m = s.getElementsByTagName(o)[0];
+            a.async = 1;
+            a.src = g;
+            m.parentNode.insertBefore(a, m)
+        })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
 
-		ga('create', 'UA-66226417-1', 'auto');
-		ga('send', 'pageview', {
-		  'page': '/',
-		  'title': ''
-		});
-	</script>
-	<!-- End Google Analytics -->
+        ga('create', 'UA-66226417-1', 'auto');
+        ga('send', 'pageview', {
+            'page': '/',
+            'title': ''
+        });
+    </script>
+    <!-- End Google Analytics -->
 </body>
 
 </html>
diff --git a/reader.css b/reader.css
@@ -119,6 +119,25 @@ body {
 .reader>main>aside#sidebar-info>div.content .bookinfo>.right #bookauthor {
     font-size: 10pt;
 }
+.reader>main>aside#sidebar-info>div.content .stats {
+    display: flex;
+    flex-direction: column;
+}
+.reader>main>aside#sidebar-info>div.content .stats div {
+    flex: 1;
+    margin: 4px 0;
+}
+.reader>main>aside#sidebar-info>div.content #bookprogress {
+    display: flex;
+}
+.reader>main>aside#sidebar-info>div.content #bookprogress #bookprogresstext {
+    flex: 0;
+    padding: 0 4px;
+    white-space: nowrap;
+}
+.reader>main>aside#sidebar-info>div.content #bookprogress #bookprogressbar {
+    flex: 1;
+}
 .reader> main> aside> header> a.close:hover, .reader> main> aside> header> a.close:active {
     opacity: 0.6;
 }

diff --git a/reader.js b/reader.js
@@ -58,6 +58,7 @@ EPUBJS.Hooks.register("beforeChapterDisplay").pageTurns = function(callback, ren
 
 Book = null;
 BookID = "";
+BookToc = null;
 appid = "ePubViewer"
 initSettingsDone = false;
 
@@ -172,6 +173,7 @@ doBook = function(url) {
     });
 
     Book.getToc().then(function(toc) {
+        BookToc = toc;
         var containerel = document.getElementById("toc-container");
         for (var i = 0; i < toc.length; i++) {
             var entryel = document.createElement("a");
@@ -334,7 +336,12 @@ doAllReset = function() {
 }
 
 doUpdateProgressIndicators = function() {
-    document.getElementById("curpercent").innerText = String(Book.locations.percentageFromCfi(Book.getCurrentLocationCfi()).toFixed(2) * 100) + "%";
+    var progressint = Math.round(Book.locations.percentageFromCfi(Book.getCurrentLocationCfi()).toFixed(2) * 100);
+    document.getElementById("curpercent").innerText = String(progressint) + "%";
+    document.getElementById("bookprogresstext").innerText = String(progressint) + "% read";
+    document.getElementById("bookprogressbar").setAttribute("value", String(progressint));
+    document.getElementById("bookcurrentcfi").innerText = "Current cfi: " + Book.getCurrentLocationCfi();
+    document.getElementById("currentchapter").innerText = "Chapter: " + BookToc[Book.currentChapter.spinePos].label;
 }
 document.getElementById("book").innerHTML = "<div class=\"message info\">Please click the middle button on the toolbar below or <a href=\"javascript:void(0);\" onclick=\"document.getElementById('bookChooser').click()\">click here</a> to open a book.</div>";
 if (checkCompatibility()) {