├── .all-contributorsrc
├── .browserslistrc
├── .eslintrc.js
├── .gitignore
├── .travis.yml
├── CHANGELOG.md
├── CODE_OF_CONDUCT.md
├── LICENSE
├── Makefile
├── README.md
├── babel.config.js
├── docs
    ├── base.css
    ├── favicon.ico
    ├── img
    │   ├── 1.jpg
    │   ├── 2.jpg
    │   ├── 3.jpg
    │   ├── 4.jpg
    │   └── 5.jpg
    ├── index.html
    └── js
    │   ├── app.2cc094ac.js
    │   ├── app.2cc094ac.js.map
    │   ├── chunk-vendors.0fa28725.js
    │   └── chunk-vendors.0fa28725.js.map
├── jest.config.js
├── package-lock.json
├── package.json
├── postcss.config.js
├── public
    ├── base.css
    ├── favicon.ico
    ├── img
    │   ├── 1.jpg
    │   ├── 2.jpg
    │   ├── 3.jpg
    │   ├── 4.jpg
    │   └── 5.jpg
    └── index.html
├── src
    ├── App.vue
    ├── _index.scss
    ├── index.js
    ├── index.vue
    ├── main.js
    └── piece
    │   ├── index.js
    │   └── transform.js
├── tests
    └── unit
    │   ├── .eslintrc.js
    │   └── example.spec.js
└── vue.config.js


/.all-contributorsrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "files": [
 3 |     "README.md"
 4 |   ],
 5 |   "imageSize": 100,
 6 |   "commit": false,
 7 |   "contributors": [
 8 |     {
 9 |       "login": "dreambo8563",
10 |       "name": "Vincent Guo",
11 |       "avatar_url": "https://avatars2.githubusercontent.com/u/6948318?v=4",
12 |       "profile": "https://dreambo8563.github.io/",
13 |       "contributions": [
14 |         "code",
15 |         "doc",
16 |         "infra"
17 |       ]
18 |     }
19 |   ],
20 |   "contributorsPerLine": 7,
21 |   "projectName": "vue-piece-slider",
22 |   "projectOwner": "dreambo8563",
23 |   "repoType": "github",
24 |   "repoHost": "https://github.com"
25 | }
26 | 


