// 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