#9923 for Dialog

primefaces · Feb 22, 2021 · 44127ea · 44127ea
1 parent 2747650
commit 44127ea
Show file tree

Hide file tree

Showing 3 changed files with 88 additions and 21 deletions.
diff --git a/src/app/components/dialog/dialog.ts b/src/app/components/dialog/dialog.ts
@@ -1,13 +1,12 @@
 import {NgModule,Component,ElementRef,OnDestroy,Input,Output,EventEmitter,Renderer2,
-    ContentChildren,QueryList,ViewChild,NgZone, ChangeDetectorRef,ViewRef,ChangeDetectionStrategy, ViewEncapsulation, AfterContentInit, TemplateRef, ContentChild} from '@angular/core';
+    ContentChildren,QueryList,ViewChild,NgZone, ChangeDetectorRef,ViewRef,ChangeDetectionStrategy, ViewEncapsulation, AfterContentInit, TemplateRef, ContentChild, OnInit} from '@angular/core';
 import {trigger,style,transition,animate, AnimationEvent, animation, useAnimation} from '@angular/animations';
 import {CommonModule} from '@angular/common';
 import {DomHandler} from 'primeng/dom';
 import {Header,Footer,SharedModule, PrimeTemplate} from 'primeng/api';
 import {FocusTrapModule} from 'primeng/focustrap';
 import {RippleModule} from 'primeng/ripple';
