diff --git a/cps/static/css/main.css b/cps/static/css/main.css index cee8ab9f..0dc0532c 100644 --- a/cps/static/css/main.css +++ b/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; +} diff --git a/cps/static/js/reading/epub-progress.js b/cps/static/js/reading/epub-progress.js new file mode 100644 index 00000000..b8fc11d0 --- /dev/null +++ b/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')) +}); +}) diff --git a/cps/static/js/reading/epub.js b/cps/static/js/reading/epub.js index facb7dec..5047b1d3 100644 --- a/cps/static/js/reading/epub.js +++ b/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); })(); - - diff --git a/cps/templates/read.html b/cps/templates/read.html index 372959d4..1ca6a831 100644 --- a/cps/templates/read.html +++ b/cps/templates/read.html @@ -55,24 +55,24 @@ Menu
- -   –   - -
-
- Bookmark - Settings - Fullscreen -
- + +   –   + + +
+ Bookmark + Settings + Fullscreen +
+ -
- -
- - -
- +
+ +
+ +
0%
+
+