Fixed #9923 - breakpoints for Dialog and ConfirmDialog

primefaces · Feb 22, 2021 · c1aad5b · c1aad5b
1 parent 65fd7af
commit c1aad5b
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 4 deletions.
diff --git a/src/app/components/confirmdialog/confirmdialog.ts b/src/app/components/confirmdialog/confirmdialog.ts
@@ -1,4 +1,4 @@
-import {NgModule,Component,ElementRef,OnDestroy,Input,EventEmitter,Renderer2,ContentChild,NgZone,ViewChild,ChangeDetectorRef,ChangeDetectionStrategy, ViewEncapsulation, ContentChildren, QueryList, TemplateRef, AfterContentInit, Output} from '@angular/core';
+import {NgModule,Component,ElementRef,OnDestroy,Input,EventEmitter,Renderer2,ContentChild,NgZone,ViewChild,ChangeDetectorRef,ChangeDetectionStrategy, ViewEncapsulation, ContentChildren, QueryList, TemplateRef, AfterContentInit, Output, OnInit} from '@angular/core';
 import {trigger,style,transition,animate,AnimationEvent, useAnimation, animation} from '@angular/animations';
 import {CommonModule} from '@angular/common';
 import {DomHandler} from 'primeng/dom';
@@ -7,6 +7,7 @@ import {ButtonModule} from 'primeng/button';
 import {Confirmation} from 'primeng/api';
 import {ConfirmationService} from 'primeng/api';
 import {Subscription} from 'rxjs';
+import {UniqueComponentId} from 'primeng/utils';
 
 const showAnimation = animation([
     style({ transform: '{{transform}}', opacity: 0 }),
@@ -60,7 +61,7 @@ const hideAnimation = animation([
     encapsulation: ViewEncapsulation.None,
     styleUrls: ['../dialog/dialog.css']
 })
-export class ConfirmDialog implements AfterContentInit,OnDestroy {
+export class ConfirmDialog implements AfterContentInit,OnInit,OnDestroy {
 
     @Input() header: string;
 
@@ -118,6 +119,8 @@ export class ConfirmDialog implements AfterContentInit,OnDestroy {
 
     @Input() defaultFocus: string = 'accept';
 
+    @Input() breakpoints: any;
+
     @Input() get visible(): any {
         return this._visible;
     }
@@ -205,6 +208,10 @@ export class ConfirmDialog implements AfterContentInit,OnDestroy {
 
     transformOptions: any = "scale(0.7)";
 
+    styleElement: any;
+
+    id = UniqueComponentId();
+
     confirmationOptions: Confirmation;
 
     constructor(public el: ElementRef, public renderer: Renderer2, private confirmationService: ConfirmationService, public zone: NgZone, private cd: ChangeDetectorRef, public config: PrimeNGConfig) {
@@ -249,6 +256,12 @@ export class ConfirmDialog implements AfterContentInit,OnDestroy {
         });
     }
 
+    ngOnInit() {
+        if (this.breakpoints) {
+            this.createStyle();
+        }
+    }
+
     option(name: string) {
         const source = this.confirmationOptions || this;
         if (source.hasOwnProperty(name)) {
@@ -263,6 +276,7 @@ export class ConfirmDialog implements AfterContentInit,OnDestroy {
                 this.container = event.element;
                 this.wrapper = this.container.parentElement;
                 this.contentContainer = DomHandler.findSingle(this.container, '.p-dialog-content');
+                this.container.setAttribute(this.id, '');
 
                 const element = this.getElementToFocus();
                 if (element) {
@@ -350,6 +364,26 @@ export class ConfirmDialog implements AfterContentInit,OnDestroy {
         }
     }
 
+    createStyle() {
+        if (!this.styleElement) {
+            this.styleElement = document.createElement('style');
+            this.styleElement.type = 'text/css';
+            document.body.appendChild(this.styleElement);
+            let innerHTML = '';
+            for (let breakpoint in this.breakpoints) {
+                innerHTML += `
+                    @media screen and (max-width: ${breakpoint}) {
+                        .p-dialog[${this.id}] {
+                            width: ${this.breakpoints[breakpoint]} !important;
+                        }
+                    }
+                `
+            }
+
+            this.styleElement.innerHTML = innerHTML;
+        }
+    }
+
     close(event: Event) {
         if (this.confirmation.rejectEvent) {
             this.confirmation.rejectEvent.emit(ConfirmEventType.CANCEL);
@@ -448,10 +482,18 @@ export class ConfirmDialog implements AfterContentInit,OnDestroy {
         this.container = null;
     }
 
+    destroyStyle() {
+        if (this.styleElement) {
+            document.body.removeChild(this.styleElement);
+            this.styleElement = null;
+        }
+    }
+
     ngOnDestroy() {
         this.restoreAppend();
         this.onOverlayHide();
         this.subscription.unsubscribe();
+        this.destroyStyle();
     }
 
     accept() {

diff --git a/src/app/components/dialog/dialog.ts b/src/app/components/dialog/dialog.ts
@@ -6,7 +6,7 @@ import {DomHandler} from 'primeng/dom';
 import {Header,Footer,SharedModule, PrimeTemplate} from 'primeng/api';
 import {FocusTrapModule} from 'primeng/focustrap';
 import {RippleModule} from 'primeng/ripple';
-import { UniqueComponentId } from '../utils/uniquecomponentid';
+import {UniqueComponentId} from 'primeng/utils';
 
 const showAnimation = animation([
     style({ transform: '{{transform}}', opacity: 0 }),
@@ -74,7 +74,7 @@ const hideAnimation = animation([
     encapsulation: ViewEncapsulation.None,
     styleUrls: ['../dialog/dialog.css']
 })
-export class Dialog implements AfterContentInit, OnInit, OnDestroy {
+export class Dialog implements AfterContentInit,OnInit,OnDestroy {
 
     @Input() header: string;
 

diff --git a/src/app/showcase/components/confirmdialog/confirmdialogdemo.html b/src/app/showcase/components/confirmdialog/confirmdialogdemo.html
@@ -69,6 +69,15 @@ <h5>Getting Started</h5>
         &#125;);
     &#125;
 &#125;
+</app-code>
+
+        <h5>Responsive</h5>
+            <p>ConfirmDialog width can be adjusted per screen size with the <i>breakpoints</i> option. In example below, default width is set to 50vw and below 961px, width would be 75vw and finally below 641px width becomes
+                100%. The value of <i>breakpoints</i> should be an object literal whose keys are the maximum screen sizes and values are the widths per screen.</p>
+<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
+&lt;p-confirmDialog [breakpoints]="&#123;'960px': '75vw', '640px': '100vw'&#125;" [style]="&#123;width: '50vw'&#125;"&gt;
+    Content
+&lt;/p-confirmDialog&gt;
 </app-code>
 
             <p>Confirm method takes a confirmation instance used to customize the dialog UI along with accept and reject actions.</p>
@@ -425,6 +434,12 @@ <h5>Properties</h5>
                             <td>true</td>
                             <td>Whether to automatically manage layering.</td>
                         </tr>
+                        <tr>
+                            <td>breakpoints</td>
+                            <td>object</td>
+                            <td>null</td>
+                            <td>Object literal to define widths per screen size.</td>
+                        </tr>
                         <tr>
                             <td>transitionOptions</td>
                             <td>string</td>