Skip to content

Commit 3179fec

Browse files
kararobertmesserle
authored andcommitted
fix(gestures): ensure drag and pan are recognized with slide (#901)
1 parent 14805fe commit 3179fec

File tree

3 files changed

+24
-22
lines changed

3 files changed

+24
-22
lines changed

src/core/gestures/MdGestureConfig.ts

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -33,34 +33,34 @@ export class MdGestureConfig extends HammerGestureConfig {
3333
* TODO: Confirm threshold numbers with Material Design UX Team
3434
* */
3535
buildHammer(element: HTMLElement) {
36-
var mc = new Hammer(element);
36+
const mc = new Hammer(element);
3737

38-
// Create custom gesture recognizers
39-
let drag = this._createRecognizer(Hammer.Pan, {event: 'drag', threshold: 6}, Hammer.Swipe);
40-
let slide = this._createRecognizer(Hammer.Pan, {event: 'slide', threshold: 0}, Hammer.Swipe);
41-
let longpress = this._createRecognizer(Hammer.Press, {event: 'longpress', time: 500});
38+
// create custom gesture recognizers
39+
const drag = new Hammer.Pan({event: 'drag', threshold: 6});
40+
const longpress = new Hammer.Press({event: 'longpress', time: 500});
41+
const slide = new Hammer.Pan({event: 'slide', threshold: 0});
4242

43-
let pan = new Hammer.Pan();
44-
let swipe = new Hammer.Swipe();
43+
// ensure custom recognizers can coexist with the default gestures (i.e. pan, press, swipe)
44+
// custom recognizers can overwrite default recognizers if they aren't configured to
45+
// "recognizeWith" others that listen to the same base events.
46+
const pan = new Hammer.Pan();
47+
const press = new Hammer.Press();
48+
const swipe = new Hammer.Swipe();
4549

46-
// Overwrite the default `pan` event to use the swipe event.
47-
pan.recognizeWith(swipe);
48-
49-
// Add customized gestures to Hammer manager
50-
mc.add([drag, slide, pan, longpress]);
50+
drag.recognizeWith(pan);
51+
drag.recognizeWith(swipe);
52+
drag.recognizeWith(slide);
5153

52-
return mc;
53-
}
54+
pan.recognizeWith(swipe);
55+
pan.recognizeWith(slide);
5456

55-
/** Creates a new recognizer, without affecting the default recognizers of HammerJS */
56-
private _createRecognizer(type: RecognizerStatic, options: any, ...extra: RecognizerStatic[]) {
57-
let recognizer = new type(options);
57+
slide.recognizeWith(swipe);
5858

59-
// Add the default recognizer to the new custom recognizer.
60-
extra.push(type);
61-
extra.forEach(entry => recognizer.recognizeWith(new entry()));
59+
longpress.recognizeWith(press);
6260

63-
return recognizer;
61+
// add customized gestures to Hammer manager
62+
mc.add([drag, pan, swipe, press, longpress, slide]);
63+
return mc;
6464
}
6565

6666
}
Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
<div class="demo-gestures">
22
<div (drag)="dragCount = dragCount + 1" (pan)="panCount = panCount + 1"
33
(longpress)="longpressCount = longpressCount + 1" (press)="pressCount = pressCount + 1"
4-
(swipe)="swipeCount = swipeCount + 1">
4+
(swipe)="swipeCount = swipeCount + 1" (slide)="slideCount = slideCount + 1">
55
Drag, swipe, or press me.
66
</div>
77
<p>Drag: {{dragCount}}</p>
88
<p>Pan: {{panCount}}</p>
99
<p>Longpress: {{longpressCount}}</p>
1010
<p>Press: {{pressCount}}</p>
1111
<p>Swipe: {{swipeCount}}</p>
12+
<p>Slide: {{slideCount}}</p>
1213
</div>

src/demo-app/gestures/gestures-demo.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,4 +13,5 @@ export class GesturesDemo {
1313
pressCount: number = 0;
1414
longpressCount: number = 0;
1515
swipeCount: number = 0;
16+
slideCount: number = 0;
1617
}

0 commit comments

Comments
 (0)