feat(events): add support for global events

Fixes #1098
Closes #1255

modules/angular2/test/render/dom/compiler/directive_parser_spec.js

@@ -23,7 +23,8 @@ export function main() {
         someDecorator,
         someDecoratorIgnoringChildren,
         someDecoratorWithProps,
-        someDecoratorWithEvents
+        someDecoratorWithEvents,
+        someDecoratorWithGlobalEvents
       ];
       parser = new Parser(new Lexer());
     });
@@ -130,8 +131,21 @@ export function main() {
         el('<div some-decor-events></div>')
       );
       var directiveBinding = results[0].directives[0];
-      expect(MapWrapper.get(directiveBinding.eventBindings, 'click').source)
-        .toEqual('doIt()');
+      expect(directiveBinding.eventBindings.length).toEqual(1);
+      var eventBinding = directiveBinding.eventBindings[0];
+      expect(eventBinding.fullName).toEqual('click');
+      expect(eventBinding.source.source).toEqual('doIt()');
+    });
+
+    it('should bind directive global events', () => {
+      var results = process(
+        el('<div some-decor-globalevents></div>')
+      );
+      var directiveBinding = results[0].directives[0];
+      expect(directiveBinding.eventBindings.length).toEqual(1);
+      var eventBinding = directiveBinding.eventBindings[0];
+      expect(eventBinding.fullName).toEqual('window:resize');
+      expect(eventBinding.source.source).toEqual('doItGlobal()');
     });
 
     describe('viewport directives', () => {
@@ -246,3 +260,10 @@ var someDecoratorWithEvents = new DirectiveMetadata({
     'click': 'doIt()'
   })
 });
+
+var someDecoratorWithGlobalEvents = new DirectiveMetadata({
+  selector: '[some-decor-globalevents]',
+  hostListeners: MapWrapper.createFromStringMap({
+    'window:resize': 'doItGlobal()'
+  })
+});

modules/angular2/test/render/dom/compiler/property_binding_parser_spec.js

