Merge pull request #714 from valor-software/pradeepsekar-development

fix(modals): static\ignore backdrop click
valor-software · Jul 11, 2016 · a36d5f3 · a36d5f3
2 parents c994f8f + 1d38d68
commit a36d5f3
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 12 deletions.
diff --git a/components/modal/modal-options.class.ts b/components/modal/modal-options.class.ts
@@ -2,24 +2,29 @@ export interface ModalOptions {
   /**
    *  Includes a modal-backdrop element. Alternatively, specify static for a backdrop which doesn't close the modal on click.
    */
-  backdrop:boolean | 'static';
+  backdrop?:boolean | 'static';
   /**
    * Closes the modal when escape key is pressed.
    */
-  keyboard:boolean;
+  keyboard?:boolean;
 
-  focus:boolean;
+  focus?:boolean;
   /**
    * Shows the modal when initialized.
    */
-  show:boolean;
+  show?:boolean;
+  /**
+   * Ignore the backdrop click
+   */
+  ignoreBackdropClick?:boolean;
 }
 
 export const modalConfigDefaults:ModalOptions = {
   backdrop: true,
   keyboard: true,
   focus: true,
-  show: true
+  show: true,
+  ignoreBackdropClick: false
 };
 
 export const ClassName:any = {

diff --git a/components/modal/modal.component.ts b/components/modal/modal.component.ts
@@ -59,7 +59,6 @@ export class ModalDirective implements AfterViewInit, OnDestroy {
   protected _isShown:boolean = false;
 
   private isBodyOverflowing:boolean = false;
-  private ignoreBackdropClick:boolean = false;
   private originalBodyPadding:number = 0;
   private scrollbarWidth:number = 0;
 
@@ -76,10 +75,11 @@ export class ModalDirective implements AfterViewInit, OnDestroy {
 
   @HostListener('click', ['$event'])
   protected onClick(event:any):void {
-    if (this.config.backdrop !== 'static' &&
-        event.target === this.element.nativeElement) {
-      this.hide(event);
+    if (this.config.ignoreBackdropClick || this.config.backdrop === 'static' || event.target !== this.element.nativeElement) {
+      return;
     }
+
+    this.hide(event);
   }
 
   // todo: consider preventing default and stopping propagation
@@ -107,7 +107,6 @@ export class ModalDirective implements AfterViewInit, OnDestroy {
     // this._backdrop            = null
     this._isShown = void 0;
     this.isBodyOverflowing = void 0;
-    this.ignoreBackdropClick = void 0;
     this.originalBodyPadding = void 0;
     this.scrollbarWidth = void 0;
 
@@ -226,7 +225,7 @@ export class ModalDirective implements AfterViewInit, OnDestroy {
 
   // todo: original show was calling a callback when done, but we can use promise
   private showBackdrop(callback?:Function):void {
-    if (this._isShown && modalConfigDefaults.backdrop) {
+    if (this._isShown && this.config.backdrop) {
       this.backdrop = this.componentsHelper
         .appendNextToRoot(
           ModalBackdropComponent,

diff --git a/demo/components/modal/modal-demo.html b/demo/components/modal/modal-demo.html
@@ -35,3 +35,42 @@ <h4 class="modal-title">Small modal</h4>
     </div>
   </div>
 </div>
+
+<!-- control modal from parent component -->
+<button type="button" class="btn btn-primary" (click)="showChildModal()">Open child modal</button>
+<div bsModal #childModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
+  <div class="modal-dialog modal-sm">
+    <div class="modal-content">
+      <div class="modal-header">
+        <button type="button" class="close" aria-label="Close" (click)="hideChildModal()">
+          <span aria-hidden="true">&times;</span>
+        </button>
+        <h4 class="modal-title">Child modal</h4>
+      </div>
+      <div class="modal-body">
+        I am a child modal, opened from parent component!
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- Static modal -->
+<button type="button" class="btn btn-primary" (click)="staticModal.show()">Small modal</button>
+
+<div class="modal fade" bsModal #staticModal="bs-modal" [config]="{backdrop: 'static'}"
+     tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
+  <div class="modal-dialog modal-sm">
+    <div class="modal-content">
+      <div class="modal-header">
+        <button type="button" class="close" aria-label="Close" (click)="staticModal.hide()">
+          <span aria-hidden="true">&times;</span>
+        </button>
+        <h4 class="modal-title">Static modal</h4>
+      </div>
+      <div class="modal-body">
+        This is static modal, backdrop click will not close it.
+        Click <b>&times;</b> to close modal.
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/demo/components/modal/modal-demo.ts b/demo/components/modal/modal-demo.ts
@@ -1,8 +1,9 @@
-import {Component} from '@angular/core';
+import {Component, ViewChild} from '@angular/core';
 import {CORE_DIRECTIVES} from '@angular/common';
 
 // todo: change to ng2-bootstrap
 import {MODAL_DIRECTIVES, BS_VIEW_PROVIDERS} from '../../../ng2-bootstrap';
+import {ModalDirective} from '../../../components/modal/modal.component';
 // webpack html imports
 let template = require('./modal-demo.html');
 
@@ -13,5 +14,13 @@ let template = require('./modal-demo.html');
   template: template
 })
 export class ModalDemoComponent {
+  @ViewChild('childModal') public childModal: ModalDirective;
 
+  public showChildModal():void {
+    this.childModal.show();
+  }
+
+  public hideChildModal():void {
+    this.childModal.hide();
+  }
 }