or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

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

manager.mddocs/

Manager and Core API

Core gesture management functionality providing the main constructor and Manager class for coordinating gesture recognition on DOM elements.

Capabilities

Main Constructor

Creates a gesture manager with default recognizer preset for common gestures.

/**
 * Creates a Manager instance with default recognizer preset
 * @param {HTMLElement} element - Target DOM element for gesture recognition
 * @param {HammerOptions} [options] - Configuration options
 * @returns {Manager} Manager instance with default recognizers
 */
function Hammer(element, options);

Version Property

Library version string for feature detection and compatibility checks.

/**
 * Current version of Hammer.js library
 * @type {string}
 */
Hammer.VERSION;

Usage Examples:

import Hammer from "hammerjs";

// Basic usage with defaults
const mc = new Hammer(document.getElementById('myElement'));

// With custom options
const mc = new Hammer(element, {
  touchAction: 'pan-y',
  recognizers: [
    [Hammer.Tap],
    [Hammer.Pan, { direction: Hammer.DIRECTION_HORIZONTAL }]
  ]
});

Manager Constructor

Core gesture manager that coordinates recognizers and input handling.

/**
 * Core gesture manager coordinating recognizers and input
 * @param {HTMLElement} element - Target DOM element
 * @param {HammerOptions} [options] - Configuration options
 */
class Manager {
  constructor(element, options);
}

Manager Configuration

Methods for configuring and managing the manager instance.

/**
 * Update manager options
 * @param {HammerOptions} options - Options to merge with current settings
 * @returns {Manager} Manager instance for chaining
 */
set(options);

Usage Examples:

// Update touch action
mc.set({ touchAction: 'pan-x' });

// Update multiple options
mc.set({
  enable: true,
  touchAction: 'manipulation'
});

Recognizer Management

Methods for adding, removing, and retrieving gesture recognizers.

/**
 * Get recognizer by name or instance
 * @param {string|Recognizer} recognizer - Recognizer name or instance
 * @returns {Recognizer|null} Recognizer instance or null if not found
 */
get(recognizer);

/**
 * Add a recognizer to the manager
 * @param {Recognizer} recognizer - Recognizer instance to add
 * @returns {Recognizer} The added recognizer
 */
add(recognizer);

/**
 * Remove a recognizer from the manager
 * @param {string|Recognizer} recognizer - Recognizer to remove
 * @returns {Manager} Manager instance for chaining
 */
remove(recognizer);

Usage Examples:

// Add custom recognizer
const panRecognizer = new Hammer.Pan({ direction: Hammer.DIRECTION_ALL });
mc.add(panRecognizer);

// Get recognizer by name
const tapRecognizer = mc.get('tap');

// Remove recognizer
mc.remove('swipe');
mc.remove(panRecognizer);

Event Management

Methods for binding, unbinding, and emitting gesture events.

/**
 * Bind event listeners for gesture events
 * @param {string} events - Space-separated event names
 * @param {Function} handler - Event handler function
 * @returns {Manager} Manager instance for chaining
 */
on(events, handler);

/**
 * Unbind event listeners
 * @param {string} events - Space-separated event names
 * @param {Function} handler - Event handler to remove
 * @returns {Manager} Manager instance for chaining
 */
off(events, handler);

/**
 * Emit gesture events manually
 * @param {string} event - Event name to emit
 * @param {object} data - Event data object
 */
emit(event, data);

Usage Examples:

// Bind single event
mc.on('tap', function(ev) {
  console.log('Tap at:', ev.center.x, ev.center.y);
});

// Bind multiple events
mc.on('panstart panmove panend', function(ev) {
  console.log('Pan event:', ev.type, ev.deltaX, ev.deltaY);
});

// Unbind event
const handler = function(ev) { console.log('Pan:', ev.deltaX); };
mc.on('pan', handler);
mc.off('pan', handler);

Manager Control

Methods for controlling gesture recognition and cleanup.

/**
 * Stop gesture recognition, optionally forcing stop
 * @param {boolean} [force] - Force stop all recognizers
 */
stop(force);

/**
 * Process input data through recognizers (internal)
 * @param {object} inputData - Input event data
 */
recognize(inputData);

/**
 * Clean up and destroy the manager
 */
destroy();

Usage Examples:

// Temporarily stop recognition
mc.stop();

// Force stop all active recognizers
mc.stop(true);

// Clean up when done
mc.destroy();

Manager Properties

Key properties available on Manager instances.

interface ManagerProperties {
  /** Target DOM element */
  element: HTMLElement;
  /** Event handlers object */
  handlers: object;
  /** Current gesture session data */
  session: object;
  /** Array of active recognizers */
  recognizers: Array<Recognizer>;
  /** Configuration options */
  options: HammerOptions;
  /** Input handler instance */
  input: Input;
  /** TouchAction instance */
  touchAction: TouchAction;
}

Default Configuration

Static default configuration options.

/**
 * Default configuration options
 */
Hammer.defaults = {
  /** Enable DOM event triggers (default: false) */
  domEvents: boolean;
  /** Touch action mode (default: 'compute') */
  touchAction: string;
  /** Enable gesture recognition (default: true) */
  enable: boolean;
  /** Input target element (default: null) */
  inputTarget: Element | null;
  /** Force input class (default: null) */
  inputClass: Function | null;
  /** Default recognizer setup */
  preset: Array;
  /** CSS properties for optimization */
  cssProps: object;
};

Types

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