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 bb9324fdd9..23fa92d4d2 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 7225981531..72f09a5e09 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 {