diff --git a/src/core/gestures/MdGestureConfig.ts b/src/core/gestures/MdGestureConfig.ts index a6c5d583e48d..b7edb49af989 100644 --- a/src/core/gestures/MdGestureConfig.ts +++ b/src/core/gestures/MdGestureConfig.ts @@ -5,22 +5,46 @@ import {HammerGestureConfig} from '@angular/platform-browser'; @Injectable() export class MdGestureConfig extends HammerGestureConfig { /* List of new event names to add to the gesture support list */ - events: string[] = ['drag', 'longpress']; + events: string[] = [ + 'drag', + 'dragstart', + 'dragend', + 'dragright', + 'dragleft', + 'longpress', + ]; /* - * Overrides default recognizer event names and thresholds. - * - * Our gesture names come from the Material Design gestures spec: - * https://www.google.com/design/spec/patterns/gestures.html#gestures-touch-mechanics - * - * More information on default recognizers can be found in Hammer docs: - * http://hammerjs.github.io/recognizer-pan/ - * http://hammerjs.github.io/recognizer-press/ - * - * TODO: Confirm threshold numbers with Material Design UX Team - * */ - overrides: {[key: string]: Object} = { - 'pan': {event: 'drag', threshold: 6}, - 'press': {event: 'longpress', time: 500} - }; + * Builds Hammer instance manually to add custom recognizers that match the Material Design spec. + * + * Our gesture names come from the Material Design gestures spec: + * https://www.google.com/design/spec/patterns/gestures.html#gestures-touch-mechanics + * + * More information on default recognizers can be found in Hammer docs: + * http://hammerjs.github.io/recognizer-pan/ + * http://hammerjs.github.io/recognizer-press/ + * + * TODO: Confirm threshold numbers with Material Design UX Team + * */ + buildHammer(element: HTMLElement) { + var mc = new Hammer(element); + + // create custom gesture recognizers + var drag = new Hammer.Pan({event: 'drag', threshold: 6}); + var longpress = new Hammer.Press({event: 'longpress', time: 500}); + + // ensure custom recognizers can coexist with the default gestures (i.e. pan, press, swipe) + var pan = new Hammer.Pan(); + var press = new Hammer.Press(); + var swipe = new Hammer.Swipe(); + drag.recognizeWith(pan); + drag.recognizeWith(swipe); + pan.recognizeWith(swipe); + longpress.recognizeWith(press); + + // add customized gestures to Hammer manager + mc.add([drag, pan, swipe, press, longpress]); + return mc; + } + } diff --git a/src/demo-app/gestures/gestures-demo.html b/src/demo-app/gestures/gestures-demo.html index ff4caabadac7..d13beb1914c4 100644 --- a/src/demo-app/gestures/gestures-demo.html +++ b/src/demo-app/gestures/gestures-demo.html @@ -1,9 +1,12 @@
-
- Drag or press me. + Drag, swipe, or press me.
- drag: {{dragCount}} - swipe: {{swipeCount}} - longpress: {{pressCount}} +

Drag: {{dragCount}}

+

Pan: {{panCount}}

+

Longpress: {{longpressCount}}

+

Press: {{pressCount}}

+

Swipe: {{swipeCount}}

diff --git a/src/demo-app/gestures/gestures-demo.ts b/src/demo-app/gestures/gestures-demo.ts index 70c27d455af1..e828abf4b5fe 100644 --- a/src/demo-app/gestures/gestures-demo.ts +++ b/src/demo-app/gestures/gestures-demo.ts @@ -8,6 +8,8 @@ import {Component} from '@angular/core'; }) export class GesturesDemo { dragCount: number = 0; + panCount: number = 0; pressCount: number = 0; + longpressCount: number = 0; swipeCount: number = 0; } diff --git a/typings.json b/typings.json index ecaa2d12a7dd..49dcb07a80d3 100644 --- a/typings.json +++ b/typings.json @@ -6,6 +6,7 @@ "jasmine": "github:DefinitelyTyped/DefinitelyTyped/jasmine/jasmine.d.ts#26c98c8a9530c44f8c801ccc3b2057e2101187ee" }, "ambientDependencies": { - "es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#6697d6f7dadbf5773cb40ecda35a76027e0783b2" + "es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#6697d6f7dadbf5773cb40ecda35a76027e0783b2", + "hammerjs": "github:DefinitelyTyped/DefinitelyTyped/hammerjs/hammerjs.d.ts#de8e80dfe5360fef44d00c41257d5ef37add000a" } }