Fixed #8791 - ConfirmDialog does not support dismissableMask

primefaces · Dec 4, 2020 · 3a719ba · 3a719ba
1 parent d8d1bf2
commit 3a719ba
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 3 deletions.
diff --git a/src/app/components/api/confirmation.ts b/src/app/components/api/confirmation.ts
@@ -15,6 +15,7 @@ export interface Confirmation {
     rejectVisible?: boolean;
     blockScroll?: boolean;
     closeOnEscape?: boolean;
+    dismissableMask?: boolean;
     defaultFocus?: string;
     acceptButtonStyleClass?: string;
     rejectButtonStyleClass?: string;

diff --git a/src/app/components/confirmdialog/confirmdialog.ts b/src/app/components/confirmdialog/confirmdialog.ts
@@ -96,6 +96,8 @@ export class ConfirmDialog implements AfterContentInit,OnDestroy {
 
     @Input() closeOnEscape: boolean = true;
 
+    @Input() dismissableMask: boolean;
+
     @Input() blockScroll: boolean = true;
 
     @Input() rtl: boolean;
@@ -193,6 +195,8 @@ export class ConfirmDialog implements AfterContentInit,OnDestroy {
 
     subscription: Subscription;
 
+    maskClickListener: Function;
+
     preWidth: number;
 
     _position: string = "center";
@@ -209,7 +213,6 @@ export class ConfirmDialog implements AfterContentInit,OnDestroy {
             }
 
             if (confirmation.key === this.key) {
-                console.log("hola?")
                 this.confirmation = confirmation;
                 this.confirmationOptions = {
                     message: this.confirmation.message||this.message,
@@ -225,7 +228,8 @@ export class ConfirmDialog implements AfterContentInit,OnDestroy {
                     rejectButtonStyleClass: this.confirmation.rejectButtonStyleClass || this.rejectButtonStyleClass,
                     defaultFocus: this.confirmation.defaultFocus || this.defaultFocus,
                     blockScroll: (this.confirmation.blockScroll === false || this.confirmation.blockScroll === true) ? this.confirmation.blockScroll : this.blockScroll,
-                    closeOnEscape: (this.confirmation.closeOnEscape === false || this.confirmation.closeOnEscape === true) ? this.confirmation.closeOnEscape : this.closeOnEscape
+                    closeOnEscape: (this.confirmation.closeOnEscape === false || this.confirmation.closeOnEscape === true) ? this.confirmation.closeOnEscape : this.closeOnEscape,
+                    dismissableMask: (this.confirmation.dismissableMask === false || this.confirmation.dismissableMask === true) ? this.confirmation.dismissableMask : this.dismissableMask
                 };
 
                 if (this.confirmation.accept) {
@@ -318,6 +322,15 @@ export class ConfirmDialog implements AfterContentInit,OnDestroy {
         if (this.option('blockScroll')) {
             DomHandler.addClass(document.body, 'p-overflow-hidden');
         }
+
+        if (this.option('dismissableMask')) {
+            this.maskClickListener = this.renderer.listen(this.wrapper, 'mousedown', (event: any) => {
+                if (this.wrapper && this.wrapper.isSameNode(event.target)) {
+                    this.close(event);
+                }
+                console.log("hey?")
+            });
+        }
     }
 
     disableModality() {
@@ -327,6 +340,10 @@ export class ConfirmDialog implements AfterContentInit,OnDestroy {
             DomHandler.removeClass(document.body, 'p-overflow-hidden');
         }
 
+        if (this.dismissableMask) {
+            this.unbindMaskClickListener();
+        }
+
         if (this.container) {
             this.cd.detectChanges();
         }
@@ -416,6 +433,13 @@ export class ConfirmDialog implements AfterContentInit,OnDestroy {
         }
     }
 
+    unbindMaskClickListener() {
+        if (this.maskClickListener) {
+            this.maskClickListener();
+            this.maskClickListener = null;
+        }
+    }
+
     onOverlayHide() {
         this.disableModality();
         this.unbindGlobalListeners();

diff --git a/src/app/showcase/components/confirmdialog/confirmdialogdemo.html b/src/app/showcase/components/confirmdialog/confirmdialogdemo.html
@@ -197,6 +197,12 @@ <h5>Getting Started</h5>
                             <td>true</td>
                             <td>Specifies if pressing escape key should hide the dialog.</td>
                         </tr>
+                        <tr>
+                            <td>dismissableMask</td>
+                            <td>boolean</td>
+                            <td>false</td>
+                            <td>Specifices if clicking the modal background should hide the dialog.</td>
+                        </tr>
                         <tr>
                             <td>defaultFocus</td>
                             <td>string</td>
@@ -346,6 +352,12 @@ <h5>Properties</h5>
                             <td>true</td>
                             <td>Specifies if pressing escape key should hide the dialog.</td>
                         </tr>
+                        <tr>
+                            <td>dismissableMask</td>
+                            <td>boolean</td>
+                            <td>false</td>
+                            <td>Specifices if clicking the modal background should hide the dialog.</td>
+                        </tr>
                         <tr>
                             <td>rtl</td>
                             <td>boolean</td>

diff --git a/src/app/showcase/components/dialog/dialogdemo.html b/src/app/showcase/components/dialog/dialogdemo.html
@@ -287,7 +287,7 @@ <h5>Properties</h5>
                             <td>Specifices if pressing escape key should hide the dialog.</td>
                         </tr>
                         <tr>
-                            <td>OkableMask</td>
+                            <td>dismissableMask</td>
                             <td>boolean</td>
                             <td>false</td>
                             <td>Specifices if clicking the modal background should hide the dialog.</td>