tessl/npm-hammerjs
A JavaScript library for multi-touch gestures in web applications
—
Pending
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Pending
The risk profile of this skill
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();
}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;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;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);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;
}- Workspace
- tessl
- Visibility
- Public
- Created
- Last updated
- Describes
- Publish Source
- CLI
- Badge
