or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

constants-utilities.mdindex.mdinput.mdmanager.mdrecognizers.md
tile.json

index.mddocs/

Hammer.js

Hammer.js is a JavaScript library for multi-touch gestures that enables developers to recognize and respond to touch gestures like tap, pan, swipe, pinch, and rotate on touch-enabled devices. It provides a manager-based architecture with gesture recognizers that can be combined and configured to detect complex gesture patterns.

Package Information

  • Package Name: hammerjs
  • Package Type: npm
  • Language: JavaScript
  • Installation: 
    npm install hammerjs

Core Imports

import Hammer from "hammerjs";

For CommonJS:

const Hammer = require("hammerjs");

Basic Usage

import Hammer from "hammerjs";

// Create a manager for an element
const element = document.getElementById('myElement');
const mc = new Hammer(element);

// Listen to a simple tap
mc.on('tap', function(ev) {
    console.log('Tapped!');
});

// Listen to a pan gesture
mc.on('pan', function(ev) {
    console.log('Panning:', ev.deltaX, ev.deltaY);
});

Architecture

Hammer.js is built around several key components:

  • Manager: Core gesture manager (
    Hammer.Manager
    ) that coordinates recognizers and input handlers
  • Recognizers: Gesture detection classes (Pan, Tap, Press, Swipe, Pinch, Rotate) that identify specific touch patterns
  • Input Classes: Platform-specific input handlers for touch, mouse, and pointer events
  • Event System: Event binding and emission system for gesture callbacks
  • Touch Action: CSS touch-action property management for preventing browser interference

Capabilities

Core Constructor and Manager

Main constructor function and gesture manager for coordinating gesture recognition on DOM elements.

function Hammer(element, options);

class Manager {
  constructor(element, options);
  set(options);
  get(recognizer);
  add(recognizer);
  remove(recognizer);
  on(events, handler);
  off(events, handler);
  emit(event, data);
  stop(force);
  recognize(inputData);
  destroy();
}

Manager and Core API

Gesture Recognizers

Complete set of gesture recognizers for detecting touch patterns including tap, pan, swipe, pinch, rotation, and press gestures.

class Recognizer {
  constructor(options);
  set(options);
  recognizeWith(otherRecognizer);
  requireFailure(otherRecognizer);
  emit(input);
  canEmit();
  recognize(inputData);
}

// Gesture Recognizers
class TapRecognizer extends Recognizer;
class PanRecognizer extends AttrRecognizer;
class SwipeRecognizer extends AttrRecognizer;
class PressRecognizer extends Recognizer;
class PinchRecognizer extends AttrRecognizer;
class RotateRecognizer extends AttrRecognizer;

Gesture Recognizers

Input Handling

Platform-specific input classes for handling touch, mouse, and pointer events across different devices and browsers.

class Input {
  constructor(manager, callback);
  init();
  destroy();
}

// Input Classes
class TouchInput extends Input;
class MouseInput extends Input;
class PointerEventInput extends Input;
class TouchMouseInput extends Input;
class SingleTouchInput extends Input;

Input Handling

Constants and Utilities

Direction constants, state constants, input event types, and utility functions for gesture development.

// Direction Constants
const DIRECTION_NONE = 1;
const DIRECTION_LEFT = 2;
const DIRECTION_RIGHT = 4;
const DIRECTION_UP = 8;
const DIRECTION_DOWN = 16;
const DIRECTION_HORIZONTAL = 6;
const DIRECTION_VERTICAL = 24;
const DIRECTION_ALL = 30;

// State Constants  
const STATE_POSSIBLE = 1;
const STATE_BEGAN = 2;
const STATE_CHANGED = 4;
const STATE_ENDED = 8;
const STATE_CANCELLED = 16;
const STATE_FAILED = 32;

// Utility Functions
function on(target, types, handler);
function off(target, types, handler);
function each(obj, iterator, context);

Constants and Utilities

Types

interface HammerOptions {
  domEvents?: boolean;
  touchAction?: string;
  enable?: boolean;
  inputTarget?: Element | null;
  inputClass?: Function | null;
  recognizers?: Array;
  cssProps?: object;
}

interface EventData {
  type: string;
  pointers: Array;
  changedPointers: Array;
  pointerType: string;
  srcEvent: Event;
  isFirst: boolean;
  isFinal: boolean;
  center: {x: number, y: number};
  timeStamp: number;
  deltaTime: number;
  deltaX: number;
  deltaY: number;
  distance: number;
  angle: number;
  scale: number;
  rotation: number;
  velocity: number;
  velocityX: number;
  velocityY: number;
  direction: number;
  maxPointers: number;
  preventDefault: Function;
}