{"id":22599014,"url":"https://github.com/dappsar/book-flip","last_synced_at":"2025-06-15T16:34:03.046Z","repository":{"id":210347194,"uuid":"726343893","full_name":"dappsar/book-flip","owner":"dappsar","description":"Powerful, simple and flexible JS Library for creating realistic and beautiful page turning effect","archived":false,"fork":false,"pushed_at":"2023-12-02T05:48:59.000Z","size":8953,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-02-02T22:13:38.923Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dappsar.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null},"funding":{"custom":["https://www.buymeacoffee.com/nndlik"]}},"created_at":"2023-12-02T05:24:05.000Z","updated_at":"2024-11-02T15:55:26.000Z","dependencies_parsed_at":"2023-12-02T06:40:15.713Z","dependency_job_id":null,"html_url":"https://github.com/dappsar/book-flip","commit_stats":null,"previous_names":["dappsar/book-flip"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dappsar%2Fbook-flip","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dappsar%2Fbook-flip/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dappsar%2Fbook-flip/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dappsar%2Fbook-flip/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dappsar","download_url":"https://codeload.github.com/dappsar/book-flip/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246088861,"owners_count":20721773,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-12-08T11:07:49.478Z","updated_at":"2025-03-28T19:33:47.620Z","avatar_url":"https://github.com/dappsar.png","language":"TypeScript","funding_links":["https://www.buymeacoffee.com/nndlik"],"categories":[],"sub_categories":[],"readme":"# book-flip\n\nPowerful, simple, and flexible JS Library for creating realistic and beautiful page turning effect.\n\n**Note**: This repository is a copy of [https://github.com/Nodlik/StPageFlip](https://github.com/Nodlik/StPageFlip), with some improvements (the original has not been updated since late 2020).\n\n\n![](video.gif)\n\n### Features\n\n-   Works with simple images on canvas and complex HTML blocks\n-   Has simple API and flexible configuration\n-   Compatible with mobile devices\n-   Supports landscape and portrait screen mode\n-   Supports soft and hard page types (only in HTML mode)\n-   No dependencies\n\nDemo and docs: https://github.com/dappsar/book-flip\n\n### Installation\n\nYou can install the latest version using npm:\n\n`npm install book-flip`\n\nOr download bundle from Github\n\n### Usage\n\nIf you've installed the package from npm, you should import PageFlip from book-flip package, or just use `\u003cscript/\u003e` tag:\n\n```html\n\u003cscript src=\"{path/to/scripts}/page-flip.browser.js\"\u003e\u003c/script\u003e\n```\n\nTo create a new PageFlip object:\n\n```js\nimport { PageFlip } from 'book-flip';\n\nconst pageFlip = new PageFlip(htmlParentElement, settings);\n\n// or if you're using a script tag and book-flip.browser.js:\nconst pageFlip = new St.PageFlip(htmlParentElement, settings);\n```\n\n`htmlParentElement - HTMLElement`- root element, where the book will be created\n\n`settings: object` - configuration object.\n\nTo draw on a canvas, use `loadFromImages`:\n\n```js\npageFlip.loadFromImages(['path/to/image1.jpg', 'path/to/image2.jpg' ... ]);\n```\n\nTo load page from html elements - use `loadFromHtml`:\n\n```js\npageFlip.loadFromHtml(items);\n```\n\nFor example:\n\n```html\n\u003cdiv id=\"book\"\u003e\n    \u003cdiv class=\"my-page\" data-density=\"hard\"\u003e\n        Page Cover\n    \u003c/div\u003e\n    \u003cdiv class=\"my-page\"\u003e\n        Page one\n    \u003c/div\u003e\n    \u003cdiv class=\"my-page\"\u003e\n        Page two\n    \u003c/div\u003e\n    \u003cdiv class=\"my-page\"\u003e\n        Page three\n    \u003c/div\u003e\n    \u003cdiv class=\"my-page\"\u003e\n        Page four\n    \u003c/div\u003e\n    \u003cdiv class=\"my-page\" data-density=\"hard\"\u003e\n        Last page\n    \u003c/div\u003e\n\u003c/div\u003e\n```\n\n```js\nconst pageFlip = new PageFlip(document.getElementById('book'), {\n    width: 400, // required parameter - base page width\n    height: 600, // required parameter - base page height\n});\n\npageFlip.loadFromHTML(document.querySelectorAll('.my-page'));\n```\n\nUse `data-density=\"hard\"` attribute to specify page type (`soft | hard`) and define flipping animation.\n\n### Config\n\nTo set configuration define these parameters when creating an object:\n\n-   `width: number` - required\n-   `height: number` - required\n-   `size: (\"fixed\", \"stretch\")` - default: `\"fixed\"` Whether the book will be stretched under the parent element or not\n-   `minWidth, maxWidth, minHeight, maxHeight: number` You must set threshold values ​​with size: `\"stretch\"`\n-   `drawShadow: bool` - default: `true` Draw shadows or not when page flipping\n-   `flippingTime: number` (milliseconds) - default: `1000` Flipping animation time\n-   `usePortrait: bool` - default: `true` Enable switching to portrait mode. !This mode uses cloning of html elements (pages)\n-   `startZIndex: number` - default: `0` Initial value to z-index\n-   `startPage: number` - default: `0` Page number from which to start viewing\n-   `autoSize: bool` - default: `true` If this value is true, the parent element will be equal to the size of the book\n-   `maxShadowOpacity: number [0..1]` - default: `1` Shadow intensity (1: max intensity, 0: hidden shadows)\n-   `showCover: boolean` - default: `false` If this value is true, the first and the last pages will be marked as hard and will be shown in single page mode\n-   `mobileScrollSupport: boolean` - default: `true` disable content scrolling when touching a book on mobile devices\n-   `swipeDistance: number` - default: `30` (px) minimum distance to detect swipe (new on 1.1.0)\n-   `clickEventForward: boolean` - default: `true` forwarding click events to the page children html elements (only for `a` and `button` tags) (new on 1.1.0)\n-   `useMouseEvents: boolean` - default: `true` using mouse and touch events to page flipping (new on 1.2.0)\n-   `disableFlipByClick: boolean` - default: `false` if this value is true, flipping by clicking on the whole book will be locked. Clicking will only work in corners (new on 2.0.3)\n\n### Events\n\nTo listen events use the method `on`:\n\n```js\npageFlip.on('flip', (e) =\u003e {\n    // callback code\n    alert(e.data); // current page number\n});\n```\n\nAvailable events:\n\n-   `flip: number` - triggered by page turning\n-   `changeOrientation: (\"portrait\", \"landscape\")` - triggered when page orientation changes\n-   `changeState: (\"user_fold\", \"fold_corner\", \"flipping\", \"read\")` - triggered when the state of the book changes\n-   `init: ({page: number, mode: 'portrait', 'landscape'})` - triggered when the book is init and the start page is loaded. Listen (`on`) this event before using the \"loadFrom...\" methods\n-   `update: ({page: number, mode: 'portrait', 'landscape'})` - triggered when the book pages are updated (using the \"updateFrom...\" methods)\n\nEvent object has two fields: `data: number | string` and `object: PageFlip`\n\n### Methods\n\n-   `getPageCount: number` - Get number of all pages\n-   `getOrientation: 'portrait', 'landscape'` - Get the current orientation: portrait or landscape\n-   `getBoundsRect: PageRect` - Get current book sizes and position\n-   `getCurrentPageIndex: number` - Get the current page number (starts at 0)\n-   `turnToPage(pageNum: number)` - Turn to the specified page number (without animation)\n-   `turnToNextPage()` - Turn to the next page (without animation)\n-   `turnToPrevPage()` - Turn to the previous page (without animation)\n-   `flipNext(corner: 'top' | 'bottom', forceFlip: true | false)` - Turn to the next page (with animation)\n-   `flipPrev(corner: 'top' | 'bottom', forceFlip: true | false)` - Turn to the previous page (with animation)\n-   `flip(pageNum: number, corner: 'top' | 'bottom')` - Turn to the specified page (with animation)\n-   `loadFromImages(images: ['path-to-image1.jpg', ...])` - Load page from images\n-   `loadFromHtml(items: NodeListOf | HTMLElement[])` - Load page from html elements\n-   `updateFromHtml(items: NodeListOf | HTMLElement[])` - Update page from html elements (new on 0.4.0)\n-   `updateFromImages(images: ['path-to-image1.jpg', ...])` - Update page from images (new on 0.4.0)\n-   `destroy()` - Destructor. Remove a root HTML element and all event handlers (new on 0.4.0)\n\n### Contacts\n\n* dappsar: \u003cdapps.ar@gmail.com\u003e\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdappsar%2Fbook-flip","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdappsar%2Fbook-flip","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdappsar%2Fbook-flip/lists"}