feat(EventManager): implement the EventManager

modules/angular2/src/core/application.js

@@ -15,6 +15,8 @@ import {LifeCycle} from 'angular2/src/core/life_cycle/life_cycle';
 import {ShadowDomStrategy, NativeShadowDomStrategy} from 'angular2/src/core/compiler/shadow_dom_strategy';
 import {XHR} from 'angular2/src/core/compiler/xhr/xhr';
 import {XHRImpl} from 'angular2/src/core/compiler/xhr/xhr_impl';
+import {EventManager} from 'angular2/src/core/events/event_manager';
+import {HammerGesturesPlugin} from 'angular2/src/core/events/hammer_gestures';
 
 var _rootInjector: Injector;
 
@@ -58,7 +60,7 @@ function _injectorBindings(appComponentType) {
       }, [appComponentAnnotatedTypeToken, appDocumentToken]),
 
       bind(appViewToken).toAsyncFactory((changeDetection, compiler, injector, appElement,
-        appComponentAnnotatedType, strategy) => {
+        appComponentAnnotatedType, strategy, eventManager) => {
         return compiler.compile(appComponentAnnotatedType.type, null).then(
             (protoView) => {
           var appProtoView = ProtoView.createRootProtoView(protoView, appElement,
@@ -67,18 +69,22 @@ function _injectorBindings(appComponentType) {
           // The light Dom of the app element is not considered part of
           // the angular application. Thus the context and lightDomInjector are
           // empty.
-          var view = appProtoView.instantiate(null);
+          var view = appProtoView.instantiate(null, eventManager);
           view.hydrate(injector, null, new Object());
           return view;
         });
       }, [ChangeDetection, Compiler, Injector, appElementToken, appComponentAnnotatedTypeToken,
-          ShadowDomStrategy]),
+          ShadowDomStrategy, EventManager]),
 
       bind(appChangeDetectorToken).toFactory((rootView) => rootView.changeDetector,
           [appViewToken]),
       bind(appComponentType).toFactory((rootView) => rootView.elementInjectors[0].getComponent(),
           [appViewToken]),
-      bind(LifeCycle).toFactory(() => new LifeCycle(null, assertionsEnabled()),[])
+      bind(LifeCycle).toFactory(() => new LifeCycle(null, assertionsEnabled()),[]),
+      bind(EventManager).toFactory((zone) => {
+        var plugins = [new HammerGesturesPlugin()];
+        return new EventManager(plugins, zone);
+      }, [VmTurnZone]),
   ];
 }
 
