@toneflix/flipbook 0.0.0-stage → 0.2.0

package/dist/index.d.cts

@@ -0,0 +1,143 @@
+import { Face, FlipbookBook, FlipbookLabels, FlipbookPage, FlipbookPhoto, FlipbookReader, FrameStyle, GripOptions, PaperColor, TurnPhysics } from "@toneflix/flipbook-core";
+export * from "@toneflix/flipbook-core";
+interface FlipbookPlace {
+  /** How many leaves lie on the left: 0 is the closed front cover. */
+  flipped: number;
+  label: string;
+  faces: Face[];
+}
+interface FlipbookOptions {
+  book: FlipbookBook;
+  /** Open at this page (1-based) instead of the cover. */
+  startPage?: number;
+  /** Two pages side by side, one at a time, or whichever fits the space (default). */
+  layout?: 'auto' | 'spread' | 'single';
+  /** Show the top and bottom bars. */
+  controls?: boolean;
+  /** Hide the bars after this many ms without movement, or never with false. */
+  autoHide?: number | false;
+  thumbnails?: boolean;
+  soundButton?: boolean;
+  /** Play a paper sound on each turn. The sound button remembers the reader's choice. */
+  sound?: boolean;
+  fullscreenButton?: boolean;
+  /** Ask phones held upright to turn sideways, offering single pages instead. */
+  landscape?: boolean;
+  /** Arrow, page and Home/End keys: while the book has focus (true) or anywhere on the page ('global'). */
+  keyboard?: boolean | 'global';
+  /** Covers swing on the spine like board instead of curling like paper. */
+  stiffCovers?: boolean;
+  physics?: Partial<TurnPhysics>;
+  grip?: Partial<GripOptions>;
+  /** Strength of the light and shadow around a turning page, from 0 to 1 or more. */
+  shading?: number;
+  /** Backdrop behind the book. Defaults to a glow tinted by the cover. */
+  background?: string;
+  labels?: Partial<FlipbookLabels>;
+  onPageChange?: (place: FlipbookPlace) => void;
+  /** A page started to turn over. */
+  onFlip?: () => void;
+}
+/**
+ * A photo book that opens across two pages, turned by dragging, flicking, tapping, buttons or
+ * keys. Mount it into any sized element; call `destroy()` when it goes away.
+ */
+export declare class Flipbook {
+  readonly container: HTMLElement;
+  readonly root: HTMLDivElement;
+  readonly reader: FlipbookReader;
+  private settings;
+  private layout;
+  private size;
+  private orientation;
+  private portraitChoice;
+  private soundOn;
+  private stripOpen;
+  private chromeVisible;
+  private hideTimer;
+  private lastPlace;
+  private rendering;
+  private dirty;
+  private faces;
+  private overlays;
+  private cleanups;
+  private els;
+  constructor(container: HTMLElement, options: FlipbookOptions);
+  /** Changes options in place; the reader keeps their page. */
+  update(options: Partial<FlipbookOptions>): void;
+  next(): void;
+  prev(): void;
+  /** Opens at a `flipped` value. */
+  go(flipped: number): void;
+  /** Opens at a page (1-based). */
+  goToPage(page: number): void;
+  destroy(): void;
+  private static resolve;
+  private get spread();
+  private buildLayout;
+  private build;
+  private listen;
+  private onKey;
+  /** Pointer position from the top of the spine. */
+  private toBook;
+  private poke;
+  private toggleSound;
+  private toggleFullscreen;
+  private clearFaces;
+  /** Brings the DOM in line with the reader. Re-entrant calls (from the reader) run once more at the end. */
+  private render;
+  private renderOnce;
+  /** Faces of the leaves around the opening. Each keeps its element while it moves between roles, so pages never reload mid-turn. */
+  private renderFaces;
+  private renderOverlays;
+  private paint;
+  private renderChrome;
+  /** A strip of every spread (or page) to jump around the book. */
+  private renderStrip;
+  /** Shown on phones held upright: books are read sideways. */
+  private renderRotatePrompt;
+  private static stageTint;
+}
+type Side = 'left' | 'right';
+interface PageLook {
+  paper: PaperColor;
+  frame: FrameStyle;
+}
+interface PageOptions {
+  /** Printed in the outer bottom corner. */
+  number?: number;
+  side?: Side;
+  /** False draws placeholders instead of loading images. */
+  showImages?: boolean;
+  /** Editor: makes each photo slot clickable. */
+  onSlotClick?: (slot: number) => void;
+  activeSlot?: number | null;
+}
+/** A photo printed on a page inside its frame. */
+export declare function printedPhoto(photo: FlipbookPhoto | null, frame: FrameStyle, fit?: 'cover' | 'contain', show?: boolean, scale?: number): HTMLDivElement;
+/** The inside of one book page. The parent must have `container-type: size`. */
+export declare function renderPage(page: FlipbookPage, look: PageLook, options?: PageOptions): HTMLDivElement;
+/** The front cover: cloth with the title and an inset photo. */
+export declare function renderCover(book: FlipbookBook, showImages?: boolean): HTMLDivElement;
+export declare function renderBackCover(book: FlipbookBook): HTMLDivElement;
+export declare function renderTitlePage(book: FlipbookBook, look: PageLook, side?: Side): HTMLDivElement;
+export declare function renderColophon(book: FlipbookBook, look: PageLook, side?: Side): HTMLDivElement;
+export declare function renderBlank(look: PageLook, side?: Side): HTMLDivElement;
+/** Any face of a book. Page numbers and the spine curve need `side`. */
+export declare function renderFace(face: Face, book: FlipbookBook, side?: Side, numbered?: boolean): HTMLDivElement;
+/**
+ * A soft paper swish made from filtered noise, so no audio file is needed. Browsers only allow
+ * audio after a user gesture, which a page turn always is.
+ */
+export declare function playPageTurn(volume?: number): void;
+/**
+ * Goes full screen and locks the screen to landscape where the browser allows it (Chrome on
+ * Android). iOS Safari supports neither for pages, so callers keep the rotate prompt there.
+ */
+export declare function enterLandscape(el: HTMLElement): Promise<boolean>;
+/** Media queries that decide whether a phone is held upright. */
+export declare function watchOrientation(onChange: (state: {
+  portrait: boolean;
+  touch: boolean;
+}) => void): () => void;
+export type { FlipbookOptions, FlipbookPlace, PageLook, PageOptions, Side };

