Merge .modal element into host.

Close #29.
dougludlow · Apr 8, 2016 · 74a502c · 74a502c
1 parent 4ee36bd
commit 74a502c
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 69 deletions.
diff --git a/demo/app.component.html b/demo/app.component.html
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ng2-bs3-modal",
-  "version": "0.4.7",
+  "version": "0.5.0",
   "description": "Angular2 Boostrap3 Modal Component",
   "main": "ng2-bs3-modal.js",
   "scripts": {

diff --git a/src/ng2-bs3-modal/components/modal-instance.ts b/src/ng2-bs3-modal/components/modal-instance.ts
@@ -10,8 +10,8 @@ export class ModalInstance {
     private suffix: string = '.ng2-bs3-modal';
     private shownEventName: string = 'shown.bs.modal' + this.suffix;
     private hiddenEventName: string = 'hidden.bs.modal' + this.suffix;
+    private $modal: any;
 
-    $modal: any;
     shown: Observable<void>;
     hidden: Observable<ModalResult>;
     result: ModalResult;
@@ -46,7 +46,7 @@ export class ModalInstance {
 
     private show() {
         let promise = toPromise(this.shown);
-        this.$modal.modal('show');
+        this.$modal.modal();
         return promise;
     }
 
@@ -60,8 +60,8 @@ export class ModalInstance {
     }
 
     private init() {
-        this.$modal = jQuery(this.element.nativeElement.firstElementChild);
-        this.$modal.appendTo('body').modal({ show: false });
+        this.$modal = jQuery(this.element.nativeElement);
+        this.$modal.appendTo('body');
 
         this.shown = Observable.fromEvent(this.$modal, this.shownEventName)
             .map(() => {

diff --git a/src/ng2-bs3-modal/components/modal.ts b/src/ng2-bs3-modal/components/modal.ts
@@ -1,43 +1,51 @@
-import { Component, AfterViewInit, OnDestroy, Input, Output, EventEmitter, Type, ElementRef } from 'angular2/core';
-import { CanDeactivate, ComponentInstruction } from 'angular2/router';
+import { Component, OnDestroy, Input, Output, EventEmitter, Type, ElementRef, HostBinding } from 'angular2/core';
+import { CanDeactivate } from 'angular2/router';
 import { ModalInstance, ModalResult } from './modal-instance';
 
 @Component({
     selector: 'modal',
+    host: {
+        'class': 'modal',
+        'role': 'dialog',
+        'tabindex': '-1'
+    },
     template: `
-        <div class="modal" [ngClass]="{ fade: animation }" tabindex="-1" role="dialog"
-            [attr.data-keyboard]="keyboard" [attr.data-backdrop]="backdrop">
-            <div class="modal-dialog" [ngClass]="{ 'modal-sm': isSmall(), 'modal-lg': isLarge() }">
-                <div class="modal-content">
-                    <ng-content></ng-content>
-                </div>
+        <div class="modal-dialog" [ngClass]="{ 'modal-sm': isSmall(), 'modal-lg': isLarge() }">
+            <div class="modal-content">
+                <ng-content></ng-content>
             </div>
         </div>
     `
 })
-export class ModalComponent implements AfterViewInit, OnDestroy, CanDeactivate {
+export class ModalComponent implements OnDestroy, CanDeactivate {
+
+    private overrideSize: string = null;
 
     instance: ModalInstance;
-    overrideSize: string = null;
     visible: boolean = false;
+
     @Input() animation: boolean = true;
-    @Input() backdrop: any = true;
+    @Input() backdrop: string | boolean = true;
     @Input() keyboard: boolean = true;
     @Input() size: string;
+
     @Output() onClose: EventEmitter<any> = new EventEmitter(false);
     @Output() onDismiss: EventEmitter<any> = new EventEmitter(false);
     @Output() onOpen: EventEmitter<any> = new EventEmitter(false);
 
-    constructor(private element: ElementRef) {
-    }
+    @HostBinding('class.fade') get fadeClass(): boolean { return this.animation; }
+    @HostBinding('attr.data-keyboard') get dataKeyboardAttr(): boolean { return this.keyboard; }
+    @HostBinding('attr.data-backdrop') get dataBackdropAttr(): string | boolean { return this.backdrop; }
 
-    ngAfterViewInit() {
+    constructor(private element: ElementRef) {
         this.instance = new ModalInstance(this.element);
+
         this.instance.hidden.subscribe((result) => {
             this.visible = this.instance.visible;
             if (result === ModalResult.Dismiss)
                 this.onDismiss.emit(undefined);
         });
+
         this.instance.shown.subscribe(() => {
             this.onOpen.emit(undefined);
         });
@@ -47,35 +55,37 @@ export class ModalComponent implements AfterViewInit, OnDestroy, CanDeactivate {
         return this.instance && this.instance.destroy();
     }
 
-    routerCanDeactivate(next: ComponentInstruction, prev: ComponentInstruction): any {
+    routerCanDeactivate(): any {
         return this.ngOnDestroy();
     }
 
-    open(size?: string): Promise<any> {
+    open(size?: string): Promise<void> {
         if (ModalSize.validSize(size)) this.overrideSize = size;
         return this.instance.open().then(() => {
             this.visible = this.instance.visible;
         });
     }
 
-    close(): Promise<any> {
+    close(): Promise<void> {
         return this.instance.close().then(() => {
             this.onClose.emit(undefined);
         });
     }
 
-    dismiss(): Promise<any> {
-        return this.instance.dismiss().then(() => {
-            // this.onDismiss.emit(undefined);
-        });
+    dismiss(): Promise<void> {
+        return this.instance.dismiss();
     }
 
     private isSmall() {
-        return this.overrideSize !== ModalSize.Large && this.size === ModalSize.Small || this.overrideSize === ModalSize.Small;
+        return this.overrideSize !== ModalSize.Large
+            && this.size === ModalSize.Small
+            || this.overrideSize === ModalSize.Small;
     }
 
     private isLarge() {
-        return this.overrideSize !== ModalSize.Small && this.size === ModalSize.Large || this.overrideSize === ModalSize.Large;
+        return this.overrideSize !== ModalSize.Small
+            && this.size === ModalSize.Large
+            || this.overrideSize === ModalSize.Large;
     }
 }