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 {