diff --git a/README.md b/README.md index 149f37f..5c148ce 100644 --- a/README.md +++ b/README.md @@ -16,14 +16,15 @@ As of Bootstrap 4.2, [toasts](https://getbootstrap.com/docs/4.2/components/toast You can pass to the `$.toast` function an object with the settings for your toast which are as follows: | Parameter |Description| Default | Values | -| ------------- |-----------| ------- |--------- +| ------------- |-----------| ------- |---------| | title | Shows in the top left corner of the toast header | 'Notice!'| | | 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' +| 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 | 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: '' } | pause_on_hover| true/false respectively to pause on hover | false | true/false | +| container | Set the container inside which the toasts will be displayed | $("body") | A JQuery selector | **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. diff --git a/css/toast.css b/css/toast.css index 15093ae..6c3ae29 100644 --- a/css/toast.css +++ b/css/toast.css @@ -3,25 +3,25 @@ * @description Toast - A Bootstrap 4.2+ jQuery plugin for the toast component * @version 0.7.1 **/ -#toast-container { +.toast-container { position: sticky; z-index: 1055; top: 0 } -#toast-wrapper { +.toast-wrapper { position: absolute; top: 0; right: 0; margin: 5px } -#toast-container>#toast-wrapper>.toast { +.toast-container>.toast-wrapper>.toast { min-width: 150px; background-color: rgb(255, 255, 255); border-top: none; } -#toast-container>#toast-wrapper>.toast>.toast-header strong { +.toast-container>.toast-wrapper>.toast>.toast-header strong { padding-right: 20px; -} \ No newline at end of file +} diff --git a/dist/toast.min.css b/dist/toast.min.css index f0baad4..18044e7 100644 --- a/dist/toast.min.css +++ b/dist/toast.min.css @@ -3,4 +3,4 @@ * @description Toast - A Bootstrap 4.2+ jQuery plugin for the toast component * @version 0.7.1 **/ -#toast-container{position:sticky;z-index:1055;top:0}#toast-wrapper{position:absolute;top:0;right:0;margin:5px}#toast-container>#toast-wrapper>.toast{min-width:150px;background-color:rgb(255,255,255);border-top:none;}#toast-container>#toast-wrapper>.toast>.toast-header strong{padding-right:20px} \ No newline at end of file +.toast-container{position:sticky;z-index:1055;top:0}.toast-wrapper{position:absolute;top:0;right:0;margin:5px}.toast-container > .toast-wrapper > .toast{min-width:150px;background-color:rgb(255, 255, 255);border-top:none}.toast-container > .toast-wrapper > .toast > .toast-header strong{padding-right:20px} diff --git a/dist/toast.min.js b/dist/toast.min.js index 52b1ff3..96838c7 100644 --- a/dist/toast.min.js +++ b/dist/toast.min.js @@ -3,7 +3,7 @@ * @description Toast - A Bootstrap 4.2+ jQuery plugin for the toast component * @version 0.7.1 **/ -(function(b){b.toast=function(c){b("#toast-container").length||(b("body").prepend('
'),b("#toast-container").append('
'),b("body").on("hidden.bs.toast",".toast",function(){b(this).remove()}));var h="toast-"+(b(".toast").length+1),a="",e=a="",f="text-muted",g="",q=c.title||"Notice!",r=c.subtitle||"",p=c.content||"",k=c.delay||-1,d=c.img,l=c.pause_on_hover||!1,m=!1,n="";switch(c.type||"info"){case "info":a= -"bg-info";g=f=e="text-white";break;case "success":a="bg-success";g=f=e="text-white";break;case "warning":case "warn":a="bg-warning";g=f=e="text-white";break;case "error":case "danger":a="bg-danger",g=f=e="text-white"}!1!==l?(c=Math.floor(Date.now()/1E3)+k/1E3,n='data-autohide="false"',l='data-hide-timestamp="'+c+'"'):n=-1===k?'data-autohide="false"':'data-delay="'+k+'"';a='";b("#toast-wrapper").append(a);b("#toast-wrapper .toast:last").toast("show");!1!==l&&(setTimeout(function(){m||b("#"+h).toast("hide")},k),b(document).on("mouseover","#"+h,function(){m=!0}),b(document).on("mouseleave","#"+h,function(){var a=Math.floor(Date.now()/1E3),c=parseInt(b(this).data("hide-timestamp"));m=!1;a>=c&&b(this).toast("hide")}))}})(jQuery); \ No newline at end of file + (function(c){c.toast=function(b){var d=c("body");b.container&&1===b.container.length&&(d=b.container);d.children(".toast-container").length||(d.prepend('
'),d.children(".toast-container").append('
'),d.on("hidden.bs.toast",".toast",function(){c(this).remove()}));d=d.children(".toast-container").children(".toast-wrapper");var k="toast-"+(c(".toast").length+1),a="",f=a="",g="text-muted",h="",r=b.title|| + "Notice!",t=b.subtitle||"",q=b.content||"",l=b.delay||-1,e=b.img,m=b.pause_on_hover||!1,n=!1,p="";switch(b.type||"info"){case "info":a="bg-info";h=g=f="text-white";break;case "success":a="bg-success";h=g=f="text-white";break;case "warning":case "warn":a="bg-warning";h=g=f="text-white";break;case "error":case "danger":a="bg-danger",h=g=f="text-white"}!1!==m?(b=Math.floor(Date.now()/1E3)+l/1E3,p='data-autohide="false"',m='data-hide-timestamp="'+b+'"'):p=-1===l?'data-autohide="false"':'data-delay="'+ + l+'"';a='";d.append(a);d.find(".toast:last").toast("show");!1!==m&&(setTimeout(function(){n||c("#"+k).toast("hide")},l),c(document).on("mouseover","#"+k,function(){n=!0}),c(document).on("mouseleave","#"+k,function(){var a=Math.floor(Date.now()/1E3),b=parseInt(c(this).data("hide-timestamp"));n=!1;a>=b&&c(this).toast("hide")}))}})(jQuery); diff --git a/example/index.html b/example/index.html index fe04110..8dd891f 100644 --- a/example/index.html +++ b/example/index.html @@ -20,6 +20,12 @@
+
+ + +
+

My container

+
@@ -90,7 +96,22 @@ delay: 5000 }); } + + function show_toast_in_container() { + let type = TYPES[Math.floor(Math.random() * TYPES.length)], + title = TITLES[type], + content = CONTENT[type]; + + $.toast({ + title: title, + subtitle: '11 mins ago', + content: content, + type: type, + delay: 5000, + container: $("#my_container") + }); + } - \ No newline at end of file + diff --git a/js/toast.js b/js/toast.js index 8227222..74575fd 100644 --- a/js/toast.js +++ b/js/toast.js @@ -4,18 +4,25 @@ * @version 0.7.1 **/ (function ($) { - var TOAST_CONTAINER_HTML = '
'; - var TOAST_WRAPPER_HTML = '
'; + var TOAST_CONTAINER_HTML = '
'; + var TOAST_WRAPPER_HTML = '
'; $.toast = function (opts) { - if (!$('#toast-container').length) { - $('body').prepend(TOAST_CONTAINER_HTML); - $('#toast-container').append(TOAST_WRAPPER_HTML); + // If container is not set in opts use body + var general_container = $('body'); + if (opts.container && opts.container.length === 1) + general_container = opts.container; - $('body').on('hidden.bs.toast', '.toast', function () { + // if toast container and wrapper are not present in container create them + if (!general_container.children('.toast-container').length) { + general_container.prepend(TOAST_CONTAINER_HTML); + general_container.children('.toast-container').append(TOAST_WRAPPER_HTML); + + general_container.on('hidden.bs.toast', '.toast', function () { $(this).remove(); }); } + var toast_wrapper = general_container.children('.toast-container').children('.toast-wrapper'); var id = 'toast-' + ($('.toast').length + 1), html = '', @@ -100,8 +107,8 @@ html += ''; - $('#toast-wrapper').append(html); - $('#toast-wrapper .toast:last').toast('show'); + toast_wrapper.append(html); + toast_wrapper.find('.toast:last').toast('show'); if (pause_on_hover !== false) { setTimeout(function () { @@ -126,4 +133,4 @@ }); } } -}(jQuery)); \ No newline at end of file +}(jQuery));