{"id":21683361,"url":"https://github.com/nodlik/stpageflip","last_synced_at":"2025-05-15T19:01:44.753Z","repository":{"id":37917086,"uuid":"264426522","full_name":"Nodlik/StPageFlip","owner":"Nodlik","description":"Simple library for creating realistic page turning effects","archived":false,"fork":false,"pushed_at":"2024-01-08T09:10:43.000Z","size":13435,"stargazers_count":565,"open_issues_count":38,"forks_count":112,"subscribers_count":12,"default_branch":"master","last_synced_at":"2025-04-09T04:02:32.275Z","etag":null,"topics":["book","flip","fold","frontend","javascript","page","pageflip","reader","typescript"],"latest_commit_sha":null,"homepage":"https://nodlik.github.io/StPageFlip/","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/Nodlik.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,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"custom":["https://www.buymeacoffee.com/nndlik"]}},"created_at":"2020-05-16T11:56:28.000Z","updated_at":"2025-04-04T10:14:29.000Z","dependencies_parsed_at":"2024-06-09T16:20:48.114Z","dependency_job_id":"4dbe41da-9b9b-41a5-840e-b84a3df0327b","html_url":"https://github.com/Nodlik/StPageFlip","commit_stats":{"total_commits":89,"total_committers":4,"mean_commits":22.25,"dds":0.348314606741573,"last_synced_commit":"ab30ecc1d9f6d98de1a99b8e296469382f41c120"},"previous_names":[],"tags_count":30,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nodlik%2FStPageFlip","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nodlik%2FStPageFlip/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nodlik%2FStPageFlip/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Nodlik%2FStPageFlip/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Nodlik","download_url":"https://codeload.github.com/Nodlik/StPageFlip/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248489404,"owners_count":21112564,"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":["book","flip","fold","frontend","javascript","page","pageflip","reader","typescript"],"created_at":"2024-11-25T16:11:31.651Z","updated_at":"2025-04-11T22:30:16.870Z","avatar_url":"https://github.com/Nodlik.png","language":"TypeScript","funding_links":["https://www.buymeacoffee.com/nndlik"],"categories":[],"sub_categories":[],"readme":"[![GitHub license](https://img.shields.io/github/license/Nodlik/StPageFlip)](https://github.com/Nodlik/StPageFlip/blob/master/LICENSE) [![npm](https://img.shields.io/npm/v/page-flip)](https://www.npmjs.com/package/page-flip) [![npm](https://img.shields.io/npm/dm/page-flip)](https://npmcharts.com/compare/page-flip?minimal=true) [![](https://img.shields.io/badge/support-buymeacoffee-orange)](https://www.buymeacoffee.com/nndlik)\n\n# StPageFlip\n\nPowerful, simple, and flexible JS Library for creating realistic and beautiful page turning effect.\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://nodlik.github.io/StPageFlip/\n\nFor React.JS you can use: https://nodlik.github.io/react-pageflip/\n\nDocs (generated by TypeDoc): https://nodlik.github.io/StPageFlip/docs/index.html\n\n### Installation\n\nYou can install the latest version using npm:\n\n`npm install page-flip`\n\nOr download bundle from Github\n\n### Usage\n\nIf you've installed the package from npm, you should import PageFlip from page-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 'page-flip';\n\nconst pageFlip = new PageFlip(htmlParentElement, settings);\n\n// or if you're using a script tag and page-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')` - Turn to the next page (with animation)\n-   `flipPrev(corner: 'top' | 'bottom')` - 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\nOleg,\n\n\u003coleg.litovski9@gmail.com\u003e\n\nhttps://github.com/Nodlik/StPageFlip\n\n[![Buy me a coffee][buymeacoffee-shield]][buymeacoffee]\n\n[buymeacoffee]: https://www.buymeacoffee.com/nndlik\n[buymeacoffee-shield]: https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnodlik%2Fstpageflip","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnodlik%2Fstpageflip","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnodlik%2Fstpageflip/lists"}