kcmr / good-vibrations

Web Component that uses the Vibration API in browsers that support it

<good-vibrations>

<good-vibrations> is a component meant to be used as a singleton, that uses the Vibration API to emit vibrations in browsers that support it.
<good-vibrations> demo

Installation and import

Install the component using Bower:

$ bower i -S good-vibrations

Import Web Components loader (optional) and the component:

<script src="bower_components/webcomponentsjs/webcomponents-loader.js"></script>
<link rel="import" href="bower_components/good-vibrations/good-vibrations.html"> 

Usage

Example:

<good-vibrations vibrate duration="100"></good-vibrations>

Example with vibration / silence intervals:

<good-vibrations vibrate duration="100,200,50,100,50,100,100,200,200,400,100,200,200"></good-vibrations>

Canceling any running vibration:

document.querySelector('good-vibrations').cancel();

Or declaratively using the boolean attribute mute:

<good-vibrations mute></good-vibrations>

Get Vibration API support:

<good-vibrations vibration-supported="{{apiSupported}}"></good-vibrations>

<template is="dom-if" if="[[!apiSupported]]">
  <p>Vibration API not supported</p>
</template>

Development

browserSync and eslint support.
eslint and eslint --fix are enabled by default. Edit tasks/config.json to change the default configuration.

1. Install npm dependencies: npm install
2. Launch the component's demo: npm run serve