Skip to content
Permalink

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also or learn more about diff comparisons.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also . Learn more about diff comparisons here.
base repository: Nodlik/StPageFlip
Failed to load repositories. Confirm that selected base ref is valid, then try again.
Loading
base: v2.0.0
Choose a base ref
...
head repository: Nodlik/StPageFlip
Failed to load repositories. Confirm that selected head ref is valid, then try again.
Loading
compare: master
Choose a head ref
  • 18 commits
  • 14 files changed
  • 2 contributors

Commits on Sep 8, 2020

  1. Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
    Copy the full SHA
    5220d6a View commit details
  2. fix comment

    btzr-io authored Sep 8, 2020

    Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
    Copy the full SHA
    2e2a28c View commit details
  3. Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
    Copy the full SHA
    6e04517 View commit details
  4. Merge pull request #6 from btzr-io/master

    Add new option: ShowPageCorners
    Nodlik authored Sep 8, 2020

    Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
    Copy the full SHA
    0c79597 View commit details

Commits on Feb 14, 2021

  1. Added type declaration

    Nodlik committed Feb 14, 2021

    Unverified

    This user has not yet uploaded their public signing key.
    Copy the full SHA
    75b3e55 View commit details
  2. Unverified

    This user has not yet uploaded their public signing key.
    Copy the full SHA
    36bb55b View commit details
  3. 2.0.1

    Nodlik committed Feb 14, 2021

    Unverified

    This user has not yet uploaded their public signing key.
    Copy the full SHA
    b634e7a View commit details
  4. Fix constructor, fix td

    Nodlik committed Feb 14, 2021

    Unverified

    This user has not yet uploaded their public signing key.
    Copy the full SHA
    6c3e609 View commit details
  5. 2.0.2

    Nodlik committed Feb 14, 2021

    Unverified

    This user has not yet uploaded their public signing key.
    Copy the full SHA
    71f418e View commit details

Commits on Feb 27, 2021

  1. Unverified

    This user has not yet uploaded their public signing key.
    Copy the full SHA
    a4659ce View commit details
  2. 2.0.3

    Nodlik committed Feb 27, 2021

    Unverified

    This user has not yet uploaded their public signing key.
    Copy the full SHA
    136a7ff View commit details
  3. Fix var name

    Nodlik committed Feb 27, 2021

    Unverified

    This user has not yet uploaded their public signing key.
    Copy the full SHA
    9206e45 View commit details
  4. 2.0.4

    Nodlik committed Feb 27, 2021

    Unverified

    This user has not yet uploaded their public signing key.
    Copy the full SHA
    5cb6c21 View commit details
  5. 2.0.5

    Nodlik committed Feb 27, 2021

    Unverified

    This user has not yet uploaded their public signing key.
    Copy the full SHA
    d7dbe93 View commit details

Commits on Apr 17, 2021

  1. Unverified

    This user has not yet uploaded their public signing key.
    Copy the full SHA
    50ae39d View commit details
  2. 2.0.6

    Nodlik committed Apr 17, 2021

    Unverified

    This user has not yet uploaded their public signing key.
    Copy the full SHA
    6b5d643 View commit details

Commits on Apr 18, 2021

  1. Unverified

    This user has not yet uploaded their public signing key.
    Copy the full SHA
    c5d3246 View commit details
  2. 2.0.7

    Nodlik committed Apr 18, 2021

    Unverified

    This user has not yet uploaded their public signing key.
    Copy the full SHA
    ab30ecc View commit details
Showing with 244 additions and 168 deletions.
  1. +79 −65 README.md
  2. +1 −1 package.json
  3. +22 −17 rollup.config.js
  4. +8 −8 src/BasicTypes.ts
  5. +11 −11 src/Collection/PageCollection.ts
  6. +34 −25 src/Flip/Flip.ts
  7. +11 −2 src/PageFlip.ts
  8. +4 −0 src/Render/CanvasRender.ts
  9. +9 −5 src/Render/HTMLRender.ts
  10. +5 −0 src/Render/Render.ts
  11. +11 −5 src/Settings.ts
  12. +22 −7 src/UI/HTMLUI.ts
  13. +6 −1 src/UI/UI.ts
  14. +21 −21 tsconfig.json
