README

Claw

A very small gesture recognizer.

demo

setup

npm

npm install @seregpie/claw

ES module

import Claw from '@seregpie/claw';

browser

<script src="https://unpkg.com/@seregpie/claw"></script>

members

.constructor(target, {
  delay = 500,
  distance = 1,
})

argument	description
`target`	The target element.
`delay`	The delay threshold to separate the event types.
`distance`	The distance threshold to separate the event types.

let element = document.getElementById('claw');
(new Claw(element))
  .on('panStart', event => {
    // handle
  })
  .on('pan', event => {
    // handle
  })
  .on('panEnd', event => {
    // handle
  });

.on(type, listener)

chainable

Binds a listener to an event type.

claw.on('tap', event => {
  // handle tap event
});

.off(type, listener)

chainable

Unbinds a listener from an event type. Omit the argument listener to unbind all listeners from an event type. Omit the argument type to unbind all listeners from all event types.

let tapListener = function(event) {
  // handle tap event
  claw.off('tap', tapListener);
};
claw.on('tap', tapListener);

.isIdle

Returns true, if there are no bound listeners.

events

holdStart

{
  pointerType,
  timeStamp,
  x,
  y,
}

holdEnd

{
  initialTimeStamp,
  pointerType,
  timeStamp,
  x,
  y,
}

panStart

{
  pointerType,
  timeStamp,
  x,
  y,
}

pan

{
  initialTimeStamp,
  initialX,
  initialY,
  pointerType,
  previousTimeStamp,
  previousX,
  previousY,
  timeStamp,
  x,
  y,
}

panEnd

{
  initialTimeStamp,
  initialX,
  initialY,
  pointerType,
  timeStamp,
  x,
  y,
}

tap

{
  pointerType,
  timeStamp,
  x,
  y,
}

@seregpie/clawdeprecated

Usage no npm install needed!