Fixed #10339 - Responsive Toast

primefaces · Jun 15, 2021 · 78217f9 · 78217f9
1 parent d82f422
commit 78217f9
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 0 deletions.
diff --git a/src/app/components/toast/toast.ts b/src/app/components/toast/toast.ts
@@ -4,6 +4,7 @@ import {Message} from 'primeng/api';
 import {DomHandler} from 'primeng/dom';
 import {PrimeTemplate,SharedModule} from 'primeng/api';
 import {MessageService} from 'primeng/api';
+import {UniqueComponentId} from 'primeng/utils';
 import {RippleModule} from 'primeng/ripple';
 import {Subscription} from 'rxjs';
 import {trigger,state,style,transition,animate,query,animateChild,AnimationEvent} from '@angular/animations';
@@ -170,6 +171,8 @@ export class Toast implements OnInit,AfterContentInit,OnDestroy {
 
     @Input() hideTransitionOptions: string = '250ms ease-in';
 
+    @Input() breakpoints: any;
+
     @Output() onClose: EventEmitter<any> = new EventEmitter();
 
     @ViewChild('container') containerViewChild: ElementRef;
@@ -186,6 +189,10 @@ export class Toast implements OnInit,AfterContentInit,OnDestroy {
 
     template: TemplateRef<any>;
 
+    styleElement: any;
+
+    id: string = UniqueComponentId();
+
     constructor(public messageService: MessageService, private cd: ChangeDetectorRef) {}
 
     ngOnInit() {
@@ -213,6 +220,11 @@ export class Toast implements OnInit,AfterContentInit,OnDestroy {
 
             this.cd.markForCheck();
         });
+
+
+        if (this.breakpoints) {
+            this.createStyle();
+        }
     }
 
     add(messages: Message[]): void {
@@ -276,6 +288,39 @@ export class Toast implements OnInit,AfterContentInit,OnDestroy {
     onAnimationStart(event: AnimationEvent) {
         if (event.fromState === 'void' && this.autoZIndex) {
             this.containerViewChild.nativeElement.style.zIndex = String(this.baseZIndex + (++DomHandler.zindex));
+            this.containerViewChild.nativeElement.setAttribute(this.id, '');
+
+        }
+    }
+
+    createStyle() {
+        if (!this.styleElement) {
+            this.styleElement = document.createElement('style');
+            this.styleElement.type = 'text/css';
+            document.head.appendChild(this.styleElement);
+            let innerHTML = '';
+            for (let breakpoint in this.breakpoints) {
+                let breakpointStyle = '';
+                for (let styleProp in this.breakpoints[breakpoint]) {
+                    breakpointStyle += styleProp + ':' + this.breakpoints[breakpoint][styleProp] + ' !important;';
+                }
+                innerHTML += `
+                    @media screen and (max-width: ${breakpoint}) {
+                        .p-toast[${this.id}] {
+                           ${breakpointStyle}
+                        }
+                    }
+                `
+            }
+
+            this.styleElement.innerHTML = innerHTML;
+        }
+    }
+
+    destroyStyle() {
+        if (this.styleElement) {
+            document.head.removeChild(this.styleElement);
+            this.styleElement = null;
         }
     }
 
@@ -287,6 +332,8 @@ export class Toast implements OnInit,AfterContentInit,OnDestroy {
         if (this.clearSubscription) {
             this.clearSubscription.unsubscribe();
         }
+
+        this.destroyStyle();
     }
 }
 

diff --git a/src/app/showcase/components/toast/toastdemo.html b/src/app/showcase/components/toast/toastdemo.html
@@ -247,6 +247,12 @@ <h5>Templating</h5>
         &lt;/div&gt;
     &lt;/ng-template&gt;
 &lt;/p-toast&gt;
+</app-code>
+
+            <h5>Responsive</h5>
+            <p>Toast styling can be adjusted per screen size with the <i>breakpoints</i> option. The value of <i>breakpoints</i> should be an object literal whose keys are the maximum screen sizes and values are the styles per screen. In example below, width of the toast messages cover the whole page on screens whose widths is smaller than 921px.</p>
+<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
+&lt;p-toast [breakpoints]="&#123;'920px': &#123;width: '100%', right: '0', left: '0'&#125;&#125;"&gt;&lt;/p-toast&gt;
 </app-code>
 
             <h5>Animation Configuration</h5>
@@ -340,6 +346,12 @@ <h5>Properties</h5>
                             <td>false</td>
                             <td>It does not add the new message if there is already a toast displayed with the same content</td>
                         </tr>
+                        <tr>
+                            <td>breakpoints</td>
+                            <td>object</td>
+                            <td>null</td>
+                            <td>Object literal to define styles per screen size.</td>
+                        </tr>
                         <tr>
                             <td>preventDuplicates</td>
                             <td>boolean</td>