144 changes: 79 additions & 65 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,17 +1,19 @@
[![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)

# StPageFlip

Powerful, simple, and flexible JS Library for creating realistic and beautiful page turning effect.

![](video.gif)

### Features
* Works with simple images on canvas and complex HTML blocks
* Has simple API and flexible configuration
* Compatible with mobile devices
* Supports landscape and portrait screen mode
* Supports soft and hard page types (only in HTML mode)
* No dependencies

- Works with simple images on canvas and complex HTML blocks
- Has simple API and flexible configuration
- Compatible with mobile devices
- Supports landscape and portrait screen mode
- Supports soft and hard page types (only in HTML mode)
- No dependencies

Demo and docs: https://nodlik.github.io/StPageFlip/

@@ -20,43 +22,50 @@ For React.JS you can use: https://nodlik.github.io/react-pageflip/
Docs (generated by TypeDoc): https://nodlik.github.io/StPageFlip/docs/index.html

### Installation

You can install the latest version using npm:

```npm install page-flip```
`npm install page-flip`

Or download bundle from Github

### Usage

If you've installed the package from npm, you should import PageFlip from page-flip package, or just use ```<script/>``` tag:
If you've installed the package from npm, you should import PageFlip from page-flip package, or just use `<script/>` tag:

```html
<script src="{path/to/scripts}/page-flip.browser.js"></script>
```

To create a new PageFlip object:

```js
import {PageFlip} from 'page-flip';
import { PageFlip } from 'page-flip';

const pageFlip = new PageFlip(htmlParentElement, settings);

// or if you're using a script tag and page-flip.browser.js:
const pageFlip = new St.PageFlip(htmlParentElement, settings);
```

```htmlParentElement - HTMLElement```- root element, where the book will be created
`htmlParentElement - HTMLElement`- root element, where the book will be created

`settings: object` - configuration object.

```settings: object``` - configuration object.
To draw on a canvas, use `loadFromImages`:

To draw on a canvas, use ```loadFromImages```:
```js
pageFlip.loadFromImages(['path/to/image1.jpg', 'path/to/image2.jpg' ... ]);
```
To load page from html elements - use ```loadFromHtml```:

To load page from html elements - use `loadFromHtml`:

```js
pageFlip.loadFromHtml(items);
```

For example:

```html
<div id="book">
<div class="my-page" data-density="hard">
@@ -79,83 +88,88 @@ For example:
</div>
</div>
```

```js
const pageFlip = new PageFlip(document.getElementById('book'),
{
width: 400, // required parameter - base page width
height: 600 // required parameter - base page height
}
);
const pageFlip = new PageFlip(document.getElementById('book'), {
width: 400, // required parameter - base page width
height: 600, // required parameter - base page height
});

pageFlip.loadFromHTML(document.querySelectorAll('.my-page'));
```
Use ```data-density="hard"``` attribute to specify page type (```soft | hard```) and define flipping animation.

Use `data-density="hard"` attribute to specify page type (`soft | hard`) and define flipping animation.

### Config

To set configuration define these parameters when creating an object:

* ```width: number``` - required
* ```height: number``` - required
* ```size: ("fixed", "stretch")``` - default: ```"fixed"``` Whether the book will be stretched under the parent element or not
* ```minWidth, maxWidth, minHeight, maxHeight: number``` You must set threshold values ​​with size: ```"stretch"```
* ```drawShadow: bool``` - default: ```true``` Draw shadows or not when page flipping
* ```flippingTime: number``` (milliseconds) - default: ```1000``` Flipping animation time
* ```usePortrait: bool``` - default: ```true``` Enable switching to portrait mode. !This mode uses cloning of html elements (pages)
* ```startZIndex: number``` - default: ```0``` Initial value to z-index
* ```startPage: number``` - default: ```0``` Page number from which to start viewing
* ```autoSize: bool``` - default: ```true``` If this value is true, the parent element will be equal to the size of the book
* ```maxShadowOpacity: number [0..1]``` - default: ```1``` Shadow intensity (1: max intensity, 0: hidden shadows)
* ```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
* ```mobileScrollSupport: boolean``` - default: ```true``` disable content scrolling when touching a book on mobile devices
* ```swipeDistance: number``` - default: ```30``` (px) minimum distance to detect swipe (new on 1.1.0)
* ```clickEventForward: boolean``` - default: ```true``` forwarding click events to the page children html elements (only for ```a``` and ```button``` tags) (new on 1.1.0)
* ```useMouseEvents: boolean``` - default: ```true``` using mouse and touch events to page flipping (new on 1.2.0)
- `width: number` - required
- `height: number` - required
- `size: ("fixed", "stretch")` - default: `"fixed"` Whether the book will be stretched under the parent element or not
- `minWidth, maxWidth, minHeight, maxHeight: number` You must set threshold values ​​with size: `"stretch"`
- `drawShadow: bool` - default: `true` Draw shadows or not when page flipping
- `flippingTime: number` (milliseconds) - default: `1000` Flipping animation time
- `usePortrait: bool` - default: `true` Enable switching to portrait mode. !This mode uses cloning of html elements (pages)
- `startZIndex: number` - default: `0` Initial value to z-index
- `startPage: number` - default: `0` Page number from which to start viewing
- `autoSize: bool` - default: `true` If this value is true, the parent element will be equal to the size of the book
- `maxShadowOpacity: number [0..1]` - default: `1` Shadow intensity (1: max intensity, 0: hidden shadows)
- `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
- `mobileScrollSupport: boolean` - default: `true` disable content scrolling when touching a book on mobile devices
- `swipeDistance: number` - default: `30` (px) minimum distance to detect swipe (new on 1.1.0)
- `clickEventForward: boolean` - default: `true` forwarding click events to the page children html elements (only for `a` and `button` tags) (new on 1.1.0)
- `useMouseEvents: boolean` - default: `true` using mouse and touch events to page flipping (new on 1.2.0)
- `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)

### Events
To listen events use the method ```on```:

To listen events use the method `on`:

```js
pageFlip.on('flip', (e) => {
// callback code
alert(e.data); // current page number
}
);
// callback code
alert(e.data); // current page number
});
```

Available events:
* ```flip: number``` - triggered by page turning
* ```changeOrientation: ("portrait", "landscape")``` - triggered when page orientation changes
* ```changeState: ("user_fold", "fold_corner", "flipping", "read")``` - triggered when the state of the book changes
* ```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
* ```update: ({page: number, mode: 'portrait', 'landscape'})``` - triggered when the book pages are updated (using the "updateFrom..." methods)

