@seregpie/claw

Claw

A very small gesture recognizer.

demo

Try it out!

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,
}