Skip to content

  • Projects
  • Groups
  • Snippets
  • Help
    • Loading...
    • Help
    • Support
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
pagedjs
pagedjs
  • Project
    • Project
    • Details
    • Activity
    • Releases
    • Cycle Analytics
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
    • Charts
  • Issues 153
    • Issues 153
    • List
    • Boards
    • Labels
    • Milestones
  • Merge Requests 11
    • Merge Requests 11
  • CI / CD
    • CI / CD
    • Pipelines
    • Jobs
    • Schedules
    • Charts
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Members
    • Members
  • Collapse sidebar
  • Activity
  • Graph
  • Charts
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
  • Tools
  • pagedjspagedjs
  • Issues
  • #88

Closed
Open
Opened Nov 30, 2018 by Martin@Wartin
  • Report abuse
  • New issue
Report abuse New issue

Scroll effect on images

Imitation of scroll effect on images in the book.

Cut images at the bottom and restart on top.

Capture_d_écran_2018-11-30_à_13.02.48 Capture_d_écran_2018-11-30_à_13.03.01 Capture_d_écran_2018-11-30_à_13.03.10

It's not working on all images, so far, i don't figure it out ...

Special thanks : Julien & Fred <3

The code :

icono.html index.css

`
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);`
Edited Nov 30, 2018 by Martin
Assignee
Assign to
None
Milestone
None
Assign milestone
Time tracking
None
Due date
None
1
Labels
specific
Assign labels
  • View project labels
Reference: tools/pagedjs#88