Skip to content

Commit

Permalink
Clear all toasts followed by a new toast now shows the new toast. Fixes
Browse files Browse the repository at this point in the history 
#149 #118
  • Loading branch information
@johnpapa
johnpapa committed Apr 29, 2014
1 parent 482cba7 commit 3126a53
Show file tree
Hide file tree
Showing 3 changed files with 609 additions and 317 deletions.
275 changes: 275 additions & 0 deletions demo.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,275 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>toastr examples</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
<link href="toastr.css" rel="stylesheet" type="text/css" />
<style>
.row {
margin-left: 0;
}
</style>
</head>

<body class="container">
<section class="row">
<h1>toastr</h1>

<div class="well row">
<div class="row">
<div class="span4">
<div class="control-group">
<div class="controls">
<label class="control-label" for="title">Title</label>
<input id="title" type="text" class="input-large" placeholder="Enter a title ..." />
<label class="control-label" for="message">Message</label>
<textarea class="input-large" id="message" rows="3" placeholder="Enter a message ..."></textarea>
</div>
</div>
<div class="control-group">
<div class="controls">
<label class="checkbox" for="closeButton">
<input id="closeButton" type="checkbox" value="checked" class="input-mini" />Close Button
</label>
</div>
<div class="controls">
<label class="checkbox" for="addBehaviorOnToastClick">
<input id="addBehaviorOnToastClick" type="checkbox" value="checked" class="input-mini" />Add behavior on toast click
</label>
</div>
<div class="controls">
<label class="checkbox" for="debugInfo">
<input id="debugInfo" type="checkbox" value="checked" class="input-mini" />Debug
</label>
</div>
</div>
</div>

<div class="span2">
<div class="control-group" id="toastTypeGroup">
<div class="controls">
<label>Toast Type</label>
<label class="radio">
<input type="radio" name="toasts" value="success" checked />Success
</label>
<label class="radio">
<input type="radio" name="toasts" value="info" />Info
</label>
<label class="radio">
<input type="radio" name="toasts" value="warning" />Warning
</label>
<label class="radio">
<input type="radio" name="toasts" value="error" />Error
</label>
</div>
</div>
<div class="control-group" id="positionGroup">
<div class="controls">
<label>Position</label>
<label class="radio">
<input type="radio" name="positions" value="toast-top-right" checked />Top Right
</label>
<label class="radio">
<input type="radio" name="positions" value="toast-bottom-right" />Bottom Right
</label>
<label class="radio">
<input type="radio" name="positions" value="toast-bottom-left" />Bottom Left
</label>
<label class="radio">
<input type="radio" name="positions" value="toast-top-left" />Top Left
</label>
<label class="radio">
<input type="radio" name="positions" value="toast-top-full-width" />Top Full Width
</label>
<label class="radio">
<input type="radio" name="positions" value="toast-bottom-full-width" />Bottom Full Width
</label>
</div>
</div>
</div>

<div class="span2">
<div class="control-group">
<div class="controls">
<label class="control-label" for="showEasing">Show Easing</label>
<input id="showEasing" type="text" placeholder="swing, linear" class="input-mini" value="swing" />

<label class="control-label" for="hideEasing">Hide Easing</label>
<input id="hideEasing" type="text" placeholder="swing, linear" class="input-mini" value="linear" />

<label class="control-label" for="showMethod">Show Method</label>
<input id="showMethod" type="text" placeholder="show, fadeIn, slideDown" class="input-mini" value="fadeIn" />

<label class="control-label" for="hideMethod">Hide Method</label>
<input id="hideMethod" type="text" placeholder="hide, fadeOut, slideUp" class="input-mini" value="fadeOut" />
</div>
</div>
</div>

<div class="span3">
<div class="control-group">
<div class="controls">
<label class="control-label" for="showDuration">Show Duration</label>
<input id="showDuration" type="text" placeholder="ms" class="input-mini" value="300" />

<label class="control-label" for="hideDuration">Hide Duration</label>
<input id="hideDuration" type="text" placeholder="ms" class="input-mini" value="1000" />

<label class="control-label" for="timeOut">Time out</label>
<input id="timeOut" type="text" placeholder="ms" class="input-mini" value="5000" />

<label class="control-label" for="timeOut">Extended time out</label>
<input id="extendedTimeOut" type="text" placeholder="ms" class="input-mini" value="1000" />
</div>
</div>
</div>
</div>

<div class="row">
<button type="button" class="btn btn-primary" id="showtoast">Show Toast</button>
<button type="button" class="btn btn-danger" id="cleartoasts">Clear Toasts</button>
<button type="button" class="btn btn-danger" id="clearlasttoast">Clear Last Toast</button>
</div>

<div class="row" style='margin-top: 25px;'>
<pre id='toastrOptions'></pre>
</div>
</div>
</section>

<footer class="row">
<h2>Links</h2>

<ul>
<li><a href="http://nuget.org/packages/toastr">NuGet</a></li>
<li><a href="https://github.com/CodeSeven/toastr">GitHub</a></li>
</ul>
</footer>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="toastr.js"></script>
<script src="glimpse.js"></script>
<script src="glimpse.toastr.js"></script>

