Vue-collision NPM

vue-collision

fires a @collided-groupName event on collision with viewport or any other bounding box, Waypoints-like

Status

Features

Uses 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

$ npm install vue-collision --save-dev

Vue's main.js

import VueCollision from 'vue-collision'

// collision
Vue.use(VueCollision, { globalTriggers: ['resize', 'scroll'] })

Arguments

options optional: object defining what triggers the groups' checks

Components

<template>
  <component-name v-collision="['groupone']" @collide="onCollideHandler" @non-collide="nonCollideHandler" @collide-groupone="onGroupOneCollide" @non-collide-groupone="nonGroupOneCollide"></component-name>
</template>

<script>
  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
      }
    }
  }
</script>

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 and 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
- customGroups must be and an Object defined as:

customGroups = {
  groupName: {
    combinations: [
      [Component, Component],
      [Component, Component],
      ...
    ]
  },
  groupTwoName: {
    combinations: [
      [Component, Component],
      [Component, Component],
      ...
    ]
  }
  ...
}

Testing

This software uses mocha 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.