@@ -96,10 +96,14 @@ export function main() {
 
     it('should detect () syntax', () => {
       var results = process(el('<div (click)="b()"></div>'));
-      expect(MapWrapper.get(results[0].eventBindings, 'click').source).toEqual('b()');
+      var eventBinding = results[0].eventBindings[0];
+      expect(eventBinding.source.source).toEqual('b()');
+      expect(eventBinding.fullName).toEqual('click');
       // "(click[])" is not an expected syntax and is only used to validate the regexp
       results = process(el('<div (click[])="b()"></div>'));
-      expect(MapWrapper.get(results[0].eventBindings, 'click[]').source).toEqual('b()');
+      eventBinding = results[0].eventBindings[0];
+      expect(eventBinding.source.source).toEqual('b()');
+      expect(eventBinding.fullName).toEqual('click[]');
     });
 
     it('should detect () syntax only if an attribute name starts and ends with ()', () => {
@@ -109,17 +113,23 @@ export function main() {
 
     it('should parse event handlers using () syntax as actions', () => {
       var results = process(el('<div (click)="foo=bar"></div>'));
-      expect(MapWrapper.get(results[0].eventBindings, 'click').source).toEqual('foo=bar');
+      var eventBinding = results[0].eventBindings[0];
+      expect(eventBinding.source.source).toEqual('foo=bar');
+      expect(eventBinding.fullName).toEqual('click');
     });
 
     it('should detect on- syntax', () => {
       var results = process(el('<div on-click="b()"></div>'));
-      expect(MapWrapper.get(results[0].eventBindings, 'click').source).toEqual('b()');
+      var eventBinding = results[0].eventBindings[0];
+      expect(eventBinding.source.source).toEqual('b()');
+      expect(eventBinding.fullName).toEqual('click');
     });
 
     it('should parse event handlers using on- syntax as actions', () => {
       var results = process(el('<div on-click="foo=bar"></div>'));
-      expect(MapWrapper.get(results[0].eventBindings, 'click').source).toEqual('foo=bar');
+      var eventBinding = results[0].eventBindings[0];
+      expect(eventBinding.source.source).toEqual('foo=bar');
+      expect(eventBinding.fullName).toEqual('click');
     });
 
     it('should store bound properties as temporal attributes', () => {

modules/angular2/test/render/dom/events/event_manager_spec.js

@@ -83,6 +83,28 @@ export function main() {
 
       expect(receivedEvent).toBe(dispatchedEvent);
     });
+
+    it('should add and remove global event listeners with correct bubbling', () => {
+      var element = el('<div><div></div></div>');
+      DOM.appendChild(document.body, element);
+      var dispatchedEvent = DOM.createMouseEvent('click');
+      var receivedEvent = null;
+      var handler = (e) => { receivedEvent = e; };
+      var manager = new EventManager([domEventPlugin], new FakeVmTurnZone());
+
+      var remover = manager.addGlobalEventListener("document", '^click', handler);
+      DOM.dispatchEvent(element, dispatchedEvent);
+      expect(receivedEvent).toBe(dispatchedEvent);
+
+      receivedEvent = null;
+      remover();
+      DOM.dispatchEvent(element, dispatchedEvent);
+      expect(receivedEvent).toBe(null);
+
+      remover = manager.addGlobalEventListener("document", 'click', handler);
+      DOM.dispatchEvent(element, dispatchedEvent);
+      expect(receivedEvent).toBe(null);
+    });
   });
 }
 
@@ -104,6 +126,8 @@ class FakeEventManagerPlugin extends EventManagerPlugin {
   addEventListener(element, eventName: string, handler: Function, shouldSupportBubble: boolean) {
     MapWrapper.set(shouldSupportBubble ? this._bubbleEventHandlers : this._nonBubbleEventHandlers,
         eventName, handler);
+    return () => {MapWrapper.delete(shouldSupportBubble ? this._bubbleEventHandlers : this._nonBubbleEventHandlers,
+        eventName)};
   }
 }
 
@@ -117,6 +141,6 @@ class FakeVmTurnZone extends VmTurnZone {
   }
 
   runOutsideAngular(fn) {
-    fn();
+    return fn();
   }
 }

modules/angular2/test/render/dom/integration_testbed.js

@@ -173,6 +173,7 @@ export class FakeEventManagerPlugin extends EventManagerPlugin {
 
   addEventListener(element, eventName: string, handler: Function, shouldSupportBubble: boolean) {
     MapWrapper.set(this._eventHandlers, eventName, handler);
+    return () => {MapWrapper.delete(this._eventHandlers, eventName);}
   }
 }
 

modules/angular2/test/render/dom/shadow_dom/emulated_scoped_shadow_dom_strategy_spec.js

@@ -47,7 +47,7 @@ export function main() {
     it('should attach the view nodes as child of the host element', () => {
       var host = el('<div><span>original content</span></div>');
       var nodes = el('<div>view</div>');
-      var view = new RenderView(null, [nodes], [], [], [], []);
+      var view = new RenderView(null, [nodes], [], [], [], [], null);
 
       strategy.attachTemplate(host, view);
       var firstChild = DOM.firstChild(host);

modules/angular2/test/render/dom/shadow_dom/emulated_unscoped_shadow_dom_strategy_spec.js

@@ -42,7 +42,7 @@ export function main() {
     it('should attach the view nodes as child of the host element', () => {
       var host = el('<div><span>original content</span></div>');
       var nodes = el('<div>view</div>');
-      var view = new RenderView(null, [nodes], [], [], [], []);
+      var view = new RenderView(null, [nodes], [], [], [], [], null);
 
       strategy.attachTemplate(host, view);
       var firstChild = DOM.firstChild(host);

modules/angular2/test/render/dom/shadow_dom/native_shadow_dom_strategy_spec.js

@@ -35,7 +35,7 @@ export function main() {
     it('should attach the view nodes to the shadow root', () => {
       var host = el('<div><span>original content</span></div>');
       var nodes = el('<div>view</div>');
-      var view = new RenderView(null, [nodes], [], [], [], []);
+      var view = new RenderView(null, [nodes], [], [], [], [], null);
 
       strategy.attachTemplate(host, view);
       var shadowRoot = DOM.getShadowRoot(host);

modules/angular2/test/render/dom/view/view_spec.js

@@ -2,6 +2,7 @@ import {describe, ddescribe, it, iit, xit, xdescribe, expect, beforeEach, el} fr
 
 import {ListWrapper} from 'angular2/src/facade/collection';
 
+import {RenderProtoView} from 'angular2/src/render/dom/view/proto_view';
 import {RenderView} from 'angular2/src/render/dom/view/view';
 import {ShadowDomStrategy} from 'angular2/src/render/dom/shadow_dom/shadow_dom_strategy';
 import {LightDom} from 'angular2/src/render/dom/shadow_dom/light_dom';
@@ -9,14 +10,15 @@ import {LightDom} from 'angular2/src/render/dom/shadow_dom/light_dom';
 export function main() {
 
   function createView() {
-    var proto = null;
+    var proto = new RenderProtoView({element: el('<div></div>'), isRootView: false, elementBinders: []});
     var rootNodes = [el('<div></div>')];
     var boundTextNodes = [];
     var boundElements = [el('<div></div>')];
     var viewContainers = [];
     var contentTags = [];
+    var eventManager = null;
     return new RenderView(proto, rootNodes,
-      boundTextNodes, boundElements, viewContainers, contentTags);
+      boundTextNodes, boundElements, viewContainers, contentTags, eventManager);
   }
 
   function createShadowDomStrategy(log) {