diff options
| -rw-r--r-- | css/read.css | 5 | ||||
| -rw-r--r-- | js/reader.js | 29 | ||||
| -rw-r--r-- | read.html | 8 |
3 files changed, 28 insertions, 14 deletions
diff --git a/css/read.css b/css/read.css index fc1e392..35226ce 100644 --- a/css/read.css +++ b/css/read.css @@ -47,7 +47,7 @@ align-items : center; } -.header .title, .footer .chapter { +.header .title, .footer .chapter_wrapper { overflow : hidden; text-overflow: ellipsis; white-space : nowrap; @@ -60,8 +60,9 @@ font-weight : bold; } -.footer .chapter { +.footer .chapter_wrapper { padding-right : 10px; + cursor : pointer; } .footer .spacer { diff --git a/js/reader.js b/js/reader.js index 246d203..e9b3fc2 100644 --- a/js/reader.js +++ b/js/reader.js @@ -573,7 +573,8 @@ const Reader = { return false; } - /* eslint-enable no-inne-declarations */ + + /* eslint-enable no-inner-declarations */ $.each(book.navigation.toc, function(i, a) { if (book.spine.get(a.href).canonical == cur_href) { @@ -586,7 +587,7 @@ const Reader = { }); if (toc_entry && toc_entry.label.trim()) - $(".chapter").append(" " + toc_entry.label); + $(".chapter").append(" " + toc_entry.label + " | "); } } catch (e) { @@ -601,20 +602,28 @@ const Reader = { return; const currentCfi = location.start.cfi; - const currentPage = parseInt(book.locations.percentageFromCfi(currentCfi) * 100); - const pct = book.locations.percentageFromCfi(currentCfi); + const currentPct = parseInt(book.locations.percentageFromCfi(currentCfi) * 100); + + $("#cur_page").text(location.start.location); + $("#total_pages").text(book.locations.length()); + $("#page_pct").text(parseInt(book.locations.percentageFromCfi(currentCfi)*100) + '%'); - $("#cur_page").html(location.start.location); - $("#total_pages").html(book.locations.length()); + const displayed = location.start.displayed; - $("#page_pct").html(parseInt(pct*100) + '%'); + if (displayed) { + $("#chapter_cur_page").text(displayed.page); + $("#chapter_total_pages").text(displayed.total); + + if (displayed.total > 0) + $("#chapter_pct").text(parseInt(displayed.page / displayed.total * 100) + '%') + } if (Reader.Page._store_position && new Date().getTime()/1000 - Reader.Page._last_position_sync > 15) { - console.log("storing lastread", currentPage, currentCfi); + console.log("storing lastread", currentPct, currentCfi); if (navigator.onLine) { - $.post("backend.php", { op: "storelastread", id: $.urlParam("id"), page: currentPage, + $.post("backend.php", { op: "storelastread", id: $.urlParam("id"), page: currentPct, cfi: currentCfi }, function(data) { if (data.cfi) { @@ -634,7 +643,7 @@ const Reader = { } localforage.setItem(Reader.cacheId("lastread"), - {cfi: currentCfi, page: currentPage, total: 100}); + {cfi: currentCfi, page: currentPct, total: 100}); } }); @@ -243,10 +243,14 @@ <div id="reader"></div> <div class="footer"> - <div class="chapter" data-toggle="modal" data-target="#toc-modal"></div> + <div class="chapter_wrapper" data-toggle="modal" data-target="#toc-modal"> + <span class="chapter"></span> + <span id="chapter_cur_page"></span> of <span id="chapter_total_pages"></span> + (<span id="chapter_pct"></span>) + </div> <div class="spacer"> </div> <div class="location"> - <span id="cur_page">?</span> / <span id="total_pages">?</span> + <span id="cur_page">?</span> of <span id="total_pages">?</span> (<span id="page_pct">?</span>) </div> </div> |