Added a couple of new options:

1. HTML for the close button 2. Options for selecting the type of ease (one for showing and one for hiding) 3. Options to configure the ease time (in and out) The new hideEaseTime property is only used if it's defined, otherwise a fallback to easeTime is done so that there is no breaking change.
scttcper · Sep 1, 2021 · 91e5555 · 91e5555
1 parent f2c4c42
commit 91e5555
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 5 deletions.
diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html
@@ -31,7 +31,19 @@
                   placeholder="Toast message"
                 ></textarea>
               </div>
-
+              <div class="form-group mb-3">
+                <label for="toastMessage">
+                  <strong>Close Button HTML</strong>
+                </label>
+                <textarea
+                  [(ngModel)]="options.closeHtml"
+                  rows="2"
+                  class="form-control"
+                  name="closeHtml"
+                  id="closeHtml"
+                  placeholder="HTML for the close button"
+                ></textarea>
+              </div>
               <div class="form-group mb-3">
                 <div class="form-check">
                   <input
@@ -281,6 +293,38 @@
                   id="toastExtendedTimeout"
                 />
               </div>
+              <div class="form-group mb-3">
+                <label for="toastHideEaseTime">
+                  <strong>Hide Ease Time</strong>
+                </label>
+                <input
+                  type="text"
+                  [(ngModel)]="toastr.toastrConfig.hideEaseTime"
+                  (ngModelChange)="fixNumber('hideEaseTime')"
+                  class="form-control"
+                  id="toastHideEaseTime"
+                />
+              </div>
+              <div class="form-group mb-3">
+                <label for="toastShowEaseType">Ease Type</label>
+                <select class="form-control"
+                    name="easeType" 
+                    id="toastShowEaseType" 
+                    [(ngModel)]="toastr.toastrConfig.easing">
+                   <option [ngValue]="null" disabled>Select Ease Type</option>
+                   <option *ngFor="let type of easeTypes" [ngValue]="type">{{type}}</option>
+                 </select>
+              </div>
+              <div class="form-group mb-3">
+                <label for="toastHideEaseType">Hide Ease Type</label>
+                <select class="form-control"
+                    name="hideEaseType" 
+                    id="toastHideEaseType" 
+                    [(ngModel)]="toastr.toastrConfig.hideEasing">
+                  <option [ngValue]="null" disabled>Select Hide Ease Type</option>
+                  <option *ngFor="let type of easeTypes" [ngValue]="type">{{type}}</option>
+                </select>
+              </div>
             </div>
             <div class="col-md-3">
               <div class="row">

diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts
@@ -58,6 +58,7 @@ export class HomeComponent {
   inlinePositionIndex = 0;
   @ViewChildren(ToastContainerDirective) inlineContainers!: QueryList<ToastContainerDirective>;
 
+  easeTypes = [ "ease", "ease-in", "ease-out", "ease-in-out", "linear", "step-start", "step-end" ];
 
   constructor(public toastr: ToastrService, private renderer: Renderer2) {
     this.options = this.toastr.toastrConfig;

diff --git a/src/lib/toastr/toast.component.ts b/src/lib/toastr/toast.component.ts
@@ -19,7 +19,10 @@ import { ToastrService } from './toastr.service';
 @Component({
   selector: '[toast-component]',
   template: `
-  <button *ngIf="options.closeButton" (click)="remove()" class="toast-close-button" aria-label="Close">
+  <button *ngIf="options.closeButton && options.closeHtml" (click)="remove()" 
+    class="toast-close-button" aria-label="Close" aria-hidden="true" [innerHTML]="options.closeHtml">
+  </button>
+  <button *ngIf="options.closeButton && !options.closeHtml" (click)="remove()" class="toast-close-button" aria-label="Close">
     <span aria-hidden="true">&times;</span>
   </button>
   <div *ngIf="title" [class]="options.titleClass" [attr.aria-label]="title">
@@ -47,7 +50,7 @@ import { ToastrService } from './toastr.service';
       ),
       transition(
         'active => removed',
-        animate('{{ easeTime }}ms {{ easing }}')
+        animate('{{ hideEaseTime }}ms {{ hideEasing }}')
       )
     ])
   ],
@@ -69,7 +72,9 @@ export class Toast implements OnDestroy {
     value: 'inactive',
     params: {
       easeTime: this.toastPackage.config.easeTime,
-      easing: 'ease-in'
+      hideEaseTime: this.toastPackage.config.hideEaseTime ? this.toastPackage.config.hideEaseTime : this.toastPackage.config.easeTime,
+      easing: this.toastPackage.config.easing,
+      hideEasing: this.toastPackage.config.hideEasing ? this.toastPackage.config.hideEasing : this.toastPackage.config.easing
     }
   };
 
@@ -181,9 +186,10 @@ export class Toast implements OnDestroy {
     }
     clearTimeout(this.timeout);
     this.state = { ...this.state, value: 'removed' };
+    const hideEaseTime = this.toastPackage.config.hideEaseTime ? this.toastPackage.config.hideEaseTime : this.toastPackage.config.easeTime;
     this.outsideTimeout(
       () => this.toastrService.remove(this.toastPackage.toastId),
-      +this.toastPackage.config.easeTime
+      + hideEaseTime
     );
   }
   @HostListener('click')

diff --git a/src/lib/toastr/toastr-config.ts b/src/lib/toastr/toastr-config.ts
@@ -48,6 +48,11 @@ export interface IndividualConfig {
    * default: false
    */
   enableHtml: boolean;
+  /**
+   * html for the close button (possibly unsafe)
+   * default: undefined
+   */
+  closeHtml: string | undefined;
   /**
    * css class on toast component
    * default: ngx-toastr
@@ -73,11 +78,21 @@ export interface IndividualConfig {
    * default: ease-in
    */
   easing: string;
+  /**
+   * animation hide easing on toast
+   * default: ease-out
+   */
+  hideEasing: string;
   /**
    * animation ease time on toast
    * default: 300
    */
   easeTime: string | number;
+    /**
+   * animation hide ease time on toast
+   * default: 0
+   */
+  hideEaseTime: string | number;
   /**
    * clicking on toast dismisses it
    * default: true
@@ -220,13 +235,16 @@ export const DefaultNoComponentGlobalConfig: GlobalConfig = {
   timeOut: 5000,
   extendedTimeOut: 1000,
   enableHtml: false,
+  closeHtml: undefined,
   progressBar: false,
   toastClass: 'ngx-toastr',
   positionClass: 'toast-top-right',
   titleClass: 'toast-title',
   messageClass: 'toast-message',
   easing: 'ease-in',
+  hideEasing: 'ease-out',
   easeTime: 300,
+  hideEaseTime: 0,
   tapToDismiss: true,
   onActivateTick: false,
   progressAnimation: 'decreasing',