feat(gestures): allow override of Hammer default configuration

kara · mircoservices · commit 42a461c5e8c1 · 2016-04-10T17:23:43.000+02:00
Closes angular#7924
diff --git a/modules/angular2/src/platform/browser_common.ts b/modules/angular2/src/platform/browser_common.ts
@@ -30,6 +30,10 @@ import {BrowserDomAdapter} from './browser/browser_adapter';
 import {BrowserGetTestability} from 'angular2/src/platform/browser/testability';
 import {wtfInit} from 'angular2/src/core/profile/wtf_init';
 import {EventManager, EVENT_MANAGER_PLUGINS} from "angular2/src/platform/dom/events/event_manager";
+import {
+  HAMMER_GESTURE_CONFIG,
+  HammerGestureConfig
+} from 'angular2/src/platform/dom/events/hammer_gestures';
 import {ELEMENT_PROBE_PROVIDERS} from 'angular2/platform/common_dom';
 export {DOCUMENT} from 'angular2/src/platform/dom/dom_tokens';
 export {Title} from 'angular2/src/platform/browser/title';
@@ -41,6 +45,7 @@ export {
 } from 'angular2/platform/common_dom';
 export {BrowserDomAdapter} from './browser/browser_adapter';
 export {enableDebugTools, disableDebugTools} from 'angular2/src/platform/browser/tools/tools';
+export {HAMMER_GESTURE_CONFIG, HammerGestureConfig} from './dom/events/hammer_gestures';
 
 /**
  * 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[]*/
   new Provider(EVENT_MANAGER_PLUGINS, {useClass: DomEventsPlugin, multi: true}),
   new Provider(EVENT_MANAGER_PLUGINS, {useClass: KeyEventsPlugin, multi: true}),
   new Provider(EVENT_MANAGER_PLUGINS, {useClass: HammerGesturesPlugin, multi: true}),
+  new Provider(HAMMER_GESTURE_CONFIG, {useClass: HammerGestureConfig}),
   new Provider(DomRootRenderer, {useClass: DomRootRenderer_}),
   new Provider(RootRenderer, {useExisting: DomRootRenderer}),
   new Provider(SharedStylesHost, {useExisting: DomSharedStylesHost}),
diff --git a/modules/angular2/src/platform/dom/events/hammer_gestures.dart b/modules/angular2/src/platform/dom/events/hammer_gestures.dart
@@ -3,14 +3,42 @@ library angular.events;
 import 'dart:html';
 import './hammer_common.dart';
 import 'package:angular2/src/facade/exceptions.dart' show BaseException;
-import "package:angular2/src/core/di.dart" show Injectable;
+import "package:angular2/src/core/di.dart" show Injectable, Inject, OpaqueToken;
 
 import 'dart:js' as js;
 