- `flip: number` - triggered by page turning
- `changeOrientation: ("portrait", "landscape")` - triggered when page orientation changes
- `changeState: ("user_fold", "fold_corner", "flipping", "read")` - triggered when the state of the book changes
- `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
- `update: ({page: number, mode: 'portrait', 'landscape'})` - triggered when the book pages are updated (using the "updateFrom..." methods)

Event object has two fields: ```data: number | string``` and ```object: PageFlip```
Event object has two fields: `data: number | string` and `object: PageFlip`

### Methods
* ```getPageCount: number``` - Get number of all pages
* ```getOrientation: 'portrait', 'landscape'``` - Get the current orientation: portrait or landscape
* ```getBoundsRect: PageRect``` - Get current book sizes and position
* ```getCurrentPageIndex: number``` - Get the current page number (starts at 0)
* ```turnToPage(pageNum: number)``` - Turn to the specified page number (without animation)
* ```turnToNextPage()``` - Turn to the next page (without animation)
* ```turnToPrevPage()``` - Turn to the previous page (without animation)
* ```flipNext(corner: 'top' | 'bottom')``` - Turn to the next page (with animation)
* ```flipPrev(corner: 'top' | 'bottom')``` - Turn to the previous page (with animation)
* ```flip(pageNum: number, corner: 'top' | 'bottom')``` - Turn to the specified page (with animation)
* ```loadFromImages(images: ['path-to-image1.jpg', ...])``` - Load page from images
* ```loadFromHtml(items: NodeListOf | HTMLElement[])``` - Load page from html elements
* ```updateFromHtml(items: NodeListOf | HTMLElement[])``` - Update page from html elements (new on 0.4.0)
* ```updateFromImages(images: ['path-to-image1.jpg', ...])``` - Update page from images (new on 0.4.0)
* ```destroy()``` - Destructor. Remove a root HTML element and all event handlers (new on 0.4.0)

- `getPageCount: number` - Get number of all pages
- `getOrientation: 'portrait', 'landscape'` - Get the current orientation: portrait or landscape
- `getBoundsRect: PageRect` - Get current book sizes and position
- `getCurrentPageIndex: number` - Get the current page number (starts at 0)
- `turnToPage(pageNum: number)` - Turn to the specified page number (without animation)
- `turnToNextPage()` - Turn to the next page (without animation)
- `turnToPrevPage()` - Turn to the previous page (without animation)
- `flipNext(corner: 'top' | 'bottom')` - Turn to the next page (with animation)
- `flipPrev(corner: 'top' | 'bottom')` - Turn to the previous page (with animation)
- `flip(pageNum: number, corner: 'top' | 'bottom')` - Turn to the specified page (with animation)
- `loadFromImages(images: ['path-to-image1.jpg', ...])` - Load page from images
- `loadFromHtml(items: NodeListOf | HTMLElement[])` - Load page from html elements
- `updateFromHtml(items: NodeListOf | HTMLElement[])` - Update page from html elements (new on 0.4.0)
- `updateFromImages(images: ['path-to-image1.jpg', ...])` - Update page from images (new on 0.4.0)
- `destroy()` - Destructor. Remove a root HTML element and all event handlers (new on 0.4.0)

### Contacts

Oleg,

<oleg.litovski9@gmail.com>

https://github.com/Nodlik/StPageFlip


[![Buy me a coffee][buymeacoffee-shield]][buymeacoffee]

[buymeacoffee]: https://www.buymeacoffee.com/nndlik
[buymeacoffee-shield]: https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png
[buymeacoffee]: https://www.buymeacoffee.com/nndlik
[buymeacoffee-shield]: https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "page-flip",
"version": "2.0.0",
"version": "2.0.7",
"main": "dist/js/page-flip.browser.js",
"browser": "dist/js/page-flip.browser.js",
"author": "oleg.litovski9@gmail.com",
39 changes: 22 additions & 17 deletions rollup.config.js
Original file line number Diff line number Diff line change
@@ -1,19 +1,24 @@
import typeScript from 'rollup-plugin-typescript2';
import typescript from 'rollup-plugin-typescript2';
import postcss from 'rollup-plugin-postcss';
import { terser } from "rollup-plugin-terser";
import { terser } from 'rollup-plugin-terser';

export default [{
input: 'src/PageFlip.ts',
output: [{ file: 'dist/js/page-flip.browser.js', format: 'umd', name: 'St' }],
plugins: [
postcss(),
typeScript({tsconfig: "tsconfig.json"}), terser()
]
}, {
input: 'src/PageFlip.ts',
output: [{ file: 'dist/js/page-flip.module.js', format: 'es' }],
plugins: [
postcss(),
typeScript({tsconfig: "tsconfig.json"}), terser()
]
}];
export default [
{
input: 'src/PageFlip.ts',
output: [{ file: 'dist/js/page-flip.browser.js', format: 'umd', name: 'St' }],
plugins: [
postcss(),
typescript({ tsconfig: 'tsconfig.json', useTsconfigDeclarationDir: true }),
terser(),
],
},
{
input: 'src/PageFlip.ts',
output: [{ file: 'dist/js/page-flip.module.js', format: 'es' }],
plugins: [
postcss(),
typescript({ tsconfig: 'tsconfig.json', useTsconfigDeclarationDir: true }),
terser(),
],
},
];
16 changes: 8 additions & 8 deletions src/BasicTypes.ts
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
/**
* Type representing a point on a plane
*/
export type Point = {
export interface Point {
x: number;
y: number;
};
}

/**
* Type representing a coordinates of the rectangle on the plane
*/
export type RectPoints = {
export interface RectPoints {
/** Coordinates of the top left corner */
topLeft: Point;
/** Coordinates of the top right corner */
@@ -18,29 +18,29 @@ export type RectPoints = {
bottomLeft: Point;
/** Coordinates of the bottom right corner */
bottomRight: Point;
};
}

/**
* Type representing a rectangle
*/
export type Rect = {
export interface Rect {
left: number;
top: number;
width: number;
height: number;
};
}

/**
* Type representing a book area
*/
export type PageRect = {
export interface PageRect {
left: number;
top: number;
width: number;
height: number;
/** Page width. If portrait mode is equal to the width of the book. In landscape mode - half of the total width. */
pageWidth: number;
};
}

/**
* Type representing a line segment contains two points: start and end
Loading