feat(events): add support for global events

Fixes angular#1098
Closes angular#1255

Author: marclaval

modules/angular2/src/core/annotations/annotations.js

@@ -367,6 +367,8 @@ export class Directive extends Injectable {
    * - `event1`: the DOM event that the directive listens to.
    * - `statement`: the statement to execute when the event occurs.
    *
+   * To listen to global events, a target must be added to the event name.
+   * The target can be `window`, `document` or `body`.
    *
    * When writing a directive event binding, you can also refer to the following local variables:
    * - `$event`: Current event object which triggered the event.
@@ -380,26 +382,30 @@ export class Directive extends Injectable {
    * @Directive({
    *   hostListeners: {
    *     'event1': 'onMethod1(arguments)',
+   *     'target:event2': 'onMethod2(arguments)',
    *     ...
    *   }
    * }
    * ```
    *
    * ## Basic Event Binding:
    *
-   * Suppose you want to write a directive that triggers on `change` hostListeners in the DOM. You would define the event
-   * binding as follows:
+   * Suppose you want to write a directive that triggers on `change` events in the DOM and on `resize` events in window.
+   * You would define the event binding as follows:
    *
    * ```
    * @Decorator({
    *   selector: 'input',
    *   hostListeners: {
-   *     'change': 'onChange($event)'
+   *     'change': 'onChange($event)',
+   *     'window:resize': 'onResize($event)'
    *   }
    * })
    * class InputDecorator {
    *   onChange(event:Event) {
    *   }
+   *   onResize(event:Event) {
+   *   }
    * }
    * ```
    *

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

@@ -118,9 +118,7 @@ export class ProtoViewFactory {
       protoView.bindElementProperty(astWithSource.ast, propertyName);
     });
     // events
-    MapWrapper.forEach(renderElementBinder.eventBindings, (astWithSource, eventName) => {
-      protoView.bindEvent(eventName, astWithSource.ast, -1);
-    });
+    protoView.bindEvent(renderElementBinder.eventBindings, -1);
     // variables
     // The view's locals needs to have a full set of variable names at construction time
     // in order to prevent new variables from being set later in the lifecycle. Since we don't want
@@ -143,9 +141,7 @@ export class ProtoViewFactory {
         protoView.bindDirectiveProperty(i, astWithSource.ast, propertyName, setter);
       });
       // directive events
-      MapWrapper.forEach(renderDirectiveMetadata.eventBindings, (astWithSource, eventName) => {
-        protoView.bindEvent(eventName, astWithSource.ast, i);
-      });
+      protoView.bindEvent(renderDirectiveMetadata.eventBindings, i);
     }
   }
 

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

@@ -272,7 +272,7 @@ export class AppView {
       var elBinder = this.proto.elementBinders[elementIndex];
       if (isBlank(elBinder.hostListeners)) return;
       var eventMap = elBinder.hostListeners[eventName];
-      if (isBlank(eventName)) return;
+      if (isBlank(eventMap)) return;
       MapWrapper.forEach(eventMap, (expr, directiveIndex) => {
         var context;
         if (directiveIndex === -1) {
@@ -407,19 +407,23 @@ export class AppProtoView {
    * @param {int} directiveIndex The directive index in the binder or -1 when the event is not bound
    *                             to a directive
    */
-  bindEvent(eventName:string, expression:AST, directiveIndex: int = -1) {
+  bindEvent(eventBindings: List<renderApi.EventBinding>, directiveIndex: int = -1) {
     var elBinder = this.elementBinders[this.elementBinders.length - 1];
     var events = elBinder.hostListeners;
     if (isBlank(events)) {
       events = StringMapWrapper.create();
       elBinder.hostListeners = events;
     }
-    var event = StringMapWrapper.get(events, eventName);
-    if (isBlank(event)) {
-      event = MapWrapper.create();
-      StringMapWrapper.set(events, eventName, event);
+    for (var i = 0; i < eventBindings.length; i++) {
+      var eventBinding = eventBindings[i];
+      var eventName = eventBinding.fullName;
+      var event = StringMapWrapper.get(events, eventName);
+      if (isBlank(event)) {
+        event = MapWrapper.create();
+        StringMapWrapper.set(events, eventName, event);
+      }
+      MapWrapper.set(event, directiveIndex, eventBinding.source);
     }
-    MapWrapper.set(event, directiveIndex, expression);
   }
 
   /**

modules/angular2/src/dom/browser_adapter.dart

@@ -119,6 +119,12 @@ class BrowserDomAdapter extends GenericBrowserDomAdapter {
     // addEventListener misses zones so we use element.on.
     element.on[event].listen(callback);
   }
+  Function onAndCancel(EventTarget element, String event, callback(arg)) {
+    // due to https://code.google.com/p/dart/issues/detail?id=17406
+    // addEventListener misses zones so we use element.on.
+    var subscription = element.on[event].listen(callback);
+    return subscription.cancel;
+  }
   void dispatchEvent(EventTarget el, Event evt) {
     el.dispatchEvent(evt);
   }
@@ -288,4 +294,13 @@ class BrowserDomAdapter extends GenericBrowserDomAdapter {
     int keyCode = event.keyCode;
     return _keyCodeToKeyMap.containsKey(keyCode) ? _keyCodeToKeyMap[keyCode] : 'Unidentified';
   }
+  getGlobalEventTarget(String target) {
+    if (target == "window") {
+      return window;
+    } else if (target == "document") {
+      return document;
+    } else if (target == "body") {
+      return document.body;
+    }
+  }
 }

modules/angular2/src/dom/browser_adapter.es6

@@ -73,6 +73,12 @@ export class BrowserDomAdapter extends GenericBrowserDomAdapter {
   on(el, evt, listener) {
     el.addEventListener(evt, listener, false);
   }
+  onAndCancel(el, evt, listener): Function {
+    el.addEventListener(evt, listener, false);
+    //Needed to follow Dart's subscription semantic, until fix of
+    //https://code.google.com/p/dart/issues/detail?id=17406
+    return () => {el.removeEventListener(evt, listener, false);};
+  }
   dispatchEvent(el, evt) {
     el.dispatchEvent(evt);
   }
@@ -353,4 +359,13 @@ export class BrowserDomAdapter extends GenericBrowserDomAdapter {
     }
     return key;
   }
+  getGlobalEventTarget(target:string) {
+    if (target == "window") {
+      return window;
+    } else if (target == "document") {
+      return document;
+    } else if (target == "body") {
+      return document.body;
+    }
+  }
 }

modules/angular2/src/dom/dom_adapter.js

@@ -39,6 +39,9 @@ export class DomAdapter {
   on(el, evt, listener) {
     throw _abstract();
   }
+  onAndCancel(el, evt, listener): Function {
+    throw _abstract();
+  }
   dispatchEvent(el, evt) {
     throw _abstract();
   }
@@ -273,4 +276,7 @@ export class DomAdapter {
   supportsNativeShadowDOM(): boolean {
     throw _abstract();
   }
+  getGlobalEventTarget(target:string) {
+    throw _abstract();
+  }
 }

modules/angular2/src/dom/html_adapter.dart

@@ -29,6 +29,9 @@ class Html5LibDomAdapter implements DomAdapter {
   on(el, evt, listener) {
     throw 'not implemented';
   }
+  Function onAndCancel(el, evt, listener) {
+    throw 'not implemented';
+  }
   dispatchEvent(el, evt) {
     throw 'not implemented';
   }

modules/angular2/src/dom/parse5_adapter.cjs

@@ -86,6 +86,9 @@ export class Parse5DomAdapter extends DomAdapter {
   on(el, evt, listener) {
     //Do nothing, in order to not break forms integration tests
   }
+  onAndCancel(el, evt, listener): Function {
+    //Do nothing, in order to not break forms integration tests
+  }
   dispatchEvent(el, evt) {
     throw _notImplemented('dispatchEvent');
   }

modules/angular2/src/mock/vm_turn_zone_mock.js

@@ -10,6 +10,6 @@ export class MockVmTurnZone extends VmTurnZone {
   }
 
   runOutsideAngular(fn) {
-    fn();
+    return fn();
   }
 }

modules/angular2/src/render/api.js

@@ -15,6 +15,16 @@ import {ASTWithSource} from 'angular2/change_detection';
  * - render compiler is not on the critical path as
  *   its output will be stored in precompiled templates.
  */
+export class EventBinding {
+  fullName: string; // name/target:name, e.g "click", "window:resize"
+  source: ASTWithSource;  
+
+  constructor(fullName :string, source: ASTWithSource) {
+    this.fullName = fullName;
+    this.source = source;
+  }
+}
+
 export class ElementBinder {
   index:number;
   parentIndex:number;
@@ -26,7 +36,7 @@ export class ElementBinder {
   // Note: this contains a preprocessed AST
   // that replaced the values that should be extracted from the element
   // with a local name
-  eventBindings: Map<string, ASTWithSource>;
+  eventBindings: List<EventBinding>;
   textBindings: List<ASTWithSource>;
   readAttributes: Map<string, string>;
 
@@ -57,7 +67,7 @@ export class DirectiveBinder {
   // Note: this contains a preprocessed AST
   // that replaced the values that should be extracted from the element
   // with a local name
-  eventBindings: Map<string, ASTWithSource>;
+  eventBindings: List<EventBinding>;
   constructor({
     directiveIndex, propertyBindings, eventBindings
   }) {