From da5f6f56b522e3604e89636cefeef2874eb199b8 Mon Sep 17 00:00:00 2001 From: Paul Gschwendtner Date: Fri, 22 Jul 2016 22:38:11 +0200 Subject: [PATCH 1/2] fix(gestures): custom recognizers should not inherit twice. * HammerJS does not allow custom recognizers to use a default recognizer twice globally. This means that we can't create a `drag` and `slide` recognizer, which depends for all on one default recognizers. --- src/core/gestures/MdGestureConfig.ts | 44 +++++++++++++++------------- 1 file changed, 23 insertions(+), 21 deletions(-) diff --git a/src/core/gestures/MdGestureConfig.ts b/src/core/gestures/MdGestureConfig.ts index 4d312ce82ad3..6dc4e1d15a9c 100644 --- a/src/core/gestures/MdGestureConfig.ts +++ b/src/core/gestures/MdGestureConfig.ts @@ -33,34 +33,36 @@ export class MdGestureConfig extends HammerGestureConfig { * TODO: Confirm threshold numbers with Material Design UX Team * */ buildHammer(element: HTMLElement) { - const mc = new Hammer(element); + var mc = new Hammer(element); - // create custom gesture recognizers - const drag = new Hammer.Pan({event: 'drag', threshold: 6}); - const longpress = new Hammer.Press({event: 'longpress', time: 500}); - const slide = new Hammer.Pan({event: 'slide', threshold: 0}); + // Default Hammer Recognizers. + let pan = new Hammer.Pan(); + let swipe = new Hammer.Swipe(); + let press = new Hammer.Press(); - // ensure custom recognizers can coexist with the default gestures (i.e. pan, press, swipe) - // custom recognizers can overwrite default recognizers if they aren't configured to - // "recognizeWith" others that listen to the same base events. - const pan = new Hammer.Pan(); - const press = new Hammer.Press(); - const swipe = new Hammer.Swipe(); - - drag.recognizeWith(pan); - drag.recognizeWith(swipe); - drag.recognizeWith(slide); + // Notice that a HammerJS recognizer can only depend on one other recognizer once. + // Otherwise the previous `recognizeWith` will be dropped. + let slide = this._createRecognizer(pan, {event: 'slide', threshold: 0}, swipe); + let drag = this._createRecognizer(slide, {event: 'drag', threshold: 6}, swipe); + let longpress = this._createRecognizer(press, {event: 'longpress', time: 500}); + // Overwrite the default `pan` event to use the swipe event. pan.recognizeWith(swipe); - pan.recognizeWith(slide); - - slide.recognizeWith(swipe); - longpress.recognizeWith(press); + // Add customized gestures to Hammer manager + mc.add([swipe, press, pan, drag, slide, longpress]); - // add customized gestures to Hammer manager - mc.add([drag, pan, swipe, press, longpress, slide]); return mc; } + /** Creates a new recognizer, without affecting the default recognizers of HammerJS */ + private _createRecognizer(base: Recognizer, options: any, ...inheritances: Recognizer[]) { + let recognizer = new ( base.constructor)(options); + + inheritances.push(base); + inheritances.forEach((item) => recognizer.recognizeWith(item)); + + return recognizer; + } + } From e2ff6a64ae0dd4cd64dfbbf6454480194787e976 Mon Sep 17 00:00:00 2001 From: Paul Gschwendtner Date: Fri, 22 Jul 2016 22:39:01 +0200 Subject: [PATCH 2/2] Make `mc` a constant as before. --- src/core/gestures/MdGestureConfig.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/core/gestures/MdGestureConfig.ts b/src/core/gestures/MdGestureConfig.ts index 6dc4e1d15a9c..fa4cb30840c5 100644 --- a/src/core/gestures/MdGestureConfig.ts +++ b/src/core/gestures/MdGestureConfig.ts @@ -33,7 +33,7 @@ export class MdGestureConfig extends HammerGestureConfig { * TODO: Confirm threshold numbers with Material Design UX Team * */ buildHammer(element: HTMLElement) { - var mc = new Hammer(element); + const mc = new Hammer(element); // Default Hammer Recognizers. let pan = new Hammer.Pan();