NunoSempere/calibre-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added progress display, better rounding

Browse Source 
TODO: getPrev gives wrong values,
design, testing
This commit is contained in:
quarz12 2023-05-22 23:36:14 +02:00
parent 824ebc4d76
commit 0717b9493c
3 changed files with 15 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
cps/static/css/main.css
View File

@ -826,3 +826,9 @@ input:-moz-placeholder { color: #454545; }
.icon-columns::before { content: '\e810'; } /* '' */ .icon-columns::before { content: '\e810'; } /* '' */
.icon-list::before { content: '\e800'; } /* '' */ .icon-list::before { content: '\e800'; } /* '' */
.icon-resize-small::before { content: '\e808'; } /* '' */ .icon-resize-small::before { content: '\e808'; } /* '' */
#progress{
right: 40px;
bottom: 40px;
text-align: center;
}

13
cps/static/js/reading/epub-progress.js
View File

@ -7,7 +7,7 @@ class EpubParser {
} }
getTotalByteLength() { getTotalByteLength() { //TODO unrealistic values
let size = 0; let size = 0;
for (let key of Object.keys(this.files)) { for (let key of Object.keys(this.files)) {
let file = this.files[key]; let file = this.files[key];
@ -171,7 +171,7 @@ class EpubParser {
} }
} }
function waitFor(variable, callback) { function waitFor(variable, callback) {
var interval = setInterval(function() { const interval = setInterval(function() {
if (variable!==undefined) { if (variable!==undefined) {
clearInterval(interval); clearInterval(interval);
callback(); callback();
@ -185,12 +185,12 @@ function waitFor(variable, callback) {
*/ */
function calculateProgress(){ function calculateProgress(){
let data=reader.rendition.currentLocation().end; let data=reader.rendition.currentLocation().end;
return epubParser.getProgress(epubParser.absPath(data.href),data.cfi).toFixed(2)*100; return Math.round(epubParser.getProgress(epubParser.absPath(data.href),data.cfi)*100);
} }
var epubParser; var epubParser;
waitFor(reader.book,()=>{ waitFor(reader.book,()=>{
epubParser = new EpubParser(reader.book.archive.zip.files); epubParser = new EpubParser(reader.book.archive.zip.files);
}) });
/* /*
register new event emitter locationchange that fires on urlchange register new event emitter locationchange that fires on urlchange
source: https://stackoverflow.com/a/52809105/21941129 source: https://stackoverflow.com/a/52809105/21941129
@ -214,7 +214,10 @@ source: https://stackoverflow.com/a/52809105/21941129
window.dispatchEvent(new Event('locationchange')); window.dispatchEvent(new Event('locationchange'));
}); });
})(); })();
let progressDiv=document.getElementById("progress");
window.addEventListener('locationchange',()=>{ window.addEventListener('locationchange',()=>{
let newPos=epubParser.calculateProgress(); let newPos=calculateProgress();
console.log(newPos);
progressDiv.textContent=newPos+"%";
//getelement set element value //getelement set element value
}); });

2
cps/templates/read.html
View File

@ -68,7 +68,7 @@
<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="modal md-effect-1" id="settings-modal">