Skip to content

  • Projects
  • Groups
  • Snippets
  • Help
    • Loading...
    • Help
    • 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 34
    • Issues 34
    • List
    • Board
    • Labels
    • Milestones
  • Merge Requests 3
    • Merge Requests 3
  • 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
  • #92

Closed
Open
Opened Jan 04, 2019 by Ben Doherty@ben
  • Report abuse
  • New issue
Report abuse New issue

How to break if an element is in a particular place on the page?

I've got an example file here: https://notionparallax.github.io/paged_media_issue/ (see below for caveats)

I'd like to be able to tell where an element is on the page so that I can implement keep with for headers, and avoid starting a new section at the bottom of a page. E.g. this header should bump to the next page so that it's not stranded without its paragraph.

image

I had a crack at a handler:

class MyHandler extends Paged.Handler {
    constructor(chunker, polisher, caller) {
        super(chunker, polisher, caller);
    }

    afterPageLayout(pageFragment, page, breakToken) {
        let h = pageFragment.querySelector("h1.article-title");
        if(h !== null) {
            let pBox = page.element.getBoundingClientRect();
            let hBox = h.getBoundingClientRect();
            let pdelta = pBox.bottom - hBox.bottom;
            let botPC =  pdelta/pBox.height;
            if (botPC < 0.4) {
                breakToken.offset  = 0;
                // breakToken.node = h; // breaks: node.getAttribute is not a function
                // h.parentElement.classList.add("break-before"); // doesn't force a break
                console.log("pageFragment", pageFragment, "page", page, "breakToken", breakToken);
                console.log(h);
                console.log(pdelta, botPC,"*****\n\n\n");
            }
            
        }
    }
}
Paged.registerHandlers(MyHandler);

The handler has moved on a bit since this, but this is the gist of things. It's in control.js. It currently paints all headings that are too close to the bottom of the page in red.

image

This is a pretty crusty way of telling if there's a break needed, but I assume that this is the right direction, and I'm not barking up the wrong tree? (I'd imagine that the adobe way looks at the context a lot more.)

Context

This is a mini magazine that pulls my articles from Pocket, and lets me read them without getting distracted by notifications. It usually has an hour of content, but this particular one has two hours worth to give more opportunities for odd things to happen.

Caveats

There are a few other odd things that happen in this file, I don't want to muddy the waters with the reporting them as bugs right now, but I'll mention them so that you get what's going on.

  • If you watch the toc while it's paginating, sometimes it gets stuck. If not all the articles get page numbers, then refreshing it usually fixes it.
  • I'm a bit lost with the lifecycle of the beforeParsed function. Some things work well inside it, some don't work at all. Currently all the pre processing is outside it.
Edited Jan 04, 2019 by Ben Doherty
Assignee
Assign to
None
Milestone
None
Assign milestone
Time tracking
None
Due date
No due date
0
Labels
None
Assign labels
  • View project labels
Reference: tools/pagedjs#92