Skip to content

Commit 6cbf990

Browse files
karakara
committed
feat(gestures): allow override of Hammer default configuration
Closes #7924
1 parent 26a3390 commit 6cbf990

4 files changed

Lines changed: 79 additions & 19 deletions

File tree

‎modules/angular2/src/platform/browser_common.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,10 @@ import {BrowserDomAdapter} from './browser/browser_adapter';
3030
import {BrowserGetTestability} from 'angular2/src/platform/browser/testability';
3131
import {wtfInit} from 'angular2/src/core/profile/wtf_init';
3232
import {EventManager, EVENT_MANAGER_PLUGINS} from "angular2/src/platform/dom/events/event_manager";
33+
import {
34+
HAMMER_GESTURE_CONFIG,
35+
HammerGestureConfig
36+
} from 'angular2/src/platform/dom/events/hammer_gestures';
3337
import {ELEMENT_PROBE_PROVIDERS} from 'angular2/platform/common_dom';
3438
export {DOCUMENT} from 'angular2/src/platform/dom/dom_tokens';
3539
export {Title} from 'angular2/src/platform/browser/title';
@@ -41,6 +45,7 @@ export {
4145
} from 'angular2/platform/common_dom';
4246
export {BrowserDomAdapter} from './browser/browser_adapter';
4347
export {enableDebugTools, disableDebugTools} from 'angular2/src/platform/browser/tools/tools';
48+
export {HAMMER_GESTURE_CONFIG, HammerGestureConfig} from './dom/events/hammer_gestures';
4449

4550
/**
4651
* A set of providers to initialize the Angular platform in a web browser.
@@ -77,6 +82,7 @@ export const BROWSER_APP_COMMON_PROVIDERS: Array<any /*Type | Provider | any[]*/
7782
new Provider(EVENT_MANAGER_PLUGINS, {useClass: DomEventsPlugin, multi: true}),
7883
new Provider(EVENT_MANAGER_PLUGINS, {useClass: KeyEventsPlugin, multi: true}),
7984
new Provider(EVENT_MANAGER_PLUGINS, {useClass: HammerGesturesPlugin, multi: true}),
85+
new Provider(HAMMER_GESTURE_CONFIG, {useClass: HammerGestureConfig}),
8086
new Provider(DomRootRenderer, {useClass: DomRootRenderer_}),
8187
new Provider(RootRenderer, {useExisting: DomRootRenderer}),
8288
new Provider(SharedStylesHost, {useExisting: DomSharedStylesHost}),

‎modules/angular2/src/platform/dom/events/hammer_gestures.dart‎

Lines changed: 34 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,42 @@ library angular.events;
33
import 'dart:html';
44
import './hammer_common.dart';
55
import 'package:angular2/src/facade/exceptions.dart' show BaseException;
6-
import "package:angular2/src/core/di.dart" show Injectable;
6+
import "package:angular2/src/core/di.dart" show Injectable, Inject, OpaqueToken;
77

88
import 'dart:js' as js;
99

