From 2e37cabb317eb5d50b6f2014d5680dbf71a099c5 Mon Sep 17 00:00:00 2001 From: satoru kimura Date: Wed, 2 Apr 2014 15:08:22 +0900 Subject: [PATCH] Update Hammer.js to v1.0.10. --- hammerjs/hammerjs-tests.ts | 47 +++++++++++----- hammerjs/hammerjs.d.ts | 110 ++++++++++++++++++++++++++----------- 2 files changed, 111 insertions(+), 46 deletions(-) diff --git a/hammerjs/hammerjs-tests.ts b/hammerjs/hammerjs-tests.ts index bb9324fdd..23fa92d4d 100644 --- a/hammerjs/hammerjs-tests.ts +++ b/hammerjs/hammerjs-tests.ts @@ -1,32 +1,49 @@ /// /// -var hammer = new Hammer(document.getElementById("container")); -hammer.ondragstart = function (ev) { }; -hammer.ondrag = function (ev) { }; -hammer.ondragend = function (ev) { }; -hammer.onswipe = function (ev) { }; +// plugin check +if (!Hammer.HAS_TOUCHEVENTS && !Hammer.HAS_POINTEREVENTS) { + Hammer.plugins.fakeMultitouch(); + Hammer.plugins.showTouches(); +} -hammer.ontap = function (ev) { }; -hammer.ondoubletap = function (ev) { }; -hammer.onhold = function (ev) { }; +// instance method check +var el = document.getElementById("container"); -hammer.ontransformstart = function (ev) { }; -hammer.ontransform = function (ev) { }; -hammer.ontransformend = function (ev) { }; +Hammer(el).on("doubletap", function () { + alert('you doubletapped me!'); +}); -hammer.onrelease = function (ev) { }; +var hammertime = Hammer(el, { + drag: false, + transform: false +}).off("tap", function (event:HammerEvent) { + alert('hello!'); +}); +hammertime.enable(false); + +hammertime.on("touch drag transform", function (ev: HammerEvent) { + if (!ev.gesture) { + return; + } + + if (ev.gesture.deltaX >= 20) { + hammertime.trigger("swipe", ev.gesture); + } +}); + +// jQuery check $("#element") .hammer({ // Options }) - .bind("tap", function (ev) { + .on("tap", function (ev) { console.log(ev); }); $("#container").hammer({ prevent_default: false, - drag_vertical: false -}).bind("hold tap doubletap transformstart transform transformend dragstart drag dragend release swipe", function (ev) { + drag_block_vertical: false +}).on("hold tap doubletap transformstart transform transformend dragstart drag dragend release swipe", function (ev) { }); \ No newline at end of file diff --git a/hammerjs/hammerjs.d.ts b/hammerjs/hammerjs.d.ts index 722598153..72f09a5e0 100644 --- a/hammerjs/hammerjs.d.ts +++ b/hammerjs/hammerjs.d.ts @@ -1,4 +1,4 @@ -// Type definitions for Hammer.js 1.0.5 +// Type definitions for Hammer.js 1.0.10 // Project: http://eightmedia.github.com/hammer.js/ // Definitions by: Boris Yankov // Definitions: https://github.com/borisyankov/DefinitelyTyped @@ -6,6 +6,46 @@ /// +declare var Hammer: HammerStatic; + +interface HammerStatic { + (element: any, options?: HammerOptions): HammerInstance; + + VERSION: number; + HAS_POINTEREVENTS: boolean; + HAS_TOUCHEVENTS: boolean; + UPDATE_VELOCITY_INTERVAL: number; + POINTER_MOUSE: HammerPointerType; + POINTER_TOUCH: HammerPointerType; + POINTER_PEN: HammerPointerType; + + DIRECTION_UP: HammerDirectionType; + DIRECTION_DOWN: HammerDirectionType; + DIRECTION_LEFT: HammerDirectionType; + DIRECTION_RIGH: HammerDirectionType; + + EVENT_START: HammerTouchEventState; + EVENT_MOVE: HammerTouchEventState; + EVENT_END: HammerTouchEventState; + + plugins: any; + gestures: any; + READY: boolean; + + +} + +declare class HammerInstance { + constructor(element: any, options?: HammerOptions); + + on(gesture: string, handler: (event: HammerEvent) => void): HammerInstance; + off(gesture: string, handler: (event: HammerEvent) => void): HammerInstance; + enable(toggle: boolean): HammerInstance; + + // You shouldn't use this, this is an internally method use by the gestures. Only use it when you know what you're doing! You can read the sourcecode about how to use this. + trigger(gesture: string, eventData: HammerGestureEventData): HammerInstance; +} + // Gesture Options : https://github.com/EightMedia/hammer.js/wiki/Getting-Started#gesture-options interface HammerOptions { drag?: boolean; @@ -38,44 +78,52 @@ interface HammerOptions { transform_min_scale?: number; } +interface HammerGestureEventData { + timestamp: number; + target: HTMLElement; + touches: HammerPoint[]; + pointerType: HammerPointerType; + center: HammerPoint; + deltaTime: number; + deltaX: number; + deltaY: number; + velocityX: number; + velocityY: number; + angle: number; + interimAngle: number; + direction: HammerDirectionType; + interimDirection: HammerDirectionType; + distance: number; + scale: number; + rotation: number; + eventType: HammerTouchEventState; + srcEvent: any; + startEvent: any; + + stopPropagation(): void; + preventDefault(): void; + stopDetect(): void; +} + interface HammerPoint { - x: number; - y: number; + pageX: number; + pageY: number; } interface HammerEvent { - originalEvent: Event; - position: HammerPoint; - touches: HammerPoint[]; + type: string; + gesture: HammerGestureEventData; + + stopPropagation(): void; + preventDefault(): void; + } -interface HammertTransformEvent extends HammerEvent { - scale: number; - rotation: number; +declare enum HammerPointerType { } - -interface HammerDirectionEvent extends HammerEvent { - angle: number; - direction: string; - distance: number; - distanceX: number; - distanceY: number; +declare enum HammerDirectionType { } - -declare class Hammer { - constructor (element: any, options?: HammerOptions); - - ondragstart: (event: HammerDirectionEvent) => void; - ondrag: (event: HammerDirectionEvent) => void; - ondragend: (event: HammerDirectionEvent) => void; - onswipe: (event: HammerDirectionEvent) => void; - ontap: (event: HammerEvent) => void; - ondoubletap: (event: HammerEvent) => void; - onhold: (event: HammerEvent) => void; - ontransformstart: (event: HammertTransformEvent) => void; - ontransform: (event: HammertTransformEvent) => void; - ontransformend: (event: HammertTransformEvent) => void; - onrelease: (event: HammerEvent) => void; +declare enum HammerTouchEventState { } interface JQuery {