feat(appendToBody): add support for appendToBody

Closes #4

demo/demo.ts

@@ -53,7 +53,8 @@ import {PositionService} from 'ng2-bootstrap/components/position';
             (cancel)="cancelClicked = true"
             confirmButtonType="danger"
             cancelButtonType="default"
-            (click)="confirmClicked = false; cancelClicked = false">
+            (click)="confirmClicked = false; cancelClicked = false"
+            [appendToBody]="true">
             Show on {{ placement }}
           </button>
         </span>

package.json

@@ -77,7 +77,9 @@
     "zone.js": "~0.6.12"
   },
   "peerDependencies": {
-    "@angular/core": "2.0.0-rc.2"
+    "@angular/core": "2.0.0-rc.2",
+    "@angular/common": "2.0.0-rc.2",
+    "@angular/platform-browser": "2.0.0-rc.2"
   },
   "files": [
     "angular2-bootstrap-confirm.js",

src/confirm.directive.ts

@@ -13,8 +13,10 @@ import {
   ReflectiveInjector,
   ResolvedReflectiveProvider,
   ComponentResolver,
-  Injector
+  Injector,
+  Inject
 } from '@angular/core';
+import {DOCUMENT} from '@angular/platform-browser';
 import {ConfirmPopover} from './confirmPopover.component';
 import {ConfirmOptions, PopoverConfirmOptions} from './confirmOptions.provider';
 
@@ -125,6 +127,11 @@ export class Confirm implements OnDestroy, OnChanges, OnInit {
    */
   @Input() popoverClass: string;
 
+  /**
+   * Append the element to the document body rather than the trigger element
+   */
+  @Input() appendToBody: boolean = false;
+
   /**
    * @private
    */
@@ -137,7 +144,8 @@ export class Confirm implements OnDestroy, OnChanges, OnInit {
     private viewContainerRef: ViewContainerRef,
     private elm: ElementRef,
     private defaultOptions: ConfirmOptions,
-    private componentResolver: ComponentResolver
+    private componentResolver: ComponentResolver,
+    @Inject(DOCUMENT) private document: HTMLDocument
   ) {}
 
   /**
@@ -208,7 +216,8 @@ export class Confirm implements OnDestroy, OnChanges, OnInit {
         'focusButton',
         'hideConfirmButton',
         'hideCancelButton',
-        'popoverClass'
+        'popoverClass',
+        'appendToBody'
       ];
       optionalParams.forEach(param => {
         if (this[param]) {
@@ -225,6 +234,9 @@ export class Confirm implements OnDestroy, OnChanges, OnInit {
         const childInjector: Injector = ReflectiveInjector.fromResolvedProviders(binding, contextInjector);
         const popover: ComponentRef<ConfirmPopover> =
           this.viewContainerRef.createComponent(componentFactory, this.viewContainerRef.length, childInjector);
+        if (this.appendToBody) {
+          this.document.body.appendChild(popover.location.nativeElement);
+        }
         this.isOpenChange.emit(true);
         return popover;
       });

src/confirmOptions.provider.ts

@@ -74,6 +74,11 @@ export class ConfirmOptions {
    */
   public popoverClass: string = '';
 
+  /**
+   * Whether to append the popover to the document body
+   */
+  public appendToBody: boolean = false;
+
 }
 
 /**

src/confirmPopover.component.ts

@@ -99,7 +99,7 @@ export class ConfirmPopover implements AfterViewInit {
       this.options.hostElement.nativeElement,
       this.elm.nativeElement.children[0],
       this.options.placement,
-      false
+      this.options.appendToBody
     );
   }
 

test/angular2-bootstrap-confirm.spec.ts

@@ -75,7 +75,8 @@ describe('bootstrap confirm', () => {
           [hideConfirmButton]="hideConfirmButton"
           [hideCancelButton]="hideCancelButton"
           [isDisabled]="isDisabled"
-          [(isOpen)]="isOpen">
+          [(isOpen)]="isOpen"
+          [appendToBody]="appendToBody">
           Show popover
         </button>
       `
@@ -95,6 +96,7 @@ describe('bootstrap confirm', () => {
       isDisabled: boolean = false;
       isOpen: boolean;
       popoverClass: string = 'my-class';
+      appendToBody: boolean = false;
     }
 
     beforeEachProviders(() => [
@@ -405,6 +407,32 @@ describe('bootstrap confirm', () => {
       });
     }));
 
+    it('should not append the popover to the document body', async(() => {
+      createPopoverContainer().then((fixture) => {
+        fixture.componentRef.instance.appendToBody = false;
+        fixture.detectChanges();
+        clickFixture();
+        return Promise.all([fixture, fixture.componentInstance.confirm.popover]);
+      }).then(([fixture, popover]) => {
+        popover.changeDetectorRef.detectChanges();
+        expect(document.body.children[document.body.children.length - 1].children[0]).not.toHaveCssClass('popover');
+        expect(fixture.componentRef.location.nativeElement.querySelector('.popover')).toBeTruthy();
+      });
+    }));
+
+    it('should append the popover to the document body', async(() => {
+      createPopoverContainer().then((fixture) => {
+        fixture.componentRef.instance.appendToBody = true;
+        fixture.detectChanges();
+        clickFixture();
+        return Promise.all([fixture, fixture.componentInstance.confirm.popover]);
+      }).then(([fixture, popover]) => {
+        popover.changeDetectorRef.detectChanges();
+        expect(document.body.children[document.body.children.length - 1].children[0]).toHaveCssClass('popover');
+        expect(fixture.componentRef.location.nativeElement.querySelector('.popover')).toBeFalsy();
+      });
+    }));
+
   });
 
   describe('ConfirmOptions', () => {

webpack.config.dist.js

@@ -17,6 +17,12 @@ module.exports = {
       commonjs: '@angular/common',
       commonjs2: '@angular/common',
       amd: '@angular/common'
+    },
+    '@angular/platform-browser': {
+      root: ['ng', 'platformBrowser'],
+      commonjs: '@angular/platform-browser',
+      commonjs2: '@angular/platform-browser',
+      amd: '@angular/platform-browser'
     }
   },
   devtool: 'source-map',
@@ -36,4 +42,4 @@ module.exports = {
   resolve: {
     extensions: ['', '.ts', '.js']
   }
-};
+};