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: {{dragCount}}
+Pan: {{panCount}}
+Longpress: {{longpressCount}}
+Press: {{pressCount}}
+Swipe: {{swipeCount}}