SI19/pagedjs/reload-in-place.js

// Reload-in-place v1.3
// 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 = function() {
    machineScroll= true;
    var styleEl = document.createElement('style');
    document.head.appendChild(styleEl);
    var styleSheet = styleEl.sheet;
    // uncomment one of the two options :
    // nice but high calculation usage : blur until scrolled
    styleSheet.insertRule('.pagedjs_pages { filter: blur(4px); }', 0); 
    // less power consumption: low opacity until scrolled
    //styleSheet.insertRule('.pagedjs_pages { opacity: 0.3; }', 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);
            }, 100);
        }
    }, 50);
};

// slow down a bit save position pace

var slowSave = debounce(function() {
	if(!machineScroll) { 
        saveAmountScrolled();
    }
}, 100);

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);