[![GitHub license](https://img.shields.io/github/license/dewapex/FlipZine)](https://github.com/dewapex/FlipZine/blob/master/LICENSE) [![npm](https://img.shields.io/npm/v/FlipZine)](https://www.npmjs.com/package/flipzine)

# FlipZine

星空之上，灵动之美，奔放空灵

精美与华丽的交汇正如此刻的时间和空间，生出一番别样的灵韵

大道至简，至臻至美，一切只为更好

![](video.gif)

## 特点

- 可在画布上使用简单的图像和复杂的HTML块
- 拥有简单的API和灵活的配置
- 与移动设备兼容
- 支持横向和纵向屏幕模式，自动适配可视屏幕
- 支持软性和硬性页面类型（仅在HTML模式下）
- 拥抱TS，无任何依赖

## 安装

使用npm安装最新版本

```javascript
npm install flipzine --save-dev
```

或者从码云上下载
`https://gitee.com/dewapex/flipzine.git`

## 使用

如果你已经通过npm安装了软件包，你应该从flipzine软件包中导入FlipZine，或者直接使用`<script/>`标签。

```html
<script src="{path/to/scripts}/fz.webpack.browser.js"></script>
```

创建新的FlipZine对象：

```js
import { FlipZine } from 'flipzine';

const fz = new FlipZine(htmlParentElement, settings);

// 如果你通过script标签引入fz.webpack.browser.js，请使用如下代码创建:
const fz = new Flip.FlipZine(htmlParentElement, settings);
```

`htmlParentElement : HTMLElement`- 根元素，书籍将在这里被创建

`settings: object` - 配置对象

要从画布上加载页面，请使用 `loadFromImages`:

```js
fz.loadFromImages(['path/to/image1.jpg', 'path/to/image2.jpg' ... ]);
```

要从html元素中加载页面，请使用 `loadFromHtml`:

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

例如：

```html
<div id="book">
    <div class="my-page" data-density="hard">
        Page Cover
    </div>
    <div class="my-page">
        Page one
    </div>
    <div class="my-page">
        Page two
    </div>
    <div class="my-page">
        Page three
    </div>
    <div class="my-page">
        Page four
    </div>
    <div class="my-page" data-density="hard">
        Last page
    </div>
</div>
```

```js
const fz = new FlipZine(document.getElementById('book'), {
    width: 400, // 必要参数 - 基本页面宽度
    height: 600, // 必要参数 - 基本页面高度
});

fz.loadFromHTML(document.querySelectorAll('.my-page'));
```

使用`data-density="hard"`属性来指定页面类型（`soft | hard`）并定义翻转动画。

## 配置

在创建一个对象时要定义这些参数。

-   `width: number` - required
-   `height: number` - required
-   `size: ("fixed", "stretch")` - 默认值: `"fixed"` 书籍是否在父元素下被拉长
-   `minWidth, maxWidth, minHeight, maxHeight: number` 你必须设置书籍尺寸的阈值: `"stretch"`
-   `drawShadow: bool` - 默认值: `true` 翻页时是否绘制阴影
-   `flippingTime: number` (milliseconds) - 默认值: `1000` 翻页动画时长
-   `usePortrait: bool` - 默认值: `true` 允许切换到纵向模式，这种模式使用克隆html元素（页面）
-   `startZIndex: number` - 默认值: `0` z-index的初始值
-   `startPage: number` - 默认值: `0` 书籍渲染成功后的初始页码
-   `autoSize: bool` - 默认值: `true` 如果此值为真，父元素将等于书的大小
-   `maxShadowOpacity: number [0..1]` - 默认值: `1` 阴影强度（1：最大强度，0：隐藏阴影）
-   `showCover: boolean` - 默认值: `false` 如果此值为真，第一页和最后一页将被标记为硬面，并将以单页模式显示
-   `mobileScrollSupport: boolean` - 默认值: `true` 在移动设备上触摸书本时禁止内容滚动
-   `swipeDistance: number` - 默认值: `30` (px) 检测滑动的最小距离（1.1.0版的新内容）
-   `clickEventForward: boolean` - 默认值: `true` 将点击事件转发到页面的子HTML元素（仅适用于`a`和`button`标签）（1.1.0的新功能）
-   `useMouseEvents: boolean` - 默认值: `true` 使用鼠标和触摸事件进行翻页（1.2.0的新功能）
-   `disableFlipByClick: boolean` - 默认值: `false` 如果这个值为真，通过点击整本书进行翻转将被锁定。点击只能在角落里工作（2.0.3版的新内容）

## 事件

监听事件请使用`on`方法:

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


可用事件：

-   `flip: number` - 翻页时触发
-   `changeOrientation: ("portrait", "landscape")` - 页面方向改变时触发
-   `changeState: ("user_fold", "fold_corner", "flipping", "read")` - 书籍状态发生变化时触发
-   `init: ({page: number, mode: 'portrait', 'landscape'})` - 当书籍被初始化且起始页加载时触发。在使用 "loadFrom... "方法之前，先监听（`on`）这个事件
-   `update: ({page: number, mode: 'portrait', 'landscape'})` - 当书籍页面更新时触发（使用 "updateFrom... "方法）

事件对象有两个字段。`data: number | string`和`object: FlipZine`。

## 方法

-   `getPageCount: number` - 获取书籍的总页数
-   `getOrientation: 'portrait', 'landscape'` - 获取当前方向：纵向或横向
-   `getBoundsRect: PageRect` - 获取当前书籍的尺寸和位置
-   `getCurrentPageIndex: number` - 获取当前页码（从0开始）
-   `turnToPage(pageNum: number)` - 翻到指定的页码（无动画）
-   `turnToNextPage()` - 翻到下一页(无动画)
-   `turnToPrevPage()` - 翻到前一页(无动画)
-   `flipNext(corner: 'top' | 'bottom')` - 翻到下一页(有动画)
-   `flipPrev(corner: 'top' | 'bottom')` - 翻到前一页(有动画)
-   `flip(pageNum: number, corner: 'top' | 'bottom')` - 翻到指定的页码（有动画）
-   `loadFromImages(images: ['path-to-image1.jpg', ...])` - 从图像中加载页面
-   `loadFromHtml(items: NodeListOf | HTMLElement[])` - 从html元素中加载页面
-   `updateFromHtml(items: NodeListOf | HTMLElement[])` - 从html元素中更新页面（0.4.0版新增）
-   `updateFromImages(images: ['path-to-image1.jpg', ...])` - 从图像中更新页面（0.4.0版新增）
-   `destroy()` - 销毁器。删除一个根HTML元素和所有的事件处理程序（0.4.0的新功能）