### Install and Generate Demo Documentation Source: https://github.com/hammerjs/hammerjs.github.io/blob/master/jsdoc-template/README.md Install project dependencies and generate demo documentation using npm and grunt. ```bash $ npm install $ grunt demo ``` -------------------------------- ### Custom Recognizer Setup with Hammer.Manager Source: https://github.com/hammerjs/hammerjs.github.io/blob/master/getting-started.md Create a custom set of recognizers using Hammer.Manager for more granular control. This example adds a 'pan' recognizer for all directions with a threshold of 0 and a custom 'quadrupletap' recognizer. ```javascript var mc = new Hammer.Manager(myElement, myOptions); mc.add( new Hammer.Pan({ direction: Hammer.DIRECTION_ALL, threshold: 0 }) ); mc.add( new Hammer.Tap({ event: 'quadrupletap', taps: 4 }) ); mc.on("pan", handlePan); mc.on("quadrupletap", handleTaps); ``` -------------------------------- ### Include Touch Emulator Script Source: https://github.com/hammerjs/hammerjs.github.io/blob/master/touch-emulator.md Include the javascript file and initialize TouchEmulator() before other touch-dependent libraries. This setup spoofs touch detection and triggers touch events. ```html ``` -------------------------------- ### Initialize Hammer.Manager with Recognizers Source: https://github.com/hammerjs/hammerjs.github.io/blob/master/api.md Configure Hammer.Manager with an initial set of recognizers and their options. The recognizers array defines the gesture recognition setup. ```js var mc = new Hammer.Manager(myElement, { recognizers: [ // RecognizerClass, [options], [recognizeWith, ...], [requireFailure, ...] [Hammer.Rotate], [Hammer.Pinch, { enable: false }, ['rotate']], [Hammer.Swipe,{ direction: Hammer.DIRECTION_HORIZONTAL }] ] }); ``` -------------------------------- ### Pointer Event Mappings and Setup Source: https://github.com/hammerjs/hammerjs.github.io/blob/master/jsdoc/input_pointerevent.js.html Defines mappings for pointer event types to Hammer.js input states and sets up event listeners for elements and the window, accounting for IE10's prefixed support. ```javascript var POINTER_INPUT_MAP = { pointerdown: INPUT_START, pointermove: INPUT_MOVE, pointerup: INPUT_END, pointercancel: INPUT_CANCEL, pointerout: INPUT_CANCEL }; // in IE10 the pointer types is defined as an enum var IE10_POINTER_TYPE_ENUM = { 2: INPUT_TYPE_TOUCH, 3: INPUT_TYPE_PEN, 4: INPUT_TYPE_MOUSE, 5: INPUT_TYPE_KINECT // see https://twitter.com/jacobrossi/status/480596438489890816 }; var POINTER_ELEMENT_EVENTS = 'pointerdown'; var POINTER_WINDOW_EVENTS = 'pointermove pointerup pointercancel'; // IE10 has prefixed support, and case-sensitive if (window.MSPointerEvent && !window.PointerEvent) { POINTER_ELEMENT_EVENTS = 'MSPointerDown'; POINTER_WINDOW_EVENTS = 'MSPointerMove MSPointerUp MSPointerCancel'; } ``` -------------------------------- ### Simultaneous Pinch and Rotate Recognition Source: https://github.com/hammerjs/hammerjs.github.io/blob/master/recognize-with.md Use recognizeWith() to enable simultaneous recognition of two gestures. This example sets up pinch and rotate recognizers to work concurrently. ```javascript var pinch = new Hammer.Pinch(); var rotate = new Hammer.Rotate(); pinch.recognizeWith(rotate); ``` -------------------------------- ### Enable Pinch Recognizer Source: https://github.com/hammerjs/hammerjs.github.io/blob/master/recognizer-pinch.md Enable the pinch recognizer by calling the get method with 'pinch' and setting enable to true. This is necessary because the recognizer is disabled by default. ```javascript hammertime.get('pinch').set({ enable: true }); ``` -------------------------------- ### getScale(start, end) Source: https://github.com/hammerjs/hammerjs.github.io/blob/master/jsdoc/global.html Calculates the scale factor between two sets of pointers. A scale of 1 means no change, values less than 1 indicate pinching in, and values greater than 1 indicate pinching out. ```APIDOC ## getScale(start, end) ### Description Calculates the scale factor between two sets of pointers. A scale of 1 means no change, values less than 1 indicate pinching in, and values greater than 1 indicate pinching out. ### Parameters #### Path Parameters - **start** (Array) - An array of pointer objects representing the starting positions. - **end** (Array) - An array of pointer objects representing the ending positions. ``` -------------------------------- ### SingleTouchInput Handler Method Source: https://github.com/hammerjs/hammerjs.github.io/blob/master/jsdoc/singletouch.js.html Handles incoming touch events, normalizes touch data, and triggers callbacks. Resets the 'started' state when touch ends or is cancelled. ```javascript handler: function TEhandler(ev) { var type = SINGLE_TOUCH_INPUT_MAP[ev.type]; // should we handle the touch events? if (type === INPUT_START) { this.started = true; } if (!this.started) { return; } var touches = normalizeSingleTouches.call(this, ev, type); // when done, reset the started state if (type & (INPUT_END | INPUT_CANCEL) && touches[0].length - touches[1].length === 0) { this.started = false; } this.callback(this.manager, type, { pointers: touches[0], changedPointers: touches[1], pointerType: INPUT_TYPE_TOUCH, srcEvent: ev }); } ``` -------------------------------- ### Hammer.Manager.get(), add(), remove() Source: https://github.com/hammerjs/hammerjs.github.io/blob/master/api.md Methods for managing Recognizer instances. `get()` retrieves a recognizer by its event name or instance. `add()` registers a new recognizer, and `remove()` unregisters one. The order of addition determines the execution order. ```APIDOC ## Hammer.Manager.get(), add(), remove() ### Description Methods for managing Recognizer instances. `get()` retrieves a recognizer by its event name or instance. `add()` registers a new recognizer, and `remove()` unregisters one. The order of addition determines the execution order. `add` and `remove` can also accept an array of recognizers. ### Parameters - **get(string | Recognizer)**: Accepts an event name string (e.g., 'pinch') or a Recognizer instance. - **add(Recognizer | Array)**: Accepts a single Recognizer instance or an array of Recognizer instances. - **remove(string | Recognizer | Array)**: Accepts an event name string, a Recognizer instance, or an array of strings and/or Recognizer instances. ### Example ```js // Get a recognizer var pinchRecognizer = mc.get('pinch'); var anotherPinchRecognizer = mc.get(myPinchRecognizerInstance); // Add a recognizer var myNewRecognizer = new Hammer.Pan(); mc.add(myNewRecognizer); // Add multiple recognizers mc.add([mySecondRecognizer, myThirdRecognizer]); // Remove a recognizer mc.remove(myPinchRecognizerInstance); mc.remove('rotate'); mc.remove([myPinchRecognizerInstance, 'rotate']); ``` ``` -------------------------------- ### init() Source: https://github.com/hammerjs/hammerjs.github.io/blob/master/jsdoc/Input.html Binds the necessary events for the Input instance. ```APIDOC ## init() ### Description Binds the events. ### Method init ``` -------------------------------- ### Generate Demo Documentation with Debugging Source: https://github.com/hammerjs/hammerjs.github.io/blob/master/jsdoc-template/README.md Generate demo documentation with additional debug information enabled. ```bash $ grunt demo --debug ``` -------------------------------- ### getRotation(start, end) Source: https://github.com/hammerjs/hammerjs.github.io/blob/master/jsdoc/global.html Calculates the rotation in degrees between two sets of pointers (start and end positions). This is commonly used for detecting rotation gestures. ```APIDOC ## getRotation(start, end) ### Description Calculates the rotation in degrees between two sets of pointers (start and end positions). This is commonly used for detecting rotation gestures. ### Parameters #### Path Parameters - **start** (Array) - An array of pointer objects representing the starting positions. - **end** (Array) - An array of pointer objects representing the ending positions. ``` -------------------------------- ### get Source: https://github.com/hammerjs/hammerjs.github.io/blob/master/jsdoc/Manager.html Retrieves a recognizer instance associated with a specific event name. ```APIDOC ## get(recognizer) ### Description Gets a recognizer by its event name. ### Parameters #### Path Parameters - **recognizer** ([Recognizer](Recognizer.html)) - The recognizer instance or event name to retrieve. ### Returns - {[Recognizer](Recognizer.html)|Null} - The found recognizer instance or null if not found. ``` -------------------------------- ### Initialize Hammer.js and Handle Events Source: https://github.com/hammerjs/hammerjs.github.io/blob/master/getting-started.md Include the Hammer.js library and create a new instance to recognize gestures. Listen for specific events like 'pan' to trigger callbacks. ```javascript var hammertime = new Hammer(myElement, myOptions); hammertime.on('pan', function(ev) { console.log(ev); }); ``` -------------------------------- ### Get Center of Pointers Source: https://github.com/hammerjs/hammerjs.github.io/blob/master/jsdoc/input.js.html Calculates the geometric center of an array of pointer objects. Returns the center coordinates (x, y). ```javascript function getCenter(pointers) { var pointersLength = pointers.length; // no need to loop when only one touch if (pointersLength === 1) { return { x: round(pointers[0].clientX), y: round(pointers[0].clientY) }; } var x = 0, y = 0, i = 0; while (i < pointersLength) { x += pointers[i].clientX; y += pointers[i].clientY; i++; } return { x: round(x / pointersLength), y: round(y / pointersLength) }; } ``` -------------------------------- ### Record Touches for De-duplication Source: https://github.com/hammerjs/hammerjs.github.io/blob/master/jsdoc/input_touchmouse.js.html Records the primary touch identifier and sets the last touch position when a touch event starts or ends/cancels. ```javascript function recordTouches(eventType, eventData) { if (eventType & INPUT_START) { this.primaryTouch = eventData.changedPointers[0].identifier; setLastTouch.call(this, eventData); } else if (eventType & (INPUT_END | INPUT_CANCEL)) { setLastTouch.call(this, eventData); } } ``` -------------------------------- ### Listen for Touch Events Source: https://github.com/hammerjs/hammerjs.github.io/blob/master/touch-emulator.md Add event listeners to the document body to log touchstart, touchmove, and touchend events. This demonstrates how to capture the emulated touch events. ```javascript function log(ev) { console.log(ev); } document.body.addEventListener('touchstart', log, false); document.body.addEventListener('touchmove', log, false); document.body.addEventListener('touchend', log, false); ``` -------------------------------- ### Get Recognizer Instance Source: https://github.com/hammerjs/hammerjs.github.io/blob/master/api.md Retrieve a Recognizer instance from the Manager by its event name or instance. This is useful for inspecting or manipulating existing recognizers. ```js // both return instance of myPinchRecognizer mc.get('pinch'); mc.get(myPinchRecognizer); ``` -------------------------------- ### init() Source: https://github.com/hammerjs/hammerjs.github.io/blob/master/jsdoc/MouseInput.html Binds the events for the MouseInput instance. This method is inherited from the base Input class. ```APIDOC ## init() ### Description Binds the events. ### Source [input.js](input.js.html#line68) ### Inherited From * [Input](Input.html#init) ``` -------------------------------- ### Hammer Constructor Source: https://github.com/hammerjs/hammerjs.github.io/blob/master/jsdoc/Hammer.html Creates a new Hammer instance, which is a manager with a default set of recognizers. It simplifies the setup for common gesture handling. ```APIDOC ## new Hammer(element, options) ### Description Simple way to create a manager with a default set of recognizers. ### Parameters #### Path Parameters - **element** (HTMLElement) - The HTML element to attach Hammer.js to. - **options** (Object) - Optional configuration object for Hammer.js. ### Members #### static,constantHammer.VERSION - **VERSION** (string) - The current version of Hammer.js. ``` -------------------------------- ### Instantiate and Add a Pinch Recognizer Source: https://github.com/hammerjs/hammerjs.github.io/blob/master/api.md Demonstrates how to create a new Hammer.Pinch recognizer instance and add it to a Hammer Manager. ```javascript var pinch = new Hammer.Pinch(); mc.add(pinch); // add it to the Manager instance ``` -------------------------------- ### Get Window for Element Source: https://github.com/hammerjs/hammerjs.github.io/blob/master/jsdoc/utils.js.html Retrieves the window object associated with a given HTML element. Handles different document structures and browser environments. ```javascript function getWindowForElement(element) { var doc = element.ownerDocument || element; return (doc.defaultView || doc.parentWindow || window); } ``` -------------------------------- ### SingleTouchInput Constructor Source: https://github.com/hammerjs/hammerjs.github.io/blob/master/jsdoc/singletouch.js.html Initializes the SingleTouchInput class, setting up event targets and initial state. ```javascript function SingleTouchInput() { this.evTarget = SINGLE_TOUCH_TARGET_EVENTS; this.evWin = SINGLE_TOUCH_WINDOW_EVENTS; this.started = false; Input.apply(this, arguments); } ``` -------------------------------- ### Get Recognizer by Event Name Source: https://github.com/hammerjs/hammerjs.github.io/blob/master/jsdoc/manager.js.html Retrieves a recognizer instance associated with a specific event name. Returns null if no recognizer is found for the given event. ```javascript get: function(recognizer) { if (recognizer instanceof Recognizer) { return recognizer; } var recognizers = this.recognizers; for (var i = 0; i < recognizers.length; i++) { if (recognizers[i].options.event == recognizer) { return recognizers[i]; } } return null; } ``` -------------------------------- ### SingleTouchInput Methods Source: https://github.com/hammerjs/hammerjs.github.io/blob/master/jsdoc/Manager.html Methods for initializing and managing single touch input. ```APIDOC ## SingleTouchInput Methods ### Description Methods for initializing and managing single touch input. ### Methods * `destroy()` * `handler(event)` * `init(manager, recognizer, options)` ``` -------------------------------- ### TouchAction Initialization and Setting Source: https://github.com/hammerjs/hammerjs.github.io/blob/master/jsdoc/touchaction.js.html Initializes TouchAction with a manager and sets the initial touch action value. The `set` method allows updating the touch action, computing it if necessary, and applying it to the element's style or using the polyfill. ```javascript var PREFIXED_TOUCH_ACTION = prefixed(TEST_ELEMENT.style, 'touchAction'); var NATIVE_TOUCH_ACTION = PREFIXED_TOUCH_ACTION !== undefined; // magical touchAction value var TOUCH_ACTION_COMPUTE = 'compute'; var TOUCH_ACTION_AUTO = 'auto'; var TOUCH_ACTION_MANIPULATION = 'manipulation'; // not implemented var TOUCH_ACTION_NONE = 'none'; var TOUCH_ACTION_PAN_X = 'pan-x'; var TOUCH_ACTION_PAN_Y = 'pan-y'; var TOUCH_ACTION_MAP = getTouchActionProps(); /** * Touch Action * sets the touchAction property or uses the js alternative * @param {Manager} manager * @param {String} value * @constructor */ function TouchAction(manager, value) { this.manager = manager; this.set(value); } TouchAction.prototype = { /** * set the touchAction value on the element or enable the polyfill * @param {String} value */ set: function(value) { // find out the touch-action by the event handlers if (value == TOUCH_ACTION_COMPUTE) { value = this.compute(); } if (NATIVE_TOUCH_ACTION && this.manager.element.style && TOUCH_ACTION_MAP[value]) { this.manager.element.style[PREFIXED_TOUCH_ACTION] = value; } this.actions = value.toLowerCase().trim(); }, /** * just re-set the touchAction value */ update: function() { this.set(this.manager.options.touchAction); }, /** * compute the value for the touchAction property based on the recognizer's settings * @returns {String} value */ compute: function() { var actions = []; each(this.manager.recognizers, function(recognizer) { if (boolOrFn(recognizer.options.enable, [recognizer])) { actions = actions.concat(recognizer.getTouchAction()); } }); return cleanTouchActions(actions.join(' ')); }, /** * this method is called on each input cycle and provides the preventing of the browser behavior * @param {Object} input */ preventDefaults: function(input) { var srcEvent = input.srcEvent; var direction = input.offsetDirection; // if the touch action did prevented once this session if (this.manager.session.prevented) { srcEvent.preventDefault(); return; } var actions = this.actions; var hasNone = inStr(actions, TOUCH_ACTION_NONE) && !TOUCH_ACTION_MAP[TOUCH_ACTION_NONE]; var hasPanY = inStr(actions, TOUCH_ACTION_PAN_Y) && !TOUCH_ACTION_MAP[TOUCH_ACTION_PAN_Y]; var hasPanX = inStr(actions, TOUCH_ACTION_PAN_X) && !TOUCH_ACTION_MAP[TOUCH_ACTION_PAN_X]; if (hasNone) { //do not prevent defaults if this is a tap gesture var isTapPointer = input.pointers.length === 1; var isTapMovement = input.distance < 2; var isTapTouchTime = input.deltaTime < 250; if (isTapPointer && isTapMovement && isTapTouchTime) { return; } } if (hasPanX && hasPanY) { // `pan-x pan-y` means browser handles all scrolling/panning, do not prevent return; } if (hasNone || ``` -------------------------------- ### Hammer.prefixed: Get Browser-Prefixed Property Name Source: https://github.com/hammerjs/hammerjs.github.io/blob/master/api.md Retrieve the browser-prefixed name of a CSS property using Hammer.prefixed. This helps in writing cross-browser compatible styles. ```javascript Hammer.prefixed(document.body.style, 'userSelect'); // returns "webkitUserSelect" on Chrome 35 ``` -------------------------------- ### Touch Emulator Bookmarklet Source: https://github.com/hammerjs/hammerjs.github.io/blob/master/touch-emulator.md A bookmarklet to quickly include and initialize the Touch Emulator script from any webpage. It dynamically creates and appends a script tag to the document body. ```javascript javascript:!function(a){var b=a.createElement("script");b.onload=function(){TouchEmulator()},b.src="//cdn.rawgit.com/hammerjs/touchemulator/0.0.2/touch-emulator.js",a.body.appendChild(b)}(document); ``` -------------------------------- ### Initialize Hammer.Manager Source: https://github.com/hammerjs/hammerjs.github.io/blob/master/api.md Instantiate Hammer.Manager with an HTML element. Options can be provided to merge with Hammer.defaults. ```js var mc = new Hammer.Manager(myElement); ``` -------------------------------- ### Input Class Source: https://github.com/hammerjs/hammerjs.github.io/blob/master/jsdoc/input_touchmouse.js.html Handles raw input events from touch and mouse. ```APIDOC ## Input Class ### Description Base class for handling raw input events, such as touch and mouse movements. ### Methods * **destroy()**: Destroys the input instance and removes event listeners. * **handler(event)**: Processes incoming input events. * **init()**: Initializes the input instance and sets up event listeners. ``` -------------------------------- ### Compute Delta XY Source: https://github.com/hammerjs/hammerjs.github.io/blob/master/jsdoc/input.js.html Calculates the change in X and Y coordinates since the last input event. It handles the initialization of offset and delta values when a new gesture starts. ```javascript function computeDeltaXY(session, input) { var center = input.center; var offset = session.offsetDelta || {}; var prevDelta = session.prevDelta || {}; var prevInput = session.prevInput || {}; if (input.eventType === INPUT_START || prevInput.eventType === INPUT_END) { prevDelta = session.prevDelta = { x: prevInput.deltaX || 0, y: prevInput.deltaY || 0 }; offset = session.offsetDelta = { x: center.x, y: center.y }; } input.deltaX = prevDelta.x + (center.x - offset.x); input.deltaY = prevDelta.y + (center.y - offset.y); } ``` -------------------------------- ### Manager.stop Source: https://github.com/hammerjs/hammerjs.github.io/blob/master/jsdoc/manager.js.html Stops the current recognition session. If `force` is true, the recognition cycle is stopped immediately. Otherwise, the session will be discarded when a new input start event occurs. ```APIDOC ## Manager.stop ### Description Stops the current recognition session. If `force` is true, the recognition cycle is stopped immediately. Otherwise, the session will be discarded when a new input start event occurs. ### Method `stop(force)` ### Parameters * **force** (Boolean) - If true, stops recognition immediately. Defaults to false. ``` -------------------------------- ### Input Methods Source: https://github.com/hammerjs/hammerjs.github.io/blob/master/jsdoc/recognizers_press.js.html Input classes handle raw input events from various sources (e.g., touch, mouse) and translate them into a format usable by the Manager. ```APIDOC ## Input Methods ### Description Input classes handle raw input events from various sources (e.g., touch, mouse) and translate them into a format usable by the Manager. ### Methods * **destroy()**: Destroys the input instance and cleans up event listeners. * **handler(event, context)**: Processes incoming input events. * **init(manager, callback)**: Initializes the input instance and sets up event listeners. ``` -------------------------------- ### Input Constructor Source: https://github.com/hammerjs/hammerjs.github.io/blob/master/jsdoc/Input.html Creates a new instance of the Input manager. It requires a Manager instance and a callback function. ```APIDOC ## new Input(manager, callback) ### Description Creates a new input type manager. ### Parameters #### Parameters - **manager** ([Manager](Manager.html)) - The Manager instance. - **callback** (function) - The callback function to be executed. ``` -------------------------------- ### Get Recognizer by Name from Manager Source: https://github.com/hammerjs/hammerjs.github.io/blob/master/jsdoc/recognizer.js.html Retrieves a recognizer instance from its manager using a name or identifier. This function ensures that if the recognizer is associated with a manager, the lookup is performed correctly. ```javascript function getRecognizerByNameIfManager(otherRecognizer, recognizer) { var manager = recognizer.manager; if (manager) { return manager.get(otherRecognizer); } return otherRecognizer; } ``` -------------------------------- ### Input Instance Creation Source: https://github.com/hammerjs/hammerjs.github.io/blob/master/jsdoc/input.js.html Factory function to create the appropriate input instance based on browser support for touch, pointer events, or mouse events. It selects the correct input class for the environment. ```javascript /** * create new input type manager * called by the Manager constructor * @param {Hammer} manager * @returns {Input} */ function createInputInstance(manager) { var Type; var inputClass = manager.options.inputClass; if (inputClass) { Type = inputClass; } else if (SUPPORT_POINTER_EVENTS) { Type = PointerEventInput; } else if (SUPPORT_ONLY_TOUCH) { Type = TouchInput; } else if (!SUPPORT_TOUCH) { Type = MouseInput; } else { Type = TouchMouseInput; } return new (Type)(manager, inputHandler); } ``` -------------------------------- ### stop Source: https://github.com/hammerjs/hammerjs.github.io/blob/master/jsdoc/Manager.html Stops the current recognition session. The session will be discarded, and a new one will start when a new input event is fired. If `force` is true, the recognizer cycle is stopped immediately. ```APIDOC ## stop(force) ### Description Stops recognizing for this session. This session will be discarded when a new [input]start event is fired. When forced, the recognizer cycle is stopped immediately. ### Parameters #### Path Parameters - **force** (Boolean) - Optional. If true, the recognizer cycle is stopped immediately. ``` -------------------------------- ### Manager Methods Source: https://github.com/hammerjs/hammerjs.github.io/blob/master/jsdoc/touch.js.html The Manager class is the core of Hammer.js, responsible for managing recognizers and handling events. It provides methods to add, remove, and get recognizers, as well as to emit and listen for events. ```APIDOC ## Manager Methods ### Description Methods for managing recognizers and event handling within Hammer.js. ### Methods * `add(recognizer)`: Adds a recognizer to the manager. * `destroy()`: Destroys the manager and cleans up event listeners. * `emit(event, data)`: Emits a custom event. * `get(recognizer)`: Returns a recognizer instance by its name. * `off(events, handler)`: Removes an event listener. * `on(events, handler)`: Attaches an event listener. * `recognize(inputEvent)`: Processes an input event to recognize gestures. * `remove(recognizer)`: Removes a recognizer from the manager. * `set(options)`: Sets configuration options for the manager. * `stop(force)`: Stops the current recognition process. ``` -------------------------------- ### simpleCloneInputData Source: https://github.com/hammerjs/hammerjs.github.io/blob/master/jsdoc/global.html Creates a simple clone of input data, typically used for storing the first input or first multiple touch data. ```APIDOC ## simpleCloneInputData(input) ### Description Creates a simple clone from the input data, used for storage of firstInput and firstMultiple. ### Parameters #### Path Parameters - **input** (Object) - The input data object to clone. ### Returns (Object) - A simple cloned object of the input data. ``` -------------------------------- ### Convert Gesture State to String Source: https://github.com/hammerjs/hammerjs.github.io/blob/master/jsdoc/recognizer.js.html Converts a numerical gesture state constant (bitwise) into a human-readable string representation like 'cancel', 'end', 'move', or 'start'. Useful for event handling and debugging. ```javascript function stateStr(state) { if (state & STATE_CANCELLED) { return 'cancel'; } else if (state & STATE_ENDED) { return 'end'; } else if (state & STATE_CHANGED) { return 'move'; } else if (state & STATE_BEGAN) { return 'start'; } return ''; } ``` -------------------------------- ### Recognizer.recognizeWith Source: https://github.com/hammerjs/hammerjs.github.io/blob/master/jsdoc/AttrRecognizer.html Sets up simultaneous recognition with another recognizer. ```APIDOC ## Recognizer.recognizeWith(otherRecognizer) ### Description Sets up simultaneous recognition with another recognizer. ### Parameters #### Path Parameters None #### Query Parameters None #### Request Body None ### Parameters - **otherRecognizer** (Recognizer) - Required - Description: The other recognizer to recognize simultaneously with. ``` -------------------------------- ### Initialize Hammer Manager Source: https://github.com/hammerjs/hammerjs.github.io/blob/master/jsdoc/manager.js.html Instantiates the Hammer Manager with an element and options. It sets up input handling, touch actions, and adds configured recognizers. ```javascript function Manager(element, options) { this.options = assign({}, Hammer.defaults, options || {}); this.options.inputTarget = this.options.inputTarget || element; this.handlers = {}; this.session = {}; this.recognizers = []; this.oldCssProps = {}; this.element = element; this.input = createInputInstance(this); this.touchAction = new TouchAction(this, this.options.touchAction); toggleCssProps(this, true); each(this.options.recognizers, function(item) { var recognizer = this.add(new (item[0])(item[1])); item[2] && recognizer.recognizeWith(item[2]); item[3] && recognizer.requireFailure(item[3]); }, this); } ``` -------------------------------- ### Input Class Source: https://github.com/hammerjs/hammerjs.github.io/blob/master/jsdoc/rotate.js.html Handles raw input events from various sources. ```APIDOC ## Input ### Description The Input class is responsible for processing raw input events from different sources like touch, mouse, and pointer events. ### Methods * **destroy()**: Destroys the input instance and removes event listeners. * **handler(event)**: Handles incoming input events. * **init(manager, recognizer, options)**: Initializes the input instance with the manager and recognizer. ``` -------------------------------- ### Manager Methods Source: https://github.com/hammerjs/hammerjs.github.io/blob/master/jsdoc/global.html The Manager class is the core of Hammer.js, responsible for managing recognizers and handling input events. It provides methods to add, remove, get, and control recognizers, as well as to emit and listen for events. ```APIDOC ## Manager Methods ### Description Provides methods to manage gesture recognizers and event handling. ### Methods * **add(recognizer)**: Adds a recognizer to the manager. * **destroy()**: Destroys the manager and cleans up resources. * **emit(event, data)**: Emits a custom event. * **get(recognizerName)**: Gets a recognizer by its name. * **off(events, handler)**: Removes an event listener. * **on(events, handler)**: Adds an event listener. * **recognize(inputEvent)**: Processes an input event to recognize gestures. * **remove(recognizer)**: Removes a recognizer from the manager. * **set(options)**: Sets options for the manager. * **stop(force)**: Stops the current gesture recognition. ``` -------------------------------- ### MouseInput Handler Function Source: https://github.com/hammerjs/hammerjs.github.io/blob/master/jsdoc/input_mouse.js.html Processes incoming mouse events, determining the event type (start, move, end) and updating the internal pressed state. It filters for left-click events and ensures the mouse button is down before processing. ```javascript inherit(MouseInput, Input, { /** * handle mouse events * @param {Object} ev */ handler: function MEhandler(ev) { var eventType = MOUSE_INPUT_MAP[ev.type]; // on start we want to have the left mouse button down if (eventType & INPUT_START && ev.button === 0) { this.pressed = true; } if (eventType & INPUT_MOVE && ev.which !== 1) { eventType = INPUT_END; } // mouse must be down if (!this.pressed) { return; } if (eventType & INPUT_END) { this.pressed = false; } this.callback(this.manager, eventType, { pointers: [ev], changedPointers: [ev], pointerType: INPUT_TYPE_MOUSE, srcEvent: ev }); } }); ``` -------------------------------- ### SingleTouchInput Constructor and Inheritance Source: https://github.com/hammerjs/hammerjs.github.io/blob/master/jsdoc/input_singletouch.js.html Initializes the SingleTouchInput class, setting up event targets and listeners, and inheriting from the base Input class. ```javascript /** * Touch events input * @constructor * @extends Input */ function SingleTouchInput() { this.evTarget = SINGLE_TOUCH_TARGET_EVENTS; this.evWin = SINGLE_TOUCH_WINDOW_EVENTS; this.started = false; Input.apply(this, arguments); } ``` -------------------------------- ### TouchInput Methods Source: https://github.com/hammerjs/hammerjs.github.io/blob/master/jsdoc/index.html Documentation for the methods available on the TouchInput class, responsible for handling touch input events. ```APIDOC ## TouchInput Methods ### Description Provides methods for initializing, handling, and destroying touch input events. ### Methods * `destroy()` * `handler(event)` * `init(source, instance)` ``` -------------------------------- ### Hammer.Manager Constructor Source: https://github.com/hammerjs/hammerjs.github.io/blob/master/api.md Initializes a new Hammer.Manager instance. It takes an HTML element and an optional options object. The options are merged with Hammer.defaults. You can also set initial recognizers during construction. ```APIDOC ## Hammer.Manager Constructor ### Description Initializes a new Hammer.Manager instance. It takes an HTML element and an optional options object. The options are merged with Hammer.defaults. You can also set initial recognizers during construction. ### Parameters - **HTMLElement** (HTMLElement) - The HTML element to attach Hammer.js to. - **[options]** (object) - Optional. An object containing configuration options, which will be merged with `Hammer.defaults`. Can include a `recognizers` array. ### Example ```js var mc = new Hammer.Manager(myElement); var mcWithOptions = new Hammer.Manager(myElement, { recognizers: [ [Hammer.Rotate], [Hammer.Pinch, { enable: false }, ['rotate']], [Hammer.Swipe,{ direction: Hammer.DIRECTION_HORIZONTAL }] ] }); ``` ``` -------------------------------- ### TouchMouseInput Constructor Source: https://github.com/hammerjs/hammerjs.github.io/blob/master/jsdoc/input_touchmouse.js.html Initializes the TouchMouseInput with Hammer manager and a handler function. It sets up separate TouchInput and MouseInput instances. ```javascript function TouchMouseInput() { Input.apply(this, arguments); var handler = bindFn(this.handler, this); this.touch = new TouchInput(this.manager, handler); this.mouse = new MouseInput(this.manager, handler); this.primaryTouch = null; this.lastTouches = []; } ``` -------------------------------- ### TouchMouseInput Constructor Source: https://github.com/hammerjs/hammerjs.github.io/blob/master/jsdoc/touchmouse.js.html Initializes the TouchMouseInput by applying base Input properties and creating instances of TouchInput and MouseInput. The handler function is bound to the instance. ```javascript function TouchMouseInput() { Input.apply(this, arguments); var handler = bindFn(this.handler, this); this.touch = new TouchInput(this.manager, handler); this.mouse = new MouseInput(this.manager, handler); } ``` -------------------------------- ### TouchInput Source: https://github.com/hammerjs/hammerjs.github.io/blob/master/jsdoc/TouchInput.html Initializes a new instance of TouchInput. This class handles multi-user touch events and extends the base Input class. ```APIDOC ## new TouchInput() ### Description Initializes a new instance of TouchInput. This class handles multi-user touch events and extends the base Input class. ### Methods #### destroy() Unbinds the events. #### abstract handler() Should handle the inputEvent data and trigger the callback. #### init() Binds the events. ``` -------------------------------- ### TouchInput Constructor Source: https://github.com/hammerjs/hammerjs.github.io/blob/master/jsdoc/input_touch.js.html Initializes a new instance of TouchInput. It sets up the event target for touch events and initializes a map to track touch identifiers. ```APIDOC ## TouchInput() ### Description Initializes a new instance of TouchInput. It sets up the event target for touch events and initializes a map to track touch identifiers. ### Method Constructor ### Parameters None ### Response None ``` -------------------------------- ### PointerEventInput Methods Source: https://github.com/hammerjs/hammerjs.github.io/blob/master/jsdoc/Manager.html Methods for initializing and managing pointer event input. ```APIDOC ## PointerEventInput Methods ### Description Methods for initializing and managing pointer event input. ### Methods * `destroy()` * `handler(event)` * `init(manager, recognizer, options)` ``` -------------------------------- ### TouchMouseInput Constructor Source: https://github.com/hammerjs/hammerjs.github.io/blob/master/jsdoc/TouchMouseInput.html Initializes a new instance of the TouchMouseInput class. This class combines touch and mouse input, giving touch a higher priority. ```APIDOC ## new TouchMouseInput() ### Description Initializes a new instance of the TouchMouseInput class. This class combines touch and mouse input, giving touch a higher priority. Touch has a higher priority then mouse, and while touching no mouse events are allowed. This is because touch devices also emit mouse events while doing a touch. ### Extends * [Input](Input.html) ### Methods #### [inherited](Input.html#destroy) destroy() Unbinds the events. #### [inherited](Input.html#handler) abstracthandler() Should handle the inputEvent data and trigger the callback. #### [inherited](Input.html#init) init() Binds the events. ``` -------------------------------- ### SingleTouchInput Methods Source: https://github.com/hammerjs/hammerjs.github.io/blob/master/jsdoc/input_touchmouse.js.html Methods for initializing, handling, and destroying single touch inputs. ```APIDOC ## SingleTouchInput Methods ### Description Methods for managing single touch events. ### Methods - `destroy()`: Destroys the input instance. - `handler()`: Handles incoming single touch events. - `init()`: Initializes the input instance. ``` -------------------------------- ### Add Recognizer Instance Source: https://github.com/hammerjs/hammerjs.github.io/blob/master/api.md Add a new Recognizer instance to the Manager. The order of addition determines the order of recognition. Returns the added Recognizer instance. ```js mc.add(myPinchRecognizer); // returns the recognizer ``` ```js mc.add([mySecondRecogizner, myThirdRecognizer]); ``` -------------------------------- ### TouchAction Constructor Source: https://github.com/hammerjs/hammerjs.github.io/blob/master/jsdoc/TouchAction.html Initializes a new instance of the TouchAction class. It takes a Manager instance and a value string to set the touchAction property or use its JavaScript alternative. ```APIDOC ## new TouchAction(manager, value) ### Description Initializes a new instance of the TouchAction class. ### Parameters #### Parameters - **manager** ([Manager](Manager.html)) - The Manager instance. - **value** (String) - The touchAction value to set. ``` -------------------------------- ### Simple Class Inheritance Source: https://github.com/hammerjs/hammerjs.github.io/blob/master/jsdoc/utils.js.html Implements simple class inheritance by setting up the prototype chain and constructor. ```javascript function inherit(child, base, properties) { var baseP = base.prototype, childP; childP = child.prototype = Object.create(baseP); childP.constructor = child; childP._super = baseP; if (properties) { assign(childP, properties); } } ``` -------------------------------- ### TouchAction Methods Source: https://github.com/hammerjs/hammerjs.github.io/blob/master/jsdoc/index.html Documentation for the methods available on the TouchAction class, used for managing touch actions and preventing default behaviors. ```APIDOC ## TouchAction Methods ### Description Provides methods for controlling touch actions, such as preventing default browser behaviors. ### Methods * `compute()` * `preventDefaults()` * `preventSrc()` * `set(options)` * `update(value)` ``` -------------------------------- ### Recognizer Constructor Source: https://github.com/hammerjs/hammerjs.github.io/blob/master/jsdoc/recognizer.js.html Initializes a new Recognizer instance with default options and sets the initial state to POSSIBLE. It also prepares structures for managing simultaneous recognizers and required failures. ```javascript function Recognizer(options) { this.options = assign({}, this.defaults, options || {}); this.id = uniqueId(); this.manager = null; // default is enable true this.options.enable = ifUndefined(this.options.enable, true); this.state = STATE_POSSIBLE; this.simultaneous = {}; this.requireFail = []; } ``` -------------------------------- ### MouseInput Methods Source: https://github.com/hammerjs/hammerjs.github.io/blob/master/jsdoc/MouseInput.html Documentation for the methods available on the MouseInput class, used for handling mouse input events. ```APIDOC ## MouseInput ### Methods * `destroy()` * `handler()` * `init()` ``` -------------------------------- ### tryEmit Source: https://github.com/hammerjs/hammerjs.github.io/blob/master/jsdoc/PinchRecognizer.html Attempts to emit a gesture event after verifying that all required recognizers have failed. ```APIDOC ## tryEmit ### Description Safely attempts to emit a gesture event. It first verifies that all recognizers designated as required failures have indeed failed. If the condition is met, a gesture event is emitted; otherwise, the recognizer's state is set to FAILED. ### Method `tryEmit(input)` ### Parameters #### Path Parameters - **input** (Object) - The input data associated with the potential gesture event. ``` -------------------------------- ### recognizeWith Source: https://github.com/hammerjs/hammerjs.github.io/blob/master/jsdoc/RotateRecognizer.html Establishes a dependency for simultaneous recognition with another recognizer. This is an inherited method. ```APIDOC ## recognizeWith ### Description Configures this recognizer to attempt recognition simultaneously with another specified recognizer. ### Method `recognizeWith(otherRecognizer)` ### Parameters #### Path Parameters - **otherRecognizer** ([`Recognizer`](Recognizer.html)) - The recognizer to recognize alongside. ### Returns - `[Recognizer](Recognizer.html)`: The current recognizer instance for chaining. ``` -------------------------------- ### JSDoc Configuration Options Source: https://github.com/hammerjs/hammerjs.github.io/blob/master/jsdoc-template/README.md Customize JSDoc documentation appearance and behavior using the 'templates' section in the configuration file. ```json { "templates": { "applicationName": "Demo", "disqus": "", "googleAnalytics": "", "openGraph": { "title": "", "type": "website", "image": "", "site_name": "", "url": "" }, "meta": { "title": "", "description": "", "keyword": "" } } } ``` -------------------------------- ### set Source: https://github.com/hammerjs/hammerjs.github.io/blob/master/jsdoc/PinchRecognizer.html Sets configuration options for the recognizer. ```APIDOC ## set ### Description Applies a set of options to configure the recognizer's behavior. ### Method `set(options)` ### Parameters #### Path Parameters - **options** (Object) - An object containing the configuration options to set. ### Returns - `[Recognizer](Recognizer.html)`: The current recognizer instance for chaining. ``` -------------------------------- ### Input Source: https://github.com/hammerjs/hammerjs.github.io/blob/master/jsdoc/PressRecognizer.html Handles raw input events from the DOM. ```APIDOC ## Input ### Description Manages the low-level input events (touch, mouse, pointer) from the browser, translating them into a format usable by Hammer.js recognizers. ### Methods * **destroy()**: Cleans up event listeners and resources associated with the input handler. * **handler(event)**: Processes incoming input events. * **init(manager)**: Initializes the input handler and attaches it to the Hammer.js manager. ``` -------------------------------- ### SingleTouchInput Methods Source: https://github.com/hammerjs/hammerjs.github.io/blob/master/jsdoc/Hammer.html Methods for handling single touch input. ```APIDOC ## SingleTouchInput Methods ### Description Methods for handling single touch input. ### Methods - `destroy()` - `handler(event)` - `init(manager, callback)` ``` -------------------------------- ### recognizeWith Source: https://github.com/hammerjs/hammerjs.github.io/blob/master/jsdoc/PinchRecognizer.html Configures this recognizer to recognize gestures simultaneously with another recognizer. ```APIDOC ## recognizeWith ### Description Establishes a configuration where this recognizer can operate and recognize gestures at the same time as another specified recognizer. ### Method `recognizeWith(otherRecognizer)` ### Parameters #### Path Parameters - **otherRecognizer** ([`Recognizer`](Recognizer.html)) - The recognizer to enable simultaneous recognition with. ### Returns - `[Recognizer](Recognizer.html)`: The current recognizer instance for chaining. ``` -------------------------------- ### Hammer.Recognizer Constructor Source: https://github.com/hammerjs/hammerjs.github.io/blob/master/api.md Initializes a new Recognizer instance with optional configuration. The `enable` option can be a boolean or a callback function to dynamically control the recognizer's state. ```APIDOC ## constructor([options]) ### Description Initializes a new Recognizer instance with optional configuration. The `enable` option can be a boolean or a callback function to dynamically control the recognizer's state. ### Parameters #### Path Parameters None #### Query Parameters None #### Request Body None ### Request Example ```js var pinch = new Hammer.Pinch(); mc.add(pinch); // add it to the Manager instance ``` ### Response #### Success Response (200) None #### Response Example None ``` -------------------------------- ### Pointer Event Mapping and Configuration Source: https://github.com/hammerjs/hammerjs.github.io/blob/master/jsdoc/pointerevent.js.html Defines mappings for pointer event types and configures event listeners for elements and the window, including IE10 specific prefixes. ```javascript var POINTER_INPUT_MAP = { pointerdown: INPUT_START, pointermove: INPUT_MOVE, pointerup: INPUT_END, pointercancel: INPUT_CANCEL, pointerout: INPUT_CANCEL }; // in IE10 the pointer types is defined as an enum var IE10_POINTER_TYPE_ENUM = { 2: INPUT_TYPE_TOUCH, 3: INPUT_TYPE_PEN, 4: INPUT_TYPE_MOUSE, 5: INPUT_TYPE_KINECT // see https://twitter.com/jacobrossi/status/480596438489890816 }; var POINTER_ELEMENT_EVENTS = 'pointerdown'; var POINTER_WINDOW_EVENTS = 'pointermove pointerup pointercancel'; // IE10 has prefixed support, and case-sensitive if (window.MSPointerEvent) { POINTER_ELEMENT_EVENTS = 'MSPointerDown'; POINTER_WINDOW_EVENTS = 'MSPointerMove MSPointerUp MSPointerCancel'; } ``` -------------------------------- ### Manager Constructor Source: https://github.com/hammerjs/hammerjs.github.io/blob/master/jsdoc/Manager.html Initializes a new Manager instance, which is responsible for managing gesture recognizers and processing input events. ```APIDOC ## new Manager(element, options) ### Description Initializes a new Manager instance. ### Parameters #### Path Parameters - **element** (HTMLElement) - The HTML element to attach gesture recognition to. - **options** (Object) - Optional configuration options for the manager. ``` -------------------------------- ### Input Methods Source: https://github.com/hammerjs/hammerjs.github.io/blob/master/jsdoc/MouseInput.html Documentation for the methods available on the Input class, responsible for processing input events. ```APIDOC ## Input ### Methods * `destroy()` * `handler(inputData)` * `init(manager, callback)` ``` -------------------------------- ### MouseInput Constructor Source: https://github.com/hammerjs/hammerjs.github.io/blob/master/jsdoc/MouseInput.html Initializes a new instance of the MouseInput class. This class is responsible for processing mouse events. ```APIDOC ## new MouseInput() ### Description Initializes a new instance of the MouseInput class. ### Source [input/mouse.js](input_mouse.js.html#line15) ### Extends * [Input](Input.html) ``` -------------------------------- ### Recognizer.defaults Source: https://github.com/hammerjs/hammerjs.github.io/blob/master/jsdoc/recognizers_swipe.js.html Static property providing default configuration options for the base Recognizer. ```APIDOC ## Recognizer.defaults ### Description Static property containing the default configuration options for the base Recognizer. ### Properties * `enable` (Boolean) - Whether the recognizer is enabled. Defaults to true. * `event` (String) - The name of the event to be triggered. Defaults to the lowercase name of the recognizer. * `passive` (Boolean) - Whether the recognizer should be passive. Defaults to true. * `pointers` (Number) - The number of pointers that must be down for the recognizer to be activated. Defaults to 1. * `recognizeWith` (Array) - An array of recognizer names that this recognizer should recognize with. * `requireFailure` (Array) - An array of recognizer names that must fail for this recognizer to be activated. ``` -------------------------------- ### Input Source: https://github.com/hammerjs/hammerjs.github.io/blob/master/jsdoc/Input.html Base class for input event handling. ```APIDOC ## Input ### Description Base class for input event handling. ### Methods * `destroy()` * `handler(event)` * `init(options)` ``` -------------------------------- ### TapRecognizer.set Source: https://github.com/hammerjs/hammerjs.github.io/blob/master/jsdoc/TapRecognizer.html Sets configuration options for the recognizer. ```APIDOC ## TapRecognizer.set ### Description Allows for the configuration of the recognizer by setting various options. ### Method `set(options)` ### Parameters #### Path Parameters - **options** (Object) - Description: An object containing the configuration options to set. ### Returns - `[Recognizer](Recognizer.html)`: The recognizer instance for chaining. ``` -------------------------------- ### TouchInput Constructor and Event Mapping Source: https://github.com/hammerjs/hammerjs.github.io/blob/master/jsdoc/input_touch.js.html Defines the mapping for touch event types to input states and initializes the TouchInput class. It sets up the target events and internal state for tracking touch identifiers. ```javascript var TOUCH_INPUT_MAP = { touchstart: INPUT_START, touchmove: INPUT_MOVE, touchend: INPUT_END, touchcancel: INPUT_CANCEL }; var TOUCH_TARGET_EVENTS = 'touchstart touchmove touchend touchcancel'; /** * Multi-user touch events input * @constructor * @extends Input */ function TouchInput() { this.evTarget = TOUCH_TARGET_EVENTS; this.targetIds = {}; Input.apply(this, arguments); } ``` -------------------------------- ### Recognizer.getTouchAction Source: https://github.com/hammerjs/hammerjs.github.io/blob/master/jsdoc/AttrRecognizer.html Returns the preferred touch-action for this recognizer. ```APIDOC ## Recognizer.getTouchAction() ### Description Returns the preferred touch-action for this recognizer. ### Method GET (assumed, as it's a query) ### Endpoint N/A (method call) ### Parameters None ### Response #### Success Response (Array) - **return value** (Array) - An array of touch-action values. ``` -------------------------------- ### set Source: https://github.com/hammerjs/hammerjs.github.io/blob/master/jsdoc/Manager.html Updates the manager's configuration options. ```APIDOC ## set(options) ### Description Sets options for the manager. ### Parameters #### Path Parameters - **options** (Object) - An object containing the options to set. ### Returns - {[Manager](Manager.html)} - The manager instance. ``` -------------------------------- ### recognize Source: https://github.com/hammerjs/hammerjs.github.io/blob/master/jsdoc/Manager.html Initiates the gesture recognition process for the current input data. This method is typically called internally by the input handler on pointer movements. ```APIDOC ## recognize(inputData) ### Description Runs the recognizers. Called by the inputHandler function on every movement of the pointers (touches). It walks through all the recognizers and tries to detect the gesture that is being made. ### Parameters #### Path Parameters - **inputData** (Object) - An object containing the input data for recognition. ``` -------------------------------- ### Custom Recognizer Enable Logic Source: https://github.com/hammerjs/hammerjs.github.io/blob/master/toggle-recognizer.md Shows how to delegate the enable/disable logic to a custom function that checks application state before allowing a recognizer to fire. This is useful for complex gesture scenarios. ```js var view = View.extend({ state: 'ACTIVE', score: 0, canRecognizeTap: function(recognizer, event) { return this.state !== 'INACTIVE' && this.score > 0; } }); var mc = new Hammer.Manager(viewElement, {}); var canEnable = function(rec, input) { return view.canRecognizeTap(rec, input); } mc.add(new Hammer.Tap({enable: canEnable})); ```