shake-detector's Introduction

shake-detector

Mobile device shakes detection

Setup
IOS limitation
Options
API
Chaining
Shake event
Documentation
Roadmap
License

Setup

NPM

npm i shake-detector

import ShakeDetector from 'shake-detector';
// ...
const shakeDetector = new ShakeDetector();

CDN

<script src="https://unpkg.com/shake-detector"></script>

const shakeDetector = new window.ShakeDetector();

IOS limitation

IOS (since 12.2) requires a user's permission to listen to the motion events, and it could be obtained only in response to user interaction. ShakeDetector will do nothing on IOS 12.2+ in case that such permission was not granted.

There are two options:

Notify ShakeDetector that your page has the permission

shakeDetector.confirmPermissionGranted();
shakeDetector.start();

Request the permission via ShakeDetector

const requestTrigger = document.getElementById('requestTrigger');
// requestPermission argument is optional
// default is document.documentElement
shakeDetector.requestPermission(requestTrigger).then(() => {
    shakeDetector.start();
});

In this case ShakeDetector will set a one-time click event listener and will request the permission on click.

Options

const options = {
    threshold: 8,
    debounceDelay: 500,
};
const shakeDetector = new ShakeDetector(options);

Option	Type	Default	Measure	Description
`threshold`	number	15	m/s²	device acceleration that will be registered as a shake
`debounceDelay`	number	1000	ms	shake won't be registered if this amount of time has not passed after the previous shake

API

Method	Arguments	Return	Description
`subscribe`	listener {function}	`ShakeDetector` instance	Adds a handler to the shake event handlers pool
`unsubscribe`	listener {function}	`ShakeDetector` instance	Removes a handler from the shake event handlers pool
`start`	{void}	`ShakeDetector` instance	Starts monitoring the motion event
`stop`	{void}	`ShakeDetector` instance	Stops monitoring the motion event
`confirmPermissionGranted`	{void}	`ShakeDetector` instance	Notifies the detector that permission to listen to the motion events has already been granted
`requestPermission`	triggerElement {HTMLElement}	Promise	Requests a user's permission to listen to the motion events

Chaining

All ShakeDetector methods except requestPermission return its instance for chaining.

const onShake = () => {
    console.log('shake!');
};
new ShakeDetector().confirmPermissionGranted().subscribe(onShake).start();

Shake event

Once shake is detected, ShakeDetector fire an event on window. One can use it instead of the subscription via subscribe method.

const onShake = () => {
    console.log('shake!');
};
const shakeDetector = new ShakeDetector();
shakeDetector.start();
window.addEventListener(ShakeDetector.SHAKE_EVENT, onShake);

Documentation

Please find the full docs here

Roadmap

demo page with configuration options
provide magnitude of the shake for the shake listeners - how energetic the shake was

License

shake-detector's People

Contributors

Stargazers

Watchers

shake-detector's Issues

when i compile a project am getting error

Hi am getting this error can you help me.

ERROR in node_modules/shake-detector/types/index.d.ts:7:13 - error TS1005: '=' expected.

7 import type { UserOptions, ShakeHandler } from './types';
~
node_modules/shake-detector/types/index.d.ts:7:48 - error TS1005: ';' expected.

7 import type { UserOptions, ShakeHandler } from './types';
~~~~~~~~~
node_modules/shake-detector/types/interfaces/IShakeDetector.d.ts:1:13 - error TS1005: '=' expected.

1 import type { ShakeHandler } from '../types';
~
node_modules/shake-detector/types/interfaces/IShakeDetector.d.ts:1:35 - error TS1005: ';' expected.

1 import type { ShakeHandler } from '../types';
~~~~~~~~~~

[ERROR] An error occurred while running subprocess ng.

`Uncaught ReferenceError: DeviceMotionEvent is not defined`

To produce this problem:

use create-vite and choose vanilla-ts
install shake-detector
add this to main.ts

import ShakeDetector from 'shake-detector'

const shakeDetector = new ShakeDetector({}).confirmPermissionGranted();
shakeDetector.subscribe(() => {
  console.log('Shake detected!')
}).start();

npx vite --host and open a link from network (note: the local link works fine)

Then it will show the error in the console:

Uncaught ReferenceError: DeviceMotionEvent is not defined
    at new h (utils.ts:28:19)
    at new m (index.ts:41:30)
    at main.ts:13:23

When I try to click into the utils.ts:28, it shows another error message:

Could not load content for http://172.17.0.1:3001/node_modules/shake-detector/src/utils.ts (HTTP error: status code 404, net::ERR_HTTP_RESPONSE_CODE_FAILURE)

Versions:

"typescript": "^4.5.4",
"vite": "^2.8.0"
"shake-detector": "^0.3.7",
OS: Manjaro Linux x86_64
Browser: Chrome

serglider / shake-detector Goto Github PK