-
-let idx: number = 0;
+import { UniqueComponentId } from '../utils/uniquecomponentid';
 
 const showAnimation = animation([
     style({ transform: '{{transform}}', opacity: 0 }),
@@ -75,7 +74,7 @@ const hideAnimation = animation([
     encapsulation: ViewEncapsulation.None,
     styleUrls: ['../dialog/dialog.css']
 })
-export class Dialog implements AfterContentInit,OnDestroy {
+export class Dialog implements AfterContentInit, OnInit, OnDestroy {
 
     @Input() header: string;
 
@@ -123,6 +122,8 @@ export class Dialog implements AfterContentInit,OnDestroy {
 
     @Input() appendTo: any;
 
+    @Input() breakpoints: any;
+
     @Input() styleClass: string;
 
     @Input() maskStyleClass: string;
@@ -237,7 +238,7 @@ export class Dialog implements AfterContentInit,OnDestroy {
 
     preMaximizePageY: number;
 
-    id: string = `p-dialog-${idx++}`;
+    id: string = UniqueComponentId();
 
     _style: any = {};
 
@@ -247,6 +248,8 @@ export class Dialog implements AfterContentInit,OnDestroy {
 
     transformOptions: any = "scale(0.7)";
 
+    styleElement: any;
+
     constructor(public el: ElementRef, public renderer: Renderer2, public zone: NgZone, private cd: ChangeDetectorRef) { }
 
     ngAfterContentInit() {
@@ -271,6 +274,12 @@ export class Dialog implements AfterContentInit,OnDestroy {
         });
     }
 
+    ngOnInit() {
+        if (this.breakpoints) {
+            this.createStyle();
+        }
+    }
+
     @Input() get visible(): any {
         return this._visible;
     }
@@ -393,6 +402,26 @@ export class Dialog 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;
+        }
+    }
+
     initDrag(event: MouseEvent) {
         if (DomHandler.hasClass(event.target, 'p-dialog-header-icon') || DomHandler.hasClass((<HTMLElement> event.target).parentElement, 'p-dialog-header-icon')) {
             return;
@@ -663,6 +692,7 @@ export class Dialog implements AfterContentInit,OnDestroy {
                 this.appendContainer();
                 this.moveOnTop();
                 this.bindGlobalListeners();
+                this.container.setAttribute(this.id, '');
 
                 if (this.modal) {
                     this.enableModality();
@@ -716,11 +746,20 @@ export class Dialog implements AfterContentInit,OnDestroy {
         this._style = this.originalStyle ? {...this.originalStyle} : {};
     }
 
+    destroyStyle() {
+        if (this.styleElement) {
+            document.body.removeChild(this.styleElement);
+            this.styleElement = null;
+        }
+    }
+
     ngOnDestroy() {
         if (this.container) {
             this.restoreAppend();
             this.onContainerDestroy();
         }
+
+        this.destroyStyle();
     }
 
 }

diff --git a/src/app/showcase/components/dialog/dialogdemo.html b/src/app/showcase/components/dialog/dialogdemo.html
@@ -51,6 +51,19 @@ <h5>Modal</h5>
                 <p-button icon="pi pi-check" (click)="displayModal=false" label="Ok" styleClass="p-button-text"></p-button>
                </ng-template>
         </p-dialog>
+
+        <h5>Responsive</h5>
+        <p-button (click)="showResponsiveDialog()" icon="pi pi-external-link" label="Show"></p-button>
+        <p-dialog header="Header" [(visible)]="displayResponsive" [breakpoints]="{'960px': '75vw'}" [style]="{width: '50vw'}" [baseZIndex]="10000" [draggable]="false" [resizable]="false">
+            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
+                cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+               <ng-template pTemplate="footer">
+                <p-button (click)="displayResponsive=false" label="No" styleClass="p-button-text"></p-button>
+                <p-button (click)="displayResponsive=false" label="Yes" styleClass="p-button-text"></p-button>
+               </ng-template>
+        </p-dialog>
 
         <h5>Maximizable</h5>
         <p-button (click)="showMaximizableDialog()" icon="pi pi-external-link" label="Show"></p-button>
@@ -139,23 +152,12 @@ <h5>Dimensions</h5>
 </app-code>
 
             <h5>Responsive</h5>
-            <p>Responsiveness can easily be implemented using media queries.</p>
+            <p>Dialog 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-dialog header="Title" [(visible)]="display" styleClass="mydialog"&gt;
-Content
+&lt;p-dialog [(visible)]="display" [breakpoints]="&#123;'960px': '75vw', '640px': '100vw'&#125;" [style]="&#123;width: '50vw'&#125;"&gt;
+    Content
 &lt;/p-dialog&gt;
-</app-code>
-
-<app-code lang="css" ngNonBindable ngPreserveWhitespaces>
-.mydialog &#123;
-    width: 50vw;
-&#125;
-
-@media screen and (max-width: 40em) &#123;
-    .mydialog &#123;
-        width: 75vw;
-    &#125;
-&#125;
 </app-code>
 
             <h5>Header and Footer</h5>
@@ -380,6 +382,12 @@ <h5>Properties</h5>
                             <td>false</td>
                             <td>Whether the dialog can be displayed full screen.</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>
@@ -553,6 +561,20 @@ <h5>Dependencies</h5>
         &lt;/ng-template&gt;
 &lt;/p-dialog&gt;
 
+&lt;h5&gt;Responsive&lt;/h5&gt;
+&lt;p-button (click)="showResponsiveDialog()" icon="pi pi-external-link" label="Show"&gt;&lt;/p-button&gt;
+&lt;p-dialog header="Header" [(visible)]="displayResponsive" [breakpoints]="&#123;'960px': '75vw'&#125;" [style]="&#123;width: '50vw'&#125;" [baseZIndex]="10000" 
+    [draggable]="false" [resizable]="false"&gt;
+    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
+        cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
+        &lt;ng-template pTemplate="footer"&gt;
+        &lt;p-button (click)="displayResponsive=false" label="No" styleClass="p-button-text"&gt;&lt;/p-button&gt;
+        &lt;p-button (click)="displayResponsive=false" label="Yes" styleClass="p-button-text"&gt;&lt;/p-button&gt;
+        &lt;/ng-template&gt;
+&lt;/p-dialog&gt;
+
 &lt;h5&gt;Maximizable&lt;/h5&gt;
 &lt;p-button (click)="showMaximizableDialog()" icon="pi pi-external-link" label="Show"&gt;&lt;/p-button&gt;
 &lt;p-dialog header="Godfather I" [(visible)]="displayMaximizable" [modal]="true" [style]="&#123;width: '50vw'&#125;" [maximizable]="true" [baseZIndex]="10000"

diff --git a/src/app/showcase/components/dialog/dialogdemo.ts b/src/app/showcase/components/dialog/dialogdemo.ts
@@ -14,11 +14,13 @@ export class DialogDemo {
 
     displayMaximizable: boolean;
 
+    displayResponsive: boolean;
+
     displayPosition: boolean;
 
     position: string;
 
-    showModalDialog() {
+    showModalDialog() { 
         this.displayModal = true;
     }
 
@@ -38,4 +40,8 @@ export class DialogDemo {
         this.position = position;
         this.displayPosition = true;
     }
+
+    showResponsiveDialog() {
+        this.displayResponsive = true;
+    }
 }