Added a couple of new options:

1. HTML for the close button 2. Options for selection the type of ease (one for showing and one for hiding) 3. Options to configure the ease time (in and out)
scttcper · Aug 26, 2021 · 331618c · 331618c
1 parent f2c4c42
commit 331618c
Show file tree

Hide file tree

Showing 4 changed files with 73 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="toastHideEasingTime">
+                  <strong>Hide Easing Time</strong>
+                </label>
+                <input
+                  type="text"
+                  [(ngModel)]="toastr.toastrConfig.hideEasingTime"
+                  (ngModelChange)="fixNumber('hideEasingTime')"
+                  class="form-control"
+                  id="toastHideEasingTime"
+                />
+              </div>
+              <div class="form-group mb-3">
+                <label for="toastShowEasingType">Ease Type</label>
+                <select class="form-control"
+                    name="easeType" 
+                    id="toastShowEasingType" 
+                    [(ngModel)]="toastr.toastrConfig.easing">
+                   <option [ngValue]="null" disabled>Select Easing Type</option>
+                   <option *ngFor="let type of easeTypes" [ngValue]="type">{{type}}</option>
+                 </select>
+              </div>
+              <div class="form-group mb-3">
+                <label for="toastHideEasingType">Hide Easing Type</label>
+                <select class="form-control"
+                    name="hideEasingType" 
+                    id="toastHideEasingType" 
+                    [(ngModel)]="toastr.toastrConfig.hideEasing">
+                  <option [ngValue]="null" disabled>Select Hide Easing 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('{{ hideEasingTime }}ms {{ hideEasing }}')
       )
     ])
   ],
@@ -69,7 +72,9 @@ export class Toast implements OnDestroy {
     value: 'inactive',
     params: {
       easeTime: this.toastPackage.config.easeTime,
-      easing: 'ease-in'
+      hideEasingTime: this.toastPackage.config.hideEasingTime,
+      easing: this.toastPackage.config.easing,
+      hideEasing: this.toastPackage.config.hideEasing
     }
   };
 
@@ -183,7 +188,7 @@ export class Toast implements OnDestroy {
     this.state = { ...this.state, value: 'removed' };
     this.outsideTimeout(
       () => this.toastrService.remove(this.toastPackage.toastId),
-      +this.toastPackage.config.easeTime
+      +this.toastPackage.config.hideEasingTime
     );
   }
   @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: 300
+   */
+  hideEasingTime: 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,
+  hideEasingTime: 300,
   tapToDismiss: true,
   onActivateTick: false,
   progressAnimation: 'decreasing',