Skip to content
OpenPageFlip

@openpageflip/core

0.7.0 Latest

Minor Changes

  • fd496d2 Thanks @benhonda! - flipTo now looks like you’re turning a clump of pages when it jumps more than one spread. The page on show still turns straight onto your target, but a few blank sheets (one per spread you skip, up to five) fan out from under it, curling at the corner, and close back up before it lands. They take their colour from your inner pages, not the cover, and you can set it with --opf-sheet-color. A cover closing over them brings blank pages along behind it. Nothing between the two spreads is drawn, and it’s still one turn to you: one flip event and one flipProgress from 0 to 1.

    For custom renderers, each FlipFrame has a new sheets list describing those blank sheets (empty for an ordinary turn).

    Also fixed: resizing the book or giving it new pages in the middle of a turn used to drop the turn but leave the book reporting flipping, so it ignored hover and clicks until the next one. It’s back at rest now.

0.6.0

Minor Changes

  • 46f321f Thanks @benhonda! - A hovered edge’s furl now leans toward the pointer: the fold runs deeper at the end of the edge the pointer is near and follows it up and down the edge, instead of sitting still.

  • a5b6d5b Thanks @benhonda! - Turning back in a single-page book now looks like turning forward. The previous page uncurls across the page you’re on, with the same curl and shadows at the same point in the turn, instead of sliding in flat from beside the book. The pointer holds the fold, and letting go past the middle of the page lands the turn. Hovering by the spine curls the first strip of it over, leaning toward the pointer like the edge furl. Nothing of a turn is drawn beside a single-page book any more, and a hard page there swings up to upright at the spine rather than over into the hidden half, so you can see it move for the whole turn. Its shadow there fades out from the cover’s edge instead of sweeping across the page as a slab with a hard edge. Two-page books look exactly as before.

    FlipFrame.peek is gone: that cue is now the start of an ordinary turn. In a single-page book a turn back’s frames run forward (the previous page turning off itself), with that page on show as right and the current page as bottom; flipProgress still reports it as a turn back.

0.5.0

Minor Changes

  • f29f7df Thanks @benhonda! - A book looks right out of the box on white paper. shadowOpacity now defaults to 0.35 instead of 1, which was a black bar across light pages, and the page in the air has a hairline edge, so a white page turning over a white page keeps its outline where no shadow falls. The edge is the new .opf-page--turning class in styles.css: recolour it with the --opf-page-edge CSS variable, or set that to transparent to remove it. For the look of earlier versions, pass shadowOpacity: 1 and set --opf-page-edge: transparent.

Patch Changes

  • f29f7df Thanks @benhonda! - .opf-page--hard and .opf-page--soft now say what a page is and stay put through a turn. A soft page on the back of a hard one (the page behind a cover) swings as a board while that sheet turns, and its class used to switch to --hard for the length of the turn, so anything you styled on --soft (a gutter shadow, a margin) blinked off as the cover moved, even on hover. How the page is drawn hasn’t changed, only the class. For the state of a page right now there are --flat and --turning.

0.4.2

Patch Changes

  • d65839e Thanks @benhonda! - The previous page peeking in over the spine of a single-page book now drops a shadow on the page under it, so it reads as paper and not a flat bar. The fold’s own shadows hug its crease, which for a peek is half a page away in the hidden half, so none of them reached the strip. It follows shadows and shadowOpacity, and a turn in hand is drawn as before.

0.4.1

Patch Changes

  • a0fe481 Thanks @benhonda! - @openpageflip/core and @openpageflip/react now share one version number and always release together, so matching versions are the ones built and tested against each other. No code changed in this release; react jumps from 0.2.0 to meet core.

0.4.0