@@ -106,12 +112,12 @@ export function bootstrap(appComponentType: Type, bindings=null, givenBootstrapE
     // TODO(rado): prepopulate template cache, so applications with only
     // index.html and main.js are possible.
 
-    var appInjector = _createAppInjector(appComponentType, bindings);
+    var appInjector = _createAppInjector(appComponentType, bindings, zone);
 
     PromiseWrapper.then(appInjector.asyncGet(appViewToken),
       (rootView) => {
         // retrieve life cycle: may have already been created if injected in root component
-        var lc=appInjector.get(LifeCycle); 
+        var lc=appInjector.get(LifeCycle);
         lc.registerWith(zone, rootView.changeDetector);
         lc.tick(); //the first tick that will bootstrap the app
 
@@ -126,10 +132,11 @@ export function bootstrap(appComponentType: Type, bindings=null, givenBootstrapE
   return bootstrapProcess.promise;
 }
 
-function _createAppInjector(appComponentType: Type, bindings: List): Injector {
+function _createAppInjector(appComponentType: Type, bindings: List, zone: VmTurnZone): Injector {
   if (isBlank(_rootInjector)) _rootInjector = new Injector(_rootBindings);
   var mergedBindings = isPresent(bindings) ?
       ListWrapper.concat(_injectorBindings(appComponentType), bindings) :
       _injectorBindings(appComponentType);
+  ListWrapper.push(mergedBindings, bind(VmTurnZone).toValue(zone));
   return _rootInjector.createChild(mergedBindings);
 }

modules/angular2/src/core/compiler/element_injector.js

@@ -497,8 +497,7 @@ export class ElementInjector extends TreeNode {
     if (isPresent(this._eventCallbacks)) {
       var callback = MapWrapper.get(this._eventCallbacks, dep.eventEmitterName);
       if (isPresent(callback)) {
-        var locals = MapWrapper.create();
-        return ProtoView.buildInnerCallback(callback, view, locals);
+        return ProtoView.buildInnerCallback(callback, view);
       }
     }
     return (_) => {};

modules/angular2/src/core/compiler/view.js

@@ -16,6 +16,7 @@ import {Content} from './shadow_dom_emulation/content_tag';
 import {LightDom, DestinationLightDom} from './shadow_dom_emulation/light_dom';
 import {ShadowDomStrategy} from './shadow_dom_strategy';
 import {ViewPool} from './view_pool';
+import {EventManager} from 'angular2/src/core/events/event_manager';
 
 const NG_BINDING_CLASS = 'ng-binding';
 const NG_BINDING_CLASS_SELECTOR = '.ng-binding';
@@ -294,19 +295,19 @@ export class ProtoView {
   }
 
   // TODO(rado): hostElementInjector should be moved to hydrate phase.
-  instantiate(hostElementInjector: ElementInjector):View {
-    if (this._viewPool.length() == 0) this._preFillPool(hostElementInjector);
+  instantiate(hostElementInjector: ElementInjector, eventManager: EventManager):View {
+    if (this._viewPool.length() == 0) this._preFillPool(hostElementInjector, eventManager);
     var view = this._viewPool.pop();
-    return isPresent(view) ? view : this._instantiate(hostElementInjector);
+    return isPresent(view) ? view : this._instantiate(hostElementInjector, eventManager);
   }
 
-  _preFillPool(hostElementInjector: ElementInjector) {
+  _preFillPool(hostElementInjector: ElementInjector, eventManager: EventManager) {
     for (var i = 0; i < VIEW_POOL_PREFILL; i++) {
-      this._viewPool.push(this._instantiate(hostElementInjector));
+      this._viewPool.push(this._instantiate(hostElementInjector, eventManager));
     }
   }
 
-  _instantiate(hostElementInjector: ElementInjector): View {
+  _instantiate(hostElementInjector: ElementInjector, eventManager: EventManager): View {
     var rootElementClone = this.instantiateInPlace ? this.element : DOM.clone(this.element);
     var elementsWithBindingsDynamic;
     if (this.isTemplateElement) {
@@ -387,7 +388,7 @@ export class ProtoView {
       var bindingPropagationConfig = null;
       if (isPresent(binder.componentDirective)) {
         var strategy = this.shadowDomStrategy;
-        var childView = binder.nestedProtoView.instantiate(elementInjector);
+        var childView = binder.nestedProtoView.instantiate(elementInjector, eventManager);
         view.changeDetector.addChild(childView.changeDetector);
 
         lightDom = strategy.constructLightDom(view, childView, element);
@@ -402,7 +403,8 @@ export class ProtoView {
       var viewPort = null;
       if (isPresent(binder.templateDirective)) {
         var destLightDom = this._directParentElementLightDom(protoElementInjector, preBuiltObjects);
-        viewPort = new ViewPort(view, element, binder.nestedProtoView, elementInjector, destLightDom);
+        viewPort = new ViewPort(view, element, binder.nestedProtoView, elementInjector,
+          eventManager, destLightDom);
         ListWrapper.push(viewPorts, viewPort);
       }
 
@@ -416,7 +418,8 @@ export class ProtoView {
       if (isPresent(binder.events)) {
         MapWrapper.forEach(binder.events, (expr, eventName) => {
           if (isBlank(elementInjector) || !elementInjector.hasEventEmitter(eventName)) {
-            ProtoView._addNativeEventListener(element, eventName, expr, view);
+            var handler = ProtoView.buildInnerCallback(expr, view);
+            eventManager.addEventListener(element, eventName, handler);
           }
         });
       }
@@ -432,24 +435,15 @@ export class ProtoView {
     this._viewPool.push(view);
   }
 
-  static _addNativeEventListener(element: Element, eventName: string, expr: AST, view: View) {
+  static buildInnerCallback(expr:AST, view:View) {
     var locals = MapWrapper.create();
-    var innerCallback = ProtoView.buildInnerCallback(expr, view, locals);
-    DOM.on(element, eventName, (event) => {
-      if (event.target === element) {
-        innerCallback(event);
-      }
-    });
-  }
-
-  static buildInnerCallback(expr:AST, view:View, locals: Map) {
     return (event) => {
       // Most of the time the event will be fired only when the view is
       // in the live document.  However, in a rare circumstance the
       // view might get dehydrated, in between the event queuing up and
       // firing.
       if (view.hydrated()) {
-        MapWrapper.set(locals, `$event`, event);
+        MapWrapper.set(locals, '$event', event);
         var context = new ContextWithVariableBindings(view.context, locals);
         expr.eval(context);
       }

modules/angular2/src/core/compiler/viewport.js

@@ -5,6 +5,7 @@ import {BaseException} from 'angular2/src/facade/lang';
 import {Injector} from 'angular2/di';
 import {ElementInjector} from 'angular2/src/core/compiler/element_injector';
 import {isPresent, isBlank} from 'angular2/src/facade/lang';
+import {EventManager} from 'angular2/src/core/events/event_manager';
 
 export class ViewPort {
   parentView: View;
@@ -12,12 +13,13 @@ export class ViewPort {
   defaultProtoView: ProtoView;
   _views: List<View>;
   _lightDom: any;
+  _eventManager: EventManager;
   elementInjector: ElementInjector;
   appInjector: Injector;
   hostElementInjector: ElementInjector;
 
   constructor(parentView: View, templateElement: Element, defaultProtoView: ProtoView,
-      elementInjector: ElementInjector, lightDom = null) {
+      elementInjector: ElementInjector, eventManager: EventManager, lightDom = null) {
     this.parentView = parentView;
     this.templateElement = templateElement;
     this.defaultProtoView = defaultProtoView;
@@ -28,6 +30,7 @@ export class ViewPort {
     this._views = [];
     this.appInjector = null;
     this.hostElementInjector = null;
+    this._eventManager = eventManager;
   }
 
   hydrate(appInjector: Injector, hostElementInjector: ElementInjector) {
@@ -70,7 +73,7 @@ export class ViewPort {
     if (!this.hydrated()) throw new BaseException(
         'Cannot create views on a dehydrated view port');
     // TODO(rado): replace with viewFactory.
-    var newView = this.defaultProtoView.instantiate(this.hostElementInjector);
+    var newView = this.defaultProtoView.instantiate(this.hostElementInjector, this._eventManager);
     newView.hydrate(this.appInjector, this.hostElementInjector, this.parentView.context);
     return this.insert(newView, atIndex);
   }

modules/angular2/src/core/events/event_manager.js

@@ -0,0 +1,66 @@
+import {isBlank, BaseException, isPresent} from 'angular2/src/facade/lang';
+import {DOM, Element} from 'angular2/src/facade/dom';
+import {List, ListWrapper, MapWrapper} from 'angular2/src/facade/collection';
+import {VmTurnZone} from 'angular2/src/core/zone/vm_turn_zone';
+
+export class EventManager {
+  _plugins: List<EventManagerPlugin>;
+  _zone: VmTurnZone;
+
+  constructor(plugins: List<EventManagerPlugin>, zone: VmTurnZone) {
+    this._zone = zone;
+    this._plugins = plugins;
+    for (var i = 0; i < plugins.length; i++) {
+      plugins[i].manager = this;
+    }
+  }
+
+  addEventListener(element: Element, eventName: string, handler: Function) {
+    var plugin = this._findPluginFor(eventName);
+
+    if (isPresent(plugin)) {
+      plugin.addEventListener(element, eventName, handler);
+    } else {
+      this._addNativeEventListener(element, eventName, handler);
+    }
+  }
+
+  getZone(): VmTurnZone {
+    return this._zone;
+  }
+
+  _findPluginFor(eventName: string): EventManagerPlugin {
+    var plugins = this._plugins;
+    for (var i = 0; i < plugins.length; i++) {
+      var plugin = plugins[i];
+      if (plugin.supports(eventName)) {
+        return plugin;
+      }
+    }
+    return null;
+  }
+
+  _addNativeEventListener(element: Element, eventName: string, handler: Function) {
+    this._zone.runOutsideAngular(() => {
+      DOM.on(element, eventName, (event) => {
+        if (event.target === element) {
+          this._zone.run(function() {
+            handler(event);
+          });
+        }
+      });
+    });
+  }
+}
+
+export class EventManagerPlugin {
+  manager: EventManager;
+
+  supports(eventName: string): boolean {
+    return false;
+  }
+
+  addEventListener(element: Element, eventName: string, handler: Function) {
+    throw "not implemented";
+  }
+}

modules/angular2/src/core/events/hammer_common.js

@@ -0,0 +1,52 @@
+import {EventManagerPlugin} from './event_manager';
+import {StringMapWrapper} from 'angular2/src/facade/collection';
+
+var _eventNames = {
+  // pan
+  'pan': true,
+  'panstart': true,
+  'panmove': true,
+  'panend': true,
+  'pancancel': true,
+  'panleft': true,
+  'panright': true,
+  'panup': true,
+  'pandown': true,
+  // pinch
+  'pinch': true,
+  'pinchstart': true,
+  'pinchmove': true,
+  'pinchend': true,
+  'pinchcancel': true,
+  'pinchin': true,
+  'pinchout': true,
+  // press
+  'press': true,
+  'pressup': true,
+  // rotate
+  'rotate': true,
+  'rotatestart': true,
+  'rotatemove': true,
+  'rotateend': true,
+  'rotatecancel': true,
+  // swipe
+  'swipe': true,
+  'swipeleft': true,
+  'swiperight': true,
+  'swipeup': true,
+  'swipedown': true,
+  // tap
+  'tap': true,
+};
+
+
+export class HammerGesturesPluginCommon extends EventManagerPlugin {
+  constructor() {
+    super();
+  }
+
+  supports(eventName: string): boolean {
+    eventName = eventName.toLowerCase();
+    return StringMapWrapper.contains(_eventNames, eventName);
+  }
+}

modules/angular2/src/core/events/hammer_gestures.dart

@@ -0,0 +1,86 @@
+library angular.events;
+
+import 'dart:html';
+import './hammer_common.dart';
+import '../../facade/dom.dart' show Element;
+import '../../facade/lang.dart' show BaseException;
+
+import 'dart:js' as js;
+
+class HammerGesturesPlugin extends HammerGesturesPluginCommon {
+  bool supports(String eventName) {
+    if (!super.supports(eventName)) return false;
+
+    if (!js.context.hasProperty('Hammer')) {
+      throw new BaseException('Hammer.js is not loaded, can not bind ${eventName} event');
+    }
+
+    return true;
+  }
+
+  addEventListener(Element element, String eventName, Function handler) {
+    var zone = this.manager.getZone();
+    eventName = eventName.toLowerCase();
+
+    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})]);
+
+      mc.callMethod('on', [
+        eventName,
+        (eventObj) {
+          zone.run(() {
+            var dartEvent = new HammerEvent._fromJsEvent(eventObj);
+            handler(dartEvent);
+          });
+        }
+      ]);
+    });
+  }
+}
+
+class HammerEvent {
+  num angle;
+  num centerX;
+  num centerY;
+  int deltaTime;
+  int deltaX;
+  int deltaY;
+  int direction;
+  int distance;
+  num rotation;
+  num scale;
+  Node target;
+  int timeStamp;
+  String type;
+  num velocity;
+  num velocityX;
+  num velocityY;
+  js.JsObject jsEvent;
+
+  HammerEvent._fromJsEvent(js.JsObject event) {
+    angle = event['angle'];
+    var center = event['center'];
+    centerX = center['x'];
+    centerY = center['y'];
+    deltaTime = event['deltaTime'];
+    deltaX = event['deltaX'];
+    deltaY = event['deltaY'];
+    direction = event['direction'];
+    distance = event['distance'];
+    rotation = event['rotation'];
+    scale = event['scale'];
+    target = event['target'];
+    timeStamp = event['timeStamp'];
+    type = event['type'];
+    velocity = event['velocity'];
+    velocityX = event['velocityX'];
+    velocityY = event['velocityY'];
+    jsEvent = event;
+  }
+}

modules/angular2/src/core/events/hammer_gestures.es6

@@ -0,0 +1,37 @@
+import {HammerGesturesPluginCommon} from './hammer_common';
+import {Element} from 'angular2/src/facade/dom';
+import {isPresent, BaseException} from 'angular2/src/facade/lang';
+
+export class HammerGesturesPlugin extends HammerGesturesPluginCommon {
+  constructor() {
+    super();
+  }
+
+  supports(eventName:string):boolean {
+    if (!super.supports(eventName)) return false;
+
+    if (!isPresent(window.Hammer)) {
+      throw new BaseException(`Hammer.js is not loaded, can not bind ${eventName} event`);
+    }
+
+    return true;
+  }
+
+  addEventListener(element:Element, eventName:string, handler:Function) {
+    var zone = this.manager.getZone();
+    eventName = eventName.toLowerCase();
+
+    zone.runOutsideAngular(function () {
+      // 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});
+
+      mc.on(eventName, function (eventObj) {
+        zone.run(function () {
+          handler(eventObj);
+        });
+      });
+    });
+  }
+}

modules/angular2/src/facade/collection.dart

@@ -60,6 +60,7 @@ class MapWrapper {
 // TODO: how to export StringMap=Map as a type?
 class StringMapWrapper {
   static HashMap create() => new HashMap();
+  static bool contains(Map map, key) => map.containsKey(key);
   static get(Map map, key) => map[key];
   static void set(Map map, key, value) {
     map[key] = value;

modules/angular2/src/facade/collection.es6

@@ -40,6 +40,9 @@ export class StringMapWrapper {
     // http://jsperf.com/ng2-object-create-null
     return { };
   }
+  static contains(map, key) {
+    return map.hasOwnProperty(key);
+  }
   static get(map, key) {
     return map.hasOwnProperty(key) ? map[key] : undefined;
   }