Scroll effect on images
Imitation of scroll effect on images in the book.
Cut images at the bottom and restart on top.
It's not working on all images, so far, i don't figure it out ...
Special thanks : Julien & Fred <3
The code :
`
class MyHandler extends Paged.Handler {
constructor(chunker, polisher, caller) {
super(chunker, polisher, caller);
this.chunker = chunker;
}
renderNode(node) {
if (node.nodeType === 1 && node.tagName === "IMG") {
// check for already rendered
let ref = node.dataset.ref;
let start = this.chunker.pagesArea.querySelectorAll("[data-ref='"+ref+"']");
let leftover;
let offset;
start.forEach((item) => {
if (item.dataset.leftover) {
leftover = parseFloat(item.dataset.leftover);
offset = item.dataset.leftover - item.dataset.totalHeight;
}
});
if (leftover) {
let wrapper = document.createElement('div');
wrapper.dataset.ref = ref;
wrapper.style.background = "url(" + node.src + ") no-repeat";
wrapper.style.backgroundSize = "100%";
wrapper.style.backgroundPositionY = offset + "px";
wrapper.style.overflow = "hidden";
let height = node.height;
wrapper.style.height = leftover + "px";
wrapper.style.width = "100%";
node.parentNode.insertBefore(wrapper, node);
node.remove();
} else {
let page = node.closest(".pagedjs_area");
let pageTop = page.getBoundingClientRect().top;
let pageHeight = page.getBoundingClientRect().height;
let pageWidth = page.getBoundingClientRect().right;
let { left, top } = node.getBoundingClientRect();
let height = node.height;
let offsetTop = node.offsetTop;
if (left > pageWidth) {
let index = Array.prototype.indexOf.call(node.parentNode.children, node);
let prev;
let bottom;
if (index > 0) {
prev = node.parentNode.querySelectorAll("img")[0];
bottom = prev.getBoundingClientRect().bottom;
}
let availableSpace = pageTop + pageHeight - bottom;
// console.log(node.src, "availableSpace", availableSpace, height);
if (height <= availableSpace ) {
return;
}
let wrapper = document.createElement('div');
wrapper.dataset.ref = ref;
// console.log(node.src, height, availableSpace, height - availableSpace);
wrapper.dataset.leftover = height - availableSpace;
wrapper.dataset.totalHeight = height;
wrapper.style.background = "url(" + node.src + ") no-repeat";
wrapper.style.backgroundSize = "100%";
wrapper.style.overflow = "hidden";
wrapper.style.height = availableSpace + "px";
wrapper.style.width = "100%";
node.parentNode.insertBefore(wrapper, node);
}
}
}
}
// layout(wrapper) {
// let { height } = wrapper.parentNode.getBoundingClientRect();
// let imgs = wrapper.querySelectorAll("img");
//
// imgs.forEach((img) => {
// let { top } = img.getBoundingClientRect();
// console.log(img.src, top, img.height, height);
// })
// }
}
Paged.registerHandlers(MyHandler);`