From d223d366d4fa3d329cf88898980e8d743de7de9d Mon Sep 17 00:00:00 2001 From: Andrea Dalla Costa Date: Thu, 4 Jul 2019 12:04:49 +0200 Subject: [PATCH 1/4] add container option. also the toast_container and toast_wrapper don't have the ids toast-container and toast-wrapper but instead have a class with the same name --- css/toast.css | 10 +++++----- js/toast.js | 25 ++++++++++++++++--------- 2 files changed, 21 insertions(+), 14 deletions(-) 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/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)); From 8b5816b4f41bb503a2ff444756055161ea870b2f Mon Sep 17 00:00:00 2001 From: Andrea Dalla Costa Date: Thu, 4 Jul 2019 12:05:46 +0200 Subject: [PATCH 2/4] update README --- README.md | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 652d2b2..d08df01 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. From 47c8750db529ad92d0ee0402c7648aa018da3b1b Mon Sep 17 00:00:00 2001 From: Andrea Dalla Costa Date: Thu, 4 Jul 2019 12:06:22 +0200 Subject: [PATCH 3/4] update example --- example/index.html | 23 ++++++++++++++++++++++- 1 file changed, 22 insertions(+), 1 deletion(-) 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 + From deb66a4509c779280016fc96f79865a35d6ebc3d Mon Sep 17 00:00:00 2001 From: Andrea Dalla Costa Date: Thu, 4 Jul 2019 12:09:01 +0200 Subject: [PATCH 4/4] update dist files --- dist/toast.min.css | 2 +- dist/toast.min.js | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) 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);