10+
const OpaqueToken HAMMER_GESTURE_CONFIG = const OpaqueToken("HammerGestureConfig");
11+
12+
overrideDefault(js.JsObject mc, String eventName, Object config) {
13+
var jsObj = mc.callMethod('get', [eventName]);
14+
jsObj.callMethod('set', [
15+
new js.JsObject.jsify(config)
16+
]);
17+
}
18+
19+
@Injectable()
20+
class HammerGestureConfig {
21+
List<String> events = [];
22+
Map overrides = {};
23+
24+
buildHammer(Element element) {
25+
var mc = new js.JsObject(js.context['Hammer'], [element]);
26+
overrideDefault(mc, 'pinch', {'enable': true});
27+
overrideDefault(mc, 'rotate', {'enable': true});
28+
this.overrides.forEach((Object config, String eventName) => overrideDefault(mc, eventName, config));
29+
return mc;
30+
}
31+
32+
}
33+
1034
@Injectable()
1135
class HammerGesturesPlugin extends HammerGesturesPluginCommon {
36+
HammerGestureConfig _config;
37+
38+
HammerGesturesPlugin(@Inject(HAMMER_GESTURE_CONFIG) this._config) {}
39+
1240
bool supports(String eventName) {
13-
if (!super.supports(eventName)) return false;
41+
if (!super.supports(eventName) && !this.isCustomEvent(eventName)) return false;
1442

1543
if (!js.context.hasProperty('Hammer')) {
1644
throw new BaseException(
@@ -26,16 +54,7 @@ class HammerGesturesPlugin extends HammerGesturesPluginCommon {
2654

2755
zone.runOutsideAngular(() {
2856
// Creating the manager bind events, must be done outside of angular
29-
var mc = new js.JsObject(js.context['Hammer'], [element]);
30-
31-
var jsObj = mc.callMethod('get', ['pinch']);
32-
jsObj.callMethod('set', [
33-
new js.JsObject.jsify({'enable': true})
34-
]);
35-
jsObj = mc.callMethod('get', ['rotate']);
36-
jsObj.callMethod('set', [
37-
new js.JsObject.jsify({'enable': true})
38-
]);
57+
var mc = this._config.buildHammer(element);
3958

4059
mc.callMethod('on', [
4160
eventName,
@@ -48,6 +67,9 @@ class HammerGesturesPlugin extends HammerGesturesPluginCommon {
4867
]);
4968
});
5069
}
70+
71+
isCustomEvent(String eventName) { return this._config.events.indexOf(eventName) > -1; }
72+
5173
}
5274

5375
class HammerEvent {

‎modules/angular2/src/platform/dom/events/hammer_gestures.ts‎

Lines changed: 37 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,42 @@
11
import {HammerGesturesPluginCommon} from './hammer_common';
2-
import {isPresent} from 'angular2/src/facade/lang';
2+
import {isPresent, CONST_EXPR} from 'angular2/src/facade/lang';
33
import {BaseException, WrappedException} from 'angular2/src/facade/exceptions';
4-
import {Injectable} from 'angular2/src/core/di';
4+
import {Injectable, Inject, OpaqueToken} from 'angular2/core';
5+
6+
export const HAMMER_GESTURE_CONFIG: OpaqueToken =
7+
CONST_EXPR(new OpaqueToken("HammerGestureConfig"));
8+
9+
export interface HammerInstance {
10+
on(eventName: string, callback: Function): void;
11+
off(eventName: string, callback: Function): void;
12+
}
13+
14+
@Injectable()
15+
export class HammerGestureConfig {
16+
events: string[] = [];
17+
18+
overrides: {[key: string]: Object} = {};
19+
20+
buildHammer(element: HTMLElement): HammerInstance {
21+
var mc = new Hammer(element);
22+
23+
mc.get('pinch').set({enable: true});
24+
mc.get('rotate').set({enable: true});
25+
26+
for (let eventName in this.overrides) {
27+
mc.get(eventName).set(this.overrides[eventName]);
28+
}
29+
30+
return mc;
31+
}
32+
}
533

634
@Injectable()
735
export class HammerGesturesPlugin extends HammerGesturesPluginCommon {
36+
constructor(@Inject(HAMMER_GESTURE_CONFIG) private _config: HammerGestureConfig) { super(); }
37+
838
supports(eventName: string): boolean {
9-
if (!super.supports(eventName)) return false;
39+
if (!super.supports(eventName) && !this.isCustomEvent(eventName)) return false;
1040

1141
if (!isPresent(window['Hammer'])) {
1242
throw new BaseException(`Hammer.js is not loaded, can not bind ${eventName} event`);
@@ -19,14 +49,14 @@ export class HammerGesturesPlugin extends HammerGesturesPluginCommon {
1949
var zone = this.manager.getZone();
2050
eventName = eventName.toLowerCase();
2151

22-
return zone.runOutsideAngular(function() {
52+
return zone.runOutsideAngular(() => {
2353
// Creating the manager bind events, must be done outside of angular
24-
var mc = new Hammer(element);
25-
mc.get('pinch').set({enable: true});
26-
mc.get('rotate').set({enable: true});
54+
var mc = this._config.buildHammer(element);
2755
var callback = function(eventObj) { zone.run(function() { handler(eventObj); }); };
2856
mc.on(eventName, callback);
2957
return () => { mc.off(eventName, callback); };
3058
});
3159
}
60+
61+
isCustomEvent(eventName: string): boolean { return this._config.events.indexOf(eventName) > -1; }
3262
}

‎modules/angular2/src/platform/worker_render_common.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ import {
4848
import {Serializer} from 'angular2/src/web_workers/shared/serializer';
4949
import {ON_WEB_WORKER} from 'angular2/src/web_workers/shared/api';
5050
import {RenderStore} from 'angular2/src/web_workers/shared/render_store';
51+
import {HAMMER_GESTURE_CONFIG, HammerGestureConfig} from './dom/events/hammer_gestures';
5152

5253
export const WORKER_SCRIPT: OpaqueToken = CONST_EXPR(new OpaqueToken("WebWorkerScript"));
5354

@@ -77,6 +78,7 @@ export const WORKER_RENDER_APPLICATION_COMMON: Array<any /*Type | Provider | any
7778
new Provider(EVENT_MANAGER_PLUGINS, {useClass: DomEventsPlugin, multi: true}),
7879
new Provider(EVENT_MANAGER_PLUGINS, {useClass: KeyEventsPlugin, multi: true}),
7980
new Provider(EVENT_MANAGER_PLUGINS, {useClass: HammerGesturesPlugin, multi: true}),
81+
new Provider(HAMMER_GESTURE_CONFIG, {useClass: HammerGestureConfig}),
8082
new Provider(DomRootRenderer, {useClass: DomRootRenderer_}),
8183
new Provider(RootRenderer, {useExisting: DomRootRenderer}),
8284
new Provider(SharedStylesHost, {useExisting: DomSharedStylesHost}),

0 commit comments

Comments
 (0)