diff --git a/README.md b/README.md index 8d0f4a4..5370903 100644 --- a/README.md +++ b/README.md @@ -21,7 +21,8 @@ You can pass to the `$.toast` function an object with the settings for your toas | subtitle | Shows in the top right corner of the toast header | N/A | | | content | Shows in the toast body | N/A | | type | Determines the style of the toast based on Bootstrap styles | 'info' | 'info', 'success', 'warning', 'error' -| delay | Determines how long the Toast shoud be shown for. The default, -1, will show the toast until the user clicks close. | -1 | -1 to disable auto close, or timeout value in milliseconds +| delay | Determines how long the Toast shoud be shown for. The default, -1, will show the toast until the user clicks close. | -1 | omit or set to -1 to disable auto close, or timeout value in milliseconds +| img | Shows an image before the title | N/A | { src: '', class: '', title: '', alt: '' } **Note:** If content is omitted, the toast will not have a `.toast-body` and can be used as a small snack which will be shown below in the examples. By default toasts will be positioned in the top right corner and will in the future (hopefully) have other position options. @@ -88,19 +89,19 @@ The toasts are stackable: ### Caveats -* The toast will remain in the DOM when hidden, I am working on a way to incorperate removing them from the DOM or reusing existing ones if left in, however, for the time being, you can use the following to remove the toast once it is hidden from the DOM: +* ~~The toast will remain in the DOM when hidden, I am working on a way to incorperate removing them from the DOM or reusing existing ones if left in, however, for the time being, you can use the following to remove the toast once it is hidden from the DOM:~~ - As of 2019-03-16, the toasts will be removed automatically from the DOM. ```javascript -$(document).on('hidden.bs.toast', '.toast', function (e) { - $(this).remove(); +$('body').on('hidden.bs.toast', '.toast', function () { + $(this).remove(); }); ``` ### Roadmap -* Allow img in toast as is shown in the Bootstrap 4 documentation +* ~~Allow img in toast as is shown in the Bootstrap 4 documentation~~ - 2019-03-16 * Allow the option to prevent stacking -* Allow the option to keep / remove from DOM +* ~~Autoremove toast from DOM once hidden~~ - 2019-03-16 * Custom styling (rounded toasts, blocky toasts, custom background colours) * Positioning of the actual toast @@ -113,3 +114,5 @@ I am open to contributions and you could contribute in many ways: * Submit pull requests * Help by answering issues * Tell us if you are using the plugin and the project + +The minifier that is used is: https://closure-compiler.appspot.com/home \ No newline at end of file diff --git a/dist/toast.min.js b/dist/toast.min.js index b1d45a9..cc8e3df 100644 --- a/dist/toast.min.js +++ b/dist/toast.min.js @@ -1,3 +1,3 @@ -(function(b){b.toast=function(a,k,g,l,h){b("#toast-container").length||(b("body").prepend('
'),b("#toast-container").append('
'));var c="",d="",e="text-muted",f="",m="object"===typeof a?a.title||"":a||"Notice!";k="object"===typeof a?a.subtitle||"":k||"";g="object"===typeof a?a.content||"":g||"";h="object"===typeof a?a.delay||-1:h||-1;switch("object"===typeof a?a.type||"":l||"info"){case "info":c="bg-info"; -f=e=d="text-white";break;case "success":c="bg-success";f=e=d="text-white";break;case "warning":case "warn":c="bg-warning";f=e=d="text-white";break;case "error":case "danger":c="bg-danger",f=e=d="text-white"}a='";b("#toast-wrapper").append(a);b("#toast-wrapper .toast:last").toast("show")}})(jQuery); \ No newline at end of file +(function(b){b.toast=function(a){b("#toast-container").length||(b("body").prepend('
'),b("#toast-container").append('
'),b("body").on("hidden.bs.toast",".toast",function(){b(this).remove()}));var d="",e="",f="text-muted",g="",l=a.title||"Notice!",m=a.subtitle||"",h=a.content||"",k=a.delay||-1,c=a.img;switch(a.type||"info"){case "info":d="bg-info";g=f=e="text-white";break;case "success":d="bg-success"; +g=f=e="text-white";break;case "warning":case "warn":d="bg-warning";g=f=e="text-white";break;case "error":case "danger":d="bg-danger",g=f=e="text-white"}a='";b("#toast-wrapper").append(a);b("#toast-wrapper .toast:last").toast("show")}})(jQuery); \ No newline at end of file diff --git a/example/index.html b/example/index.html new file mode 100644 index 0000000..bc32cfb --- /dev/null +++ b/example/index.html @@ -0,0 +1,93 @@ + + + + + + + + + + + + Toast + + + + +
+ +
+ + + + + + + + + + + \ No newline at end of file diff --git a/js/toast.js b/js/toast.js index 40449fd..f8a63dc 100644 --- a/js/toast.js +++ b/js/toast.js @@ -5,66 +5,75 @@ $.toast = function (opts) { if (!$('#toast-container').length) { $('body').prepend(TOAST_CONTAINER_HTML); - $('#toast-container').append(TOAST_WRAPPER_HTML); + + $('body').on('hidden.bs.toast', '.toast', function () { + $(this).remove(); + }); } let bg_header_class = '', fg_header_class = '', - fg_subtitle = 'text-muted', - fg_dismiss = '', - title = typeof opts === 'object' ? opts.title || '' : arguments[0] || 'Notice!', - subtitle = typeof opts === 'object' ? opts.subtitle || '' : arguments[1] || '', - content = typeof opts === 'object' ? opts.content || '' : arguments[2] || '', - type = typeof opts === 'object' ? opts.type || '' : arguments[3] || 'info', - delay = typeof opts === 'object' ? opts.delay || -1 : arguments[4] || -1; + fg_subtitle_class = 'text-muted', + fg_dismiss_class = '', + title = opts.title || 'Notice!', + subtitle = opts.subtitle || '', + content = opts.content || '', + type = opts.type || 'info', + delay = opts.delay || -1, + img = opts.img; switch (type) { case 'info': bg_header_class = 'bg-info'; fg_header_class = 'text-white'; - fg_subtitle = 'text-white'; - fg_dismiss = 'text-white'; + fg_subtitle_class = 'text-white'; + fg_dismiss_class = 'text-white'; break; case 'success': bg_header_class = 'bg-success'; fg_header_class = 'text-white'; - fg_subtitle = 'text-white'; - fg_dismiss = 'text-white'; + fg_subtitle_class = 'text-white'; + fg_dismiss_class = 'text-white'; break; case 'warning': case 'warn': bg_header_class = 'bg-warning'; fg_header_class = 'text-white'; - fg_subtitle = 'text-white'; - fg_dismiss = 'text-white'; + fg_subtitle_class = 'text-white'; + fg_dismiss_class = 'text-white'; break; case 'error': case 'danger': bg_header_class = 'bg-danger'; fg_header_class = 'text-white'; - fg_subtitle = 'text-white'; - fg_dismiss = 'text-white'; + fg_subtitle_class = 'text-white'; + fg_dismiss_class = 'text-white'; break; } let delay_or_autohide = ''; + if (delay === -1) { delay_or_autohide = 'data-autohide="false"'; } else { delay_or_autohide = 'data-delay="' + delay + '"'; } - let html = ''; - html += '