Merge pull request #189 from TravisTX/master

Time To Live Indicator for toasts
CodeSeven · Oct 16, 2014 · e027e1e · e027e1e
2 parents 05fd5bd + c4b7a41
commit e027e1e
Show file tree

Hide file tree

Showing 6 changed files with 104 additions and 8 deletions.
diff --git a/demo.html b/demo.html
@@ -44,6 +44,11 @@ <h1>toastr</h1>
                             <input id="debugInfo" type="checkbox" value="checked" class="input-mini" />Debug
                         </label>
                     </div>
+                    <div class="controls">
+                        <label class="checkbox" for="progressBar">
+                            <input id="progressBar" type="checkbox" value="checked" class="input-mini" />Progress Bar
+                        </label>
+                    </div>
                 </div>
             </div>
 
@@ -195,6 +200,7 @@ <h2>Links</h2>
             toastr.options = {
                 closeButton: $('#closeButton').prop('checked'),
                 debug: $('#debugInfo').prop('checked'),
+                progressBar: $('#progressBar').prop('checked'),
                 positionClass: $('#positionGroup input:radio:checked').val() || 'toast-top-right',
                 onclick: null
             };

diff --git a/tests/unit/toastr-tests.js b/tests/unit/toastr-tests.js
@@ -313,6 +313,34 @@
         clearContainerChildren();
     });
 