--------------------------------------------------------------------------------
/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | not ie <= 8
4 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     node: true
 5 |   },
 6 |   extends: ["plugin:vue/essential", "@vue/prettier"],
 7 |   rules: {
 8 |     "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
 9 |     "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off"
10 |   },
11 |   parserOptions: {
12 |     parser: "babel-eslint"
13 |   }
14 | };
15 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw?
22 | 


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js:
3 |   - "lts/*"
4 | before_install:
5 |   - npm i -g npm@latest
6 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
 1 | <a name="1.0.0"></a>
 2 | # [1.0.0](https://github.com/dreambo8563/vue-piece-slider/compare/v0.1.1...v1.0.0) (2019-04-29)
 3 | 
 4 | 
 5 | ### Bug Fixes
 6 | 
 7 | * **arrow:** change html entity ([3857129](https://github.com/dreambo8563/vue-piece-slider/commit/3857129))
 8 | 
 9 | 
10 | 
11 | <a name="0.1.1"></a>
12 | ## [0.1.1](https://github.com/dreambo8563/vue-piece-slider/compare/v0.1.1-beta.0...v0.1.1) (2019-04-28)
13 | 
14 | 
15 | 
16 | <a name="0.1.1-beta.0"></a>
17 | ## [0.1.1-beta.0](https://github.com/dreambo8563/vue-piece-slider/compare/0b32060...v0.1.1-beta.0) (2019-04-28)
18 | 
19 | 
20 | ### Features
21 | 
22 | * **implement:** almost done ([54e8272](https://github.com/dreambo8563/vue-piece-slider/commit/54e8272))
23 | * **implement:** basic work version ([0b32060](https://github.com/dreambo8563/vue-piece-slider/commit/0b32060))
24 | 
25 | 
26 | 
27 | 


--------------------------------------------------------------------------------
/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
 1 | # Contributor Covenant Code of Conduct
 2 | 
 3 | ## Our Pledge
 4 | 
 5 | In the interest of fostering an open and welcoming environment, we as
 6 | contributors and maintainers pledge to making participation in our project and
 7 | our community a harassment-free experience for everyone, regardless of age, body
 8 | size, disability, ethnicity, sex characteristics, gender identity and expression,
 9 | level of experience, education, socio-economic status, nationality, personal
10 | appearance, race, religion, or sexual identity and orientation.
11 | 
12 | ## Our Standards
13 | 
14 | Examples of behavior that contributes to creating a positive environment
15 | include:
16 | 
17 | * Using welcoming and inclusive language
18 | * Being respectful of differing viewpoints and experiences
19 | * Gracefully accepting constructive criticism
20 | * Focusing on what is best for the community
21 | * Showing empathy towards other community members
22 | 
23 | Examples of unacceptable behavior by participants include:
24 | 
25 | * The use of sexualized language or imagery and unwelcome sexual attention or
26 |  advances
27 | * Trolling, insulting/derogatory comments, and personal or political attacks
28 | * Public or private harassment
29 | * Publishing others' private information, such as a physical or electronic
30 |  address, without explicit permission
31 | * Other conduct which could reasonably be considered inappropriate in a
32 |  professional setting
33 | 
34 | ## Our Responsibilities
35 | 
36 | Project maintainers are responsible for clarifying the standards of acceptable
37 | behavior and are expected to take appropriate and fair corrective action in
38 | response to any instances of unacceptable behavior.
39 | 
40 | Project maintainers have the right and responsibility to remove, edit, or
41 | reject comments, commits, code, wiki edits, issues, and other contributions
42 | that are not aligned to this Code of Conduct, or to ban temporarily or
43 | permanently any contributor for other behaviors that they deem inappropriate,
44 | threatening, offensive, or harmful.
45 | 
46 | ## Scope
47 | 
48 | This Code of Conduct applies both within project spaces and in public spaces
49 | when an individual is representing the project or its community. Examples of
50 | representing a project or community include using an official project e-mail
51 | address, posting via an official social media account, or acting as an appointed
52 | representative at an online or offline event. Representation of a project may be
53 | further defined and clarified by project maintainers.
54 | 
55 | ## Enforcement
56 | 
57 | Instances of abusive, harassing, or otherwise unacceptable behavior may be
58 | reported by contacting the project team at dreambo8563@outlook.com. All
59 | complaints will be reviewed and investigated and will result in a response that
60 | is deemed necessary and appropriate to the circumstances. The project team is
61 | obligated to maintain confidentiality with regard to the reporter of an incident.
62 | Further details of specific enforcement policies may be posted separately.
63 | 
64 | Project maintainers who do not follow or enforce the Code of Conduct in good
65 | faith may face temporary or permanent repercussions as determined by other
66 | members of the project's leadership.
67 | 
68 | ## Attribution
69 | 
70 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
71 | available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
72 | 
73 | [homepage]: https://www.contributor-covenant.org
74 | 
75 | For answers to common questions about this code of conduct, see
76 | https://www.contributor-covenant.org/faq
77 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2019 Vincent Guo
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/Makefile:
--------------------------------------------------------------------------------
 1 | lint:
 2 | 	npm run lint
 3 | local:
 4 | 	npm run serve
 5 | build:
 6 | 	npm run build
 7 | pages:
 8 | 	npm run pages
 9 | report:
10 | 	npm run report
11 | test:
12 | 	npm run test


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # vue-piece-slider ([Demo](https://dreambo8563.github.io/vue-piece-slider/))
  2 | 
  3 | [![Codacy Badge](https://api.codacy.com/project/badge/Grade/9a935d579e394bd38efefd120947288e)](https://app.codacy.com/app/dreambo8563/vue-piece-slider?utm_source=github.com&utm_medium=referral&utm_content=dreambo8563/vue-piece-slider&utm_campaign=Badge_Grade_Dashboard)
  4 | [![All Contributors](https://img.shields.io/badge/all_contributors-1-orange.svg?style=flat-square)](#contributors) [![Greenkeeper badge](https://badges.greenkeeper.io/dreambo8563/vue-piece-slider.svg)](https://greenkeeper.io/)
  5 | [![Build Status](https://travis-ci.org/dreambo8563/vue-piece-slider.svg?branch=master)](https://travis-ci.org/dreambo8563/vue-piece-slider)
  6 | [![Known Vulnerabilities](https://snyk.io/test/github/dreambo8563/vue-piece-slider/badge.svg?targetFile=package.json)](https://snyk.io/test/github/dreambo8563/vue-piece-slider?targetFile=package.json)
  7 | [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
  8 | ![npm](https://img.shields.io/npm/dt/vue-piece-slider.svg?style=flat)
  9 | 
 10 | This library is a simplified Vue portal of an awesome [Codrops Article](https://tympanus.net/codrops/2018/02/21/animated-fragment-slideshow/) by [Luis Manuel](https://tympanus.net/codrops/author/luis/) (original [source](https://github.com/lmgonzalves/pieces-slider)).
 11 | 
 12 | In this version, just support image type.
 13 | 
 14 | ![](https://raw.githubusercontent.com/dreambo8563/static-assets/master/vue-piece-slider.png)
 15 | 
 16 | ## Install
 17 | 
 18 | ```bash
 19 | npm install --save animejs vue-piece-slider
 20 | ```
 21 | 
 22 | ## Usage
 23 | 
 24 | Check out the [Demo](https://dreambo8563.github.io/vue-piece-slider/) to see it in action.
 25 | 
 26 | ```js
 27 | <template>
 28 |   <div class="content" id="app">
 29 |     <Slider
 30 |       :arrow="true"
 31 |       :options="options"
 32 |       @click="click"
 33 |       class="slider"
 34 |       :list="list"
 35 |       v-model="activeIndex"
 36 |     ></Slider>
 37 |   </div>
 38 | </template>
 39 | 
 40 | <script>
 41 | import Slider from "vue-piece-slider"
 42 | 
 43 | export default {
 44 |   name: "app",
 45 |   data() {
 46 |     return {
 47 |       activeIndex: 0,
 48 |       list: [
 49 |         "./img/1.jpg",
 50 |         "./img/2.jpg",
 51 |         "./img/3.jpg",
 52 |         "./img/4.jpg",
 53 |         "./img/5.jpg"
 54 |       ],
 55 |       options: {
 56 |         angle: 30,
 57 |         extraSpacing: { extraX: 1, extraY: -20 },
 58 |         piecesWidth: 100,
 59 |         ty: 200,
 60 |         piecesSpacing: 1,
 61 |         animation: {
 62 |           duration: 2000,
 63 |           easing: "easeOutQuint"
 64 |         }
 65 |       }
 66 |     }
 67 |   },
 68 |   components: {
 69 |     Slider
 70 |   },
 71 |   methods: {
 72 |     click() {
 73 |       // eslint-disable-next-line no-console
 74 |       console.info("object")
 75 |     }
 76 |   }
 77 | }
 78 | </script>
 79 | 
 80 | <style lang="scss">
 81 | #app {
 82 |   font-family: "Avenir", Helvetica, Arial, sans-serif;
 83 |   -webkit-font-smoothing: antialiased;
 84 |   -moz-osx-font-smoothing: grayscale;
 85 |   text-align: center;
 86 |   color: #2c3e50;
 87 |   margin-top: 60px;
 88 |   .slider {
 89 |     width: 400px;
 90 |     height: 200px;
 91 |   }
 92 | }
 93 | </style>
 94 | ```
 95 | 
 96 | ## Props
 97 | 
 98 | | Property | Type            | Default | Description                            |
 99 | | :------- | :-------------- | :------ | :------------------------------------- |
100 | | `list`   | Array           | []      | The image list                         |
101 | | `value`  | Number \|String | 0       | The activeIndex                        |
102 | | `arrow`  | Booleans        | true    | if to show the action arrow when hover |
103 | 
104 | ## Options
105 | 
106 | | Property        | Type          | Default                      | Description                                                                                                                                                               |
107 | | :-------------- | :------------ | :--------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
108 | | `angle`         | Number        | 45                           | Rotation angle for pieces. All pieces in the same item will have the same rotation angle.                                                                                 |
109 | | `extraSpacing`  | Object        | { extraX: 500, extraY: 200 } | Extra space that should be covered by the pieces. You can set a different value for each axis using an Object like: {extraX: 0, extraY: 0}. This is useful if angle != 0. |
110 | | `piecesWidth`   | Func \|Number | random(50, 200)              | Pieces width.                                                                                                                                                             |
111 | | `piecesSpacing` | Func \|Number | 5                            | Separation among pieces.                                                                                                                                                  |
112 | 
113 | more params please follow the [package of Piece](https://github.com/lmgonzalves/pieces)
114 | 
115 | ## Credits
116 | 
117 | - [Pieces](https://github.com/lmgonzalves/pieces) by Luis Manuel
118 | - Images by [Unsplash.com](https://unsplash.com/)
119 | - [anime.js](http://anime-js.com/) by Julian Garnier
120 | 
121 | ## Contributors
122 | 
123 | Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
124 | 
125 | <!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
126 | <!-- prettier-ignore -->
127 | <table><tr><td align="center"><a href="https://dreambo8563.github.io/"><img src="https://avatars2.githubusercontent.com/u/6948318?v=4" width="100px;" alt="Vincent Guo"/><br /><sub><b>Vincent Guo</b></sub></a><br /><a href="https://github.com/dreambo8563/vue-piece-slider/commits?author=dreambo8563" title="Code">💻</a> <a href="https://github.com/dreambo8563/vue-piece-slider/commits?author=dreambo8563" title="Documentation">📖</a> <a href="#infra-dreambo8563" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a></td></tr></table>
128 | 
129 | <!-- ALL-CONTRIBUTORS-LIST:END -->
130 | 
131 | This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
132 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   presets: [
 3 |     [
 4 |       "@vue/app",
 5 |       {
 6 |         useBuiltIns: false
 7 |       }
 8 |     ]
 9 |   ]
10 | };
11 | 


--------------------------------------------------------------------------------
/docs/base.css:
--------------------------------------------------------------------------------
  1 | article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;}
  2 | *,
  3 | *::after,
  4 | *::before {
  5 | 	box-sizing: border-box;
  6 | }
  7 | 
  8 | html {
  9 | 	background: #fff;
 10 | }
 11 | 
 12 | body {
 13 | 	--color-text: #fff;
 14 | 	--color-link: #f0f0f0;
 15 | 	--color-link-hover: #fff;
 16 | 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
 17 | 	min-height: 100vh;
 18 | 	color: #fff;
 19 | 	color: var(--color-text);
 20 | 	background: linear-gradient(115deg, rgba(86, 216, 228,1) 5%,rgba(159, 1, 234,1) 95%);
 21 | 	-webkit-font-smoothing: antialiased;
 22 | 	-moz-osx-font-smoothing: grayscale;
 23 | 	overflow: hidden;
 24 | }
 25 | 
 26 | a {
 27 | 	text-decoration: none;
 28 | 	color: var(--color-link);
 29 | 	outline: none;
 30 | }
 31 | 
 32 | a:hover,
 33 | a:focus {
 34 | 	color: var(--color-link-hover);
 35 | }
 36 | 
 37 | a:focus,
 38 | button:focus {
 39 | 	outline: none;
 40 | }
 41 | 
 42 | .hidden {
 43 | 	position: absolute;
 44 | 	overflow: hidden;
 45 | 	width: 0;
 46 | 	height: 0;
 47 | 	pointer-events: none;
 48 | }
 49 | 
 50 | /* Icons */
 51 | .icon {
 52 | 	display: block;
 53 | 	width: 1.5em;
 54 | 	height: 1.5em;
 55 | 	margin: 0 auto;
 56 | 	fill: currentColor;
 57 | }
 58 | 
 59 | .icon--keyboard {
 60 | 	display: none;
 61 | }
 62 | 
 63 | main {
 64 | 	position: relative;
 65 | 	width: 100%;
 66 | }
 67 | 
 68 | .content {
 69 | 	position: relative;
 70 | 	display: flex;
 71 | 	justify-content: center;
 72 | 	align-items: center;
 73 | 	margin: 0 auto;
 74 | 	min-height: 100vh;
 75 | }
 76 | 
 77 | .content--fixed {
 78 | 	position: fixed;
 79 | 	z-index: 10000;
 80 | 	top: 0;
 81 | 	left: 0;
 82 | 	display: grid;
 83 | 	align-content: space-between;
 84 | 	width: 100%;
 85 | 	max-width: none;
 86 | 	min-height: 0;
 87 | 	height: 100vh;
 88 | 	padding: 1.5em;
 89 | 	pointer-events: none;
 90 | 	grid-template-columns: 50% 50%;
 91 | 	grid-template-rows: auto auto 4em;
 92 | 	grid-template-areas: 'header ...'
 93 | 	'... ...'
 94 | 	'github demos';
 95 | }
 96 | 
 97 | .content--fixed a {
 98 | 	pointer-events: auto;
 99 | }
100 | 
101 | /* Header */
102 | .codrops-header {
103 | 	position: relative;
104 | 	z-index: 100;
105 | 	display: flex;
106 | 	flex-direction: row;
107 | 	align-items: flex-start;
108 | 	align-items: center;
109 | 	align-self: start;
110 | 	grid-area: header;
111 | 	justify-self: start;
112 | }
113 | 
114 | .codrops-header__title {
115 | 	font-size: 1em;
116 | 	font-weight: bold;
117 | 	margin: 0;
118 | 	padding: 0.75em 0;
119 | }
120 | 
121 | .info {
122 | 	margin: 0 0 0 1.25em;
123 | 	color: var(--color-info);
124 | }
125 | 
126 | .github {
127 | 	display: block;
128 | 	align-self: end;
129 | 	grid-area: github;
130 | 	justify-self: start;
131 | }
132 | 
133 | /* Top Navigation Style */
134 | .codrops-links {
135 | 	position: relative;
136 | 	display: flex;
137 | 	justify-content: center;
138 | 	margin: 0 1em 0 0;
139 | 	text-align: center;
140 | 	white-space: nowrap;
141 | }
142 | 
143 | .codrops-icon {
144 | 	display: inline-block;
145 | 	margin: 0.15em;
146 | 	padding: 0.25em;
147 | }
148 | 
149 | @media screen and (max-width: 55em) {
150 | 	body {
151 | 		overflow: auto;
152 | 	}
153 | 	.content {
154 | 		flex-direction: column;
155 | 		height: auto;
156 | 		min-height: 0;
157 | 		padding-bottom: 10em;
158 | 	}
159 | 	.content--fixed {
160 | 		position: relative;
161 | 		z-index: 1000;
162 | 		display: block;
163 | 		padding: 0.85em;
164 | 	}
165 | 	.codrops-header {
166 | 		flex-direction: column;
167 | 		align-items: center;
168 | 	}
169 | 	.codrops-header__title {
170 | 		font-weight: bold;
171 | 		padding-bottom: 0.25em;
172 | 		text-align: center;
173 | 	}
174 | 	.info {
175 | 		margin: 0;
176 | 	}
177 | 	.github {
178 | 		display: block;
179 | 		margin: 1em auto;
180 | 	}
181 | 	.codrops-links {
182 | 		margin: 0;
183 | 	}
184 | }
185 | 


--------------------------------------------------------------------------------
/docs/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dreambo8563/vue-piece-slider/04ae3b07ef832433365c8067ecbf9396538c6b46/docs/favicon.ico


--------------------------------------------------------------------------------
/docs/img/1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dreambo8563/vue-piece-slider/04ae3b07ef832433365c8067ecbf9396538c6b46/docs/img/1.jpg


--------------------------------------------------------------------------------
/docs/img/2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dreambo8563/vue-piece-slider/04ae3b07ef832433365c8067ecbf9396538c6b46/docs/img/2.jpg


--------------------------------------------------------------------------------
/docs/img/3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dreambo8563/vue-piece-slider/04ae3b07ef832433365c8067ecbf9396538c6b46/docs/img/3.jpg


--------------------------------------------------------------------------------
/docs/img/4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dreambo8563/vue-piece-slider/04ae3b07ef832433365c8067ecbf9396538c6b46/docs/img/4.jpg


--------------------------------------------------------------------------------
/docs/img/5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dreambo8563/vue-piece-slider/04ae3b07ef832433365c8067ecbf9396538c6b46/docs/img/5.jpg


--------------------------------------------------------------------------------
/docs/index.html:
--------------------------------------------------------------------------------
1 | <!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><meta name=description content="A slider made with the Pieces library where slides are animated in a fragmented look."><meta name=keywords content="slideshow, slider, pieces, fragments, animation, svg, canvas, javascript"><link rel=icon href=/vue-piece-slider/favicon.ico><link rel=stylesheet type=text/css href=/vue-piece-slider/base.css><title>vue-piece-slider</title><link href=/vue-piece-slider/js/app.2cc094ac.js rel=preload as=script><link href=/vue-piece-slider/js/chunk-vendors.0fa28725.js rel=preload as=script></head><body><noscript><strong>We're sorry but vue-piece-slider doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=/vue-piece-slider/js/chunk-vendors.0fa28725.js></script><script src=/vue-piece-slider/js/app.2cc094ac.js></script></body></html>


--------------------------------------------------------------------------------
/docs/js/app.2cc094ac.js:
--------------------------------------------------------------------------------
1 | (function(t){function e(e){for(var n,s,o=e[0],c=e[1],l=e[2],u=0,p=[];u<o.length;u++)s=o[u],a[s]&&p.push(a[s][0]),a[s]=0;for(n in c)Object.prototype.hasOwnProperty.call(c,n)&&(t[n]=c[n]);h&&h(e);while(p.length)p.shift()();return r.push.apply(r,l||[]),i()}function i(){for(var t,e=0;e<r.length;e++){for(var i=r[e],n=!0,o=1;o<i.length;o++){var c=i[o];0!==a[c]&&(n=!1)}n&&(r.splice(e--,1),t=s(s.s=i[0]))}return t}var n={},a={app:0},r=[];function s(e){if(n[e])return n[e].exports;var i=n[e]={i:e,l:!1,exports:{}};return t[e].call(i.exports,i,i.exports,s),i.l=!0,i.exports}s.m=t,s.c=n,s.d=function(t,e,i){s.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:i})},s.r=function(t){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},s.t=function(t,e){if(1&e&&(t=s(t)),8&e)return t;if(4&e&&"object"===typeof t&&t&&t.__esModule)return t;var i=Object.create(null);if(s.r(i),Object.defineProperty(i,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var n in t)s.d(i,n,function(e){return t[e]}.bind(null,n));return i},s.n=function(t){var e=t&&t.__esModule?function(){return t["default"]}:function(){return t};return s.d(e,"a",e),e},s.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},s.p="/vue-piece-slider/";var o=window["webpackJsonp"]=window["webpackJsonp"]||[],c=o.push.bind(o);o.push=e,o=o.slice();for(var l=0;l<o.length;l++)e(o[l]);var h=c;r.push([0,"chunk-vendors"]),i()})({0:function(t,e,i){t.exports=i("56d7")},1368:function(t,e,i){"use strict";var n=i("3f74"),a=i.n(n);a.a},"3f74":function(t,e,i){var n=i("63e9");"string"===typeof n&&(n=[[t.i,n,""]]),n.locals&&(t.exports=n.locals);var a=i("499e").default;a("7f2c023a",n,!0,{sourceMap:!1,shadowMode:!1})},"56d7":function(t,e,i){"use strict";i.r(e);var n=i("2b0e"),a=function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{staticClass:"content",attrs:{id:"app"}},[i("div",{staticClass:"toolbox"},[i("div",[i("label",{attrs:{for:"extraX"}},[t._v("ExtraX")]),i("input",{directives:[{name:"model",rawName:"v-model.number",value:t.options.extraSpacing.extraX,expression:"options.extraSpacing.extraX",modifiers:{number:!0}}],attrs:{type:"range",name:"extraX",min:-500,max:500},domProps:{value:t.options.extraSpacing.extraX},on:{__r:function(e){t.$set(t.options.extraSpacing,"extraX",t._n(e.target.value))},blur:function(e){return t.$forceUpdate()}}}),i("span",{staticClass:"range-slider__value"},[t._v("\n        "+t._s(t.options.extraSpacing.extraX)+"\n      ")])]),i("div",[i("label",{attrs:{for:"extraY"}},[t._v("ExtraY")]),i("input",{directives:[{name:"model",rawName:"v-model.number",value:t.options.extraSpacing.extraY,expression:"options.extraSpacing.extraY",modifiers:{number:!0}}],attrs:{type:"range",name:"extraY",min:-500,max:500},domProps:{value:t.options.extraSpacing.extraY},on:{__r:function(e){t.$set(t.options.extraSpacing,"extraY",t._n(e.target.value))},blur:function(e){return t.$forceUpdate()}}}),i("span",{staticClass:"range-slider__value"},[t._v("\n        "+t._s(t.options.extraSpacing.extraY)+"\n      ")])]),i("div",[i("label",{attrs:{for:"angle"}},[t._v("Angle")]),i("input",{directives:[{name:"model",rawName:"v-model.number",value:t.options.angle,expression:"options.angle",modifiers:{number:!0}}],attrs:{type:"range",name:"angle",min:0,max:360},domProps:{value:t.options.angle},on:{__r:function(e){t.$set(t.options,"angle",t._n(e.target.value))},blur:function(e){return t.$forceUpdate()}}}),i("span",{staticClass:"range-slider__value"},[t._v(t._s(t.options.angle))])]),i("div",[i("label",{attrs:{for:"piecesWidth"}},[t._v("PiecesWidth")]),i("input",{directives:[{name:"model",rawName:"v-model.number",value:t.options.piecesWidth,expression:"options.piecesWidth",modifiers:{number:!0}}],attrs:{type:"range",name:"piecesWidth",min:0,max:200},domProps:{value:t.options.piecesWidth},on:{__r:function(e){t.$set(t.options,"piecesWidth",t._n(e.target.value))},blur:function(e){return t.$forceUpdate()}}}),i("span",{staticClass:"range-slider__value"},[t._v(t._s(t.options.piecesWidth))])]),i("div",[i("label",{attrs:{for:"ty"}},[t._v("Ty (startY)")]),i("input",{directives:[{name:"model",rawName:"v-model.number",value:t.options.ty,expression:"options.ty",modifiers:{number:!0}}],attrs:{type:"range",name:"ty",min:-300,max:300},domProps:{value:t.options.ty},on:{__r:function(e){t.$set(t.options,"ty",t._n(e.target.value))},blur:function(e){return t.$forceUpdate()}}}),i("span",{staticClass:"range-slider__value"},[t._v(t._s(t.options.ty))])]),i("div",[i("label",{attrs:{for:"piecesSpacing"}},[t._v("PiecesSpacing")]),i("input",{directives:[{name:"model",rawName:"v-model.number",value:t.options.piecesSpacing,expression:"options.piecesSpacing",modifiers:{number:!0}}],attrs:{type:"range",name:"piecesSpacing",min:0,max:100},domProps:{value:t.options.piecesSpacing},on:{__r:function(e){t.$set(t.options,"piecesSpacing",t._n(e.target.value))},blur:function(e){return t.$forceUpdate()}}}),i("span",{staticClass:"range-slider__value"},[t._v(t._s(t.options.piecesSpacing))])])]),i("Slider",{staticClass:"slider",attrs:{arrow:!0,options:t.options,list:t.list},on:{click:t.click},model:{value:t.activeIndex,callback:function(e){t.activeIndex=e},expression:"activeIndex"}})],1)},r=[],s=function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",t._g({staticClass:"pieces-slider vue-piece-slider"},t.$listeners),[t._l(t.list,function(e,n){return i("div",{key:n,staticClass:"pieces-slider__slide"},[i("img",{ref:t.getImgRef(n),refInFor:!0,staticClass:"pieces-slider__image",attrs:{src:e,alt:""}})])}),i("canvas",{staticClass:"pieces-slider__canvas"}),t.arrow?i("button",{staticClass:"pieces-slider__button pieces-slider__button--prev",on:{click:t.prevItem}},[t._v("«")]):t._e(),t.arrow?i("button",{staticClass:"pieces-slider__button pieces-slider__button--next",on:{click:t.nextItem}},[t._v("»")]):t._e()],2)},o=[],c=i("1209");function l(t){this.reset(t)}l.prototype={reset:function(t){this.m=[1,0,0,1,0,0],t&&this.apply(t)},rotate:function(t){var e=Math.cos(t),i=Math.sin(t),n=this.m[0]*e+this.m[2]*i,a=this.m[1]*e+this.m[3]*i,r=this.m[0]*-i+this.m[2]*e,s=this.m[1]*-i+this.m[3]*e;this.m[0]=n,this.m[1]=a,this.m[2]=r,this.m[3]=s},translate:function(t,e){this.m[4]+=this.m[0]*t+this.m[2]*e,this.m[5]+=this.m[1]*t+this.m[3]*e},transformPoint:function(t,e){var i=t*this.m[0]+e*this.m[2]+this.m[4],n=t*this.m[1]+e*this.m[3]+this.m[5];return[i,n]},apply:function(t){t.setTransform(this.m[0],this.m[1],this.m[2],this.m[3],this.m[4],this.m[5])}};var h=l;function u(t,e){return t.indexOf(e)>-1}var p={arr:function(t){return Array.isArray(t)},obj:function(t){return u(Object.prototype.toString.call(t),"Object")},str:function(t){return"string"===typeof t},fnc:function(t){return"function"===typeof t},und:function(t){return"undefined"===typeof t},num:function(t){return"number"===typeof t}};function d(t,e){for(var i in e)t[i]=p.arr(e[i])?e[i].slice(0):e[i];return t}function f(t,e){t||(t={});for(var i=1;i<arguments.length;i++)d(t,arguments[i]);return t}function g(t,e){t.push.apply(t,e)}function m(){var t=document.createElement("canvas"),e=t.getContext("2d");return{canvas:t,ctx:e}}function v(t,e){e.forEach(function(e){p.arr(t[e])||(t[e]=p.und(t[e])?[]:[t[e]])})}function x(t,e,i,n){var a;return i.forEach(function(i){a=t[i][e],p.und(a)||(n[i]=a)}),n}function y(t,e,i){return!i.some(function(i){return t[i]!==e[i]})}function b(t,e,i){i.forEach(function(i){return t[i]=e[i]})}function w(t){return t>=0?t%360:t%360+360}function _(t,e){return t&&e&&t.left<=e.right&&e.left<=t.right&&t.top<=e.bottom&&e.top<=t.bottom}function S(t,e,i,n,a,r){return n<2*r&&(r=n/2),a<2*r&&(r=a/2),t.beginPath(),t.moveTo(e+r,i),t.arcTo(e+n,i,e+n,i+a,r),t.arcTo(e+n,i+a,e,i+a,r),t.arcTo(e,i+a,e,i,r),t.arcTo(e,i,e+n,i,r),t.closePath(),t}function k(t){var e=f({},this.defaults.animation,t.animation);this.init(f({},this.defaults,t,{animation:e}))}k.prototype={defaults:{canvas:null,items:[],image:[],text:[],path:[],x:0,y:0,w:[0],h:[0],tx:[0],ty:[0],itemSeparation:1,piecesWidth:[5],piecesSpacing:[5],extraSpacing:[{extraX:0,extraY:0}],angle:[0],rotate:[0],translate:[{translateX:0,translateY:0}],padding:[0],opacity:[1],fontFamily:["sans-serif"],fontSize:[100],fontWeight:[900],color:["#000"],backgroundColor:!1,backgroundRadius:0,ghostOpacity:0,checkHover:!1,animation:{duration:[1e3],delay:[0],easing:["easeInOutCubic"]},saveShowState:!1,debug:!1,ready:null},init:function(t){var e=this;this.initOptions(t),this.initCanvas(t),t.items.length&&t.items.forEach(function(i){switch(e.setItemOptions(t,i.options),i.type){case"image":return e.initImage(i.value)}}),this.drawList.length&&(this.initPieces(t),this.loop(t)),t.ready&&t.ready()},initOptions:function(t){var e=t.canvas;p.str(e)&&(t.canvas=document.querySelector(e)),v(t,["items","image","text","path","w","h","tx","ty","piecesWidth","piecesSpacing","extraSpacing","angle","rotate","translate","svgWidth","svgHeight","color","backgroundColor","backgroundRadius","padding","opacity","fontFamily","fontSize","fontWeight","ghost","ghostOpacity"]),v(t.animation,["duration","delay","easing"]),this.v={},this.o=[],this.drawList=[]},initCanvas:function(t){t.canvas?t.ctx=t.canvas.getContext("2d"):f(t,m()),t.canvas.width=this.width=t.canvas.clientWidth,t.canvas.height=this.height=t.canvas.clientHeight},setItemOptions:function(t,e){var i=this.drawList.length;x(t,i,["text","color","backgroundColor","backgroundRadius","padding","fontFamily","fontSize","fontWeight","svgWidth","svgHeight","piecesWidth","piecesSpacing","extraSpacing","opacity","angle","rotate","translate","ghost","ghostOpacity","w","h","tx","ty"],this.v),x(t.animation,i,["duration","delay","easing"],this.v),this.o.push(f({},this.v,e||{}))},initImage:function(t){var e=this.o[this.o.length-1],i=p.fnc(e.padding)?e.padding():e.padding;i=i?i.split(" ").map(function(t){return parseFloat(t)}):[0,0,0,0];var n=m(),a=n.canvas,r=n.ctx;a.width=t.width+2+i[1]+i[3],a.height=t.height+2+i[0]+i[2],e.backgroundColor&&(r.fillStyle=e.backgroundColor,e.backgroundRadius?(S(r,1,1,a.width-2,a.height-2,e.backgroundRadius),r.fill()):r.fillRect(1,1,a.width-2,a.height-2)),r.drawImage(t,0,0,t.naturalWidth,t.naturalHeight,1+i[3],1+i[0],t.width,t.height),this.drawList.push(a)},initPieces:function(t){var e,i,n,a,r,s,o,c,l,u,d,f=this,g=new h;this.pieces=[],this.items=[];var v,x=t.itemSeparation;o="center"===t.x?this.width/2-(this.drawList.reduce(function(t,e){return t+e.width},0)+x*this.drawList.length)/2:t.x,l="center"===t.y?this.height/2-this.drawList[0].height/2:t.y,this.drawList.forEach(function(h,y){v=f.o[y];var b=p.obj(v.extraSpacing)?v.extraSpacing:{extraX:v.extraSpacing,extraY:v.extraSpacing},_=b.extraX,S=b.extraY,k=p.fnc(v.translate)?v.translate():p.obj(v.translate)?v.translate:{translateX:v.translate,translateY:v.translate},I=k.translateX,P=k.translateY;"centerAll"===t.x&&(o=f.width/2-h.width/2),"centerAll"===t.y&&(l=f.height/2-h.height/2),o+=I,l+=P,r={angle:null},a={last:r,index:y,y:l,extraY:S,img:h},a.x=c=o,a.width=h.width,a.height=h.height,a.angle=w(v.angle),a.rotate=w(v.rotate),a.ghost=v.ghost,a.ghostDashArray=[20,10],a.ghostDashOffset=a.ghostDashArray[0]+a.ghostDashArray[1],a.ghostOpacity=v.ghostOpacity,a.pieces=[],a.shown=!1,a.hidden=!0,f.items.push(a);var O=m(),j=O.ctx,M=O.canvas;M.width=a.width,M.height=a.height;while(c-(a.width+2*_)<a.x){e=p.fnc(v.piecesWidth)?v.piecesWidth():v.piecesWidth,i=a.height+2*S,n=p.fnc(v.piecesSpacing)?v.piecesSpacing():v.piecesSpacing,u=Math.min(p.fnc(v.w)?v.w():v.w,e),d=Math.min(p.fnc(v.h)?v.h():v.h,i),r={},s={last:r,item:a},s.h_x=s.x=r.x=c-_+e/2-u/2,s.s_x=c-_,s.h_y=s.y=r.y=l+a.height/2-d/2,s.s_y=l-S,s.h_w=s.w=r.w=u,s.s_w=e,s.h_h=s.h=r.h=d,s.s_h=i,s.h_tx=s.s_tx=s.tx=r.tx=p.fnc(v.tx)?v.tx():v.tx,s.h_ty=s.ty=r.ty=S+(p.fnc(v.ty)?v.ty():v.ty),s.s_ty=S,s.opacity=p.fnc(v.opacity)?v.opacity():v.opacity,s.duration=p.fnc(v.duration)?v.duration():v.duration,s.delay=p.fnc(v.delay)?v.delay():v.delay,s.easing=v.easing,a.pieces.push(s),f.pieces.push(s),c+=e+n,j.save(),g.translate(a.width/2,a.height/2),g.rotate(a.angle*Math.PI/180),g.translate(-a.width/2,-a.height/2),g.translate(s.s_tx,s.s_ty-a.extraY),g.translate(s.s_x+s.s_w/2-a.x,s.s_y+s.s_h/2-a.y),g.apply(j),j.beginPath(),j.rect(-s.s_w/2,-s.s_h/2,s.s_w,s.s_h),j.clip(),g.reset(j),j.globalAlpha=s.opacity;var Y=a.img.height/a.img.width;j.drawImage(a.img,(1-Y)/2,Y/2,a.img.width-(1-Y),a.img.height-Y),j.restore()}a.imgShown=M,a.rectShown={left:a.x,top:a.y,right:a.x+a.width,bottom:a.y+a.height},"centerAll"!==t.x&&(o+=h.width+x)})},renderPieces:function(t,e){var i,n,a=t.ctx,r=new h;e.redraw&&(e.redraw=!1,e.shown&&t.saveShowState?a.drawImage(e.imgShown,0,0,e.width,e.height,e.x,e.y,e.width,e.height):e.hidden||(i=w(e.angle),n=w(e.rotate),e.pieces.forEach(function(s){a.save(),r.translate(e.x,e.y),r.translate(e.width/2,e.height/2),r.rotate((i+n)*Math.PI/180),r.translate(-e.width/2,-e.height/2),r.translate(s.tx,s.ty-e.extraY),r.translate(s.x+s.w/2-e.x,s.y+s.h/2-e.y),r.apply(a),a.beginPath(),a.rect(-s.w/2,-s.h/2,s.w,s.h),t.debug?(a.setLineDash([]),a.strokeStyle="black",a.stroke()):a.clip(),r.translate(-(s.x+s.w/2-e.x),-(s.y+s.h/2-e.y)),r.translate(e.width/2,e.height/2),r.rotate(-i*Math.PI/180),r.translate(-e.width/2,-e.height/2),r.apply(a),a.globalAlpha=s.opacity;var o=e.img.height/e.img.width;a.drawImage(e.img,(1-o)/2,o/2,e.img.width-(1-o),e.img.height-o),r.reset(),a.restore()})))},isItemDifferent:function(t){return!y(t,t.last,["angle"])||t.pieces.some(function(t){return!y(t,t.last,["x","y","w","h","tx","ty"])})},isItemShown:function(t){return t.pieces.every(function(t){return t.x===t.s_x&&t.y===t.s_y&&t.w===t.s_w&&t.h===t.s_h&&t.tx===t.s_tx&&t.ty===t.s_ty})},isItemHidden:function(t){return t.pieces.every(function(t){return 0===t.w&&0===t.h})},clearRect:function(t){var e,i,n,a,r,s,o,c,l,u,p,d,f,g,m,v=this,x=new h,y=!1,S=null;this.items.forEach(function(t){g=w(t.angle),m=w(t.rotate),v.isItemDifferent(t)?(y=!0,f=null,t.redraw=!0,t.shown=v.isItemShown(t),t.hidden=v.isItemHidden(t),b(t.last,t,["angle"]),t.pieces.forEach(function(h){var y=h.last;x.translate(t.x,t.y),x.translate(t.width/2,t.height/2),x.rotate((g+m)*Math.PI/180),x.translate(-t.width/2,-t.height/2),x.translate(y.tx,y.ty-t.extraY),x.translate(y.x+y.w/2-t.x,y.y+y.h/2-t.y),e=-y.w/2-1,i=-y.h/2-1,n=y.w+2,a=y.h+2,r=x.transformPoint(e,i),s=x.transformPoint(e+n,i),o=x.transformPoint(e+n,i+a),c=x.transformPoint(e,i+a),l=Math.min(r[0],s[0],o[0],c[0]),u=Math.min(r[1],s[1],o[1],c[1]),p=Math.max(r[0],s[0],o[0],c[0]),d=Math.max(r[1],s[1],o[1],c[1]),f=v.extendRect(f,{left:l,top:u,right:p,bottom:d}),x.reset(),b(y,h,["x","y","w","h","tx","ty"])}),S=v.extendRect(S,f),t.rect=t.shown?t.rectShown:f):t.redraw=!1,t.hidden&&t.ghost&&(y=!0,S=v.extendRect(S,t.rectShown))});while(y)y=!1,this.items.forEach(function(t){!t.redraw&&_(S,t.rect)&&(y=!0,t.redraw=!0,S=v.extendRect(S,t.rect))});S&&(t.ctx.clearRect(S.left,S.top,S.right-S.left,S.bottom-S.top),t.debug&&(t.ctx.setLineDash([10]),t.ctx.strokeStyle="rgba(255, 0, 0, 1)",t.ctx.strokeRect(S.left,S.top,S.right-S.left,S.bottom-S.top)))},extendRect:function(t,e){return t&&e?{left:Math.max(0,Math.min(t.left,e.left)),top:Math.max(0,Math.min(t.top,e.top)),right:Math.min(this.width,Math.max(t.right,e.right)),bottom:Math.min(this.height,Math.max(t.bottom,e.bottom))}:e},checkHover:function(t,e){var i=this.mouseX>=e.x&&this.mouseX<=e.x+e.width&&this.mouseY>=e.y&&this.mouseY<=e.y+e.height;return i&&!e.hover?p.fnc(t.itemEnter)&&t.itemEnter(e):!i&&e.hover&&p.fnc(t.itemLeave)&&t.itemLeave(e),e.hover=i,i},renderDebug:function(t,e){if(t.debug){t.checkHover&&(t.ctx.fillStyle=e.hover?"rgba(255, 0, 0, 0.3)":"rgba(0, 0, 0, 0.3)",t.ctx.fillRect(e.x,e.y,e.width,e.height));var i=e.rect;i&&(t.ctx.setLineDash([]),t.ctx.strokeStyle="rgba(255, 0, 0, 0.5)",t.ctx.strokeRect(i.left,i.top,i.right-i.left,i.bottom-i.top))}},loop:function(t){var e=this;this.frame=requestAnimationFrame(this.loop.bind(this,t)),this.clearRect(t),this.hoverItem=null,this.items.forEach(function(i){t.checkHover&&e.checkHover(t,i)&&(e.hoverItem=i),e.renderPieces(t,i),e.renderDebug(t,i)})},stop:function(){cancelAnimationFrame(this.frame),c["a"].remove(this.items),c["a"].remove(this.pieces)},getPieces:function(t){var e=this,i=[];return p.und(t)?i=this.pieces:p.num(t)?i=this.items[t].pieces:p.arr(t)?t.forEach(function(t){return p.num(t)?g(i,e.items[t].pieces):g(i,t.pieces)}):i=t.pieces,i},getItems:function(t){var e=this,i=[];return p.und(t)?i=this.items:p.num(t)?i=this.items[t]:p.arr(t)?t.forEach(function(t){return p.num(t)?i.push(e.items[t]):i.push(t)}):i=t,i},animatePieces:function(t){var e=f({duration:function(t){return t.duration},delay:function(t){return t.delay},easing:function(t){return t.easing},remove:!0,singly:!1},t),i=this.getPieces(t.items);e.remove&&c["a"].remove(i),e.ignore&&e.ignore.forEach(function(t){return delete e[t]}),e.singly?i.forEach(function(t){return Object(c["a"])(f(e,{targets:t}))}):Object(c["a"])(f(e,{targets:i}))},showPieces:function(t){var e=f({x:function(t){return t.s_x},y:function(t){return t.s_y},w:function(t){return t.s_w},h:function(t){return t.s_h},tx:function(t){return t.s_tx},ty:function(t){return t.s_ty}},t);this.animatePieces(e)},hidePieces:function(t){var e=f({x:function(t){return t.h_x},y:function(t){return t.h_y},w:function(t){return t.h_w},h:function(t){return t.h_h},tx:function(t){return t.h_tx},ty:function(t){return t.h_ty}},t);this.animatePieces(e)},animateItems:function(t){var e=f({easing:"linear",remove:!0},t,{targets:this.getItems(t.items)});e.remove&&c["a"].remove(e.targets),Object(c["a"])(e)}},k.random=c["a"].random;var I=k;function P(t){for(var e=1;e<arguments.length;e++){var i=null!=arguments[e]?arguments[e]:{},n=Object.keys(i);"function"===typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(i).filter(function(t){return Object.getOwnPropertyDescriptor(i,t).enumerable}))),n.forEach(function(e){O(t,e,i[e])})}return t}function O(t,e,i){return e in t?Object.defineProperty(t,e,{value:i,enumerable:!0,configurable:!0,writable:!0}):t[e]=i,t}var j={angle:45,extraSpacing:{extraX:500,extraY:200},piecesWidth:function(){return I.random(50,200)},ty:function(){return I.random(-400,400)}},M={props:{list:{type:Array,default:function(){return[]}},value:{type:[String,Number],default:0},options:{type:Object,default:function(){return{}}},arrow:{type:Boolean,default:!0}},data:function(){return{}},methods:{initVar:function(){this.items=[],this.imagesReady=0,this.piecesSlider=null},getImgRef:function(t){var e="imgRef_".concat(t);return e},loadImg:function(){for(var t=this,e=this.list.length,i=0;i<e;i++){var n=new Image;n.onload=function(){++t.imagesReady==e&&t.initSlider()},this.items.push({type:"image",value:this.$refs[this.getImgRef(i)][0],options:P({},j,this.options)}),n.src=this.list[i]}},initSlider:function(){this.piecesSlider&&this.piecesSlider.stop(),this.piecesSlider=new I(P({},{canvas:".vue-piece-slider .pieces-slider__canvas",items:this.items,x:"centerAll",y:"centerAll",piecesSpacing:4,animation:{duration:function(){return I.random(1e3,2e3)},easing:"easeOutQuint"}},this.options)),this.showItems()},showItems:function(){this.piecesSlider.showPieces({items:this.value,ignore:["tx"],singly:!0,update:function(t){if(t.progress>60){var e=t.animatables[0].target,i=e.ty;c["a"].remove(e),Object(c["a"])({targets:e,ty:e.h_ty<300?[{value:i+10,duration:1e3},{value:i-10,duration:2e3},{value:i,duration:1e3}]:[{value:i-10,duration:1e3},{value:i+10,duration:2e3},{value:i,duration:1e3}],duration:2e3,easing:"linear",loop:!0})}}})},hideItems:function(){this.piecesSlider&&this.piecesSlider.hidePieces({items:[this.value]})},prevItem:function(){if(this.piecesSlider){this.hideItems();var t=this.value>0?this.value-1:this.list.length-1;this.$emit("input",t)}},nextItem:function(){if(this.piecesSlider){this.hideItems();var t=this.value<this.list.length-1?this.value+1:0;this.$emit("input",t)}},init:function(){this.initVar(),this.loadImg()}},watch:{value:function(){this.showItems()},options:{handler:function(){this.hideItems(),this.init()},deep:!0}},mounted:function(){this.init()}},Y=M,C=(i("1368"),i("2877")),R=Object(C["a"])(Y,s,o,!1,null,null,null),W=R.exports,E={name:"app",data:function(){return{activeIndex:0,list:["./img/1.jpg","./img/2.jpg","./img/3.jpg","./img/4.jpg","./img/5.jpg"],options:{angle:30,extraSpacing:{extraX:1,extraY:-20},piecesWidth:100,ty:200,piecesSpacing:1,animation:{duration:2e3,easing:"easeOutQuint"}}}},components:{Slider:W},methods:{click:function(){console.info("object")}}},$=E,A=(i("5c0b"),Object(C["a"])($,a,r,!1,null,null,null)),X=A.exports;n["a"].config.productionTip=!1,new n["a"]({render:function(t){return t(X)}}).$mount("#app")},"5c0b":function(t,e,i){"use strict";var n=i("e959"),a=i.n(n);a.a},"63e9":function(t,e,i){e=t.exports=i("2350")(!1),e.push([t.i,".vue-piece-slider{position:relative;text-align:center;padding:0;width:100%;height:400px}.vue-piece-slider,.vue-piece-slider:hover .pieces-slider__button{display:inline-block}.vue-piece-slider .pieces-slider__slide{position:absolute;right:100%}.vue-piece-slider .pieces-slider__slide .pieces-slider__image{max-width:400px;max-height:200px;display:none}.vue-piece-slider .pieces-slider__canvas{position:relative;width:100%;height:100%;-webkit-transition:opacity .2s;transition:opacity .2s}.vue-piece-slider .pieces-slider__canvas--hidden{opacity:0;-webkit-transition-duration:.3s;transition-duration:.3s}.vue-piece-slider .pieces-slider__button{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:none;position:absolute;left:0;top:50%;border:none;outline:0;padding:0;margin:0;width:36px;height:36px;background-color:rgba(31,45,61,.11);color:#fff;text-align:center;border-radius:50%;font-size:1.5em;font-weight:700;cursor:pointer;-webkit-transition:background-color .1s;transition:background-color .1s;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.vue-piece-slider .pieces-slider__button--next{left:auto;right:0}",""])},a33e:function(t,e,i){e=t.exports=i("2350")(!1),e.push([t.i,'#app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:#2c3e50}#app .slider{width:400px;height:200px}#app .toolbox{margin-right:100px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}#app .toolbox>div{margin:20px}#app .toolbox>div label{margin-right:10px;font-weight:700;color:#fff;font-size:1em;padding:.75em}#app .toolbox>div input{vertical-align:middle}#app .toolbox>div .range-slider__value{display:inline-block;position:relative;width:60px;color:#fff;line-height:20px;text-align:center;border-radius:3px;background:#2c3e50;padding:5px 10px;margin-left:8px}#app .toolbox>div .range-slider__value:after{position:absolute;top:50%;left:-6px;width:0;-webkit-transform:translateY(-50%);transform:translateY(-50%);height:0;font-weight:700;border-top:6px solid transparent;border-right:6px solid #2c3e50;border-bottom:6px solid transparent;content:""}',""])},e959:function(t,e,i){var n=i("a33e");"string"===typeof n&&(n=[[t.i,n,""]]),n.locals&&(t.exports=n.locals);var a=i("499e").default;a("6f19147e",n,!0,{sourceMap:!1,shadowMode:!1})}});
2 | //# sourceMappingURL=app.2cc094ac.js.map


--------------------------------------------------------------------------------
/docs/js/app.2cc094ac.js.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sources":["webpack:///webpack/bootstrap","webpack:///./src/index.vue?c364","webpack:///./src/index.vue?5c34","webpack:///./src/App.vue?c509","webpack:///./src/index.vue?9e5a","webpack:///./src/piece/transform.js","webpack:///./src/piece/index.js","webpack:///src/index.vue","webpack:///./src/index.vue?aff9","webpack:///./src/index.vue","webpack:///src/App.vue","webpack:///./src/App.vue?1160","webpack:///./src/App.vue","webpack:///./src/main.js","webpack:///./src/App.vue?792d","webpack:///./src/index.vue?556c","webpack:///./src/App.vue?90ba","webpack:///./src/App.vue?29c9"],"names":["webpackJsonpCallback","data","moduleId","chunkId","chunkIds","moreModules","executeModules","i","resolves","length","installedChunks","push","Object","prototype","hasOwnProperty","call","modules","parentJsonpFunction","shift","deferredModules","apply","checkDeferredModules","result","deferredModule","fulfilled","j","depId","splice","__webpack_require__","s","installedModules","app","exports","module","l","m","c","d","name","getter","o","defineProperty","enumerable","get","r","Symbol","toStringTag","value","t","mode","__esModule","ns","create","key","bind","n","object","property","p","jsonpArray","window","oldJsonpFunction","slice","_node_modules_vue_style_loader_index_js_ref_8_oneOf_1_0_node_modules_css_loader_index_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_3_node_modules_sass_loader_lib_loader_js_ref_8_oneOf_1_4_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_index_vue_vue_type_style_index_0_lang_scss___WEBPACK_IMPORTED_MODULE_0__","_node_modules_vue_style_loader_index_js_ref_8_oneOf_1_0_node_modules_css_loader_index_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_3_node_modules_sass_loader_lib_loader_js_ref_8_oneOf_1_4_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_index_vue_vue_type_style_index_0_lang_scss___WEBPACK_IMPORTED_MODULE_0___default","content","locals","add","default","sourceMap","shadowMode","Appvue_type_template_id_de737d04_render","_vm","this","_h","$createElement","_c","_self","staticClass","attrs","id","for","_v","directives","rawName","options","extraSpacing","expression","modifiers","number","type","min","max","domProps","on","__r","$event","$set","_n","target","blur","$forceUpdate","_s","extraX","extraY","angle","piecesWidth","ty","piecesSpacing","arrow","list","click","model","callback","$$v","activeIndex","staticRenderFns","lib_vue_loader_options_srcvue_type_template_id_63231486_render","_g","$listeners","_l","v","ref","getImgRef","refInFor","src","alt","prevItem","_e","nextItem","lib_vue_loader_options_srcvue_type_template_id_63231486_staticRenderFns","Transform","ctx","reset","rotate","rad","Math","cos","sin","m11","m12","m21","m22","translate","x","y","transformPoint","px","py","setTransform","stringContains","str","text","indexOf","is","arr","a","Array","isArray","obj","toString","fnc","und","num","extendSingle","source","extend","arguments","pushArray","arr2","createCanvas","canvas","document","createElement","getContext","toArray","keys","forEach","setValuesByIndex","index","values","areObjectsEquals","obj1","obj2","some","copyValues","to","from","normalizeAngle","intersect","b","left","right","top","bottom","roundRect","w","h","beginPath","moveTo","arcTo","closePath","Pieces","animation","defaults","init","items","image","path","tx","itemSeparation","translateX","translateY","padding","opacity","fontFamily","fontSize","fontWeight","color","backgroundColor","backgroundRadius","ghostOpacity","checkHover","duration","delay","easing","saveShowState","debug","ready","_this","initOptions","initCanvas","item","setItemOptions","initImage","drawList","initPieces","loop","querySelector","width","clientWidth","height","clientHeight","itemOptions","split","map","parseFloat","_createCanvas","fillStyle","fill","fillRect","drawImage","naturalWidth","naturalHeight","piecesHeight","last","lx","_this2","pieces","reduce","img","_ref","_ref2","ghost","ghostDashArray","ghostDashOffset","shown","hidden","_createCanvas2","h_x","s_x","h_y","s_y","h_w","s_w","h_h","s_h","h_tx","s_tx","h_ty","s_ty","save","PI","rect","clip","globalAlpha","ratio","restore","imgShown","rectShown","renderPieces","redraw","setLineDash","strokeStyle","stroke","isItemDifferent","isItemShown","every","isItemHidden","clearRect","p1","p2","p3","p4","itemRect","_this3","newRedraw","clear","extendRect","strokeRect","rect1","rect2","hover","mouseX","mouseY","itemEnter","itemLeave","renderDebug","_this4","frame","requestAnimationFrame","hoverItem","stop","cancelAnimationFrame","anime","remove","getPieces","_this5","targetPieces","getItems","_this6","targetItems","animatePieces","singly","targets","ignore","prop","showPieces","hidePieces","animateItems","random","imageOptions","src_piece","lib_vue_loader_options_srcvue_type_script_lang_js_","props","String","Number","Boolean","methods","initVar","imagesReady","piecesSlider","refName","concat","loadImg","slidesNum","slideImage","Image","onload","initSlider","$refs","_objectSpread","showItems","update","anim","progress","piece","animatables","anime_es","hideItems","currentIndex","$emit","watch","handler","deep","mounted","srcvue_type_script_lang_js_","component","componentNormalizer","Appvue_type_script_lang_js_","components","Slider","console","info","src_Appvue_type_script_lang_js_","App_component","App","Vue","config","productionTip","render","$mount","_node_modules_vue_style_loader_index_js_ref_8_oneOf_1_0_node_modules_css_loader_index_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_3_node_modules_sass_loader_lib_loader_js_ref_8_oneOf_1_4_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_App_vue_vue_type_style_index_0_lang_scss___WEBPACK_IMPORTED_MODULE_0__","_node_modules_vue_style_loader_index_js_ref_8_oneOf_1_0_node_modules_css_loader_index_js_ref_8_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_2_node_modules_postcss_loader_src_index_js_ref_8_oneOf_1_3_node_modules_sass_loader_lib_loader_js_ref_8_oneOf_1_4_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_App_vue_vue_type_style_index_0_lang_scss___WEBPACK_IMPORTED_MODULE_0___default"],"mappings":"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","file":"js/app.2cc094ac.js","sourcesContent":[" \t// install a JSONP callback for chunk loading\n \tfunction webpackJsonpCallback(data) {\n \t\tvar chunkIds = data[0];\n \t\tvar moreModules = data[1];\n \t\tvar executeModules = data[2];\n\n \t\t// add \"moreModules\" to the modules object,\n \t\t// then flag all \"chunkIds\" as loaded and fire callback\n \t\tvar moduleId, chunkId, i = 0, resolves = [];\n \t\tfor(;i < chunkIds.length; i++) {\n \t\t\tchunkId = chunkIds[i];\n \t\t\tif(installedChunks[chunkId]) {\n \t\t\t\tresolves.push(installedChunks[chunkId][0]);\n \t\t\t}\n \t\t\tinstalledChunks[chunkId] = 0;\n \t\t}\n \t\tfor(moduleId in moreModules) {\n \t\t\tif(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {\n \t\t\t\tmodules[moduleId] = moreModules[moduleId];\n \t\t\t}\n \t\t}\n \t\tif(parentJsonpFunction) parentJsonpFunction(data);\n\n \t\twhile(resolves.length) {\n \t\t\tresolves.shift()();\n \t\t}\n\n \t\t// add entry modules from loaded chunk to deferred list\n \t\tdeferredModules.push.apply(deferredModules, executeModules || []);\n\n \t\t// run deferred modules when all chunks ready\n \t\treturn checkDeferredModules();\n \t};\n \tfunction checkDeferredModules() {\n \t\tvar result;\n \t\tfor(var i = 0; i < deferredModules.length; i++) {\n \t\t\tvar deferredModule = deferredModules[i];\n \t\t\tvar fulfilled = true;\n \t\t\tfor(var j = 1; j < deferredModule.length; j++) {\n \t\t\t\tvar depId = deferredModule[j];\n \t\t\t\tif(installedChunks[depId] !== 0) fulfilled = false;\n \t\t\t}\n \t\t\tif(fulfilled) {\n \t\t\t\tdeferredModules.splice(i--, 1);\n \t\t\t\tresult = __webpack_require__(__webpack_require__.s = deferredModule[0]);\n \t\t\t}\n \t\t}\n \t\treturn result;\n \t}\n\n \t// The module cache\n \tvar installedModules = {};\n\n \t// object to store loaded and loading chunks\n \t// undefined = chunk not loaded, null = chunk preloaded/prefetched\n \t// Promise = chunk loading, 0 = chunk loaded\n \tvar installedChunks = {\n \t\t\"app\": 0\n \t};\n\n \tvar deferredModules = [];\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n \t\t}\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// create a fake namespace object\n \t// mode & 1: value is a module id, require it\n \t// mode & 2: merge all properties of value into the ns\n \t// mode & 4: return value when already ns object\n \t// mode & 8|1: behave like require\n \t__webpack_require__.t = function(value, mode) {\n \t\tif(mode & 1) value = __webpack_require__(value);\n \t\tif(mode & 8) return value;\n \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n \t\tvar ns = Object.create(null);\n \t\t__webpack_require__.r(ns);\n \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n \t\treturn ns;\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"/vue-piece-slider/\";\n\n \tvar jsonpArray = window[\"webpackJsonp\"] = window[\"webpackJsonp\"] || [];\n \tvar oldJsonpFunction = jsonpArray.push.bind(jsonpArray);\n \tjsonpArray.push = webpackJsonpCallback;\n \tjsonpArray = jsonpArray.slice();\n \tfor(var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]);\n \tvar parentJsonpFunction = oldJsonpFunction;\n\n\n \t// add entry module to deferred list\n \tdeferredModules.push([0,\"chunk-vendors\"]);\n \t// run deferred modules when ready\n \treturn checkDeferredModules();\n","import mod from \"-!../node_modules/vue-style-loader/index.js??ref--8-oneOf-1-0!../node_modules/css-loader/index.js??ref--8-oneOf-1-1!../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-3!../node_modules/sass-loader/lib/loader.js??ref--8-oneOf-1-4!../node_modules/cache-loader/dist/cjs.js??ref--0-0!../node_modules/vue-loader/lib/index.js??vue-loader-options!./index.vue?vue&type=style&index=0&lang=scss&\"; export default mod; export * from \"-!../node_modules/vue-style-loader/index.js??ref--8-oneOf-1-0!../node_modules/css-loader/index.js??ref--8-oneOf-1-1!../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-3!../node_modules/sass-loader/lib/loader.js??ref--8-oneOf-1-4!../node_modules/cache-loader/dist/cjs.js??ref--0-0!../node_modules/vue-loader/lib/index.js??vue-loader-options!./index.vue?vue&type=style&index=0&lang=scss&\"","// style-loader: Adds some css to the DOM by adding a <style> tag\n\n// load the styles\nvar content = require(\"!!../node_modules/css-loader/index.js??ref--8-oneOf-1-1!../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-3!../node_modules/sass-loader/lib/loader.js??ref--8-oneOf-1-4!../node_modules/cache-loader/dist/cjs.js??ref--0-0!../node_modules/vue-loader/lib/index.js??vue-loader-options!./index.vue?vue&type=style&index=0&lang=scss&\");\nif(typeof content === 'string') content = [[module.id, content, '']];\nif(content.locals) module.exports = content.locals;\n// add the styles to the DOM\nvar add = require(\"!../node_modules/vue-style-loader/lib/addStylesClient.js\").default\nvar update = add(\"7f2c023a\", content, true, {\"sourceMap\":false,\"shadowMode\":false});","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"content\",attrs:{\"id\":\"app\"}},[_c('div',{staticClass:\"toolbox\"},[_c('div',[_c('label',{attrs:{\"for\":\"extraX\"}},[_vm._v(\"ExtraX\")]),_c('input',{directives:[{name:\"model\",rawName:\"v-model.number\",value:(_vm.options.extraSpacing.extraX),expression:\"options.extraSpacing.extraX\",modifiers:{\"number\":true}}],attrs:{\"type\":\"range\",\"name\":\"extraX\",\"min\":-500,\"max\":500},domProps:{\"value\":(_vm.options.extraSpacing.extraX)},on:{\"__r\":function($event){_vm.$set(_vm.options.extraSpacing, \"extraX\", _vm._n($event.target.value))},\"blur\":function($event){return _vm.$forceUpdate()}}}),_c('span',{staticClass:\"range-slider__value\"},[_vm._v(\"\\n        \"+_vm._s(_vm.options.extraSpacing.extraX)+\"\\n      \")])]),_c('div',[_c('label',{attrs:{\"for\":\"extraY\"}},[_vm._v(\"ExtraY\")]),_c('input',{directives:[{name:\"model\",rawName:\"v-model.number\",value:(_vm.options.extraSpacing.extraY),expression:\"options.extraSpacing.extraY\",modifiers:{\"number\":true}}],attrs:{\"type\":\"range\",\"name\":\"extraY\",\"min\":-500,\"max\":500},domProps:{\"value\":(_vm.options.extraSpacing.extraY)},on:{\"__r\":function($event){_vm.$set(_vm.options.extraSpacing, \"extraY\", _vm._n($event.target.value))},\"blur\":function($event){return _vm.$forceUpdate()}}}),_c('span',{staticClass:\"range-slider__value\"},[_vm._v(\"\\n        \"+_vm._s(_vm.options.extraSpacing.extraY)+\"\\n      \")])]),_c('div',[_c('label',{attrs:{\"for\":\"angle\"}},[_vm._v(\"Angle\")]),_c('input',{directives:[{name:\"model\",rawName:\"v-model.number\",value:(_vm.options.angle),expression:\"options.angle\",modifiers:{\"number\":true}}],attrs:{\"type\":\"range\",\"name\":\"angle\",\"min\":0,\"max\":360},domProps:{\"value\":(_vm.options.angle)},on:{\"__r\":function($event){_vm.$set(_vm.options, \"angle\", _vm._n($event.target.value))},\"blur\":function($event){return _vm.$forceUpdate()}}}),_c('span',{staticClass:\"range-slider__value\"},[_vm._v(_vm._s(_vm.options.angle))])]),_c('div',[_c('label',{attrs:{\"for\":\"piecesWidth\"}},[_vm._v(\"PiecesWidth\")]),_c('input',{directives:[{name:\"model\",rawName:\"v-model.number\",value:(_vm.options.piecesWidth),expression:\"options.piecesWidth\",modifiers:{\"number\":true}}],attrs:{\"type\":\"range\",\"name\":\"piecesWidth\",\"min\":0,\"max\":200},domProps:{\"value\":(_vm.options.piecesWidth)},on:{\"__r\":function($event){_vm.$set(_vm.options, \"piecesWidth\", _vm._n($event.target.value))},\"blur\":function($event){return _vm.$forceUpdate()}}}),_c('span',{staticClass:\"range-slider__value\"},[_vm._v(_vm._s(_vm.options.piecesWidth))])]),_c('div',[_c('label',{attrs:{\"for\":\"ty\"}},[_vm._v(\"Ty (startY)\")]),_c('input',{directives:[{name:\"model\",rawName:\"v-model.number\",value:(_vm.options.ty),expression:\"options.ty\",modifiers:{\"number\":true}}],attrs:{\"type\":\"range\",\"name\":\"ty\",\"min\":-300,\"max\":300},domProps:{\"value\":(_vm.options.ty)},on:{\"__r\":function($event){_vm.$set(_vm.options, \"ty\", _vm._n($event.target.value))},\"blur\":function($event){return _vm.$forceUpdate()}}}),_c('span',{staticClass:\"range-slider__value\"},[_vm._v(_vm._s(_vm.options.ty))])]),_c('div',[_c('label',{attrs:{\"for\":\"piecesSpacing\"}},[_vm._v(\"PiecesSpacing\")]),_c('input',{directives:[{name:\"model\",rawName:\"v-model.number\",value:(_vm.options.piecesSpacing),expression:\"options.piecesSpacing\",modifiers:{\"number\":true}}],attrs:{\"type\":\"range\",\"name\":\"piecesSpacing\",\"min\":0,\"max\":100},domProps:{\"value\":(_vm.options.piecesSpacing)},on:{\"__r\":function($event){_vm.$set(_vm.options, \"piecesSpacing\", _vm._n($event.target.value))},\"blur\":function($event){return _vm.$forceUpdate()}}}),_c('span',{staticClass:\"range-slider__value\"},[_vm._v(_vm._s(_vm.options.piecesSpacing))])])]),_c('Slider',{staticClass:\"slider\",attrs:{\"arrow\":true,\"options\":_vm.options,\"list\":_vm.list},on:{\"click\":_vm.click},model:{value:(_vm.activeIndex),callback:function ($$v) {_vm.activeIndex=$$v},expression:\"activeIndex\"}})],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',_vm._g({staticClass:\"pieces-slider vue-piece-slider\"},_vm.$listeners),[_vm._l((_vm.list),function(v,i){return _c('div',{key:i,staticClass:\"pieces-slider__slide\"},[_c('img',{ref:_vm.getImgRef(i),refInFor:true,staticClass:\"pieces-slider__image\",attrs:{\"src\":v,\"alt\":\"\"}})])}),_c('canvas',{staticClass:\"pieces-slider__canvas\"}),(_vm.arrow)?_c('button',{staticClass:\"pieces-slider__button pieces-slider__button--prev\",on:{\"click\":_vm.prevItem}},[_vm._v(\"«\")]):_vm._e(),(_vm.arrow)?_c('button',{staticClass:\"pieces-slider__button pieces-slider__button--next\",on:{\"click\":_vm.nextItem}},[_vm._v(\"»\")]):_vm._e()],2)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","// Adapted version of transform.js by Simon Sarris from here:\n// https://github.com/simonsarris/Canvas-tutorials/blob/master/transform.js\n\nfunction Transform(ctx) {\n  this.reset(ctx);\n}\n\nTransform.prototype = {\n  reset(ctx) {\n    this.m = [1, 0, 0, 1, 0, 0];\n    if (ctx) this.apply(ctx);\n  },\n\n  rotate(rad) {\n    const c = Math.cos(rad);\n    const s = Math.sin(rad);\n    const m11 = this.m[0] * c + this.m[2] * s;\n    const m12 = this.m[1] * c + this.m[3] * s;\n    const m21 = this.m[0] * -s + this.m[2] * c;\n    const m22 = this.m[1] * -s + this.m[3] * c;\n    this.m[0] = m11;\n    this.m[1] = m12;\n    this.m[2] = m21;\n    this.m[3] = m22;\n  },\n\n  translate(x, y) {\n    this.m[4] += this.m[0] * x + this.m[2] * y;\n    this.m[5] += this.m[1] * x + this.m[3] * y;\n  },\n\n  transformPoint(px, py) {\n    const x = px * this.m[0] + py * this.m[2] + this.m[4];\n    const y = px * this.m[1] + py * this.m[3] + this.m[5];\n    return [x, y];\n  },\n\n  apply(ctx) {\n    ctx.setTransform(\n      this.m[0],\n      this.m[1],\n      this.m[2],\n      this.m[3],\n      this.m[4],\n      this.m[5]\n    );\n  }\n};\n\nexport default Transform;\n","import Transform from \"./transform\";\nimport anime from \"animejs\";\n// Utils\n\nfunction stringContains(str, text) {\n  return str.indexOf(text) > -1;\n}\n\nconst is = {\n  arr: a => Array.isArray(a),\n  obj: a => stringContains(Object.prototype.toString.call(a), \"Object\"),\n  str: a => typeof a === \"string\",\n  fnc: a => typeof a === \"function\",\n  und: a => typeof a === \"undefined\",\n  num: a => typeof a === \"number\"\n};\n\nfunction extendSingle(target, source) {\n  for (let key in source)\n    target[key] = is.arr(source[key]) ? source[key].slice(0) : source[key];\n  return target;\n}\n\n// eslint-disable-next-line no-unused-vars\nfunction extend(target, source) {\n  if (!target) target = {};\n  for (let i = 1; i < arguments.length; i++) extendSingle(target, arguments[i]);\n  return target;\n}\n\nfunction pushArray(arr, arr2) {\n  arr.push.apply(arr, arr2);\n}\n\nfunction createCanvas() {\n  const canvas = document.createElement(\"canvas\");\n  const ctx = canvas.getContext(\"2d\");\n  return { canvas, ctx };\n}\n\nfunction toArray(obj, keys) {\n  keys.forEach(key => {\n    if (!is.arr(obj[key])) obj[key] = is.und(obj[key]) ? [] : [obj[key]];\n  });\n}\n\nfunction setValuesByIndex(obj, index, keys, values) {\n  let value;\n  keys.forEach(key => {\n    value = obj[key][index];\n    if (!is.und(value)) {\n      values[key] = value;\n    }\n  });\n  return values;\n}\n\nfunction areObjectsEquals(obj1, obj2, keys) {\n  return !keys.some(key => obj1[key] !== obj2[key]);\n}\n\nfunction copyValues(to, from, keys) {\n  keys.forEach(key => (to[key] = from[key]));\n}\n\nfunction normalizeAngle(angle) {\n  return angle >= 0 ? angle % 360 : (angle % 360) + 360;\n}\n\nfunction intersect(a, b) {\n  return (\n    a &&\n    b &&\n    a.left <= b.right &&\n    b.left <= a.right &&\n    a.top <= b.bottom &&\n    b.top <= a.bottom\n  );\n}\n\n// https://stackoverflow.com/a/7838871/4908989\nfunction roundRect(ctx, x, y, w, h, r) {\n  if (w < 2 * r) r = w / 2;\n  if (h < 2 * r) r = h / 2;\n  ctx.beginPath();\n  ctx.moveTo(x + r, y);\n  ctx.arcTo(x + w, y, x + w, y + h, r);\n  ctx.arcTo(x + w, y + h, x, y + h, r);\n  ctx.arcTo(x, y + h, x, y, r);\n  ctx.arcTo(x, y, x + w, y, r);\n  ctx.closePath();\n  return ctx;\n}\n\n// Pieces\n\nfunction Pieces(options) {\n  const animation = extend({}, this.defaults.animation, options.animation);\n  this.init(extend({}, this.defaults, options, { animation }));\n}\n\nPieces.prototype = {\n  defaults: {\n    canvas: null,\n    items: [],\n    image: [],\n    text: [],\n    path: [],\n    x: 0,\n    y: 0,\n    w: [0],\n    h: [0],\n    tx: [0],\n    ty: [0],\n    itemSeparation: 1,\n    piecesWidth: [5],\n    piecesSpacing: [5],\n    extraSpacing: [{ extraX: 0, extraY: 0 }],\n    angle: [0],\n    rotate: [0],\n    translate: [{ translateX: 0, translateY: 0 }],\n    padding: [0],\n    opacity: [1],\n    fontFamily: [\"sans-serif\"],\n    fontSize: [100],\n    fontWeight: [900],\n    color: [\"#000\"],\n    backgroundColor: false,\n    backgroundRadius: 0,\n    ghostOpacity: 0,\n    checkHover: false,\n    animation: { duration: [1000], delay: [0], easing: [\"easeInOutCubic\"] },\n    saveShowState: false,\n    debug: false,\n    ready: null\n  },\n\n  init(options) {\n    this.initOptions(options);\n    this.initCanvas(options);\n    // this.initEvents(options);\n    if (options.items.length) {\n      options.items.forEach(item => {\n        this.setItemOptions(options, item.options);\n        switch (item.type) {\n          case \"image\":\n            return this.initImage(item.value);\n        }\n      });\n    }\n\n    if (this.drawList.length) {\n      this.initPieces(options);\n      this.loop(options);\n    }\n    if (options.ready) {\n      options.ready();\n    }\n  },\n\n  initOptions(options) {\n    const { canvas } = options;\n    if (is.str(canvas)) options.canvas = document.querySelector(canvas);\n    toArray(options, [\n      \"items\",\n      \"image\",\n      \"text\",\n      \"path\",\n      \"w\",\n      \"h\",\n      \"tx\",\n      \"ty\",\n      \"piecesWidth\",\n      \"piecesSpacing\",\n      \"extraSpacing\",\n      \"angle\",\n      \"rotate\",\n      \"translate\",\n      \"svgWidth\",\n      \"svgHeight\",\n      \"color\",\n      \"backgroundColor\",\n      \"backgroundRadius\",\n      \"padding\",\n      \"opacity\",\n      \"fontFamily\",\n      \"fontSize\",\n      \"fontWeight\",\n      \"ghost\",\n      \"ghostOpacity\"\n    ]);\n    toArray(options.animation, [\"duration\", \"delay\", \"easing\"]);\n    this.v = {};\n    this.o = [];\n    this.drawList = [];\n  },\n\n  initCanvas(options) {\n    if (options.canvas) {\n      options.ctx = options.canvas.getContext(\"2d\");\n    } else {\n      extend(options, createCanvas());\n    }\n    options.canvas.width = this.width = options.canvas.clientWidth;\n    options.canvas.height = this.height = options.canvas.clientHeight;\n  },\n\n  setItemOptions(options, itemOptions) {\n    const index = this.drawList.length;\n    setValuesByIndex(\n      options,\n      index,\n      [\n        \"text\",\n        \"color\",\n        \"backgroundColor\",\n        \"backgroundRadius\",\n        \"padding\",\n        \"fontFamily\",\n        \"fontSize\",\n        \"fontWeight\",\n        \"svgWidth\",\n        \"svgHeight\",\n        \"piecesWidth\",\n        \"piecesSpacing\",\n        \"extraSpacing\",\n        \"opacity\",\n        \"angle\",\n        \"rotate\",\n        \"translate\",\n        \"ghost\",\n        \"ghostOpacity\",\n        \"w\",\n        \"h\",\n        \"tx\",\n        \"ty\"\n      ],\n      this.v\n    );\n    setValuesByIndex(\n      options.animation,\n      index,\n      [\"duration\", \"delay\", \"easing\"],\n      this.v\n    );\n    this.o.push(extend({}, this.v, itemOptions || {}));\n  },\n\n  initImage(image) {\n    const o = this.o[this.o.length - 1];\n    let padding = is.fnc(o.padding) ? o.padding() : o.padding;\n    padding = padding\n      ? padding.split(\" \").map(p => parseFloat(p))\n      : [0, 0, 0, 0];\n    const { canvas, ctx } = createCanvas();\n    canvas.width = image.width + 2 + padding[1] + padding[3];\n    canvas.height = image.height + 2 + padding[0] + padding[2];\n    if (o.backgroundColor) {\n      ctx.fillStyle = o.backgroundColor;\n      if (o.backgroundRadius) {\n        roundRect(\n          ctx,\n          1,\n          1,\n          canvas.width - 2,\n          canvas.height - 2,\n          o.backgroundRadius\n        );\n        ctx.fill();\n      } else {\n        ctx.fillRect(1, 1, canvas.width - 2, canvas.height - 2);\n      }\n    }\n    ctx.drawImage(\n      image,\n      0,\n      0,\n      image.naturalWidth,\n      image.naturalHeight,\n      1 + padding[3],\n      1 + padding[0],\n      image.width,\n      image.height\n    );\n    this.drawList.push(canvas);\n  },\n\n  initPieces(options) {\n    const t = new Transform();\n    let piecesWidth, piecesHeight, piecesSpacing, item, last, p, x, lx, y, w, h;\n    this.pieces = [];\n    this.items = [];\n    const itemSeparation = options.itemSeparation;\n    x =\n      options.x === \"center\"\n        ? this.width / 2 -\n          (this.drawList.reduce((a, b) => a + b.width, 0) +\n            itemSeparation * this.drawList.length) /\n            2\n        : options.x;\n    y =\n      options.y === \"center\"\n        ? this.height / 2 - this.drawList[0].height / 2\n        : options.y;\n    let o;\n    this.drawList.forEach((img, index) => {\n      o = this.o[index];\n\n      const { extraX, extraY } = is.obj(o.extraSpacing)\n        ? o.extraSpacing\n        : { extraX: o.extraSpacing, extraY: o.extraSpacing };\n      const { translateX, translateY } = is.fnc(o.translate)\n        ? o.translate()\n        : is.obj(o.translate)\n        ? o.translate\n        : { translateX: o.translate, translateY: o.translate };\n\n      if (options.x === \"centerAll\") {\n        x = this.width / 2 - img.width / 2;\n      }\n      if (options.y === \"centerAll\") {\n        y = this.height / 2 - img.height / 2;\n      }\n\n      x += translateX;\n      y += translateY;\n\n      last = { angle: null }; // Force first redraw\n      item = { last, index, y, extraY, img };\n      item.x = lx = x;\n      item.width = img.width;\n      item.height = img.height;\n      item.angle = normalizeAngle(o.angle);\n      item.rotate = normalizeAngle(o.rotate);\n      item.ghost = o.ghost;\n      item.ghostDashArray = [20, 10];\n      item.ghostDashOffset = item.ghostDashArray[0] + item.ghostDashArray[1];\n      item.ghostOpacity = o.ghostOpacity;\n      item.pieces = [];\n      item.shown = false;\n      item.hidden = true;\n      this.items.push(item);\n\n      // Shown img\n      const { ctx, canvas } = createCanvas();\n      canvas.width = item.width;\n      canvas.height = item.height;\n\n      while (lx - (item.width + extraX * 2) < item.x) {\n        piecesWidth = is.fnc(o.piecesWidth) ? o.piecesWidth() : o.piecesWidth;\n        piecesHeight = item.height + extraY * 2;\n        piecesSpacing = is.fnc(o.piecesSpacing)\n          ? o.piecesSpacing()\n          : o.piecesSpacing;\n        w = Math.min(is.fnc(o.w) ? o.w() : o.w, piecesWidth);\n        h = Math.min(is.fnc(o.h) ? o.h() : o.h, piecesHeight);\n        last = {};\n        p = { last, item };\n        p.h_x = p.x = last.x = lx - extraX + piecesWidth / 2 - w / 2;\n        p.s_x = lx - extraX;\n        p.h_y = p.y = last.y = y + item.height / 2 - h / 2;\n        p.s_y = y - extraY;\n        p.h_w = p.w = last.w = w;\n        p.s_w = piecesWidth;\n        p.h_h = p.h = last.h = h;\n        p.s_h = piecesHeight;\n        p.h_tx = p.s_tx = p.tx = last.tx = is.fnc(o.tx) ? o.tx() : o.tx;\n        p.h_ty = p.ty = last.ty = extraY + (is.fnc(o.ty) ? o.ty() : o.ty);\n        p.s_ty = extraY;\n        p.opacity = is.fnc(o.opacity) ? o.opacity() : o.opacity;\n        p.duration = is.fnc(o.duration) ? o.duration() : o.duration;\n        p.delay = is.fnc(o.delay) ? o.delay() : o.delay;\n        p.easing = o.easing;\n        item.pieces.push(p);\n        this.pieces.push(p);\n        lx += piecesWidth + piecesSpacing;\n\n        // Draw p for shown img\n        ctx.save();\n        t.translate(item.width / 2, item.height / 2);\n        t.rotate((item.angle * Math.PI) / 180);\n        t.translate(-item.width / 2, -item.height / 2);\n        t.translate(p.s_tx, p.s_ty - item.extraY);\n        t.translate(p.s_x + p.s_w / 2 - item.x, p.s_y + p.s_h / 2 - item.y);\n        t.apply(ctx);\n        ctx.beginPath();\n        ctx.rect(-p.s_w / 2, -p.s_h / 2, p.s_w, p.s_h);\n        ctx.clip();\n        t.reset(ctx);\n        ctx.globalAlpha = p.opacity;\n\n        const ratio = item.img.height / item.img.width;\n        ctx.drawImage(\n          item.img,\n          (1 - ratio) / 2,\n          ratio / 2,\n          item.img.width - (1 - ratio),\n          item.img.height - ratio\n        );\n\n        ctx.restore();\n      }\n\n      item.imgShown = canvas;\n      item.rectShown = {\n        left: item.x,\n        top: item.y,\n        right: item.x + item.width,\n        bottom: item.y + item.height\n      };\n\n      if (options.x !== \"centerAll\") {\n        x += img.width + itemSeparation;\n      }\n    });\n  },\n\n  renderPieces(o, item) {\n    const { ctx } = o;\n    const t = new Transform();\n    let angle, rotate;\n\n    if (item.redraw) {\n      item.redraw = false;\n      if (item.shown && o.saveShowState) {\n        ctx.drawImage(\n          item.imgShown,\n          0,\n          0,\n          item.width,\n          item.height,\n          item.x,\n          item.y,\n          item.width,\n          item.height\n        );\n      } else if (!item.hidden) {\n        angle = normalizeAngle(item.angle);\n        rotate = normalizeAngle(item.rotate);\n        item.pieces.forEach(p => {\n          ctx.save();\n\n          t.translate(item.x, item.y);\n          t.translate(item.width / 2, item.height / 2);\n          t.rotate(((angle + rotate) * Math.PI) / 180);\n          t.translate(-item.width / 2, -item.height / 2);\n          t.translate(p.tx, p.ty - item.extraY);\n          t.translate(p.x + p.w / 2 - item.x, p.y + p.h / 2 - item.y);\n          t.apply(ctx);\n          ctx.beginPath();\n          ctx.rect(-p.w / 2, -p.h / 2, p.w, p.h);\n\n          if (o.debug) {\n            ctx.setLineDash([]);\n            ctx.strokeStyle = \"black\";\n            ctx.stroke();\n          } else {\n            ctx.clip();\n          }\n\n          t.translate(-(p.x + p.w / 2 - item.x), -(p.y + p.h / 2 - item.y));\n          t.translate(item.width / 2, item.height / 2);\n          t.rotate((-angle * Math.PI) / 180);\n          t.translate(-item.width / 2, -item.height / 2);\n          t.apply(ctx);\n          ctx.globalAlpha = p.opacity;\n\n          const ratio = item.img.height / item.img.width;\n          ctx.drawImage(\n            item.img,\n            (1 - ratio) / 2,\n            ratio / 2,\n            item.img.width - (1 - ratio),\n            item.img.height - ratio\n          );\n\n          t.reset();\n          ctx.restore();\n        });\n      }\n    }\n  },\n\n  isItemDifferent(item) {\n    return (\n      !areObjectsEquals(item, item.last, [\"angle\"]) ||\n      item.pieces.some(\n        p => !areObjectsEquals(p, p.last, [\"x\", \"y\", \"w\", \"h\", \"tx\", \"ty\"])\n      )\n    );\n  },\n\n  isItemShown(item) {\n    return item.pieces.every(\n      p =>\n        p.x === p.s_x &&\n        p.y === p.s_y &&\n        p.w === p.s_w &&\n        p.h === p.s_h &&\n        p.tx === p.s_tx &&\n        p.ty === p.s_ty\n    );\n  },\n\n  isItemHidden(item) {\n    return item.pieces.every(p => p.w === 0 && p.h === 0);\n  },\n\n  clearRect(o) {\n    const t = new Transform();\n    let newRedraw = false,\n      x,\n      y,\n      w,\n      h,\n      p1,\n      p2,\n      p3,\n      p4,\n      left,\n      top,\n      right,\n      bottom,\n      itemRect,\n      angle,\n      rotate,\n      clear = null;\n\n    // Discover modified items, and initial clear rect\n    this.items.forEach(item => {\n      angle = normalizeAngle(item.angle);\n      rotate = normalizeAngle(item.rotate);\n      if (this.isItemDifferent(item)) {\n        newRedraw = true;\n        itemRect = null;\n        item.redraw = true;\n        item.shown = this.isItemShown(item);\n        item.hidden = this.isItemHidden(item);\n        copyValues(item.last, item, [\"angle\"]);\n        item.pieces.forEach(p => {\n          let { last } = p;\n          t.translate(item.x, item.y);\n          t.translate(item.width / 2, item.height / 2);\n          t.rotate(((angle + rotate) * Math.PI) / 180);\n          t.translate(-item.width / 2, -item.height / 2);\n          t.translate(last.tx, last.ty - item.extraY);\n          t.translate(\n            last.x + last.w / 2 - item.x,\n            last.y + last.h / 2 - item.y\n          );\n\n          x = -last.w / 2 - 1;\n          y = -last.h / 2 - 1;\n          w = last.w + 2;\n          h = last.h + 2;\n\n          p1 = t.transformPoint(x, y);\n          p2 = t.transformPoint(x + w, y);\n          p3 = t.transformPoint(x + w, y + h);\n          p4 = t.transformPoint(x, y + h);\n\n          left = Math.min(p1[0], p2[0], p3[0], p4[0]);\n          top = Math.min(p1[1], p2[1], p3[1], p4[1]);\n          right = Math.max(p1[0], p2[0], p3[0], p4[0]);\n          bottom = Math.max(p1[1], p2[1], p3[1], p4[1]);\n\n          itemRect = this.extendRect(itemRect, { left, top, right, bottom });\n\n          t.reset();\n          copyValues(last, p, [\"x\", \"y\", \"w\", \"h\", \"tx\", \"ty\"]);\n        });\n        clear = this.extendRect(clear, itemRect);\n        item.rect = item.shown ? item.rectShown : itemRect;\n      } else {\n        item.redraw = false;\n      }\n\n      // Always clear rectShown if hidden and ghost\n      if (item.hidden && item.ghost) {\n        newRedraw = true;\n        clear = this.extendRect(clear, item.rectShown);\n      }\n    });\n\n    // Discover adjacent redraw regions\n    while (newRedraw) {\n      newRedraw = false;\n      this.items.forEach(item => {\n        if (!item.redraw && intersect(clear, item.rect)) {\n          newRedraw = true;\n          item.redraw = true;\n          clear = this.extendRect(clear, item.rect);\n        }\n      });\n    }\n\n    // Clear redraw regions\n    if (clear) {\n      o.ctx.clearRect(\n        clear.left,\n        clear.top,\n        clear.right - clear.left,\n        clear.bottom - clear.top\n      );\n\n      if (o.debug) {\n        o.ctx.setLineDash([10]);\n        o.ctx.strokeStyle = \"rgba(255, 0, 0, 1)\";\n        o.ctx.strokeRect(\n          clear.left,\n          clear.top,\n          clear.right - clear.left,\n          clear.bottom - clear.top\n        );\n      }\n    }\n  },\n\n  extendRect(rect1, rect2) {\n    return rect1 && rect2\n      ? {\n          left: Math.max(0, Math.min(rect1.left, rect2.left)),\n          top: Math.max(0, Math.min(rect1.top, rect2.top)),\n          right: Math.min(this.width, Math.max(rect1.right, rect2.right)),\n          bottom: Math.min(this.height, Math.max(rect1.bottom, rect2.bottom))\n        }\n      : rect2;\n  },\n\n  checkHover(o, item) {\n    const hover =\n      this.mouseX >= item.x &&\n      this.mouseX <= item.x + item.width &&\n      this.mouseY >= item.y &&\n      this.mouseY <= item.y + item.height;\n    if (hover && !item.hover) {\n      if (is.fnc(o.itemEnter)) {\n        o.itemEnter(item);\n      }\n    } else if (!hover && item.hover) {\n      if (is.fnc(o.itemLeave)) {\n        o.itemLeave(item);\n      }\n    }\n    item.hover = hover;\n    return hover;\n  },\n\n  renderDebug(o, item) {\n    if (o.debug) {\n      if (o.checkHover) {\n        o.ctx.fillStyle = item.hover\n          ? \"rgba(255, 0, 0, 0.3)\"\n          : \"rgba(0, 0, 0, 0.3)\";\n        o.ctx.fillRect(item.x, item.y, item.width, item.height);\n      }\n      const { rect } = item;\n      if (rect) {\n        o.ctx.setLineDash([]);\n        o.ctx.strokeStyle = \"rgba(255, 0, 0, 0.5)\";\n        o.ctx.strokeRect(\n          rect.left,\n          rect.top,\n          rect.right - rect.left,\n          rect.bottom - rect.top\n        );\n      }\n    }\n  },\n\n  loop(o) {\n    this.frame = requestAnimationFrame(this.loop.bind(this, o));\n    this.clearRect(o);\n    this.hoverItem = null;\n    this.items.forEach(item => {\n      if (o.checkHover && this.checkHover(o, item)) {\n        this.hoverItem = item;\n      }\n      this.renderPieces(o, item);\n      this.renderDebug(o, item);\n    });\n  },\n\n  stop() {\n    cancelAnimationFrame(this.frame);\n    anime.remove(this.items);\n    anime.remove(this.pieces);\n  },\n\n  getPieces(items) {\n    let targetPieces = [];\n    if (is.und(items)) {\n      targetPieces = this.pieces;\n    } else if (is.num(items)) {\n      targetPieces = this.items[items].pieces;\n    } else if (is.arr(items)) {\n      items.forEach(item =>\n        is.num(item)\n          ? pushArray(targetPieces, this.items[item].pieces)\n          : pushArray(targetPieces, item.pieces)\n      );\n    } else {\n      targetPieces = items.pieces;\n    }\n    return targetPieces;\n  },\n\n  getItems(items) {\n    let targetItems = [];\n    if (is.und(items)) {\n      targetItems = this.items;\n    } else if (is.num(items)) {\n      targetItems = this.items[items];\n    } else if (is.arr(items)) {\n      items.forEach(item =>\n        is.num(item)\n          ? targetItems.push(this.items[item])\n          : targetItems.push(item)\n      );\n    } else {\n      targetItems = items;\n    }\n    return targetItems;\n  },\n\n  animatePieces(options) {\n    const o = extend(\n      {\n        duration: p => p.duration,\n        delay: p => p.delay,\n        easing: p => p.easing,\n        remove: true,\n        singly: false\n      },\n      options\n    );\n\n    const targets = this.getPieces(options.items);\n    if (o.remove) {\n      anime.remove(targets);\n    }\n    if (o.ignore) {\n      o.ignore.forEach(prop => delete o[prop]);\n    }\n    if (o.singly) {\n      targets.forEach(target => anime(extend(o, { targets: target })));\n    } else {\n      anime(extend(o, { targets }));\n    }\n  },\n\n  showPieces(options) {\n    const o = extend(\n      {\n        x: p => p.s_x,\n        y: p => p.s_y,\n        w: p => p.s_w,\n        h: p => p.s_h,\n        tx: p => p.s_tx,\n        ty: p => p.s_ty\n      },\n      options\n    );\n    this.animatePieces(o);\n  },\n\n  hidePieces(options) {\n    const o = extend(\n      {\n        x: p => p.h_x,\n        y: p => p.h_y,\n        w: p => p.h_w,\n        h: p => p.h_h,\n        tx: p => p.h_tx,\n        ty: p => p.h_ty\n      },\n      options\n    );\n\n    this.animatePieces(o);\n  },\n\n  animateItems(options) {\n    const o = extend(\n      {\n        easing: \"linear\",\n        remove: true\n      },\n      options,\n      { targets: this.getItems(options.items) }\n    );\n    if (o.remove) {\n      anime.remove(o.targets);\n    }\n    anime(o);\n  }\n};\n\n// Pieces.version = \"1.0.0\";\nPieces.random = anime.random;\n// Pieces.extend = extend;\nexport default Pieces;\n","<template>\n  <!-- Pieces Slider -->\n  <div v-on=\"$listeners\" class=\"pieces-slider vue-piece-slider\">\n    <!-- Each slide with corresponding image -->\n    <div v-for=\"(v, i) of list\" :key=\"i\" class=\"pieces-slider__slide\">\n      <img :ref=\"getImgRef(i)\" class=\"pieces-slider__image\" :src=\"v\" alt>\n    </div>\n    <!-- Canvas to draw the pieces -->\n    <canvas class=\"pieces-slider__canvas\"></canvas>\n    <!-- Slider buttons: prev and next -->\n    <button\n      v-if=\"arrow\"\n      @click=\"prevItem\"\n      class=\"pieces-slider__button pieces-slider__button--prev\"\n    >&laquo;</button>\n    <button\n      v-if=\"arrow\"\n      @click=\"nextItem\"\n      class=\"pieces-slider__button pieces-slider__button--next\"\n    >&raquo;</button>\n  </div>\n</template>\n<script>\nimport anime from \"animejs\";\n// window.anime = anime\nimport Pieces from \"./piece/index.js\";\n// Options for images\nconst imageOptions = {\n  angle: 45,\n  extraSpacing: { extraX: 500, extraY: 200 },\n  piecesWidth: function () {\n    return Pieces.random(50, 200);\n  },\n  ty: function () {\n    return Pieces.random(-400, 400);\n  }\n};\nexport default {\n  props: {\n    list: {\n      type: Array,\n      default: () => []\n    },\n    value: {\n      type: [String, Number],\n      default: 0\n    },\n    options: {\n      type: Object,\n      default: () => ({})\n    },\n    arrow: {\n      type: Boolean,\n      default: true\n    }\n  },\n  data() {\n    return {};\n  },\n  methods: {\n    initVar() {\n      this.items = [];\n      this.imagesReady = 0;\n      this.piecesSlider = null;\n    },\n    getImgRef(i) {\n      const refName = `imgRef_${i}`;\n      return refName;\n    },\n    loadImg() {\n      const slidesNum = this.list.length;\n      for (let i = 0; i < slidesNum; i++) {\n        // Wait for all images to load before initializing the slider and event listeners\n        const slideImage = new Image();\n        slideImage.onload = () => {\n          if (++this.imagesReady == slidesNum) {\n            this.initSlider();\n          }\n        };\n        // Push all elements for each slide with the corresponding options\n        this.items.push({\n          type: \"image\",\n          value: this.$refs[this.getImgRef(i)][0],\n          options: { ...imageOptions, ...this.options }\n        });\n        slideImage.src = this.list[i];\n      }\n    },\n    initSlider() {\n      // Stop any current animation if the slider was initialized before\n      if (this.piecesSlider) {\n        this.piecesSlider.stop();\n      }\n\n      // Save the new Pieces instance\n      this.piecesSlider = new Pieces({\n        ...{\n          canvas: \".vue-piece-slider .pieces-slider__canvas\",\n          items: this.items,\n          x: \"centerAll\",\n          y: \"centerAll\",\n          piecesSpacing: 4,\n          animation: {\n            duration: function () {\n              return Pieces.random(1000, 2000);\n            },\n            easing: \"easeOutQuint\"\n          }\n        },\n        ...this.options\n      });\n      // Show current items: image, text and number\n      this.showItems();\n    },\n    // Show current items: image, text and number\n    showItems() {\n      // Show image pieces\n      this.piecesSlider.showPieces({\n        items: this.value,\n        ignore: [\"tx\"],\n        singly: true,\n        update: anim => {\n          // Stop the pieces animation at 60%, and run a new indefinitely animation of `ty` for each piece\n          if (anim.progress > 60) {\n            const piece = anim.animatables[0].target;\n            const ty = piece.ty;\n            anime.remove(piece);\n            anime({\n              targets: piece,\n              ty:\n                piece.h_ty < 300\n                  ? [\n                    { value: ty + 10, duration: 1000 },\n                    { value: ty - 10, duration: 2000 },\n                    { value: ty, duration: 1000 }\n                  ]\n                  : [\n                    { value: ty - 10, duration: 1000 },\n                    { value: ty + 10, duration: 2000 },\n                    { value: ty, duration: 1000 }\n                  ],\n              duration: 2000,\n              easing: \"linear\",\n              loop: true\n            });\n          }\n        }\n      });\n    },\n    hideItems() {\n      if (this.piecesSlider) {\n        this.piecesSlider.hidePieces({\n          items: [this.value]\n        });\n      }\n    },\n    prevItem() {\n      if (this.piecesSlider) {\n        this.hideItems();\n        const currentIndex =\n          this.value > 0 ? this.value - 1 : this.list.length - 1;\n        this.$emit(\"input\", currentIndex);\n      }\n    },\n    nextItem() {\n      if (this.piecesSlider) {\n        this.hideItems();\n        const currentIndex =\n          this.value < this.list.length - 1 ? this.value + 1 : 0;\n        this.$emit(\"input\", currentIndex);\n      }\n    },\n    init() {\n      this.initVar();\n      this.loadImg();\n    }\n  },\n  watch: {\n    value: function () {\n      this.showItems();\n    },\n    options: {\n      handler: function () {\n        this.hideItems();\n        this.init();\n      },\n      deep: true\n    }\n  },\n  mounted() {\n    this.init();\n  }\n};\n</script>\n<style lang=\"scss\">\n@import \"index\";\n</style>\n","import mod from \"-!../node_modules/cache-loader/dist/cjs.js??ref--12-0!../node_modules/thread-loader/dist/cjs.js!../node_modules/babel-loader/lib/index.js!../node_modules/cache-loader/dist/cjs.js??ref--0-0!../node_modules/vue-loader/lib/index.js??vue-loader-options!./index.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../node_modules/cache-loader/dist/cjs.js??ref--12-0!../node_modules/thread-loader/dist/cjs.js!../node_modules/babel-loader/lib/index.js!../node_modules/cache-loader/dist/cjs.js??ref--0-0!../node_modules/vue-loader/lib/index.js??vue-loader-options!./index.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./index.vue?vue&type=template&id=63231486&\"\nimport script from \"./index.vue?vue&type=script&lang=js&\"\nexport * from \"./index.vue?vue&type=script&lang=js&\"\nimport style0 from \"./index.vue?vue&type=style&index=0&lang=scss&\"\n\n\n/* normalize component */\nimport normalizer from \"!../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\nexport default component.exports","<template>\n  <div class=\"content\" id=\"app\">\n    <div class=\"toolbox\">\n      <div>\n        <label for=\"extraX\">ExtraX</label>\n        <input\n          type=\"range\"\n          v-model.number=\"options.extraSpacing.extraX\"\n          name=\"extraX\"\n          :min=\"-500\"\n          :max=\"500\"\n        >\n        <span class=\"range-slider__value\">\n          {{\n          options.extraSpacing.extraX\n          }}\n        </span>\n      </div>\n      <div>\n        <label for=\"extraY\">ExtraY</label>\n        <input\n          type=\"range\"\n          v-model.number=\"options.extraSpacing.extraY\"\n          name=\"extraY\"\n          :min=\"-500\"\n          :max=\"500\"\n        >\n        <span class=\"range-slider__value\">\n          {{\n          options.extraSpacing.extraY\n          }}\n        </span>\n      </div>\n      <div>\n        <label for=\"angle\">Angle</label>\n        <input type=\"range\" v-model.number=\"options.angle\" name=\"angle\" :min=\"0\" :max=\"360\">\n        <span class=\"range-slider__value\">{{ options.angle }}</span>\n      </div>\n      <div>\n        <label for=\"piecesWidth\">PiecesWidth</label>\n        <input\n          type=\"range\"\n          v-model.number=\"options.piecesWidth\"\n          name=\"piecesWidth\"\n          :min=\"0\"\n          :max=\"200\"\n        >\n        <span class=\"range-slider__value\">{{ options.piecesWidth }}</span>\n      </div>\n      <div>\n        <label for=\"ty\">Ty (startY)</label>\n        <input type=\"range\" v-model.number=\"options.ty\" name=\"ty\" :min=\"-300\" :max=\"300\">\n        <span class=\"range-slider__value\">{{ options.ty }}</span>\n      </div>\n      <div>\n        <label for=\"piecesSpacing\">PiecesSpacing</label>\n        <input\n          type=\"range\"\n          v-model.number=\"options.piecesSpacing\"\n          name=\"piecesSpacing\"\n          :min=\"0\"\n          :max=\"100\"\n        >\n        <span class=\"range-slider__value\">{{ options.piecesSpacing }}</span>\n      </div>\n    </div>\n    <Slider\n      :arrow=\"true\"\n      :options=\"options\"\n      @click=\"click\"\n      class=\"slider\"\n      :list=\"list\"\n      v-model=\"activeIndex\"\n    ></Slider>\n  </div>\n</template>\n\n<script>\nimport Slider from \"./index.vue\";\n\nexport default {\n  name: \"app\",\n  data() {\n    return {\n      activeIndex: 0,\n      list: [\n        \"./img/1.jpg\",\n        \"./img/2.jpg\",\n        \"./img/3.jpg\",\n        \"./img/4.jpg\",\n        \"./img/5.jpg\"\n      ],\n      options: {\n        angle: 30,\n        extraSpacing: { extraX: 1, extraY: -20 },\n        piecesWidth: 100,\n        ty: 200,\n        piecesSpacing: 1,\n        animation: {\n          duration: 2000,\n          easing: \"easeOutQuint\"\n        }\n      }\n    };\n  },\n  components: {\n    Slider\n  },\n  methods: {\n    click() {\n      // eslint-disable-next-line no-console\n      console.info(\"object\");\n    }\n  }\n};\n</script>\n\n<style lang=\"scss\">\n#app {\n  font-family: \"Avenir\", Helvetica, Arial, sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-align: center;\n  color: #2c3e50;\n  .slider {\n    width: 400px;\n    height: 200px;\n  }\n  .toolbox {\n    margin-right: 100px;\n    display: flex;\n    flex-direction: column;\n    & > div {\n      margin: 20px;\n      label {\n        margin-right: 10px;\n        font-weight: bold;\n        color: white;\n        font-size: 1em;\n        padding: 0.75em;\n      }\n      input {\n        vertical-align: middle;\n      }\n      .range-slider__value {\n        display: inline-block;\n        position: relative;\n        width: 60px;\n        color: #fff;\n        line-height: 20px;\n        text-align: center;\n        border-radius: 3px;\n        background: #2c3e50;\n        padding: 5px 10px;\n        margin-left: 8px;\n\n        &:after {\n          position: absolute;\n          top: 50%;\n          left: -6px;\n          width: 0;\n          transform: translateY(-50%);\n          height: 0;\n          font-weight: bold;\n          border-top: 6px solid transparent;\n          border-right: 6px solid #2c3e50;\n          border-bottom: 6px solid transparent;\n          content: \"\";\n        }\n      }\n    }\n  }\n}\n</style>\n","import mod from \"-!../node_modules/cache-loader/dist/cjs.js??ref--12-0!../node_modules/thread-loader/dist/cjs.js!../node_modules/babel-loader/lib/index.js!../node_modules/cache-loader/dist/cjs.js??ref--0-0!../node_modules/vue-loader/lib/index.js??vue-loader-options!./App.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../node_modules/cache-loader/dist/cjs.js??ref--12-0!../node_modules/thread-loader/dist/cjs.js!../node_modules/babel-loader/lib/index.js!../node_modules/cache-loader/dist/cjs.js??ref--0-0!../node_modules/vue-loader/lib/index.js??vue-loader-options!./App.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./App.vue?vue&type=template&id=de737d04&\"\nimport script from \"./App.vue?vue&type=script&lang=js&\"\nexport * from \"./App.vue?vue&type=script&lang=js&\"\nimport style0 from \"./App.vue?vue&type=style&index=0&lang=scss&\"\n\n\n/* normalize component */\nimport normalizer from \"!../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\nexport default component.exports","import Vue from \"vue\";\nimport App from \"./App.vue\";\n\nVue.config.productionTip = false;\n\nnew Vue({\n  render: h => h(App)\n}).$mount(\"#app\");\n","import mod from \"-!../node_modules/vue-style-loader/index.js??ref--8-oneOf-1-0!../node_modules/css-loader/index.js??ref--8-oneOf-1-1!../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-3!../node_modules/sass-loader/lib/loader.js??ref--8-oneOf-1-4!../node_modules/cache-loader/dist/cjs.js??ref--0-0!../node_modules/vue-loader/lib/index.js??vue-loader-options!./App.vue?vue&type=style&index=0&lang=scss&\"; export default mod; export * from \"-!../node_modules/vue-style-loader/index.js??ref--8-oneOf-1-0!../node_modules/css-loader/index.js??ref--8-oneOf-1-1!../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-3!../node_modules/sass-loader/lib/loader.js??ref--8-oneOf-1-4!../node_modules/cache-loader/dist/cjs.js??ref--0-0!../node_modules/vue-loader/lib/index.js??vue-loader-options!./App.vue?vue&type=style&index=0&lang=scss&\"","exports = module.exports = require(\"../node_modules/css-loader/lib/css-base.js\")(false);\n// imports\n\n\n// module\nexports.push([module.id, \".vue-piece-slider{position:relative;text-align:center;padding:0;width:100%;height:400px}.vue-piece-slider,.vue-piece-slider:hover .pieces-slider__button{display:inline-block}.vue-piece-slider .pieces-slider__slide{position:absolute;right:100%}.vue-piece-slider .pieces-slider__slide .pieces-slider__image{max-width:400px;max-height:200px;display:none}.vue-piece-slider .pieces-slider__canvas{position:relative;width:100%;height:100%;-webkit-transition:opacity .2s;transition:opacity .2s}.vue-piece-slider .pieces-slider__canvas--hidden{opacity:0;-webkit-transition-duration:.3s;transition-duration:.3s}.vue-piece-slider .pieces-slider__button{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:none;position:absolute;left:0;top:50%;border:none;outline:0;padding:0;margin:0;width:36px;height:36px;background-color:rgba(31,45,61,.11);color:#fff;text-align:center;border-radius:50%;font-size:1.5em;font-weight:700;cursor:pointer;-webkit-transition:background-color .1s;transition:background-color .1s;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.vue-piece-slider .pieces-slider__button--next{left:auto;right:0}\", \"\"]);\n\n// exports\n","exports = module.exports = require(\"../node_modules/css-loader/lib/css-base.js\")(false);\n// imports\n\n\n// module\nexports.push([module.id, \"#app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:#2c3e50}#app .slider{width:400px;height:200px}#app .toolbox{margin-right:100px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}#app .toolbox>div{margin:20px}#app .toolbox>div label{margin-right:10px;font-weight:700;color:#fff;font-size:1em;padding:.75em}#app .toolbox>div input{vertical-align:middle}#app .toolbox>div .range-slider__value{display:inline-block;position:relative;width:60px;color:#fff;line-height:20px;text-align:center;border-radius:3px;background:#2c3e50;padding:5px 10px;margin-left:8px}#app .toolbox>div .range-slider__value:after{position:absolute;top:50%;left:-6px;width:0;-webkit-transform:translateY(-50%);transform:translateY(-50%);height:0;font-weight:700;border-top:6px solid transparent;border-right:6px solid #2c3e50;border-bottom:6px solid transparent;content:\\\"\\\"}\", \"\"]);\n\n// exports\n","// style-loader: Adds some css to the DOM by adding a <style> tag\n\n// load the styles\nvar content = require(\"!!../node_modules/css-loader/index.js??ref--8-oneOf-1-1!../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-3!../node_modules/sass-loader/lib/loader.js??ref--8-oneOf-1-4!../node_modules/cache-loader/dist/cjs.js??ref--0-0!../node_modules/vue-loader/lib/index.js??vue-loader-options!./App.vue?vue&type=style&index=0&lang=scss&\");\nif(typeof content === 'string') content = [[module.id, content, '']];\nif(content.locals) module.exports = content.locals;\n// add the styles to the DOM\nvar add = require(\"!../node_modules/vue-style-loader/lib/addStylesClient.js\").default\nvar update = add(\"6f19147e\", content, true, {\"sourceMap\":false,\"shadowMode\":false});"],"sourceRoot":""}


--------------------------------------------------------------------------------
/jest.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   collectCoverage: true,
 3 |   collectCoverageFrom: [
 4 |     "src/index.{vue}",
 5 |     "src/**/*.{ts}",
 6 |     "!**/node_modules/**",
 7 |     "!**/vendor/**"
 8 |   ],
 9 |   moduleFileExtensions: ["js", "jsx", "json", "vue"],
10 |   transform: {
11 |     "^.+\\.vue$": "vue-jest",
12 |     ".+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$":
13 |       "jest-transform-stub",
14 |     "^.+\\.jsx?$": "babel-jest"
15 |   },
16 |   transformIgnorePatterns: ["/node_modules/"],
17 |   moduleNameMapper: {
18 |     "^@/(.*)$": "<rootDir>/src/$1"
19 |   },
20 |   snapshotSerializers: ["jest-serializer-vue"],
21 |   testMatch: [
22 |     "**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"
23 |   ],
24 |   testURL: "http://localhost/",
25 |   watchPlugins: [
26 |     "jest-watch-typeahead/filename",
27 |     "jest-watch-typeahead/testname"
28 |   ],
29 |   globals: {
30 |     "ts-jest": {
31 |       diagnostics: false
32 |     }
33 |   }
34 | };
35 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-piece-slider",
 3 |   "version": "1.0.0",
 4 |   "private": false,
 5 |   "main": "dist/vue-piece-slider.umd.min.js",
 6 |   "author": "dreambo8563",
 7 |   "scripts": {
 8 |     "serve": "vue-cli-service serve",
 9 |     "build": "vue-cli-service build --target lib --name vue-piece-slider src/index.js",
10 |     "test": "npm run build",
11 |     "pages": "DOC_ENV=true vue-cli-service build --dest docs",
12 |     "lint": "vue-cli-service lint",
13 |     "test:unit": "vue-cli-service test:unit",
14 |     "report": "vue-cli-service build --report",
15 |     "version": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0"
16 |   },
17 |   "dependencies": {
18 |     "core-js": "^3.0.1",
19 |     "vue": "^2.6.10"
20 |   },
21 |   "devDependencies": {
22 |     "@vue/cli-plugin-babel": "^3.6.0",
23 |     "@vue/cli-plugin-eslint": "^4.0.0",
24 |     "@vue/cli-plugin-unit-jest": "^3.6.0",
25 |     "@vue/cli-service": "^3.6.0",
26 |     "@vue/eslint-config-prettier": "^4.0.1",
27 |     "@vue/test-utils": "1.0.0-beta.29",
28 |     "animejs": "^3.0.1",
29 |     "babel-core": "7.0.0-bridge.0",
30 |     "babel-eslint": "^10.0.1",
31 |     "babel-jest": "^24.7.1",
32 |     "cz-conventional-changelog": "^3.0.0",
33 |     "eslint": "^5.16.0",
34 |     "eslint-plugin-vue": "^5.0.0",
35 |     "sass": "^1.18.0",
36 |     "sass-loader": "^8.0.0",
37 |     "vue-template-compiler": "^2.5.21"
38 |   },
39 |   "config": {
40 |     "commitizen": {
41 |       "path": "./node_modules/cz-conventional-changelog"
42 |     }
43 |   },
44 |   "repository": {
45 |     "type": "git",
46 |     "url": "https://github.com/dreambo8563/vue-piece-slider.git"
47 |   },
48 |   "bugs": {
49 |     "url": "https://github.com/dreambo8563/vue-piece-slider/issues"
50 |   },
51 |   "license": "MIT",
52 |   "files": [
53 |     "dist/*",
54 |     "src/*",
55 |     "package.json",
56 |     "*.js",
57 |     "README.md"
58 |   ],
59 |   "keywords": [
60 |     "vue",
61 |     "slider",
62 |     "carousel",
63 |     "portal",
64 |     "segment",
65 |     "piece"
66 |   ]
67 | }
68 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     autoprefixer: {}
4 |   }
5 | };
6 | 


--------------------------------------------------------------------------------
/public/base.css:
--------------------------------------------------------------------------------
  1 | article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;}
  2 | *,
  3 | *::after,
  4 | *::before {
  5 | 	box-sizing: border-box;
  6 | }
  7 | 
  8 | html {
  9 | 	background: #fff;
 10 | }
 11 | 
 12 | body {
 13 | 	--color-text: #fff;
 14 | 	--color-link: #f0f0f0;
 15 | 	--color-link-hover: #fff;
 16 | 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
 17 | 	min-height: 100vh;
 18 | 	color: #fff;
 19 | 	color: var(--color-text);
 20 | 	background: linear-gradient(115deg, rgba(86, 216, 228,1) 5%,rgba(159, 1, 234,1) 95%);
 21 | 	-webkit-font-smoothing: antialiased;
 22 | 	-moz-osx-font-smoothing: grayscale;
 23 | 	overflow: hidden;
 24 | }
 25 | 
 26 | a {
 27 | 	text-decoration: none;
 28 | 	color: var(--color-link);
 29 | 	outline: none;
 30 | }
 31 | 
 32 | a:hover,
 33 | a:focus {
 34 | 	color: var(--color-link-hover);
 35 | }
 36 | 
 37 | a:focus,
 38 | button:focus {
 39 | 	outline: none;
 40 | }
 41 | 
 42 | .hidden {
 43 | 	position: absolute;
 44 | 	overflow: hidden;
 45 | 	width: 0;
 46 | 	height: 0;
 47 | 	pointer-events: none;
 48 | }
 49 | 
 50 | /* Icons */
 51 | .icon {
 52 | 	display: block;
 53 | 	width: 1.5em;
 54 | 	height: 1.5em;
 55 | 	margin: 0 auto;
 56 | 	fill: currentColor;
 57 | }
 58 | 
 59 | .icon--keyboard {
 60 | 	display: none;
 61 | }
 62 | 
 63 | main {
 64 | 	position: relative;
 65 | 	width: 100%;
 66 | }
 67 | 
 68 | .content {
 69 | 	position: relative;
 70 | 	display: flex;
 71 | 	justify-content: center;
 72 | 	align-items: center;
 73 | 	margin: 0 auto;
 74 | 	min-height: 100vh;
 75 | }
 76 | 
 77 | .content--fixed {
 78 | 	position: fixed;
 79 | 	z-index: 10000;
 80 | 	top: 0;
 81 | 	left: 0;
 82 | 	display: grid;
 83 | 	align-content: space-between;
 84 | 	width: 100%;
 85 | 	max-width: none;
 86 | 	min-height: 0;
 87 | 	height: 100vh;
 88 | 	padding: 1.5em;
 89 | 	pointer-events: none;
 90 | 	grid-template-columns: 50% 50%;
 91 | 	grid-template-rows: auto auto 4em;
 92 | 	grid-template-areas: 'header ...'
 93 | 	'... ...'
 94 | 	'github demos';
 95 | }
 96 | 
 97 | .content--fixed a {
 98 | 	pointer-events: auto;
 99 | }
100 | 
101 | /* Header */
102 | .codrops-header {
103 | 	position: relative;
104 | 	z-index: 100;
105 | 	display: flex;
106 | 	flex-direction: row;
107 | 	align-items: flex-start;
108 | 	align-items: center;
109 | 	align-self: start;
110 | 	grid-area: header;
111 | 	justify-self: start;
112 | }
113 | 
114 | .codrops-header__title {
115 | 	font-size: 1em;
116 | 	font-weight: bold;
117 | 	margin: 0;
118 | 	padding: 0.75em 0;
119 | }
120 | 
121 | .info {
122 | 	margin: 0 0 0 1.25em;
123 | 	color: var(--color-info);
124 | }
125 | 
126 | .github {
127 | 	display: block;
128 | 	align-self: end;
129 | 	grid-area: github;
130 | 	justify-self: start;
131 | }
132 | 
133 | /* Top Navigation Style */
134 | .codrops-links {
135 | 	position: relative;
136 | 	display: flex;
137 | 	justify-content: center;
138 | 	margin: 0 1em 0 0;
139 | 	text-align: center;
140 | 	white-space: nowrap;
141 | }
142 | 
143 | .codrops-icon {
144 | 	display: inline-block;
145 | 	margin: 0.15em;
146 | 	padding: 0.25em;
147 | }
148 | 
149 | @media screen and (max-width: 55em) {
150 | 	body {
151 | 		overflow: auto;
152 | 	}
153 | 	.content {
154 | 		flex-direction: column;
155 | 		height: auto;
156 | 		min-height: 0;
157 | 		padding-bottom: 10em;
158 | 	}
159 | 	.content--fixed {
160 | 		position: relative;
161 | 		z-index: 1000;
162 | 		display: block;
163 | 		padding: 0.85em;
164 | 	}
165 | 	.codrops-header {
166 | 		flex-direction: column;
167 | 		align-items: center;
168 | 	}
169 | 	.codrops-header__title {
170 | 		font-weight: bold;
171 | 		padding-bottom: 0.25em;
172 | 		text-align: center;
173 | 	}
174 | 	.info {
175 | 		margin: 0;
176 | 	}
177 | 	.github {
178 | 		display: block;
179 | 		margin: 1em auto;
180 | 	}
181 | 	.codrops-links {
182 | 		margin: 0;
183 | 	}
184 | }
185 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dreambo8563/vue-piece-slider/04ae3b07ef832433365c8067ecbf9396538c6b46/public/favicon.ico


--------------------------------------------------------------------------------
/public/img/1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dreambo8563/vue-piece-slider/04ae3b07ef832433365c8067ecbf9396538c6b46/public/img/1.jpg


--------------------------------------------------------------------------------
/public/img/2.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dreambo8563/vue-piece-slider/04ae3b07ef832433365c8067ecbf9396538c6b46/public/img/2.jpg


--------------------------------------------------------------------------------
/public/img/3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dreambo8563/vue-piece-slider/04ae3b07ef832433365c8067ecbf9396538c6b46/public/img/3.jpg


--------------------------------------------------------------------------------
/public/img/4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dreambo8563/vue-piece-slider/04ae3b07ef832433365c8067ecbf9396538c6b46/public/img/4.jpg


--------------------------------------------------------------------------------
/public/img/5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/dreambo8563/vue-piece-slider/04ae3b07ef832433365c8067ecbf9396538c6b46/public/img/5.jpg


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0" />
 7 |     <meta
 8 |       name="description"
 9 |       content="A slider made with the Pieces library where slides are animated in a fragmented look."
10 |     />
11 |     <meta
12 |       name="keywords"
13 |       content="slideshow, slider, pieces, fragments, animation, svg, canvas, javascript"
14 |     />
15 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
16 |     <link rel="stylesheet" type="text/css" href="<%= BASE_URL %>base.css" />
17 |     <title>vue-piece-slider</title>
18 |   </head>
19 |   <body>
20 |     <noscript>
21 |       <strong
22 |         >We're sorry but vue-piece-slider doesn't work properly without
23 |         JavaScript enabled. Please enable it to continue.</strong
24 |       >
25 |     </noscript>
26 |     <div id="app"></div>
27 |     <!-- built files will be auto injected -->
28 |   </body>
29 | </html>
30 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="content" id="app">
  3 |     <div class="toolbox">
  4 |       <div>
  5 |         <label for="extraX">ExtraX</label>
  6 |         <input
  7 |           type="range"
  8 |           v-model.number="options.extraSpacing.extraX"
  9 |           name="extraX"
 10 |           :min="-500"
 11 |           :max="500"
 12 |         />
 13 |         <span class="range-slider__value">
 14 |           {{ options.extraSpacing.extraX }}
 15 |         </span>
 16 |       </div>
 17 |       <div>
 18 |         <label for="extraY">ExtraY</label>
 19 |         <input
 20 |           type="range"
 21 |           v-model.number="options.extraSpacing.extraY"
 22 |           name="extraY"
 23 |           :min="-500"
 24 |           :max="500"
 25 |         />
 26 |         <span class="range-slider__value">
 27 |           {{ options.extraSpacing.extraY }}
 28 |         </span>
 29 |       </div>
 30 |       <div>
 31 |         <label for="angle">Angle</label>
 32 |         <input
 33 |           type="range"
 34 |           v-model.number="options.angle"
 35 |           name="angle"
 36 |           :min="0"
 37 |           :max="360"
 38 |         />
 39 |         <span class="range-slider__value">{{ options.angle }}</span>
 40 |       </div>
 41 |       <div>
 42 |         <label for="piecesWidth">PiecesWidth</label>
 43 |         <input
 44 |           type="range"
 45 |           v-model.number="options.piecesWidth"
 46 |           name="piecesWidth"
 47 |           :min="0"
 48 |           :max="200"
 49 |         />
 50 |         <span class="range-slider__value">{{ options.piecesWidth }}</span>
 51 |       </div>
 52 |       <div>
 53 |         <label for="ty">Ty (startY)</label>
 54 |         <input
 55 |           type="range"
 56 |           v-model.number="options.ty"
 57 |           name="ty"
 58 |           :min="-300"
 59 |           :max="300"
 60 |         />
 61 |         <span class="range-slider__value">{{ options.ty }}</span>
 62 |       </div>
 63 |       <div>
 64 |         <label for="piecesSpacing">PiecesSpacing</label>
 65 |         <input
 66 |           type="range"
 67 |           v-model.number="options.piecesSpacing"
 68 |           name="piecesSpacing"
 69 |           :min="0"
 70 |           :max="100"
 71 |         />
 72 |         <span class="range-slider__value">{{ options.piecesSpacing }}</span>
 73 |       </div>
 74 |     </div>
 75 |     <Slider
 76 |       :arrow="true"
 77 |       :options="options"
 78 |       @click="click"
 79 |       class="slider"
 80 |       :list="list"
 81 |       v-model="activeIndex"
 82 |     ></Slider>
 83 |   </div>
 84 | </template>
 85 | 
 86 | <script>
 87 | import Slider from "./index.vue";
 88 | 
 89 | export default {
 90 |   name: "app",
 91 |   data() {
 92 |     return {
 93 |       activeIndex: 0,
 94 |       list: [
 95 |         "./img/1.jpg",
 96 |         "./img/2.jpg",
 97 |         "./img/3.jpg",
 98 |         "./img/4.jpg",
 99 |         "./img/5.jpg"
100 |       ],
101 |       options: {
102 |         angle: 30,
103 |         extraSpacing: { extraX: 1, extraY: -20 },
104 |         piecesWidth: 100,
105 |         ty: 200,
106 |         piecesSpacing: 1,
107 |         animation: {
108 |           duration: 2000,
109 |           easing: "easeOutQuint"
110 |         }
111 |       }
112 |     };
113 |   },
114 |   components: {
115 |     Slider
116 |   },
117 |   methods: {
118 |     click() {
119 |       // eslint-disable-next-line no-console
120 |       console.info("object");
121 |     }
122 |   }
123 | };
124 | </script>
125 | 
126 | <style lang="scss">
127 | #app {
128 |   font-family: "Avenir", Helvetica, Arial, sans-serif;
129 |   -webkit-font-smoothing: antialiased;
130 |   -moz-osx-font-smoothing: grayscale;
131 |   text-align: center;
132 |   color: #2c3e50;
133 |   .slider {
134 |     width: 400px;
135 |     height: 200px;
136 |   }
137 |   .toolbox {
138 |     margin-right: 100px;
139 |     display: flex;
140 |     flex-direction: column;
141 |     & > div {
142 |       margin: 20px;
143 |       label {
144 |         margin-right: 10px;
145 |         font-weight: bold;
146 |         color: white;
147 |         font-size: 1em;
148 |         padding: 0.75em;
149 |       }
150 |       input {
151 |         vertical-align: middle;
152 |       }
153 |       .range-slider__value {
154 |         display: inline-block;
155 |         position: relative;
156 |         width: 60px;
157 |         color: #fff;
158 |         line-height: 20px;
159 |         text-align: center;
160 |         border-radius: 3px;
161 |         background: #2c3e50;
162 |         padding: 5px 10px;
163 |         margin-left: 8px;
164 | 
165 |         &:after {
166 |           position: absolute;
167 |           top: 50%;
168 |           left: -6px;
169 |           width: 0;
170 |           transform: translateY(-50%);
171 |           height: 0;
172 |           font-weight: bold;
173 |           border-top: 6px solid transparent;
174 |           border-right: 6px solid #2c3e50;
175 |           border-bottom: 6px solid transparent;
176 |           content: "";
177 |         }
178 |       }
179 |     }
180 |   }
181 | }
182 | </style>
183 | 


--------------------------------------------------------------------------------
/src/_index.scss:
--------------------------------------------------------------------------------
 1 | .vue-piece-slider {
 2 |   &:hover {
 3 |     .pieces-slider__button {
 4 |       display: inline-block;
 5 |     }
 6 |   }
 7 |   position: relative;
 8 |   text-align: center;
 9 |   padding: 0;
10 |   display: inline-block;
11 |   width: 100%;
12 |   height: 400px;
13 |   /* Make all slides absolutes and hide them */
14 |   .pieces-slider__slide {
15 |     position: absolute;
16 |     right: 100%;
17 |     .pieces-slider__image {
18 |       max-width: 400px;
19 |       max-height: 200px;
20 |       display: none;
21 |     }
22 |   }
23 | 
24 |   /* Define image dimensions and also hide them */
25 | 
26 |   /* Canvas with viewport width and height */
27 |   .pieces-slider__canvas {
28 |     position: relative;
29 |     width: 100%;
30 |     height: 100%;
31 |     transition: 0.2s opacity;
32 |   }
33 | 
34 |   /* Class for when we resize */
35 |   .pieces-slider__canvas--hidden {
36 |     opacity: 0;
37 |     transition-duration: 0.3s;
38 |   }
39 | 
40 |   /* Navigation buttons */
41 |   .pieces-slider__button {
42 |     user-select: none;
43 |     display: none;
44 |     position: absolute;
45 |     left: 0;
46 |     top: 50%;
47 |     border: none;
48 |     outline: 0;
49 |     padding: 0;
50 |     margin: 0;
51 |     width: 36px;
52 |     height: 36px;
53 |     background-color: rgba(31, 45, 61, 0.11);
54 |     color: #fff;
55 |     text-align: center;
56 |     border-radius: 50%;
57 |     font-size: 1.5em;
58 |     font-weight: bold;
59 |     cursor: pointer;
60 |     transition: 0.1s background-color;
61 |     transform: translateY(-50%);
62 |   }
63 | 
64 |   .pieces-slider__button--next {
65 |     left: auto;
66 |     right: 0;
67 |   }
68 | }
69 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import pieceSlider from "./index.vue";
2 | export default pieceSlider;
3 | 


--------------------------------------------------------------------------------
/src/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <!-- Pieces Slider -->
  3 |   <div v-on="$listeners" class="pieces-slider vue-piece-slider">
  4 |     <!-- Each slide with corresponding image -->
  5 |     <div v-for="(v, i) of list" :key="i" class="pieces-slider__slide">
  6 |       <img :ref="getImgRef(i)" class="pieces-slider__image" :src="v" alt />
  7 |     </div>
  8 |     <!-- Canvas to draw the pieces -->
  9 |     <canvas class="pieces-slider__canvas"></canvas>
 10 |     <!-- Slider buttons: prev and next -->
 11 |     <button
 12 |       v-if="arrow"
 13 |       @click="prevItem"
 14 |       class="pieces-slider__button pieces-slider__button--prev"
 15 |     >
 16 |       &laquo;
 17 |     </button>
 18 |     <button
 19 |       v-if="arrow"
 20 |       @click="nextItem"
 21 |       class="pieces-slider__button pieces-slider__button--next"
 22 |     >
 23 |       &raquo;
 24 |     </button>
 25 |   </div>
 26 | </template>
 27 | <script>
 28 | import anime from "animejs";
 29 | // window.anime = anime
 30 | import Pieces from "./piece/index.js";
 31 | // Options for images
 32 | const imageOptions = {
 33 |   angle: 45,
 34 |   extraSpacing: { extraX: 500, extraY: 200 },
 35 |   piecesWidth: function() {
 36 |     return Pieces.random(50, 200);
 37 |   },
 38 |   ty: function() {
 39 |     return Pieces.random(-400, 400);
 40 |   }
 41 | };
 42 | export default {
 43 |   props: {
 44 |     list: {
 45 |       type: Array,
 46 |       default: () => []
 47 |     },
 48 |     value: {
 49 |       type: [String, Number],
 50 |       default: 0
 51 |     },
 52 |     options: {
 53 |       type: Object,
 54 |       default: () => ({})
 55 |     },
 56 |     arrow: {
 57 |       type: Boolean,
 58 |       default: true
 59 |     }
 60 |   },
 61 |   data() {
 62 |     return {};
 63 |   },
 64 |   methods: {
 65 |     initVar() {
 66 |       this.items = [];
 67 |       this.imagesReady = 0;
 68 |       this.piecesSlider = null;
 69 |     },
 70 |     getImgRef(i) {
 71 |       const refName = `imgRef_${i}`;
 72 |       return refName;
 73 |     },
 74 |     loadImg() {
 75 |       const slidesNum = this.list.length;
 76 |       for (let i = 0; i < slidesNum; i++) {
 77 |         // Wait for all images to load before initializing the slider and event listeners
 78 |         const slideImage = new Image();
 79 |         slideImage.onload = () => {
 80 |           if (++this.imagesReady == slidesNum) {
 81 |             this.initSlider();
 82 |           }
 83 |         };
 84 |         // Push all elements for each slide with the corresponding options
 85 |         this.items.push({
 86 |           type: "image",
 87 |           value: this.$refs[this.getImgRef(i)][0],
 88 |           options: { ...imageOptions, ...this.options }
 89 |         });
 90 |         slideImage.src = this.list[i];
 91 |       }
 92 |     },
 93 |     initSlider() {
 94 |       // Stop any current animation if the slider was initialized before
 95 |       if (this.piecesSlider) {
 96 |         this.piecesSlider.stop();
 97 |       }
 98 | 
 99 |       // Save the new Pieces instance
100 |       this.piecesSlider = new Pieces({
101 |         ...{
102 |           canvas: ".vue-piece-slider .pieces-slider__canvas",
103 |           items: this.items,
104 |           x: "centerAll",
105 |           y: "centerAll",
106 |           piecesSpacing: 4,
107 |           animation: {
108 |             duration: function() {
109 |               return Pieces.random(1000, 2000);
110 |             },
111 |             easing: "easeOutQuint"
112 |           }
113 |         },
114 |         ...this.options
115 |       });
116 |       // Show current items: image, text and number
117 |       this.showItems();
118 |     },
119 |     // Show current items: image, text and number
120 |     showItems() {
121 |       // Show image pieces
122 |       this.piecesSlider.showPieces({
123 |         items: this.value,
124 |         ignore: ["tx"],
125 |         singly: true,
126 |         update: anim => {
127 |           // Stop the pieces animation at 60%, and run a new indefinitely animation of `ty` for each piece
128 |           if (anim.progress > 60) {
129 |             const piece = anim.animatables[0].target;
130 |             const ty = piece.ty;
131 |             anime.remove(piece);
132 |             anime({
133 |               targets: piece,
134 |               ty:
135 |                 piece.h_ty < 300
136 |                   ? [
137 |                       { value: ty + 10, duration: 1000 },
138 |                       { value: ty - 10, duration: 2000 },
139 |                       { value: ty, duration: 1000 }
140 |                     ]
141 |                   : [
142 |                       { value: ty - 10, duration: 1000 },
143 |                       { value: ty + 10, duration: 2000 },
144 |                       { value: ty, duration: 1000 }
145 |                     ],
146 |               duration: 2000,
147 |               easing: "linear",
148 |               loop: true
149 |             });
150 |           }
151 |         }
152 |       });
153 |     },
154 |     hideItems() {
155 |       if (this.piecesSlider) {
156 |         this.piecesSlider.hidePieces({
157 |           items: [this.value]
158 |         });
159 |       }
160 |     },
161 |     prevItem() {
162 |       if (this.piecesSlider) {
163 |         this.hideItems();
164 |         const currentIndex =
165 |           this.value > 0 ? this.value - 1 : this.list.length - 1;
166 |         this.$emit("input", currentIndex);
167 |       }
168 |     },
169 |     nextItem() {
170 |       if (this.piecesSlider) {
171 |         this.hideItems();
172 |         const currentIndex =
173 |           this.value < this.list.length - 1 ? this.value + 1 : 0;
174 |         this.$emit("input", currentIndex);
175 |       }
176 |     },
177 |     init() {
178 |       this.initVar();
179 |       this.loadImg();
180 |     }
181 |   },
182 |   watch: {
183 |     value: function() {
184 |       this.showItems();
185 |     },
186 |     options: {
187 |       handler: function() {
188 |         this.hideItems();
189 |         this.init();
190 |       },
191 |       deep: true
192 |     }
193 |   },
194 |   mounted() {
195 |     this.init();
196 |   }
197 | };
198 | </script>
199 | <style lang="scss">
200 | @import "index";
201 | </style>
202 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import Vue from "vue";
2 | import App from "./App.vue";
3 | 
4 | Vue.config.productionTip = false;
5 | 
6 | new Vue({
7 |   render: h => h(App)
8 | }).$mount("#app");
9 | 


--------------------------------------------------------------------------------
/src/piece/index.js:
--------------------------------------------------------------------------------
  1 | import Transform from "./transform";
  2 | import anime from "animejs";
  3 | // Utils
  4 | 
  5 | function stringContains(str, text) {
  6 |   return str.indexOf(text) > -1;
  7 | }
  8 | 
  9 | const is = {
 10 |   arr: a => Array.isArray(a),
 11 |   obj: a => stringContains(Object.prototype.toString.call(a), "Object"),
 12 |   str: a => typeof a === "string",
 13 |   fnc: a => typeof a === "function",
 14 |   und: a => typeof a === "undefined",
 15 |   num: a => typeof a === "number"
 16 | };
 17 | 
 18 | function extendSingle(target, source) {
 19 |   for (let key in source)
 20 |     target[key] = is.arr(source[key]) ? source[key].slice(0) : source[key];
 21 |   return target;
 22 | }
 23 | 
 24 | // eslint-disable-next-line no-unused-vars
 25 | function extend(target, source) {
 26 |   if (!target) target = {};
 27 |   for (let i = 1; i < arguments.length; i++) extendSingle(target, arguments[i]);
 28 |   return target;
 29 | }
 30 | 
 31 | function pushArray(arr, arr2) {
 32 |   arr.push.apply(arr, arr2);
 33 | }
 34 | 
 35 | function createCanvas() {
 36 |   const canvas = document.createElement("canvas");
 37 |   const ctx = canvas.getContext("2d");
 38 |   return { canvas, ctx };
 39 | }
 40 | 
 41 | function toArray(obj, keys) {
 42 |   keys.forEach(key => {
 43 |     if (!is.arr(obj[key])) obj[key] = is.und(obj[key]) ? [] : [obj[key]];
 44 |   });
 45 | }
 46 | 
 47 | function setValuesByIndex(obj, index, keys, values) {
 48 |   let value;
 49 |   keys.forEach(key => {
 50 |     value = obj[key][index];
 51 |     if (!is.und(value)) {
 52 |       values[key] = value;
 53 |     }
 54 |   });
 55 |   return values;
 56 | }
 57 | 
 58 | function areObjectsEquals(obj1, obj2, keys) {
 59 |   return !keys.some(key => obj1[key] !== obj2[key]);
 60 | }
 61 | 
 62 | function copyValues(to, from, keys) {
 63 |   keys.forEach(key => (to[key] = from[key]));
 64 | }
 65 | 
 66 | function normalizeAngle(angle) {
 67 |   return angle >= 0 ? angle % 360 : (angle % 360) + 360;
 68 | }
 69 | 
 70 | function intersect(a, b) {
 71 |   return (
 72 |     a &&
 73 |     b &&
 74 |     a.left <= b.right &&
 75 |     b.left <= a.right &&
 76 |     a.top <= b.bottom &&
 77 |     b.top <= a.bottom
 78 |   );
 79 | }
 80 | 
 81 | // https://stackoverflow.com/a/7838871/4908989
 82 | function roundRect(ctx, x, y, w, h, r) {
 83 |   if (w < 2 * r) r = w / 2;
 84 |   if (h < 2 * r) r = h / 2;
 85 |   ctx.beginPath();
 86 |   ctx.moveTo(x + r, y);
 87 |   ctx.arcTo(x + w, y, x + w, y + h, r);
 88 |   ctx.arcTo(x + w, y + h, x, y + h, r);
 89 |   ctx.arcTo(x, y + h, x, y, r);
 90 |   ctx.arcTo(x, y, x + w, y, r);
 91 |   ctx.closePath();
 92 |   return ctx;
 93 | }
 94 | 
 95 | // Pieces
 96 | 
 97 | function Pieces(options) {
 98 |   const animation = extend({}, this.defaults.animation, options.animation);
 99 |   this.init(extend({}, this.defaults, options, { animation }));
100 | }
101 | 
102 | Pieces.prototype = {
103 |   defaults: {
104 |     canvas: null,
105 |     items: [],
106 |     image: [],
107 |     text: [],
108 |     path: [],
109 |     x: 0,
110 |     y: 0,
111 |     w: [0],
112 |     h: [0],
113 |     tx: [0],
114 |     ty: [0],
115 |     itemSeparation: 1,
116 |     piecesWidth: [5],
117 |     piecesSpacing: [5],
118 |     extraSpacing: [{ extraX: 0, extraY: 0 }],
119 |     angle: [0],
120 |     rotate: [0],
121 |     translate: [{ translateX: 0, translateY: 0 }],
122 |     padding: [0],
123 |     opacity: [1],
124 |     fontFamily: ["sans-serif"],
125 |     fontSize: [100],
126 |     fontWeight: [900],
127 |     color: ["#000"],
128 |     backgroundColor: false,
129 |     backgroundRadius: 0,
130 |     ghostOpacity: 0,
131 |     checkHover: false,
132 |     animation: { duration: [1000], delay: [0], easing: ["easeInOutCubic"] },
133 |     saveShowState: false,
134 |     debug: false,
135 |     ready: null
136 |   },
137 | 
138 |   init(options) {
139 |     this.initOptions(options);
140 |     this.initCanvas(options);
141 |     // this.initEvents(options);
142 |     if (options.items.length) {
143 |       options.items.forEach(item => {
144 |         this.setItemOptions(options, item.options);
145 |         switch (item.type) {
146 |           case "image":
147 |             return this.initImage(item.value);
148 |         }
149 |       });
150 |     }
151 | 
152 |     if (this.drawList.length) {
153 |       this.initPieces(options);
154 |       this.loop(options);
155 |     }
156 |     if (options.ready) {
157 |       options.ready();
158 |     }
159 |   },
160 | 
161 |   initOptions(options) {
162 |     const { canvas } = options;
163 |     if (is.str(canvas)) options.canvas = document.querySelector(canvas);
164 |     toArray(options, [
165 |       "items",
166 |       "image",
167 |       "text",
168 |       "path",
169 |       "w",
170 |       "h",
171 |       "tx",
172 |       "ty",
173 |       "piecesWidth",
174 |       "piecesSpacing",
175 |       "extraSpacing",
176 |       "angle",
177 |       "rotate",
178 |       "translate",
179 |       "svgWidth",
180 |       "svgHeight",
181 |       "color",
182 |       "backgroundColor",
183 |       "backgroundRadius",
184 |       "padding",
185 |       "opacity",
186 |       "fontFamily",
187 |       "fontSize",
188 |       "fontWeight",
189 |       "ghost",
190 |       "ghostOpacity"
191 |     ]);
192 |     toArray(options.animation, ["duration", "delay", "easing"]);
193 |     this.v = {};
194 |     this.o = [];
195 |     this.drawList = [];
196 |   },
197 | 
198 |   initCanvas(options) {
199 |     if (options.canvas) {
200 |       options.ctx = options.canvas.getContext("2d");
201 |     } else {
202 |       extend(options, createCanvas());
203 |     }
204 |     options.canvas.width = this.width = options.canvas.clientWidth;
205 |     options.canvas.height = this.height = options.canvas.clientHeight;
206 |   },
207 | 
208 |   setItemOptions(options, itemOptions) {
209 |     const index = this.drawList.length;
210 |     setValuesByIndex(
211 |       options,
212 |       index,
213 |       [
214 |         "text",
215 |         "color",
216 |         "backgroundColor",
217 |         "backgroundRadius",
218 |         "padding",
219 |         "fontFamily",
220 |         "fontSize",
221 |         "fontWeight",
222 |         "svgWidth",
223 |         "svgHeight",
224 |         "piecesWidth",
225 |         "piecesSpacing",
226 |         "extraSpacing",
227 |         "opacity",
228 |         "angle",
229 |         "rotate",
230 |         "translate",
231 |         "ghost",
232 |         "ghostOpacity",
233 |         "w",
234 |         "h",
235 |         "tx",
236 |         "ty"
237 |       ],
238 |       this.v
239 |     );
240 |     setValuesByIndex(
241 |       options.animation,
242 |       index,
243 |       ["duration", "delay", "easing"],
244 |       this.v
245 |     );
246 |     this.o.push(extend({}, this.v, itemOptions || {}));
247 |   },
248 | 
249 |   initImage(image) {
250 |     const o = this.o[this.o.length - 1];
251 |     let padding = is.fnc(o.padding) ? o.padding() : o.padding;
252 |     padding = padding
253 |       ? padding.split(" ").map(p => parseFloat(p))
254 |       : [0, 0, 0, 0];
255 |     const { canvas, ctx } = createCanvas();
256 |     canvas.width = image.width + 2 + padding[1] + padding[3];
257 |     canvas.height = image.height + 2 + padding[0] + padding[2];
258 |     if (o.backgroundColor) {
259 |       ctx.fillStyle = o.backgroundColor;
260 |       if (o.backgroundRadius) {
261 |         roundRect(
262 |           ctx,
263 |           1,
264 |           1,
265 |           canvas.width - 2,
266 |           canvas.height - 2,
267 |           o.backgroundRadius
268 |         );
269 |         ctx.fill();
270 |       } else {
271 |         ctx.fillRect(1, 1, canvas.width - 2, canvas.height - 2);
272 |       }
273 |     }
274 |     ctx.drawImage(
275 |       image,
276 |       0,
277 |       0,
278 |       image.naturalWidth,
279 |       image.naturalHeight,
280 |       1 + padding[3],
281 |       1 + padding[0],
282 |       image.width,
283 |       image.height
284 |     );
285 |     this.drawList.push(canvas);
286 |   },
287 | 
288 |   initPieces(options) {
289 |     const t = new Transform();
290 |     let piecesWidth, piecesHeight, piecesSpacing, item, last, p, x, lx, y, w, h;
291 |     this.pieces = [];
292 |     this.items = [];
293 |     const itemSeparation = options.itemSeparation;
294 |     x =
295 |       options.x === "center"
296 |         ? this.width / 2 -
297 |           (this.drawList.reduce((a, b) => a + b.width, 0) +
298 |             itemSeparation * this.drawList.length) /
299 |             2
300 |         : options.x;
301 |     y =
302 |       options.y === "center"
303 |         ? this.height / 2 - this.drawList[0].height / 2
304 |         : options.y;
305 |     let o;
306 |     this.drawList.forEach((img, index) => {
307 |       o = this.o[index];
308 | 
309 |       const { extraX, extraY } = is.obj(o.extraSpacing)
310 |         ? o.extraSpacing
311 |         : { extraX: o.extraSpacing, extraY: o.extraSpacing };
312 |       const { translateX, translateY } = is.fnc(o.translate)
313 |         ? o.translate()
314 |         : is.obj(o.translate)
315 |         ? o.translate
316 |         : { translateX: o.translate, translateY: o.translate };
317 | 
318 |       if (options.x === "centerAll") {
319 |         x = this.width / 2 - img.width / 2;
320 |       }
321 |       if (options.y === "centerAll") {
322 |         y = this.height / 2 - img.height / 2;
323 |       }
324 | 
325 |       x += translateX;
326 |       y += translateY;
327 | 
328 |       last = { angle: null }; // Force first redraw
329 |       item = { last, index, y, extraY, img };
330 |       item.x = lx = x;
331 |       item.width = img.width;
332 |       item.height = img.height;
333 |       item.angle = normalizeAngle(o.angle);
334 |       item.rotate = normalizeAngle(o.rotate);
335 |       item.ghost = o.ghost;
336 |       item.ghostDashArray = [20, 10];
337 |       item.ghostDashOffset = item.ghostDashArray[0] + item.ghostDashArray[1];
338 |       item.ghostOpacity = o.ghostOpacity;
339 |       item.pieces = [];
340 |       item.shown = false;
341 |       item.hidden = true;
342 |       this.items.push(item);
343 | 
344 |       // Shown img
345 |       const { ctx, canvas } = createCanvas();
346 |       canvas.width = item.width;
347 |       canvas.height = item.height;
348 | 
349 |       while (lx - (item.width + extraX * 2) < item.x) {
350 |         piecesWidth = is.fnc(o.piecesWidth) ? o.piecesWidth() : o.piecesWidth;
351 |         piecesHeight = item.height + extraY * 2;
352 |         piecesSpacing = is.fnc(o.piecesSpacing)
353 |           ? o.piecesSpacing()
354 |           : o.piecesSpacing;
355 |         w = Math.min(is.fnc(o.w) ? o.w() : o.w, piecesWidth);
356 |         h = Math.min(is.fnc(o.h) ? o.h() : o.h, piecesHeight);
357 |         last = {};
358 |         p = { last, item };
359 |         p.h_x = p.x = last.x = lx - extraX + piecesWidth / 2 - w / 2;
360 |         p.s_x = lx - extraX;
361 |         p.h_y = p.y = last.y = y + item.height / 2 - h / 2;
362 |         p.s_y = y - extraY;
363 |         p.h_w = p.w = last.w = w;
364 |         p.s_w = piecesWidth;
365 |         p.h_h = p.h = last.h = h;
366 |         p.s_h = piecesHeight;
367 |         p.h_tx = p.s_tx = p.tx = last.tx = is.fnc(o.tx) ? o.tx() : o.tx;
368 |         p.h_ty = p.ty = last.ty = extraY + (is.fnc(o.ty) ? o.ty() : o.ty);
369 |         p.s_ty = extraY;
370 |         p.opacity = is.fnc(o.opacity) ? o.opacity() : o.opacity;
371 |         p.duration = is.fnc(o.duration) ? o.duration() : o.duration;
372 |         p.delay = is.fnc(o.delay) ? o.delay() : o.delay;
373 |         p.easing = o.easing;
374 |         item.pieces.push(p);
375 |         this.pieces.push(p);
376 |         lx += piecesWidth + piecesSpacing;
377 | 
378 |         // Draw p for shown img
379 |         ctx.save();
380 |         t.translate(item.width / 2, item.height / 2);
381 |         t.rotate((item.angle * Math.PI) / 180);
382 |         t.translate(-item.width / 2, -item.height / 2);
383 |         t.translate(p.s_tx, p.s_ty - item.extraY);
384 |         t.translate(p.s_x + p.s_w / 2 - item.x, p.s_y + p.s_h / 2 - item.y);
385 |         t.apply(ctx);
386 |         ctx.beginPath();
387 |         ctx.rect(-p.s_w / 2, -p.s_h / 2, p.s_w, p.s_h);
388 |         ctx.clip();
389 |         t.reset(ctx);
390 |         ctx.globalAlpha = p.opacity;
391 | 
392 |         const ratio = item.img.height / item.img.width;
393 |         ctx.drawImage(
394 |           item.img,
395 |           (1 - ratio) / 2,
396 |           ratio / 2,
397 |           item.img.width - (1 - ratio),
398 |           item.img.height - ratio
399 |         );
400 | 
401 |         ctx.restore();
402 |       }
403 | 
404 |       item.imgShown = canvas;
405 |       item.rectShown = {
406 |         left: item.x,
407 |         top: item.y,
408 |         right: item.x + item.width,
409 |         bottom: item.y + item.height
410 |       };
411 | 
412 |       if (options.x !== "centerAll") {
413 |         x += img.width + itemSeparation;
414 |       }
415 |     });
416 |   },
417 | 
418 |   renderPieces(o, item) {
419 |     const { ctx } = o;
420 |     const t = new Transform();
421 |     let angle, rotate;
422 | 
423 |     if (item.redraw) {
424 |       item.redraw = false;
425 |       if (item.shown && o.saveShowState) {
426 |         ctx.drawImage(
427 |           item.imgShown,
428 |           0,
429 |           0,
430 |           item.width,
431 |           item.height,
432 |           item.x,
433 |           item.y,
434 |           item.width,
435 |           item.height
436 |         );
437 |       } else if (!item.hidden) {
438 |         angle = normalizeAngle(item.angle);
439 |         rotate = normalizeAngle(item.rotate);
440 |         item.pieces.forEach(p => {
441 |           ctx.save();
442 | 
443 |           t.translate(item.x, item.y);
444 |           t.translate(item.width / 2, item.height / 2);
445 |           t.rotate(((angle + rotate) * Math.PI) / 180);
446 |           t.translate(-item.width / 2, -item.height / 2);
447 |           t.translate(p.tx, p.ty - item.extraY);
448 |           t.translate(p.x + p.w / 2 - item.x, p.y + p.h / 2 - item.y);
449 |           t.apply(ctx);
450 |           ctx.beginPath();
451 |           ctx.rect(-p.w / 2, -p.h / 2, p.w, p.h);
452 | 
453 |           if (o.debug) {
454 |             ctx.setLineDash([]);
455 |             ctx.strokeStyle = "black";
456 |             ctx.stroke();
457 |           } else {
458 |             ctx.clip();
459 |           }
460 | 
461 |           t.translate(-(p.x + p.w / 2 - item.x), -(p.y + p.h / 2 - item.y));
462 |           t.translate(item.width / 2, item.height / 2);
463 |           t.rotate((-angle * Math.PI) / 180);
464 |           t.translate(-item.width / 2, -item.height / 2);
465 |           t.apply(ctx);
466 |           ctx.globalAlpha = p.opacity;
467 | 
468 |           const ratio = item.img.height / item.img.width;
469 |           ctx.drawImage(
470 |             item.img,
471 |             (1 - ratio) / 2,
472 |             ratio / 2,
473 |             item.img.width - (1 - ratio),
474 |             item.img.height - ratio
475 |           );
476 | 
477 |           t.reset();
478 |           ctx.restore();
479 |         });
480 |       }
481 |     }
482 |   },
483 | 
484 |   isItemDifferent(item) {
485 |     return (
486 |       !areObjectsEquals(item, item.last, ["angle"]) ||
487 |       item.pieces.some(
488 |         p => !areObjectsEquals(p, p.last, ["x", "y", "w", "h", "tx", "ty"])
489 |       )
490 |     );
491 |   },
492 | 
493 |   isItemShown(item) {
494 |     return item.pieces.every(
495 |       p =>
496 |         p.x === p.s_x &&
497 |         p.y === p.s_y &&
498 |         p.w === p.s_w &&
499 |         p.h === p.s_h &&
500 |         p.tx === p.s_tx &&
501 |         p.ty === p.s_ty
502 |     );
503 |   },
504 | 
505 |   isItemHidden(item) {
506 |     return item.pieces.every(p => p.w === 0 && p.h === 0);
507 |   },
508 | 
509 |   clearRect(o) {
510 |     const t = new Transform();
511 |     let newRedraw = false,
512 |       x,
513 |       y,
514 |       w,
515 |       h,
516 |       p1,
517 |       p2,
518 |       p3,
519 |       p4,
520 |       left,
521 |       top,
522 |       right,
523 |       bottom,
524 |       itemRect,
525 |       angle,
526 |       rotate,
527 |       clear = null;
528 | 
529 |     // Discover modified items, and initial clear rect
530 |     this.items.forEach(item => {
531 |       angle = normalizeAngle(item.angle);
532 |       rotate = normalizeAngle(item.rotate);
533 |       if (this.isItemDifferent(item)) {
534 |         newRedraw = true;
535 |         itemRect = null;
536 |         item.redraw = true;
537 |         item.shown = this.isItemShown(item);
538 |         item.hidden = this.isItemHidden(item);
539 |         copyValues(item.last, item, ["angle"]);
540 |         item.pieces.forEach(p => {
541 |           let { last } = p;
542 |           t.translate(item.x, item.y);
543 |           t.translate(item.width / 2, item.height / 2);
544 |           t.rotate(((angle + rotate) * Math.PI) / 180);
545 |           t.translate(-item.width / 2, -item.height / 2);
546 |           t.translate(last.tx, last.ty - item.extraY);
547 |           t.translate(
548 |             last.x + last.w / 2 - item.x,
549 |             last.y + last.h / 2 - item.y
550 |           );
551 | 
552 |           x = -last.w / 2 - 1;
553 |           y = -last.h / 2 - 1;
554 |           w = last.w + 2;
555 |           h = last.h + 2;
556 | 
557 |           p1 = t.transformPoint(x, y);
558 |           p2 = t.transformPoint(x + w, y);
559 |           p3 = t.transformPoint(x + w, y + h);
560 |           p4 = t.transformPoint(x, y + h);
561 | 
562 |           left = Math.min(p1[0], p2[0], p3[0], p4[0]);
563 |           top = Math.min(p1[1], p2[1], p3[1], p4[1]);
564 |           right = Math.max(p1[0], p2[0], p3[0], p4[0]);
565 |           bottom = Math.max(p1[1], p2[1], p3[1], p4[1]);
566 | 
567 |           itemRect = this.extendRect(itemRect, { left, top, right, bottom });
568 | 
569 |           t.reset();
570 |           copyValues(last, p, ["x", "y", "w", "h", "tx", "ty"]);
571 |         });
572 |         clear = this.extendRect(clear, itemRect);
573 |         item.rect = item.shown ? item.rectShown : itemRect;
574 |       } else {
575 |         item.redraw = false;
576 |       }
577 | 
578 |       // Always clear rectShown if hidden and ghost
579 |       if (item.hidden && item.ghost) {
580 |         newRedraw = true;
581 |         clear = this.extendRect(clear, item.rectShown);
582 |       }
583 |     });
584 | 
585 |     // Discover adjacent redraw regions
586 |     while (newRedraw) {
587 |       newRedraw = false;
588 |       this.items.forEach(item => {
589 |         if (!item.redraw && intersect(clear, item.rect)) {
590 |           newRedraw = true;
591 |           item.redraw = true;
592 |           clear = this.extendRect(clear, item.rect);
593 |         }
594 |       });
595 |     }
596 | 
597 |     // Clear redraw regions
598 |     if (clear) {
599 |       o.ctx.clearRect(
600 |         clear.left,
601 |         clear.top,
602 |         clear.right - clear.left,
603 |         clear.bottom - clear.top
604 |       );
605 | 
606 |       if (o.debug) {
607 |         o.ctx.setLineDash([10]);
608 |         o.ctx.strokeStyle = "rgba(255, 0, 0, 1)";
609 |         o.ctx.strokeRect(
610 |           clear.left,
611 |           clear.top,
612 |           clear.right - clear.left,
613 |           clear.bottom - clear.top
614 |         );
615 |       }
616 |     }
617 |   },
618 | 
619 |   extendRect(rect1, rect2) {
620 |     return rect1 && rect2
621 |       ? {
622 |           left: Math.max(0, Math.min(rect1.left, rect2.left)),
623 |           top: Math.max(0, Math.min(rect1.top, rect2.top)),
624 |           right: Math.min(this.width, Math.max(rect1.right, rect2.right)),
625 |           bottom: Math.min(this.height, Math.max(rect1.bottom, rect2.bottom))
626 |         }
627 |       : rect2;
628 |   },
629 | 
630 |   checkHover(o, item) {
631 |     const hover =
632 |       this.mouseX >= item.x &&
633 |       this.mouseX <= item.x + item.width &&
634 |       this.mouseY >= item.y &&
635 |       this.mouseY <= item.y + item.height;
636 |     if (hover && !item.hover) {
637 |       if (is.fnc(o.itemEnter)) {
638 |         o.itemEnter(item);
639 |       }
640 |     } else if (!hover && item.hover) {
641 |       if (is.fnc(o.itemLeave)) {
642 |         o.itemLeave(item);
643 |       }
644 |     }
645 |     item.hover = hover;
646 |     return hover;
647 |   },
648 | 
649 |   renderDebug(o, item) {
650 |     if (o.debug) {
651 |       if (o.checkHover) {
652 |         o.ctx.fillStyle = item.hover
653 |           ? "rgba(255, 0, 0, 0.3)"
654 |           : "rgba(0, 0, 0, 0.3)";
655 |         o.ctx.fillRect(item.x, item.y, item.width, item.height);
656 |       }
657 |       const { rect } = item;
658 |       if (rect) {
659 |         o.ctx.setLineDash([]);
660 |         o.ctx.strokeStyle = "rgba(255, 0, 0, 0.5)";
661 |         o.ctx.strokeRect(
662 |           rect.left,
663 |           rect.top,
664 |           rect.right - rect.left,
665 |           rect.bottom - rect.top
666 |         );
667 |       }
668 |     }
669 |   },
670 | 
671 |   loop(o) {
672 |     this.frame = requestAnimationFrame(this.loop.bind(this, o));
673 |     this.clearRect(o);
674 |     this.hoverItem = null;
675 |     this.items.forEach(item => {
676 |       if (o.checkHover && this.checkHover(o, item)) {
677 |         this.hoverItem = item;
678 |       }
679 |       this.renderPieces(o, item);
680 |       this.renderDebug(o, item);
681 |     });
682 |   },
683 | 
684 |   stop() {
685 |     cancelAnimationFrame(this.frame);
686 |     anime.remove(this.items);
687 |     anime.remove(this.pieces);
688 |   },
689 | 
690 |   getPieces(items) {
691 |     let targetPieces = [];
692 |     if (is.und(items)) {
693 |       targetPieces = this.pieces;
694 |     } else if (is.num(items)) {
695 |       targetPieces = this.items[items].pieces;
696 |     } else if (is.arr(items)) {
697 |       items.forEach(item =>
698 |         is.num(item)
699 |           ? pushArray(targetPieces, this.items[item].pieces)
700 |           : pushArray(targetPieces, item.pieces)
701 |       );
702 |     } else {
703 |       targetPieces = items.pieces;
704 |     }
705 |     return targetPieces;
706 |   },
707 | 
708 |   getItems(items) {
709 |     let targetItems = [];
710 |     if (is.und(items)) {
711 |       targetItems = this.items;
712 |     } else if (is.num(items)) {
713 |       targetItems = this.items[items];
714 |     } else if (is.arr(items)) {
715 |       items.forEach(item =>
716 |         is.num(item)
717 |           ? targetItems.push(this.items[item])
718 |           : targetItems.push(item)
719 |       );
720 |     } else {
721 |       targetItems = items;
722 |     }
723 |     return targetItems;
724 |   },
725 | 
726 |   animatePieces(options) {
727 |     const o = extend(
728 |       {
729 |         duration: p => p.duration,
730 |         delay: p => p.delay,
731 |         easing: p => p.easing,
732 |         remove: true,
733 |         singly: false
734 |       },
735 |       options
736 |     );
737 | 
738 |     const targets = this.getPieces(options.items);
739 |     if (o.remove) {
740 |       anime.remove(targets);
741 |     }
742 |     if (o.ignore) {
743 |       o.ignore.forEach(prop => delete o[prop]);
744 |     }
745 |     if (o.singly) {
746 |       targets.forEach(target => anime(extend(o, { targets: target })));
747 |     } else {
748 |       anime(extend(o, { targets }));
749 |     }
750 |   },
751 | 
752 |   showPieces(options) {
753 |     const o = extend(
754 |       {
755 |         x: p => p.s_x,
756 |         y: p => p.s_y,
757 |         w: p => p.s_w,
758 |         h: p => p.s_h,
759 |         tx: p => p.s_tx,
760 |         ty: p => p.s_ty
761 |       },
762 |       options
763 |     );
764 |     this.animatePieces(o);
765 |   },
766 | 
767 |   hidePieces(options) {
768 |     const o = extend(
769 |       {
770 |         x: p => p.h_x,
771 |         y: p => p.h_y,
772 |         w: p => p.h_w,
773 |         h: p => p.h_h,
774 |         tx: p => p.h_tx,
775 |         ty: p => p.h_ty
776 |       },
777 |       options
778 |     );
779 | 
780 |     this.animatePieces(o);
781 |   },
782 | 
783 |   animateItems(options) {
784 |     const o = extend(
785 |       {
786 |         easing: "linear",
787 |         remove: true
788 |       },
789 |       options,
790 |       { targets: this.getItems(options.items) }
791 |     );
792 |     if (o.remove) {
793 |       anime.remove(o.targets);
794 |     }
795 |     anime(o);
796 |   }
797 | };
798 | 
799 | // Pieces.version = "1.0.0";
800 | Pieces.random = anime.random;
801 | // Pieces.extend = extend;
802 | export default Pieces;
803 | 


--------------------------------------------------------------------------------
/src/piece/transform.js:
--------------------------------------------------------------------------------
 1 | // Adapted version of transform.js by Simon Sarris from here:
 2 | // https://github.com/simonsarris/Canvas-tutorials/blob/master/transform.js
 3 | 
 4 | function Transform(ctx) {
 5 |   this.reset(ctx);
 6 | }
 7 | 
 8 | Transform.prototype = {
 9 |   reset(ctx) {
10 |     this.m = [1, 0, 0, 1, 0, 0];
11 |     if (ctx) this.apply(ctx);
12 |   },
13 | 
14 |   rotate(rad) {
15 |     const c = Math.cos(rad);
16 |     const s = Math.sin(rad);
17 |     const m11 = this.m[0] * c + this.m[2] * s;
18 |     const m12 = this.m[1] * c + this.m[3] * s;
19 |     const m21 = this.m[0] * -s + this.m[2] * c;
20 |     const m22 = this.m[1] * -s + this.m[3] * c;
21 |     this.m[0] = m11;
22 |     this.m[1] = m12;
23 |     this.m[2] = m21;
24 |     this.m[3] = m22;
25 |   },
26 | 
27 |   translate(x, y) {
28 |     this.m[4] += this.m[0] * x + this.m[2] * y;
29 |     this.m[5] += this.m[1] * x + this.m[3] * y;
30 |   },
31 | 
32 |   transformPoint(px, py) {
33 |     const x = px * this.m[0] + py * this.m[2] + this.m[4];
34 |     const y = px * this.m[1] + py * this.m[3] + this.m[5];
35 |     return [x, y];
36 |   },
37 | 
38 |   apply(ctx) {
39 |     ctx.setTransform(
40 |       this.m[0],
41 |       this.m[1],
42 |       this.m[2],
43 |       this.m[3],
44 |       this.m[4],
45 |       this.m[5]
46 |     );
47 |   }
48 | };
49 | 
50 | export default Transform;
51 | 


--------------------------------------------------------------------------------
/tests/unit/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   env: {
3 |     jest: true
4 |   }
5 | };
6 | 


--------------------------------------------------------------------------------
/tests/unit/example.spec.js:
--------------------------------------------------------------------------------
 1 | // import { shallowMount } from "@vue/test-utils";
 2 | // import HelloWorld from "@/components/HelloWorld.vue";
 3 | 
 4 | // describe("HelloWorld.vue", () => {
 5 | //   it("renders props.msg when passed", () => {
 6 | //     const msg = "new message";
 7 | //     const wrapper = shallowMount(HelloWorld, {
 8 | //       propsData: { msg }
 9 | //     });
10 | //     expect(wrapper.text()).toMatch(msg);
11 | //   });
12 | // });
13 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
 1 | const externals =
 2 |   process.env.NODE_ENV == "production" && !process.env.DOC_ENV
 3 |     ? {
 4 |         animejs: "animejs"
 5 |       }
 6 |     : {};
 7 | module.exports = {
 8 |   publicPath:
 9 |     process.env.NODE_ENV === "production" ? "/vue-piece-slider/" : "/",
10 |   css: {
11 |     extract: false
12 |   },
13 |   chainWebpack: config => {
14 |     config.externals(externals);
15 |   }
16 | };
17 | 


--------------------------------------------------------------------------------