mirrors/calibre-web
1
0
Fork 0
mirror of https://github.com/janeczku/calibre-web synced 2025-04-04 01:37:00 +00:00
Code Issues Releases Wiki Activity

Refactored epub-reader progress

Browse Source 
Progress in epubs now visible also in dark mode(s)
This commit is contained in:
Ozzie Isaacs 2025-03-30 12:23:13 +02:00
commit 2b2ccb1710
4 changed files with 49 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,54 +0,0 @@
/**
* 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'))
});
})

26
cps/static/js/reading/epub.js
View File

@ -52,6 +52,32 @@ var reader;
}
});
// Update progress percentage
let progressDiv = document.getElementById("progress");
reader.book.ready.then((()=>{
let locations_key = reader.book.key()+'-locations';
let stored_locations = localStorage.getItem(locations_key);
let make_locations, save_locations;
if (stored_locations) {
make_locations = Promise.resolve(reader.book.locations.load(stored_locations));
// No-op because locations are already saved
save_locations = ()=>{};
} else {
make_locations = reader.book.locations.generate();
save_locations = ()=>{
localStorage.setItem(locations_key, reader.book.locations.save());
};
}
make_locations.then(()=>{
reader.rendition.on('relocated', (location)=>{
let percentage = Math.round(location.end.percentage*100);
progressDiv.textContent=percentage+"%";
});
reader.rendition.reportLocation();
progressDiv.style.visibility = "visible";
}).then(save_locations);
}));
/**
* @param {string} action - Add or remove bookmark
* @param {string|int} location - Location or zero

21
cps/static/js/reading/locationchange-polyfill.js Normal file
View File

@ -0,0 +1,21 @@
// 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'));
});
})();

3
cps/templates/read.html
View File

@ -175,6 +175,7 @@
// Apply theme to rest of the page.
document.getElementById("main").style.backgroundColor = themes[id]["bgColor"];
document.getElementById("titlebar").style.color = themes[id]["title-color"] || "#fff";
document.getElementById("progress").style.color = themes[id]["title-color"] || "#fff";
}
// font size settings logic
@ -215,6 +216,6 @@
<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/reading/epub-progress.js') }}"></script>
<!--script src="{{ url_for('static', filename='js/reading/locationchange-polyfill.js') }}"></script-->
</body>
</html>