feat(modal): add dissmissReason, fix body padding, add events section… (

#2131)

* feat(modal): add dissmissReason, fix body padding, add events section to docs

* refactor(modal): add dissmissReasons const, changed events section in demo

demo/src/app/components/+modal/demos/events/events.html

@@ -0,0 +1,23 @@
+<button type="button" class="btn btn-primary" (click)="modal.show()">Open a modal</button>
+
+<div class="modal fade" bsModal #modal="bs-modal" tabindex="-1" role="dialog"
+     aria-labelledby="mySmallModalLabel" aria-hidden="true"
+     (onShow)="handler('onShow', $event)"
+     (onShown)="handler('onShown', $event)"
+     (onHide)="handler('onHide', $event)"
+     (onHidden)="handler('onHidden', $event)">
+  <div class="modal-dialog modal-sm">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h4 class="modal-title pull-left">Modal</h4>
+        <button type="button" class="close pull-right" aria-label="Close" (click)="modal.hide()">
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+      <div class="modal-body">
+        Just another modal <br>
+        Click <b>&times;</b>, press <code>Esc</code> or click on backdrop to close modal.
+      </div>
+    </div>
+  </div>
+</div>

demo/src/app/components/+modal/demos/events/events.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+import { ModalDirective } from 'ngx-bootstrap/modal/modal.component';
+
+@Component({
+  selector: 'demo-modal-events',
+  templateUrl: './events.html'
+})
+export class DemoModalEventsComponent {
+  public handler(type: string, $event: ModalDirective) {
+    console.log(`event ${type} is fired${$event.dismissReason ? ', dismissed by ' + $event.dismissReason : ''}`);
+  }
+}

demo/src/app/components/+modal/demos/index.ts

@@ -4,12 +4,14 @@ import { DemoModalChildComponent } from './child/child';
 import { DemoAutoShownModalComponent } from './auto-shown/auto-shown';
 import { DemoNestedDropdownsComponent } from '../../+dropdown/demos/nested-dropdowns/nested-dropdowns';
 import { DemoModalNestedComponent } from './nested/nested';
+import { DemoModalEventsComponent } from './events/events';
 
 export const DEMO_COMPONENTS = [
   DemoModalSizesComponent,
   DemoModalChildComponent,
   DemoModalStaticComponent,
   DemoAutoShownModalComponent,
+  DemoModalEventsComponent,
   DemoModalNestedComponent
 ];
 
@@ -33,5 +35,9 @@ export const DEMOS = {
   autoShown: {
     component: require('!!raw-loader?lang=typescript!./auto-shown/auto-shown.ts'),
     html: require('!!raw-loader?lang=markup!./auto-shown/auto-shown.html')
+  },
+  events: {
+    component: require('!!raw-loader?lang=typescript!./events/events.ts'),
+    html: require('!!raw-loader?lang=markup!./events/events.html')
   }
 };

demo/src/app/components/+modal/modal-section.component.ts

@@ -19,6 +19,7 @@ let titleDoc = require('html-loader!markdown-loader!./docs/title.md');
         <li><a routerLink="." fragment="sizes">Optional sizes</a></li>
         <li><a routerLink="." fragment="child">Child modal</a></li>
         <li><a routerLink="." fragment="nested">Nested modals</a></li>
+        <li><a routerLink="." fragment="events">Modal events</a></li>
         <li><a routerLink="." fragment="auto-shown">Auto shown modal</a></li>
       </ul>
     </li>
@@ -59,6 +60,17 @@ let titleDoc = require('html-loader!markdown-loader!./docs/title.md');
     <demo-modal-nested></demo-modal-nested>
   </ng-sample-box>
 
+  <h2 routerLink="." fragment="events" id="events">Modal events</h2>
+  <p>
+    ModalDirective exposes 4 events: OnShow, OnShown, OnHide, OnHidden. See usage example below. <br>
+    <code>$event</code> is an instance of ModalDirective. There you may find some useful properties like <code>isShown</code>, <code>dismissReason</code>, etc. <br>
+    For example, you may want to know which one of user's actions caused closing of a modal. Just get the value of <code>dismissReason</code>, 
+    possible values are <code>backdrop-click</code>, <code>esc</code> or <code>null</code> if modal was closed by direct call of <code>hide()</code>
+  </p>
+  <ng-sample-box [ts]="demos.events.component" [html]="demos.events.html">
+    <demo-modal-events></demo-modal-events>
+  </ng-sample-box>
+  
   <h2 routerLink="." fragment="auto-shown" id="auto-shown">Auto shown modal</h2>
   <p>
     Show modal right after it has been initialized.

demo/src/ng-api-doc.ts

@@ -977,6 +977,11 @@ export const ngdoc: any = {
         "name": "config",
         "type": "ModalOptions",
         "description": "<p>allows to set modal configuration via element property </p>\n"
+      },
+      {
+        "name": "dismissReason",
+        "type": "string",
+        "description": "<p>This field contains last dismiss reason. Possible values: <code>backdrop-click</code>, <code>esc</code> and <code>null</code> (if modal was closed by direct call of <code>.hide()</code>). </p>\n"
       }
     ],
     "methods": [

src/modal/modal.component.ts

@@ -29,6 +29,10 @@ import { ComponentLoaderFactory } from '../component-loader/component-loader.fac
 
 const TRANSITION_DURATION = 300;
 const BACKDROP_TRANSITION_DURATION = 150;
+const DISMISS_REASONS = {
+  BACKRDOP: 'backdrop-click',
+  ESC: 'esc'
+};
 
 /** Mark any code with directive to show it's content in modal */
 @Directive({
@@ -57,6 +61,8 @@ export class ModalDirective implements AfterViewInit, OnDestroy {
 
   // seems like an Options
   public isAnimated: boolean = true;
+  /** This field contains last dismiss reason. Possible values: `backdrop-click`, `esc` and `null` (if modal was closed by direct call of `.hide()`). */
+  public dismissReason: string;
 
   public get isShown(): boolean {
     return this._isShown;
@@ -89,14 +95,15 @@ export class ModalDirective implements AfterViewInit, OnDestroy {
     if (this.config.ignoreBackdropClick || this.config.backdrop === 'static' || event.target !== this._element.nativeElement) {
       return;
     }
-
+    this.dismissReason = DISMISS_REASONS.BACKRDOP;
     this.hide(event);
   }
 
   // todo: consider preventing default and stopping propagation
   @HostListener('keydown.esc')
   public onEsc(): void {
     if (this.config.keyboard) {
+      this.dismissReason = DISMISS_REASONS.ESC;
       this.hide();
     }
   }
@@ -132,6 +139,7 @@ export class ModalDirective implements AfterViewInit, OnDestroy {
 
   /** Allows to manually open modal */
   public show(): void {
+    this.dismissReason = null;
     this.onShow.emit(this);
     if (this._isShown) {
       return;
@@ -345,17 +353,10 @@ export class ModalDirective implements AfterViewInit, OnDestroy {
       return;
     }
 
-    const fixedEl = document.querySelector(Selector.FIXED_CONTENT);
-
-    if (!fixedEl) {
-      return;
-    }
-
-    const bodyPadding = parseInt(Utils.getStyles(fixedEl).paddingRight || 0, 10);
-    this.originalBodyPadding = parseInt(document.body.style.paddingRight || 0, 10);
+    this.originalBodyPadding = parseInt(window.getComputedStyle(document.body).getPropertyValue('padding-right') || 0, 10);
 
     if (this.isBodyOverflowing) {
-      document.body.style.paddingRight = `${bodyPadding + this.scrollbarWidth}px`;
+      document.body.style.paddingRight = `${this.originalBodyPadding + this.scrollbarWidth}px`;
     }
   }