+const OpaqueToken HAMMER_GESTURE_CONFIG = const OpaqueToken("HammerGestureConfig");
+
+overrideDefault(js.JsObject mc, String eventName, Object config) {
+  var jsObj = mc.callMethod('get', [eventName]);
+  jsObj.callMethod('set', [
+    new js.JsObject.jsify(config)
+  ]);
+}
+
+@Injectable()
+class HammerGestureConfig {
+  List<String> events = [];
+  Map overrides = {};
+
+  buildHammer(Element element) {
+    var mc = new js.JsObject(js.context['Hammer'], [element]);
+    overrideDefault(mc, 'pinch', {'enable': true});
+    overrideDefault(mc, 'rotate', {'enable': true});
+    this.overrides.forEach((Object config, String eventName) => overrideDefault(mc, eventName, config));
+    return mc;
+  }
+
+}
+
 @Injectable()
 class HammerGesturesPlugin extends HammerGesturesPluginCommon {
+  HammerGestureConfig _config;
+
+  HammerGesturesPlugin(@Inject(HAMMER_GESTURE_CONFIG) this._config) {}
+
   bool supports(String eventName) {
-    if (!super.supports(eventName)) return false;
+    if (!super.supports(eventName) && !this.isCustomEvent(eventName)) return false;
 
     if (!js.context.hasProperty('Hammer')) {
       throw new BaseException(
@@ -26,16 +54,7 @@ class HammerGesturesPlugin extends HammerGesturesPluginCommon {
 
     zone.runOutsideAngular(() {
       // Creating the manager bind events, must be done outside of angular
-      var mc = new js.JsObject(js.context['Hammer'], [element]);
-
-      var jsObj = mc.callMethod('get', ['pinch']);
-      jsObj.callMethod('set', [
-        new js.JsObject.jsify({'enable': true})
-      ]);
-      jsObj = mc.callMethod('get', ['rotate']);
-      jsObj.callMethod('set', [
-        new js.JsObject.jsify({'enable': true})
-      ]);
+      var mc = this._config.buildHammer(element);
 
       mc.callMethod('on', [
         eventName,
@@ -48,6 +67,9 @@ class HammerGesturesPlugin extends HammerGesturesPluginCommon {
       ]);
     });
   }
+
+  isCustomEvent(String eventName) { return this._config.events.indexOf(eventName) > -1; }
+
 }
 
 class HammerEvent {
diff --git a/modules/angular2/src/platform/dom/events/hammer_gestures.ts b/modules/angular2/src/platform/dom/events/hammer_gestures.ts
@@ -1,12 +1,42 @@
 import {HammerGesturesPluginCommon} from './hammer_common';
-import {isPresent} from 'angular2/src/facade/lang';
+import {isPresent, CONST_EXPR} from 'angular2/src/facade/lang';
 import {BaseException, WrappedException} from 'angular2/src/facade/exceptions';
-import {Injectable} from 'angular2/src/core/di';
+import {Injectable, Inject, OpaqueToken} from 'angular2/core';
+
+export const HAMMER_GESTURE_CONFIG: OpaqueToken =
+    CONST_EXPR(new OpaqueToken("HammerGestureConfig"));
+
+export interface HammerInstance {
+  on(eventName: string, callback: Function): void;
+  off(eventName: string, callback: Function): void;
+}
+
+@Injectable()
+export class HammerGestureConfig {
+  events: string[] = [];
+
+  overrides: {[key: string]: Object} = {};
+
+  buildHammer(element: HTMLElement): HammerInstance {
+    var mc = new Hammer(element);
+
+    mc.get('pinch').set({enable: true});
+    mc.get('rotate').set({enable: true});
+
+    for (let eventName in this.overrides) {
+      mc.get(eventName).set(this.overrides[eventName]);
+    }
+
+    return mc;
+  }
+}
 
 @Injectable()
 export class HammerGesturesPlugin extends HammerGesturesPluginCommon {
+  constructor(@Inject(HAMMER_GESTURE_CONFIG) private _config: HammerGestureConfig) { super(); }
+
   supports(eventName: string): boolean {
-    if (!super.supports(eventName)) return false;
+    if (!super.supports(eventName) && !this.isCustomEvent(eventName)) return false;
 
     if (!isPresent(window['Hammer'])) {
       throw new BaseException(`Hammer.js is not loaded, can not bind ${eventName} event`);
@@ -19,14 +49,14 @@ export class HammerGesturesPlugin extends HammerGesturesPluginCommon {
     var zone = this.manager.getZone();
     eventName = eventName.toLowerCase();
 
-    return zone.runOutsideAngular(function() {
+    return zone.runOutsideAngular(() => {
       // Creating the manager bind events, must be done outside of angular
-      var mc = new Hammer(element);
-      mc.get('pinch').set({enable: true});
-      mc.get('rotate').set({enable: true});
+      var mc = this._config.buildHammer(element);
       var callback = function(eventObj) { zone.run(function() { handler(eventObj); }); };
       mc.on(eventName, callback);
       return () => { mc.off(eventName, callback); };
     });
   }
+
+  isCustomEvent(eventName: string): boolean { return this._config.events.indexOf(eventName) > -1; }
 }
diff --git a/modules/angular2/src/platform/worker_render_common.ts b/modules/angular2/src/platform/worker_render_common.ts
@@ -48,6 +48,7 @@ import {
 import {Serializer} from 'angular2/src/web_workers/shared/serializer';
 import {ON_WEB_WORKER} from 'angular2/src/web_workers/shared/api';
 import {RenderStore} from 'angular2/src/web_workers/shared/render_store';
+import {HAMMER_GESTURE_CONFIG, HammerGestureConfig} from './dom/events/hammer_gestures';
 
 export const WORKER_SCRIPT: OpaqueToken = CONST_EXPR(new OpaqueToken("WebWorkerScript"));
 
@@ -77,6 +78,7 @@ export const WORKER_RENDER_APPLICATION_COMMON: Array<any /*Type | Provider | any
   new Provider(EVENT_MANAGER_PLUGINS, {useClass: DomEventsPlugin, multi: true}),
   new Provider(EVENT_MANAGER_PLUGINS, {useClass: KeyEventsPlugin, multi: true}),
   new Provider(EVENT_MANAGER_PLUGINS, {useClass: HammerGesturesPlugin, multi: true}),
+  new Provider(HAMMER_GESTURE_CONFIG, {useClass: HammerGestureConfig}),
   new Provider(DomRootRenderer, {useClass: DomRootRenderer_}),
   new Provider(RootRenderer, {useExisting: DomRootRenderer}),
   new Provider(SharedStylesHost, {useExisting: DomSharedStylesHost}),