package/dist/index.d.mts

@@ -0,0 +1,143 @@
+import { Face, FlipbookBook, FlipbookLabels, FlipbookPage, FlipbookPhoto, FlipbookReader, FrameStyle, GripOptions, PaperColor, TurnPhysics } from "@toneflix/flipbook-core";
+export * from "@toneflix/flipbook-core";
+interface FlipbookPlace {
+  /** How many leaves lie on the left: 0 is the closed front cover. */
+  flipped: number;
+  label: string;
+  faces: Face[];
+}
+interface FlipbookOptions {
+  book: FlipbookBook;
+  /** Open at this page (1-based) instead of the cover. */
+  startPage?: number;
+  /** Two pages side by side, one at a time, or whichever fits the space (default). */
+  layout?: 'auto' | 'spread' | 'single';
+  /** Show the top and bottom bars. */
+  controls?: boolean;
+  /** Hide the bars after this many ms without movement, or never with false. */
+  autoHide?: number | false;
+  thumbnails?: boolean;
+  soundButton?: boolean;
+  /** Play a paper sound on each turn. The sound button remembers the reader's choice. */
+  sound?: boolean;
+  fullscreenButton?: boolean;
+  /** Ask phones held upright to turn sideways, offering single pages instead. */
+  landscape?: boolean;
+  /** Arrow, page and Home/End keys: while the book has focus (true) or anywhere on the page ('global'). */
+  keyboard?: boolean | 'global';
+  /** Covers swing on the spine like board instead of curling like paper. */
+  stiffCovers?: boolean;
+  physics?: Partial<TurnPhysics>;
+  grip?: Partial<GripOptions>;
+  /** Strength of the light and shadow around a turning page, from 0 to 1 or more. */
+  shading?: number;
+  /** Backdrop behind the book. Defaults to a glow tinted by the cover. */
+  background?: string;
+  labels?: Partial<FlipbookLabels>;
+  onPageChange?: (place: FlipbookPlace) => void;
+  /** A page started to turn over. */
+  onFlip?: () => void;
+}
+/**
+ * A photo book that opens across two pages, turned by dragging, flicking, tapping, buttons or
+ * keys. Mount it into any sized element; call `destroy()` when it goes away.
+ */
+export declare class Flipbook {
+  readonly container: HTMLElement;
+  readonly root: HTMLDivElement;
+  readonly reader: FlipbookReader;
+  private settings;
+  private layout;
+  private size;
+  private orientation;
+  private portraitChoice;
+  private soundOn;
+  private stripOpen;
+  private chromeVisible;
+  private hideTimer;
+  private lastPlace;
+  private rendering;
+  private dirty;
+  private faces;
+  private overlays;
+  private cleanups;
+  private els;
+  constructor(container: HTMLElement, options: FlipbookOptions);
+  /** Changes options in place; the reader keeps their page. */
+  update(options: Partial<FlipbookOptions>): void;
+  next(): void;
+  prev(): void;
+  /** Opens at a `flipped` value. */
+  go(flipped: number): void;
+  /** Opens at a page (1-based). */
+  goToPage(page: number): void;
+  destroy(): void;
+  private static resolve;
+  private get spread();
+  private buildLayout;
+  private build;
+  private listen;
+  private onKey;
+  /** Pointer position from the top of the spine. */
+  private toBook;
+  private poke;
+  private toggleSound;
+  private toggleFullscreen;
+  private clearFaces;
+  /** Brings the DOM in line with the reader. Re-entrant calls (from the reader) run once more at the end. */
+  private render;
+  private renderOnce;
+  /** Faces of the leaves around the opening. Each keeps its element while it moves between roles, so pages never reload mid-turn. */
+  private renderFaces;
+  private renderOverlays;
+  private paint;
+  private renderChrome;
+  /** A strip of every spread (or page) to jump around the book. */
+  private renderStrip;
+  /** Shown on phones held upright: books are read sideways. */
+  private renderRotatePrompt;
+  private static stageTint;
+}
+type Side = 'left' | 'right';
+interface PageLook {
+  paper: PaperColor;
+  frame: FrameStyle;
+}
+interface PageOptions {
+  /** Printed in the outer bottom corner. */
+  number?: number;
+  side?: Side;
+  /** False draws placeholders instead of loading images. */
+  showImages?: boolean;
+  /** Editor: makes each photo slot clickable. */
+  onSlotClick?: (slot: number) => void;
+  activeSlot?: number | null;
+}
+/** A photo printed on a page inside its frame. */
+export declare function printedPhoto(photo: FlipbookPhoto | null, frame: FrameStyle, fit?: 'cover' | 'contain', show?: boolean, scale?: number): HTMLDivElement;
+/** The inside of one book page. The parent must have `container-type: size`. */
+export declare function renderPage(page: FlipbookPage, look: PageLook, options?: PageOptions): HTMLDivElement;
+/** The front cover: cloth with the title and an inset photo. */
+export declare function renderCover(book: FlipbookBook, showImages?: boolean): HTMLDivElement;
+export declare function renderBackCover(book: FlipbookBook): HTMLDivElement;
+export declare function renderTitlePage(book: FlipbookBook, look: PageLook, side?: Side): HTMLDivElement;
+export declare function renderColophon(book: FlipbookBook, look: PageLook, side?: Side): HTMLDivElement;
+export declare function renderBlank(look: PageLook, side?: Side): HTMLDivElement;
+/** Any face of a book. Page numbers and the spine curve need `side`. */
+export declare function renderFace(face: Face, book: FlipbookBook, side?: Side, numbered?: boolean): HTMLDivElement;
+/**
+ * A soft paper swish made from filtered noise, so no audio file is needed. Browsers only allow
+ * audio after a user gesture, which a page turn always is.
+ */
+export declare function playPageTurn(volume?: number): void;
+/**
+ * Goes full screen and locks the screen to landscape where the browser allows it (Chrome on
+ * Android). iOS Safari supports neither for pages, so callers keep the rotate prompt there.
+ */
+export declare function enterLandscape(el: HTMLElement): Promise<boolean>;
+/** Media queries that decide whether a phone is held upright. */
+export declare function watchOrientation(onChange: (state: {
+  portrait: boolean;
+  touch: boolean;
+}) => void): () => void;
+export type { FlipbookOptions, FlipbookPlace, PageLook, PageOptions, Side };