From b39b85648b36cfa4a0d92be13146577d9dfe18f9 Mon Sep 17 00:00:00 2001 From: Pradeep Sekar Date: Sun, 10 Jul 2016 08:05:39 +0530 Subject: [PATCH 1/2] fix(modals): modal backdrop and onclick events handling fixes #687, fixes #703, closes #708 1. This fix will resolve the issue of backdrop being displayed even when the user sets backdrop as false. 2. This will provide option to users to control ignore backdrop clicks. --- components/modal/modal-options.class.ts | 4 ++++ components/modal/modal.component.ts | 7 ++----- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/components/modal/modal-options.class.ts b/components/modal/modal-options.class.ts index a5c60f6df6..9e8306a932 100644 --- a/components/modal/modal-options.class.ts +++ b/components/modal/modal-options.class.ts @@ -13,6 +13,10 @@ export interface ModalOptions { * Shows the modal when initialized. */ show:boolean; + /** + * Ignore the backdrop click + */ + ignoreBackdropClick:boolean; } export const modalConfigDefaults:ModalOptions = { diff --git a/components/modal/modal.component.ts b/components/modal/modal.component.ts index f8d7e34165..babed86514 100644 --- 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,8 +75,7 @@ export class ModalDirective implements AfterViewInit, OnDestroy { @HostListener('click', ['$event']) protected onClick(event:any):void { - if (this.config.backdrop !== 'static' && - event.target === this.element.nativeElement) { + if (this.config.ignoreBackdropClick || this.config.backdrop === 'static') { this.hide(event); } } @@ -107,7 +105,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 +223,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, From 1d38d68977684221b3a18f11209bdb386a776bd9 Mon Sep 17 00:00:00 2001 From: Dmitriy Shekhovtsov Date: Mon, 11 Jul 2016 16:25:44 +0300 Subject: [PATCH 2/2] chore(demo): added sample of using modal from parent component && static modals --- components/modal/modal-options.class.ts | 13 +++++---- components/modal/modal.component.ts | 6 ++-- demo/components/modal/modal-demo.html | 39 +++++++++++++++++++++++++ demo/components/modal/modal-demo.ts | 11 ++++++- 4 files changed, 60 insertions(+), 9 deletions(-) diff --git a/components/modal/modal-options.class.ts b/components/modal/modal-options.class.ts index 9e8306a932..d189e9e98c 100644 --- a/components/modal/modal-options.class.ts +++ b/components/modal/modal-options.class.ts @@ -2,28 +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; + 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 index babed86514..eea0bd6bfb 100644 --- a/components/modal/modal.component.ts +++ b/components/modal/modal.component.ts @@ -75,9 +75,11 @@ export class ModalDirective implements AfterViewInit, OnDestroy { @HostListener('click', ['$event']) protected onClick(event:any):void { - if (this.config.ignoreBackdropClick || this.config.backdrop === 'static') { - 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 diff --git a/demo/components/modal/modal-demo.html b/demo/components/modal/modal-demo.html index 4aab76a310..8e1833d6d4 100644 --- a/demo/components/modal/modal-demo.html +++ b/demo/components/modal/modal-demo.html @@ -35,3 +35,42 @@

Small modal

+ + + + + + + + + diff --git a/demo/components/modal/modal-demo.ts b/demo/components/modal/modal-demo.ts index 9ad656cdee..019ac9b3dd 100644 --- 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(); + } }