Merge pull request #226 from jstawski/clearExplicitly

Added support for explicitly clearing a toast, which ignores the focus c...
CodeSeven · Jan 20, 2015 · 779d003 · 779d003
2 parents ce7231d + b69e83d
commit 779d003
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 10 deletions.
diff --git a/demo.html b/demo.html
@@ -54,6 +54,11 @@ <h1>toastr</h1>
                             <input id="preventDuplicates" type="checkbox" value="checked" class="input-mini" />Prevent Duplicates
                         </label>
                     </div>
+                    <div class="controls">
+                        <label class="checkbox" for="addClear">
+                            <input id="addClear" type="checkbox" value="checked" class="input-mini" />Add Clear Button
+                        </label>
+                    </div>
                 </div>
             </div>
 
@@ -188,6 +193,12 @@ <h2>Links</h2>
 
             return msgs[i];
         };
+        var getMessageWithClearButton = function (msg) {
+            msg = msg ? msg : 'Clear itself?';
+            msg += '<br /><br /><button type="button" class="clear">Yes</button>';
+            return msg;
+        };
+
         $('#showtoast').click(function () {
             var shortCutFunction = $("#toastTypeGroup input:radio:checked").val();
             var msg = $('#message').val();
@@ -201,6 +212,7 @@ <h2>Links</h2>
             var $showMethod = $('#showMethod');
             var $hideMethod = $('#hideMethod');
             var toastIndex = toastCount++;
+            var addClear = $('#addClear').prop('checked');
 
             toastr.options = {
                 closeButton: $('#closeButton').prop('checked'),
@@ -226,11 +238,11 @@ <h2>Links</h2>
             }
 
             if ($timeOut.val().length) {
-                toastr.options.timeOut = $timeOut.val();
+                toastr.options.timeOut = addClear ? 0 : $timeOut.val();
             }
 
             if ($extendedTimeOut.val().length) {
-                toastr.options.extendedTimeOut = $extendedTimeOut.val();
+                toastr.options.extendedTimeOut = addClear ? 0 : $extendedTimeOut.val();
             }
 
             if ($showEasing.val().length) {
@@ -249,8 +261,10 @@ <h2>Links</h2>
                 toastr.options.hideMethod = $hideMethod.val();
             }
 
-
-
+            if (addClear) {
+                msg = getMessageWithClearButton(msg);
+                toastr.options.tapToDismiss = false;
+            }
             if (!msg) {
                 msg = getMessage();
             }
@@ -277,7 +291,13 @@ <h2>Links</h2>
                     alert('Surprise! you clicked me. i was toast #' + toastIndex + '. You could perform an action here.');
                 });
             }
+            if ($toast.find('.clear').length) {
+                $toast.delegate('.clear', 'click', function () {
+                    toastr.clear($toast, { force: true });
+                });
+            }
         });
+
         function getLastToast(){
             return $toastlast;
         }

diff --git a/tests/unit/toastr-tests.js b/tests/unit/toastr-tests.js
@@ -75,6 +75,33 @@
             start();
         }, delay);
     });
+    test('clear - after clear toast with focus still appears', 1, function () {
+        //Arrange
+        var $toast;
+        var msg = sampleMsg + '<br/><br/><button type="button">Clear</button>';
+        //Act
+        $toast = toastr.info(msg, sampleTitle + '-1');
+        $toast.find('button').focus();
+        toastr.clear($toast);
+        //Assert
+        ok($toast.is(':visible'), 'Focused toast after a clear is visible');
+        //Teardown
+        resetContainer();
+    });
+    test('clear - after clear with force option toast with focus disappears', 1, function () {
+        //Arrange
+        var $toast;
+        var msg = sampleMsg + '<br/><br/><button type="button">Clear</button>';
+        //Act
+        $toast = toastr.info(msg, sampleTitle + '-1');
+        $toast.find('button').focus();
+        toastr.clear($toast, { force: true });
+        var $container = toastr.getContainer();
+        //Assert
+        ok($container && $container.children().length === 0, 'Focused toast after a clear with force is not visible');
+        //Teardown
+        resetContainer();
+    });
     asyncTest('clear and show - show 2 toasts, clear both, then show 1 more', 2, function () {
         //Arrange
         var $toast = [];
@@ -312,7 +339,7 @@
         $toast.remove();
         clearContainerChildren();
     });
-	test('close button has type=button', 1, function () {
+    test('close button has type=button', 1, function () {
         //Arrange
         toastr.options.closeButton = true;
         //Act

diff --git a/toastr.js b/toastr.js
@@ -97,10 +97,10 @@
                 });
             }
 
-            function clear($toastElement) {
+            function clear($toastElement, clearOptions) {
                 var options = getOptions();
                 if (!$container) { getContainer(options); }
-                if (!clearToast($toastElement, options)) {
+                if (!clearToast($toastElement, options, clearOptions)) {
                     clearContainer(options);
                 }
             }
@@ -127,8 +127,9 @@
                 }
             }
 
-            function clearToast ($toastElement, options) {
-                if ($toastElement && $(':focus', $toastElement).length === 0) {
+            function clearToast ($toastElement, options, clearOptions) {
+                var force = clearOptions && clearOptions.force ? clearOptions.force : false;
+                if ($toastElement && (force || $(':focus', $toastElement).length === 0)) {
                     $toastElement[options.hideMethod]({
                         duration: options.hideDuration,
                         easing: options.hideEasing,
@@ -199,7 +200,7 @@
                     options = $.extend(options, map.optionsOverride);
                     iconClass = map.optionsOverride.iconClass || iconClass;
                 }
-                
+
                 if (options.preventDuplicates) {
                     if (map.message === previousToast) {
                         return;