Add support for increasing progress bar (#196)

* Add support for increasing progress bar animation * updated description of the progressAnimation property * fix lint issues
scttcper · Oct 6, 2017 · 5273ce3 · 5273ce3
1 parent 041b9a3
commit 5273ce3
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 15 deletions.
diff --git a/README.md b/README.md
@@ -95,20 +95,21 @@ There are __individual options__ and __global options__.
 ### Individual Options  
 Passed to `ToastrService.success/error/warn/info/show()`
 
-|     Option      |   Type    |      Default      |                                    Description                                     |
-| --------------- | --------- | ----------------- | ---------------------------------------------------------------------------------- |
-| toastComponent  | Component | Toast             | Angular component that will be used                                                |
-| closeButton     | boolean   | false             | Show close button                                                                  |
-| timeOut         | number    | 5000              | Time to live in milliseconds                                                       |
-| extendedTimeOut | number    | 1000              | Time to close after a user hovers over toast                                       |
-| enableHtml      | boolean   | false             | Allow html in message                                                              |
-| progressBar     | boolean   | false             | Show progress bar                                                                  |
-| toastClass      | string    | 'toast'           | Class on toast                                                                     |
-| positionClass   | string    | 'toast-top-right' | Class on toast container                                                           |
-| titleClass      | string    | 'toast-title'     | Class inside toast on title                                                        |
-| messageClass    | string    | 'toast-message'   | Class inside toast on message                                                      |
-| tapToDismiss    | boolean   | true              | Close on click                                                                     |
-| onActivateTick  | boolean   | false             | Fires `ApplicationRef.tick()` when activated. Helps show toast from asynchronous events outside of Angular's change detection |
+|     Option        |   Type    |      Default      |                                    Description                                     |
+| ----------------- | --------- | ----------------- | ---------------------------------------------------------------------------------- |
+| toastComponent    | Component | Toast             | Angular component that will be used                                                |
+| closeButton       | boolean   | false             | Show close button                                                                  |
+| timeOut           | number    | 5000              | Time to live in milliseconds                                                       |
+| extendedTimeOut   | number    | 1000              | Time to close after a user hovers over toast                                       |
+| enableHtml        | boolean   | false             | Allow html in message                                                              |
+| progressBar       | boolean   | false             | Show progress bar                                                                  |
+| progressAnimation | 'decreasing' &#124; 'increasing'  | 'decreasing'      | Changes the animation of the progress bar. |
+| toastClass        | string    | 'toast'           | Class on toast                                                                     |
+| positionClass     | string    | 'toast-top-right' | Class on toast container                                                           |
+| titleClass        | string    | 'toast-title'     | Class inside toast on title                                                        |
+| messageClass      | string    | 'toast-message'   | Class inside toast on message                                                      |
+| tapToDismiss      | boolean   | true              | Close on click                                                                     |
+| onActivateTick    | boolean   | false             | Fires `ApplicationRef.tick()` when activated. Helps show toast from asynchronous events outside of Angular's change detection |
 
 
 #### Setting Individual Options

diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -50,6 +50,21 @@
                   </label>
                 </div>
               </div>
+              <fieldset class="form-group">
+                <label><strong>Progress Bar Animation</strong></label>
+                <div class="form-check">
+                  <label class="form-check-label">
+                    <input class="form-check-input" type="radio" name="progressAnimationRadio" [(ngModel)]="options.progressAnimation" value="decreasing"  [disabled]="!options.progressBar">
+                    Decreasing
+                  </label>
+                </div>
+                <div class="form-check">
+                  <label class="form-check-label">
+                    <input class="form-check-input" type="radio" name="progressAnimationRadio" [(ngModel)]="options.progressAnimation" value="increasing" [disabled]="!options.progressBar">
+                    Increasing
+                  </label>
+                </div>
+              </fieldset>
             </div>
             <div class="col-md-4 mb-2">
               <div class="form-group">

diff --git a/src/lib/toastr/default-config.ts b/src/lib/toastr/default-config.ts
@@ -27,4 +27,5 @@ export class DefaultGlobalConfig implements GlobalConfig {
     messageClass = 'toast-message';
     tapToDismiss = true;
     onActivateTick = false;
+    progressAnimation: 'decreasing' | 'increasing' = 'decreasing';
   }
diff --git a/src/lib/toastr/toast-component.ts b/src/lib/toastr/toast-component.ts
@@ -106,15 +106,21 @@ export class Toast implements OnDestroy {
    * updates progress bar width
    */
   updateProgress() {
-    if (this.width === 0 || !this.options.timeOut) {
+    if (this.width === 0 || this.width === 100 || !this.options.timeOut) {
       return;
     }
     const now = new Date().getTime();
     const remaining = this.hideTime - now;
     this.width = (remaining / this.options.timeOut) * 100;
+    if (this.options.progressAnimation === 'increasing') {
+      this.width = 100 - this.width;
+    }
     if (this.width <= 0) {
       this.width = 0;
     }
+    if (this.width >= 100) {
+      this.width = 100;
+    }
   }
 
   /**

diff --git a/src/lib/toastr/toastr-config.ts b/src/lib/toastr/toastr-config.ts
@@ -32,6 +32,12 @@ import { ToastRef } from './toast-injector';
    * default: false
    */
   progressBar?: boolean;
+
+  /**
+   * changes toast progress bar animation
+   * default: decreasing
+   */
+  progressAnimation?: 'increasing' | 'decreasing';
   /**
    * render html in toast message (possibly unsafe)
    * default: false