Permalink
Browse files

closes #35 closes $100

Added Close Button feature:

Optionally enable a close button

    toastr.options.closeButton = true;

Optionally override the close button's HTML.

    toastr.options.closeHtml = '<button><i class="icon-off"></i></button>';

You can also override the CSS/LESS for `#toast-container .toast-close-button`
  • Loading branch information...
1 parent 385c1b5 commit fb34ff92b1af38b3f77c7cfdf6e1604039f73173 @johnpapa johnpapa committed Aug 30, 2013
Showing with 305 additions and 66 deletions.
  1. +13 −2 README.md
  2. +47 −0 tests/toastr.css
  3. +10 −1 tests/toastr.js
  4. +97 −37 tests/unit/toastr-tests.js
  5. +47 −0 toastr.css
  6. +10 −1 toastr.js
  7. +77 −21 toastr.less
  8. +1 −1 toastr.min.css
  9. +1 −1 toastr.min.js
  10. +2 −2 toastr.min.js.map
View
@@ -26,7 +26,6 @@ http://nuget.org/packages/toastr
## [Bower](http://bower.io/)
bower install toastr
-
## Breaking Changes
####Animation Changes
@@ -64,8 +63,20 @@ For other API calls, see the [demo](http://codeseven.github.io/toastr/demo.html)
// Clears the current list of toasts
toastr.clear()
+### Close Button
+Optionally enable a close button
+
+ toastr.options.closeButton = true;
+
+Optionally override the close button's HTML.
+
+ toastr.options.closeHtml = '<button><i class="icon-off"></i></button>';
+
+You can also override the CSS/LESS for `#toast-container .toast-close-button`
+
### Display Sequence
- // Show newest toast at bottom (top is default)
+Show newest toast at bottom (top is default)
+
toastr.options.newestOnTop = false;
### Callbacks
View
@@ -13,6 +13,43 @@
color: #cccccc;
text-decoration: none;
}
+/*
+ https://github.com/twitter/bootstrap/blob/master/less/close.less
+ https://github.com/twitter/bootstrap/blob/master/less/alerts.less
+*/
+.toast-close-button {
+ position: relative;
+ right: -0.3em;
+ top: -0.3em;
+ float: right;
+ font-size: 20px;
+ font-weight: bold;
+ color: #ffffff;
+ -webkit-text-shadow: 0 1px 0 #ffffff;
+ text-shadow: 0 1px 0 #ffffff;
+ opacity: 0.8;
+ -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
+ filter: alpha(opacity=80);
+}
+.toast-close-button:hover,
+.toast-close-button:focus {
+ color: #000000;
+ text-decoration: none;
+ cursor: pointer;
+ opacity: 0.4;
+ -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="#"`.*/
+button.toast-close-button {
+ padding: 0;
+ cursor: pointer;
+ background: transparent;
+ border: 0;
+ -webkit-appearance: none;
+}
.toast-top-full-width {
top: 0;
right: 0;
@@ -42,6 +79,8 @@
#toast-container {
position: fixed;
z-index: 999999;
+ /*overrides*/
+
}
#toast-container * {
-moz-box-sizing: border-box;
@@ -112,12 +151,20 @@
padding: 8px 8px 8px 50px;
width: 11em;
}
+ #toast-container .toast-close-button {
+ right: -0.2em;
+ top: -0.2em;
+ }
}
@media all and (min-width: 241px) and (max-width: 480px) {
#toast-container > div {
padding: 8px 8px 8px 50px;
width: 18em;
}
+ #toast-container .toast-close-button {
+ right: -0.2em;
+ top: -0.2em;
+ }
}
@media all and (min-width: 481px) and (max-width: 768px) {
#toast-container > div {
View
@@ -132,6 +132,7 @@
titleClass: 'toast-title',
messageClass: 'toast-message',
target: 'body',
+ closeHtml: '<button>&times;</button>',
newestOnTop: true
};
}
@@ -161,6 +162,7 @@
$toastElement = $('<div/>'),
$titleElement = $('<div/>'),
$messageElement = $('<div/>'),
+ $closeElement = $(options.closeHtml),
response = {
toastId: toastId,
state: 'visible',
@@ -183,6 +185,11 @@
$toastElement.append($messageElement);
}
+ if (options.closeButton) {
+ $closeElement.addClass('toast-close-button');
+ $toastElement.prepend($closeElement);
+ }
+
$toastElement.hide();
if (options.newestOnTop) {
$container.prepend($toastElement);
@@ -191,7 +198,9 @@
}
- $toastElement[options.showMethod]({ duration: options.showDuration, easing: options.showEasing, complete: options.onShown });
+ $toastElement[options.showMethod](
+ { duration: options.showDuration, easing: options.showEasing, complete: options.onShown }
+ );
if (options.timeOut > 0) {
intervalId = setTimeout(hideToast, options.timeOut);
}
Oops, something went wrong.

0 comments on commit fb34ff9

Please sign in to comment.