118 lines
3.8 KiB
JavaScript
118 lines
3.8 KiB
JavaScript
// Reload-in-place v2.0
|
|
// Nicolas Taffin + Sameh Chafik - 2020
|
|
// MIT License https://opensource.org/licenses/MIT
|
|
// A simple script to add your pagedjs project. On reload, it will make the web browser scroll to the place it was before reload.
|
|
// Useful when styling or proof correcting your book. Multi docs compatible and doesn't wait for complete compilation to go.
|
|
|
|
|
|
console.log("reload in place");
|
|
|
|
|
|
// separate human / machine scroll
|
|
var machineScroll = false;
|
|
|
|
// check pagedJS ended compilation
|
|
var pagedjsEnd = false;
|
|
|
|
class pagedjsEnded extends Paged.Handler {
|
|
constructor(chunker, polisher, caller) {
|
|
super(chunker, polisher, caller);
|
|
}
|
|
afterRendered(pages) {
|
|
pagedjsEnd = true;
|
|
}
|
|
}
|
|
Paged.registerHandlers(pagedjsEnded);
|
|
|
|
// set a "unique" filename based on title element, in case several books are opened
|
|
var fileTitle = document.getElementsByTagName("title")[0].text;
|
|
|
|
function getDocHeight() {
|
|
var D = document;
|
|
return Math.max(
|
|
D.body.scrollHeight, D.documentElement.scrollHeight,
|
|
D.body.offsetHeight, D.documentElement.offsetHeight,
|
|
D.body.clientHeight, D.documentElement.clientHeight
|
|
)
|
|
}
|
|
function saveAmountScrolled(){
|
|
var scrollArray = [];
|
|
var scrollTop = window.pageYOffset || (document.documentElement || document.body.parentNode || document.body).scrollTop
|
|
if (!machineScroll) {
|
|
var scrollLeft = window.pageXOffset || (document.documentElement || document.body.parentNode || document.body).scrollLeft
|
|
scrollArray.push({ X: Math.round(scrollLeft), Y: Math.round(scrollTop) });
|
|
console.log("Saved ", scrollArray);
|
|
localStorage[fileTitle] = JSON.stringify(scrollArray);
|
|
}
|
|
}
|
|
|
|
// on Load, blur or opacify the page, and try to join ASAP
|
|
// last saved position, or at least last compiled page
|
|
|
|
|
|
window.onload = moveFast;
|
|
|
|
function moveFast() {
|
|
machineScroll= true;
|
|
var styleEl = document.createElement('style');
|
|
document.head.appendChild(styleEl);
|
|
var styleSheet = styleEl.sheet;
|
|
styleSheet.insertRule('.pagedjs_pages { filter: blur(10px); }', 0);
|
|
//styleSheet.insertRule('.pagedjs_pages { opacity: 0.1; }', 0);
|
|
var savedData = localStorage.getItem(fileTitle);
|
|
if (savedData) {
|
|
var scrollArray = JSON.parse(savedData);
|
|
var scrollTop = scrollArray[0].Y;
|
|
var scrollLeft = scrollArray[0].X;
|
|
} else {
|
|
var scrollTop = 0;
|
|
var scrollLeft = 0;
|
|
}
|
|
var winheight= window.innerHeight || (document.documentElement || document.body).clientHeight
|
|
window.currentInterval = setInterval(function(){
|
|
var docheight = getDocHeight();
|
|
|
|
if ( scrollTop > 0 && scrollTop > docheight - winheight && !pagedjsEnd) {
|
|
window.scrollTo(scrollLeft,docheight);
|
|
} else {
|
|
window.scrollTo(scrollLeft,scrollTop);
|
|
clearInterval(window.currentInterval);
|
|
setTimeout(function(){
|
|
window.scrollTo(scrollLeft,scrollTop);
|
|
machineScroll = false;
|
|
styleSheet.deleteRule(0);
|
|
}, 500); // Delay to start
|
|
}
|
|
}, 50); // refresh frequency
|
|
};
|
|
|
|
// slow down a bit save position pace
|
|
|
|
var slowSave = debounce(function() {
|
|
if(!machineScroll) {
|
|
saveAmountScrolled();
|
|
}
|
|
}, 100); // save frequency
|
|
|
|
function debounce(func, wait, immediate) {
|
|
var timeout;
|
|
return function() {
|
|
var context = this, args = arguments;
|
|
var later = function() {
|
|
timeout = null;
|
|
if (!immediate) func.apply(context, args);
|
|
};
|
|
var callNow = immediate && !timeout;
|
|
clearTimeout(timeout);
|
|
timeout = setTimeout(later, wait);
|
|
if (callNow) func.apply(context, args);
|
|
};
|
|
};
|
|
|
|
// Scroll triggers save, but not immediately on load
|
|
|
|
setTimeout(function(){
|
|
window.addEventListener('scroll', slowSave);
|
|
}, 1000); // wait a bit before starting position save
|
|
|