https://github.com/scaccogatto/vue-collision
fires a @collided event on collision with viewport or any other bounding box
https://github.com/scaccogatto/vue-collision
Last synced: 7 months ago
JSON representation
fires a @collided event on collision with viewport or any other bounding box
- Host: GitHub
- URL: https://github.com/scaccogatto/vue-collision
- Owner: scaccogatto
- License: mit
- Created: 2016-11-29T09:02:56.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2018-03-09T10:01:11.000Z (over 7 years ago)
- Last Synced: 2024-04-25T21:45:08.419Z (over 1 year ago)
- Language: JavaScript
- Size: 22.5 KB
- Stars: 9
- Watchers: 3
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-vue-refactor - vue-collision
README
# vue-collision
> fires a @collided[-groupName] event on collision with viewport or any other bounding box, [Waypoints](http://imakewebthings.com/waypoints/)-like
## Status
[](https://travis-ci.org/scaccogatto/vue-collision)
## Features
- Uses [requestAnimationFrame](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame)
- Wrap up your components in groups
- Group all your components in the `window` group by default
- Checks collisions group by group and fire custom events when a collision happens
## Installation
### npm
```js
$ npm install vue-collision --save-dev
```
### Vue's main.js
```js
import VueCollision from 'vue-collision'
// collision
Vue.use(VueCollision, { globalTriggers: ['resize', 'scroll'] })
```
### Arguments
- options [optional]: object defining what triggers the groups' checks
### Components
```js
export default {
methods: {
onCollideHandler (collider) {
// logic for 'window' group, called when the component collides with window
},
nonCollideHandler (collider) {
// logic for 'window' group, called when the component does NOT collide with window
},
onGroupOneCollide (collider) {
// logic for 'groupone' group, called when the component collides inside 'groupone' group
},
nonGroupOneCollide (collider) {
// logic for 'groupone' group, called when the component does NOT collide inside 'groupone' group
}
}
}
```
## Usage
### v-collision directive
- Add `v-collision` directive to any component to make it part of the `vue-collision` family and a `window-group`'s direct son
- Specify a `v-collision.prevent` modifier in order to exclude the component from `window-group`
- Add a value to the directive (`v-collision="['groupone', 'grouptwo']"`) in order to reference the component into the `groupone` and `grouptwo` groups
- You can mix it together: `v-collision.prevent="['groupone', 'grouptwo']"`
### Events
- `@collide`: happens when the component is colliding with the window (based on: [innerWidth](https://developer.mozilla.org/en/docs/Web/API/window/innerWidth) and [innerHeight](https://developer.mozilla.org/en/docs/Web/API/window/innerHeight))
- `@non-collide`: happens when the component is *not* colliding with the window
- `@collide[-groupName]`: happens when the component is colliding with someone in the same group
- `@non-collide[-groupName]`: happens when the component is *not* colliding with something in the same group (can collide with any other component in the same group at the same time)
- Every event calls a `function (collider)` when fired. The `collider` is the Vue istance that is colliding with `this`
## API
- `VueCollision.checkAllGroups()`: it checks all the groups (even window's one) and fire the events stack
- `VueCollision.checkGroups(Array windowTest, Object customGroups)`: it tests the passed groups and/or Vue's components instances.
- `windowTest` must be an array containing [Components](https://vuejs.org/v2/api/#Vue-component)
- `customGroups` must be and an Object defined as:
```js
customGroups = {
groupName: {
combinations: [
[Component, Component],
[Component, Component],
...
]
},
groupTwoName: {
combinations: [
[Component, Component],
[Component, Component],
...
]
}
...
}
```
## Testing
This software uses [mocha](https://mochajs.org/) as testing framework, some functions are not being fully tested (`checkGroups` and `install`) since creating a fake VueJS environment in order to test some functions that urely on already fully tested sub-functions seems not worth.
- Clone this repository
- `cd vue-viewports`
- `npm install`
- `npm test`
*Feel free to contribute and ask questions*