Minor Changes

  • 8669c10 Thanks @benhonda! - Four bindings, and an edge that furls. binding: "right" is a right-to-left book: the spine on the right, the cover alone on the left, a swipe to the right reads on, and your pages stay in reading order. binding: "top" binds along the top edge, so pages lift from the bottom and turn up: a notepad with layout: "single", a wall calendar with a spread. "bottom" is that upside down. Each is the left-bound book seen from another side; the fold geometry and the controller never see the binding, layout, pointer input and the renderer map at their edges, and a test holds each bound book to its left-bound twin pixel for pixel. The container gets opf-book--<binding>, top- and bottom-bound ones touch-action: pan-x from the stylesheet, and pages get opf-page--top and --bottom when they are stacked. layout: "auto" now reads “a spread when two pages fit across the spine”, which for a left-bound book is what it was; a top- or bottom-bound book that sizes itself is always two pages tall, so it is a spread unless layout says single. Switching binding at a breakpoint is the host’s call, and the docs show it with a media query.

    Hovering a page’s edge now furls the whole edge, the same cue on every binding, instead of lifting the nearer corner; the option is hover (was hoverCorners). A drag moves the fold by the pointer’s travel from where it took hold, so pulling straight in from anywhere on the edge deepens the furl and pulling from a corner folds across, and a press on a furled edge carries on from it. A click on a furled edge flips on from the furl.

  • d43999c Thanks @benhonda! - A flipProgress event (onFlipProgress in React), for keeping something of your own in step with a turning page, like a shadow under a book whose cover is closing. It fires for every frame the book draws of a turn, whether that turn is animated, dragged, or a hovered edge furling, with the spread it started from, the spread it leads to, the direction, and a progress from 0 to 1. A turn always ends on exactly 0 (dropped back, or cut short by a resize, another turn, or destroy) or 1 (landed), so a listener never has to guess the destination or copy the book’s timing. from is the spread on show, which for flipTo is the one the reader sees and not the one the book jumped beside. It runs every frame, so write it to a style, not to state; the new shadow example in the docs does exactly that.

    A hard page’s shadow no longer lands on the bare stage when the cover closes, or when the book turns onto its lone last page. It was already skipped on the empty side a cover opens onto; now the side a cover lifts away from gets the same check. For anyone reading frames: FlipFrame.bottom is now null when a turn reveals nothing, where it used to repeat the flipping page.

Patch Changes

  • 8692021 Thanks @benhonda! - Two things for a single-page book. The edge by the spine, the one that turns back, now shows its cue: the page it turns lies in the hidden half, where a furl of its far edge showed nothing, so the previous page peeks in over the spine instead, a strip under the pointer. Let go of, a peek always goes back, however far past the spine the geometry says it is; a press takes it in hand as an ordinary turn that carries on from it. And a hard cover no longer vanishes when its edge is hovered, clicked or dragged: it was drawn twice, the second time as the far face of a spread’s sheet, face down. It lifts and swings open as it does in the original, held to it by a new parity scenario.

  • 453b3b6 Thanks @benhonda! - A book you’ve scaled still finds its edges. With a transform: scale() or a CSS zoom on the book or anything around it, presses and hovers used to land somewhere else on the page (at 2x, twice as far from the corner), so the edges wouldn’t furl or drag. The pointer is now brought back into the book’s own pixels first, for an even or an uneven scale. A border on the book’s container is accounted for too, where a press used to land off by the border’s width. Rotation and skew still aren’t undone. The new hover zoom example in the docs is built on this.

0.3.0

Minor Changes

  • 9056442 Thanks @benhonda! - Hover, click and drag now act on the same part of a page, and by default that part is the outer edge. Before, a corner lifted when the mouse came near it, but a click or a drag anywhere on the page turned it too, so the lifted corner promised something it didn’t mean. click: "edges" is the new default: the strip along each page’s outer edge is where a corner lifts, a click turns and a drag starts. "corners" is gone; "anywhere" is still there for tap-anywhere books, and its hover cue now covers the whole page to match. Along the edge the nearer corner lifts and stays lifted until the pointer leaves the edge or reaches the other corner, instead of flapping at the midline. The middle of a page is the browser’s again: text selects, and the stylesheet no longer sets user-select: none. A swipe is a touch or pen gesture now; a quick mouse drag is a selection or a corner drag, not a page turn. In portrait, the edge by the spine turns back, which the old corner boxes never reached.

0.2.4

Patch Changes

  • 79d7c99 Thanks @benhonda! - The quick-start pages embedded in the READMEs read a little more like a person wrote them. No code changes.

0.2.3

Patch Changes

0.2.2

Patch Changes

  • 9a1ad82 Thanks @benhonda! - A hovered corner lifts and drops over at least a quarter of flipDuration instead of snapping, and the same floor applies to every short animation path, such as a corner released close to where it started. While a corner is hovered the pointer takes over from the lift animation instead of fighting it. A settling corner is no longer restarted by every further mouse move, which made it stutter and only land once the mouse stopped, and a pointer jumping to another corner lets the lifted one settle instead of folding it from the wrong corner.