+    module('progressBar', {
+        teardown: function () {
+            toastr.options.progressBar = false;
+        }
+    });
+    test('progress bar disabled', 1, function () {
+        //Arrange
+        toastr.options.progressBar = false;
+        //Act
+        var $toast = toastr.success('');
+        //Assert
+        equal($toast.find('div.toast-progress').length, 0, 'progress bar should not exist with progressBar=false');
+        //Teardown
+        $toast.remove();
+        clearContainerChildren();
+    });
+    test('progress bar enabled', 1, function () {
+        //Arrange
+        toastr.options.progressBar = true;
+        //Act
+        var $toast = toastr.success('');
+        //Assert
+        equal($toast.find('div.toast-progress').length, 1, 'progress bar should exist with progressBar=true');
+        //Teardown
+        $toast.remove();
+        clearContainerChildren();
+    });
+
     module('event');
     asyncTest('event - onShown is executed', 1, function () {
         // Arrange

diff --git a/toastr.css b/toastr.css
@@ -104,6 +104,8 @@ button.toast-close-button {
   box-sizing: border-box;
 }
 #toast-container > div {
+  position: relative;
+  overflow: hidden;
   margin: 0 0 6px;
   padding: 15px 15px 15px 50px;
   width: 300px;
@@ -166,6 +168,18 @@ button.toast-close-button {
 .toast-warning {
   background-color: #f89406;
 }
+
+.toast-progress {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  height: 4px;
+  background-color: #000000;
+  opacity: 0.4;
+  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
+  filter: alpha(opacity=40);
+}
+
 /*Responsive Design*/
 @media all and (max-width: 240px) {
   #toast-container > div {

diff --git a/toastr.js b/toastr.js
@@ -180,7 +180,8 @@
                     target: 'body',
                     closeHtml: '<button>&times;</button>',
                     newestOnTop: true,
-                    preventDuplicates: false
+                    preventDuplicates: false,
+                    progressBar: false
                 };
             }
 
@@ -214,7 +215,13 @@
                     $toastElement = $('<div/>'),
                     $titleElement = $('<div/>'),
                     $messageElement = $('<div/>'),
+                    $progressElement = $('<div/>'),
                     $closeElement = $(options.closeHtml),
+                    progressBar = {
+                        intervalId: null,
+                        hideEta: null,
+                        maxHideTime: null
+                    },
                     response = {
                         toastId: toastId,
                         state: 'visible',
@@ -242,6 +249,11 @@
                     $toastElement.prepend($closeElement);
                 }
 
+                if (options.progressBar) {
+                    $progressElement.addClass('toast-progress');
+                    $toastElement.prepend($progressElement);
+                }
+
                 $toastElement.hide();
                 if (options.newestOnTop) {
                     $container.prepend($toastElement);
@@ -256,6 +268,11 @@
 
                 if (options.timeOut > 0) {
                     intervalId = setTimeout(hideToast, options.timeOut);
+                    progressBar.maxHideTime = parseFloat(options.timeOut);
+                    progressBar.hideEta = new Date().getTime() + progressBar.maxHideTime;
+                    if (options.progressBar) {
+                        progressBar.intervalId = setInterval(updateProgress, 10);
+                    }
                 }
 
                 $toastElement.hover(stickAround, delayedHideToast);
@@ -293,6 +310,7 @@
                     if ($(':focus', $toastElement).length && !override) {
                         return;
                     }
+                    clearTimeout(progressBar.intervalId);
                     return $toastElement[options.hideMethod]({
                         duration: options.hideDuration,
                         easing: options.hideEasing,
@@ -311,15 +329,23 @@
                 function delayedHideToast() {
                     if (options.timeOut > 0 || options.extendedTimeOut > 0) {
                         intervalId = setTimeout(hideToast, options.extendedTimeOut);
+                        progressBar.maxHideTime = parseFloat(options.extendedTimeOut);
+                        progressBar.hideEta = new Date().getTime() + progressBar.maxHideTime;
                     }
                 }
 
                 function stickAround() {
                     clearTimeout(intervalId);
+                    progressBar.hideEta = 0;
                     $toastElement.stop(true, true)[options.showMethod](
                         { duration: options.showDuration, easing: options.showEasing }
                     );
                 }
+
+                function updateProgress() {
+                    var percentage = ((progressBar.hideEta - (new Date().getTime())) / progressBar.maxHideTime) * 100;
+                    $progressElement.width(percentage + '%');
+                }
             }
 
             function getOptions() {

diff --git a/toastr.less b/toastr.less
@@ -142,6 +142,8 @@ button.toast-close-button {
 	}
 
 	> div {
+		position: relative;
+		overflow: hidden;
 		margin: 0 0 6px;
 		padding: 15px 15px 15px 50px;
 		width: 300px;
@@ -209,6 +211,15 @@ button.toast-close-button {
 	background-color: @orange;
 }
 
+.toast-progress {
+	position: absolute;
+	left: 0;
+	bottom: 0;
+	height: 4px;
+	background-color: @black;
+	.opacity(0.4);
+}
+
 /*Responsive Design*/
 
 @media all and (max-width: 240px) {

diff --git a/toastr.scss b/toastr.scss
@@ -1,7 +1,6 @@
 /*
  * Toastr
- * Version 2.0.1
- * Copyright 2012 John Papa and Hans Fjällemark.
+ * Copyright 2012-2014 John Papa and Hans Fjällemark.
  * All Rights Reserved.
  * Use, reproduction, distribution, and modification of this code is subject to the terms and
  * conditions of the MIT license, available at http://www.opensource.org/licenses/mit-license.php
@@ -24,7 +23,6 @@
   color: #cccccc;
   text-decoration: none;
 }
-
 .toast-close-button {
   position: relative;
   right: -0.3em;
@@ -48,7 +46,6 @@
   -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
   filter: alpha(opacity=40);
 }
-
 /*Additional properties for button version
  iOS requires the button element instead of an anchor tag.
  If you want the anchor version, it requires `href="#"`.*/
@@ -107,6 +104,8 @@ button.toast-close-button {
   box-sizing: border-box;
 }
 #toast-container > div {
+  position: relative;
+  overflow: hidden;
   margin: 0 0 6px;
   padding: 15px 15px 15px 50px;
   width: 300px;
@@ -169,8 +168,20 @@ button.toast-close-button {
 .toast-warning {
   background-color: #f89406;
 }
+
+.toast-progress {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  height: 4px;
+  background-color: #000000;
+  opacity: 0.4;
+  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
+  filter: alpha(opacity=40);
+}
+
 /*Responsive Design*/
-@media all and (max-width: 239px) {
+@media all and (max-width: 240px) {
   #toast-container > div {
     padding: 8px 8px 8px 50px;
     width: 11em;
@@ -180,7 +191,7 @@ button.toast-close-button {
     top: -0.2em;
   }
 }
-@media all and (min-width: 240px) and (max-width: 479px) {
+@media all and (min-width: 241px) and (max-width: 480px) {
   #toast-container > div {
     padding: 8px 8px 8px 50px;
     width: 18em;
@@ -190,7 +201,7 @@ button.toast-close-button {
     top: -0.2em;
   }
 }
-@media all and (min-width: 480px) and (max-width: 767px) {
+@media all and (min-width: 481px) and (max-width: 768px) {
   #toast-container > div {
     padding: 15px 15px 15px 50px;
     width: 25em;