<script type="text/javascript">
$(function () {
var i = -1;
var toastCount = 0;
var $toastlast;

var getMessage = function () {
var msgs = ['My name is Inigo Montoya. You killed my father. Prepare to die!',
'<div><input class="input-small" value="textbox"/>&nbsp;<a href="http://johnpapa.net" target="_blank">This is a hyperlink</a></div><div><button type="button" id="okBtn" class="btn btn-primary">Close me</button><button type="button" id="surpriseBtn" class="btn" style="margin: 0 8px 0 8px">Surprise me</button></div>',
'Are you the six fingered man?',
'Inconceivable!',
'I do not think that means what you think it means.',
'Have fun storming the castle!'
];
i++;
if (i === msgs.length) {
i = 0;
}

return msgs[i];
};
$('#showtoast').click(function () {
var shortCutFunction = $("#toastTypeGroup input:radio:checked").val();
var msg = $('#message').val();
var title = $('#title').val() || '';
var $showDuration = $('#showDuration');
var $hideDuration = $('#hideDuration');
var $timeOut = $('#timeOut');
var $extendedTimeOut = $('#extendedTimeOut');
var $showEasing = $('#showEasing');
var $hideEasing = $('#hideEasing');
var $showMethod = $('#showMethod');
var $hideMethod = $('#hideMethod');
var toastIndex = toastCount++;

toastr.options = {
closeButton: $('#closeButton').prop('checked'),
debug: $('#debugInfo').prop('checked'),
positionClass: $('#positionGroup input:radio:checked').val() || 'toast-top-right',
onclick: null
};

if ($('#addBehaviorOnToastClick').prop('checked')) {
toastr.options.onclick = function () {
alert('You can perform some custom action after a toast goes away');
};
}

if ($showDuration.val().length) {
toastr.options.showDuration = $showDuration.val();
}

if ($hideDuration.val().length) {
toastr.options.hideDuration = $hideDuration.val();
}

if ($timeOut.val().length) {
toastr.options.timeOut = $timeOut.val();
}

if ($extendedTimeOut.val().length) {
toastr.options.extendedTimeOut = $extendedTimeOut.val();
}

if ($showEasing.val().length) {
toastr.options.showEasing = $showEasing.val();
}

if ($hideEasing.val().length) {
toastr.options.hideEasing = $hideEasing.val();
}

if ($showMethod.val().length) {
toastr.options.showMethod = $showMethod.val();
}

if ($hideMethod.val().length) {
toastr.options.hideMethod = $hideMethod.val();
}

if (!msg) {
msg = getMessage();
}

$("#toastrOptions").text("Command: toastr["
+ shortCutFunction
+ "](\""
+ msg
+ (title ? "\", \"" + title : '')
+ "\")\n\ntoastr.options = "
+ JSON.stringify(toastr.options, null, 2)
);

var $toast = toastr[shortCutFunction](msg, title); // Wire up an event handler to a button in the toast, if it exists
$toastlast = $toast;
if ($toast.find('#okBtn').length) {
$toast.delegate('#okBtn', 'click', function () {
alert('you clicked me. i was toast #' + toastIndex + '. goodbye!');
$toast.remove();
});
}
if ($toast.find('#surpriseBtn').length) {
$toast.delegate('#surpriseBtn', 'click', function () {
alert('Surprise! you clicked me. i was toast #' + toastIndex + '. You could perform an action here.');
});
}
});
function getLastToast(){
return $toastlast;
}
$('#clearlasttoast').click(function () {
toastr.clear(getLastToast());
});
$('#cleartoasts').click(function () {
toastr.clear();
});
})
</script>
</body>
</html>
21 changes: 16 additions & 5 deletions tests/unit/toastr-tests.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -123,6 +123,17 @@
start();
}, delay);
});
test('clear and show - after clear all toasts new toast still appears', 1, function () {
//Arrange
var $toast = [];
//Act
$toast[0] = toastr.info(sampleMsg, sampleTitle + '-1');
$toast[1] = toastr.info(sampleMsg, sampleTitle + '-2');
toastr.clear();
$toast[2] = toastr.info(sampleMsg, sampleTitle + '-3-Visible');
//Assert
equal($(selectors.container).find('div.toast-title').html(), sampleTitle + '-3-Visible', 'Finds toast after a clear'); //Teardown
});
module('info');
test('info - pass title and message', 3, function () {
//Arrange
Expand Down Expand Up @@ -289,7 +300,7 @@
//Arrange
toastr.options.closeButton = true;
//Act
var $toast = toastr.success('');
var $toast = toastr.success('');
//Assert
equal($toast.find('button.toast-close-button').length, 1, 'close button should exist with closeButton=true');
//Teardown
Expand Down Expand Up @@ -364,7 +375,7 @@
$toast.remove();
clearContainerChildren();
});

module('order of appearance');
test('Newest toast on top', 1, function () {
//Arrange
Expand Down Expand Up @@ -406,7 +417,7 @@
toastr.options.positionClass = positionClasses.topRight;
//Act
var $toast = toastr.success(sampleMsg);
var $container = toastr.getContainer();
var $container = toastr.getContainer();
//Assert
ok($container.hasClass(positionClasses.topRight), 'Has position top right');
//Teardown
Expand All @@ -419,7 +430,7 @@
toastr.options.positionClass = positionClasses.bottomRight;
//Act
var $toast = toastr.success(sampleMsg);
var $container = toastr.getContainer();
var $container = toastr.getContainer();
//Assert
ok($container.hasClass(positionClasses.bottomRight), 'Has position bottom right');
//Teardown
Expand All @@ -446,7 +457,7 @@
toastr.options.positionClass = positionClasses.topLeft;
//Act
var $toast = toastr.success(sampleMsg);
var $container = toastr.getContainer();
var $container = toastr.getContainer();
//Assert
ok($container.hasClass(positionClasses.topLeft), 'Has position top left');
//Teardown
Expand Down
Loading

0 comments on commit 3126a53

Please sign in to comment.