diff --git a/README.md b/README.md index 7cd371e..79bb7b5 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,10 @@ -# Toast - A Bootstrap 4.2+ jQuery plugin +# Toast - A Bootstrap 5.0+ jQuery plugin * [About](#about) * [Usage](#usage) * [Live Example](https://jsfiddle.net/47n5ygth/) + * [Live Demo Using Bootstrap 5](https://demo.halimlardjane.com/toast/) +* [Contributing](#contributing) * [Contributing](#contributing) ### About @@ -21,6 +23,7 @@ $.toastDefaults = { dismissible: true, /** true/false - If you want to show the button to dismiss the toast manually **/ stackable: true, /** true/false - If you want the toasts to be stackable **/ pauseDelayOnHover: true, /** true/false - If you want to pause the delay of toast when hovering over the toast **/ + width: 500, /** Integer - if you want to custom the size of the toast */ style: { toast: '', /** Classes you want to apply separated my a space to each created toast element (.toast) **/ info: '', /** Classes you want to apply separated my a space to modify the "info" type style **/ diff --git a/dist/toast.min.css b/dist/toast.min.css index 819cea8..087f4f3 100644 --- a/dist/toast.min.css +++ b/dist/toast.min.css @@ -1 +1 @@ -.toast-container{position:fixed;z-index:1055;margin:5px}.top-right{top:0;right:0}.top-left{top:0;left:0}.top-center{transform:translateX(-50%);top:0;left:50%}.bottom-right{right:0;bottom:0}.bottom-left{left:0;bottom:0}.bottom-center{transform:translateX(-50%);bottom:0;left:50%}.toast-container>.toast{min-width:150px;background:0 0;border:none}.toast-container>.toast>.toast-header{border:none}.toast-container>.toast>.toast-header strong{padding-right:20px}.toast-container>.toast>.toast-body{background:#fff} +.toast-container{position:fixed;z-index:1055;margin:5px}.toast-container.top-right{top:0;right:0}.toast-container.top-left{top:0;left:0}.toast-container.top-center{transform:translateX(-50%);top:0;left:50%}.toast-container.bottom-right{right:0;bottom:0}.toast-container.bottom-left{left:0;bottom:0}.toast-container.bottom-center{transform:translateX(-50%);bottom:0;left:50%}.toast-container>.toast{min-width:150px;background:0 0;border:none}.toast-container>.toast>.toast-header{border:none}.toast-container>.toast>.toast-header strong{padding-right:20px}.toast-container>.toast>.toast-body{background:#fff} \ No newline at end of file diff --git a/dist/toast.min.js b/dist/toast.min.js index 9960b28..2b2e10c 100644 --- a/dist/toast.min.js +++ b/dist/toast.min.js @@ -1,6 +1 @@ -(function(a){function f(b){if(!a("#toast-container").length){var d="top-right top-left top-center bottom-right bottom-left bottom-center".split(" ").includes(a.toastDefaults.position)?a.toastDefaults.position:"top-right";a("body").prepend('
');a("#toast-container").addClass(d)}d=a("#toast-container");var c="",e=c="",g=b.id||"toast-"+l,t=b.type,u=b.title,m=b.subtitle,n=b.content,h=b.img,p=b.delay?'data-delay="'+ - b.delay+'"':'data-autohide="false"',q="",r=a.toastDefaults.dismissible,v=a.toastDefaults.style.toast,k=!1;"undefined"!==typeof b.dismissible&&(r=b.dismissible);switch(t){case "info":e=a.toastDefaults.style.info||"bg-info";c=a.toastDefaults.style.info||"text-white";break;case "success":e=a.toastDefaults.style.success||"bg-success";c=a.toastDefaults.style.info||"text-white";break;case "warning":e=a.toastDefaults.style.warning||"bg-warning";c=a.toastDefaults.style.warning||"text-white";break;case "error":e= - a.toastDefaults.style.error||"bg-danger",c=a.toastDefaults.style.error||"text-white"}a.toastDefaults.pauseDelayOnHover&&b.delay&&(p='data-autohide="false"',q='data-hide-after="'+(Math.floor(Date.now()/1E3)+b.delay/1E3)+'"');c='";a.toastDefaults.stackable||d.find(".toast").each(function(){a(this).remove()});d.append(c);d.find(".toast:last").toast("show"); - a.toastDefaults.pauseDelayOnHover&&(setTimeout(function(){k||a("#"+g).toast("hide")},b.delay),a("body").on("mouseover","#"+g,function(){k=!0}),a(document).on("mouseleave","#"+g,function(){var w=Math.floor(Date.now()/1E3),x=parseInt(a(this).data("hideAfter"));k=!1;w>=x&&a(this).toast("hide")}));l++}a.toastDefaults={position:"top-right",dismissible:!0,stackable:!0,pauseDelayOnHover:!0,style:{toast:"",info:"",success:"",warning:"",error:""}};a("body").on("hidden.bs.toast",".toast",function(){a(this).remove()}); - var l=1;a.snack=function(b,d,c){return f({type:b,title:d,delay:c})};a.toast=function(b){return f(b)}})(jQuery); +!function(t){const e='
',s=["top-right","top-left","top-center","bottom-right","bottom-left","bottom-center"];t.toastDefaults={position:"top-right",dismissible:!0,stackable:!0,pauseDelayOnHover:!0,style:{toast:"",info:"",success:"",warning:"",error:""}},t("body").on("hidden.bs.toast",".toast",function(){t(this).remove()});let a=1;function o(o){const i=s.includes(o.position)?o.position:t.toastDefaults.position;if(!t("#toast-container-"+i).length){let s=e.replace('id="toast-container"','id="toast-container-'+i+'"');t("body").prepend(s),t("#toast-container-"+i).addClass(i)}let l=t("#toast-container-"+i),n="",r={header:{fg:"",bg:""},subtitle:"text-white",dismiss:""},d=o.id||`toast-${a}`,c=o.type,f=o.title,u=o.subtitle,h=o.content,b=o.img,g=o.delay?`data-delay="${o.delay}"`:'data-autohide="false"',y="",m=t.toastDefaults.dismissible,w=t.toastDefaults.style.toast,D=!1;switch(void 0!==o.dismissible&&(m=o.dismissible),c){case"info":r.header.bg=t.toastDefaults.style.info||"bg-info",r.header.fg=t.toastDefaults.style.info||"text-dark",r.subtitle="text-dark";break;case"success":r.header.bg=t.toastDefaults.style.success||"bg-success",r.header.fg=t.toastDefaults.style.info||"text-white",r.dismiss="btn-close-white";break;case"warning":r.header.bg=t.toastDefaults.style.warning||"bg-warning",r.header.fg=t.toastDefaults.style.warning||"text-dark",r.subtitle="text-dark";break;case"error":r.header.bg=t.toastDefaults.style.error||"bg-danger",r.header.fg=t.toastDefaults.style.error||"text-white",r.dismiss="btn-close-white";break;case"primary":r.header.bg=t.toastDefaults.style.info||"bg-primary",r.header.fg=t.toastDefaults.style.info||"text-white",r.dismiss="btn-close-white";break;case"secondary":r.header.bg=t.toastDefaults.style.info||"bg-secondary",r.header.fg=t.toastDefaults.style.info||"text-white",r.dismiss="btn-close-white";break;case"light":r.header.bg=t.toastDefaults.style.info||"bg-light",r.header.fg=t.toastDefaults.style.info||"text-dark";break;case"dark":r.header.bg=t.toastDefaults.style.info||"bg-dark",r.header.fg=t.toastDefaults.style.info||"text-white",r.dismiss="btn-close-white"}t.toastDefaults.pauseDelayOnHover&&o.delay&&(g='data-autohide="false"',y=`data-hide-after="${Math.floor(Date.now()/1e3)+o.delay/1e3}"`);let p=void 0!==o.width&&null!==o.width&&Number.isInteger(o.width)?o.width:null;n=`",t.toastDefaults.stackable?(l.append(n),l.find(".toast:last").toast("show")):(l.find(".toast").each(function(){t(this).remove()}),l.append(n),l.find(".toast:last").toast("show")),t.toastDefaults.pauseDelayOnHover&&(setTimeout(function(){D||t(`#${d}`).toast("hide")},o.delay),t("body").on("mouseover",`#${d}`,function(){D=!0}),t(document).on("mouseleave","#"+d,function(){const e=Math.floor(Date.now()/1e3),s=parseInt(t(this).data("hideAfter"));D=!1,e>=s&&t(this).toast("hide")})),a++}t.snack=function(t,e,s,a){return o({type:t,title:e,delay:s,width:a})},t.toast=function(t){return o(t)}}(jQuery); \ No newline at end of file diff --git a/example/index.html b/example/index.html index 56b217f..e6363e2 100644 --- a/example/index.html +++ b/example/index.html @@ -1,211 +1,270 @@ - - - - - - - - + + Toast + + + + + - -
-
-

Toast

-

A jQuery plugin for Bootstrap 4.2+

+
+
+
+

Toast

+

A jQuery plugin for Bootstrap 5.0+

+
+
+ + + + + + + + + +
+ + + + + + + + +
+ + + + + - - - + /** + * + */ + $('#toast4').click(function () { + $.toast({ + type: 'error', + title: 'Error!', + subtitle: '21 mins ago', + content: 'Hello, world! This is a toast message.', + delay: 2000, + position: 'bottom-right', + img: { + src: 'https://via.placeholder.com/20', + class: 'rounded-0', /** Classes you want to apply separated my a space to modify the image **/ + alt: 'Image' + } + }); + }); - - + diff --git a/package.json b/package.json index a0477cd..b3f40b1 100644 --- a/package.json +++ b/package.json @@ -1,14 +1,14 @@ { - "name": "bs4-toast", + "name": "bs5-toast", "version": "1.2.0", - "description": "Toast - A Bootstrap 4.2+ jQuery plugin for the toast component", + "description": "Toast - A Bootstrap 5.0+ jQuery plugin for the toast component", "main": "dist/toast.min.js", "repository": { "type": "git", "url": "git+https://github.com/Script47/Toast.git" }, "keywords": [ - "bootstrap-4", + "bootstrap-5", "bootstrap", "toast", "toast-notifications", @@ -22,7 +22,7 @@ }, "homepage": "https://github.com/Script47/Toast", "dependencies": { - "bootstrap": ">=4.2.0", + "bootstrap": ">=5.0.0", "jquery": ">=1.9.1" }, "devDependencies": {} diff --git a/src/css/toast.css b/src/css/toast.css index 8b32440..9e0a04c 100644 --- a/src/css/toast.css +++ b/src/css/toast.css @@ -1,6 +1,6 @@ /** * @author Script47 (https://github.com/Script47/Toast) - * @description Toast - A Bootstrap 4.2+ jQuery plugin for the toast component + * @description Toast - A Bootstrap 5.0+ jQuery plugin for the toast component * @version 1.2.0 **/ .toast-container { @@ -9,33 +9,33 @@ margin: 5px; } -.top-right { +.toast-container.top-right { top: 0; right: 0; } -.top-left { +.toast-container.top-left { top: 0; left: 0; } -.top-center { +.toast-container.top-center { transform: translateX(-50%); top: 0; left: 50%; } -.bottom-right { +.toast-container.bottom-right { right: 0; bottom: 0; } -.bottom-left { +.toast-container.bottom-left { left: 0; bottom: 0; } -.bottom-center { +.toast-container.bottom-center { transform: translateX(-50%); bottom: 0; left: 50%; diff --git a/src/js/toast.js b/src/js/toast.js index 5a5707d..5ad1d82 100644 --- a/src/js/toast.js +++ b/src/js/toast.js @@ -1,11 +1,14 @@ /** * @author Script47 (https://github.com/Script47/Toast) - * @description Toast - A Bootstrap 4.2+ jQuery plugin for the toast component + * @description Toast - A Bootstrap 5.0+ jQuery plugin for the toast component * @version 1.2.0 **/ (function ($) { + const TOAST_CONTAINER_HTML = `
`; + const supportedPositions = ['top-right', 'top-left', 'top-center', 'bottom-right', 'bottom-left', 'bottom-center']; + $.toastDefaults = { position: 'top-right', dismissible: true, @@ -28,14 +31,19 @@ function render(opts) { /** No container, create our own **/ - if (!$('#toast-container').length) { - const position = ['top-right', 'top-left', 'top-center', 'bottom-right', 'bottom-left', 'bottom-center'].includes($.toastDefaults.position) ? $.toastDefaults.position : 'top-right'; - $('body').prepend(TOAST_CONTAINER_HTML); - $('#toast-container').addClass(position); + const position = supportedPositions.includes(opts.position) ? opts.position : $.toastDefaults.position; + + if (!$('#toast-container-'+position).length) { + + let html_toast_container = TOAST_CONTAINER_HTML.replace('id="toast-container"', 'id="toast-container-'+position+'"'); + + $('body').prepend(html_toast_container); + + $('#toast-container-'+position).addClass(position); } - let toastContainer = $('#toast-container'); + let toastContainer = $('#toast-container-'+position); let html = ''; let classes = { header: { @@ -43,8 +51,9 @@ bg: '' }, subtitle: 'text-white', - dismiss: 'text-white' + dismiss: '' }; + let id = opts.id || `toast-${toastRunningCount}`; let type = opts.type; let title = opts.title; @@ -64,22 +73,49 @@ switch (type) { case 'info': classes.header.bg = $.toastDefaults.style.info || 'bg-info'; - classes.header.fg = $.toastDefaults.style.info || 'text-white'; + classes.header.fg = $.toastDefaults.style.info || 'text-dark'; //sara3 + classes.subtitle = 'text-dark'; break; case 'success': classes.header.bg = $.toastDefaults.style.success || 'bg-success'; classes.header.fg = $.toastDefaults.style.info || 'text-white'; + classes.dismiss = 'btn-close-white'; break; case 'warning': classes.header.bg = $.toastDefaults.style.warning || 'bg-warning'; - classes.header.fg = $.toastDefaults.style.warning || 'text-white'; + classes.header.fg = $.toastDefaults.style.warning || 'text-dark'; + classes.subtitle = 'text-dark'; break; case 'error': classes.header.bg = $.toastDefaults.style.error || 'bg-danger'; classes.header.fg = $.toastDefaults.style.error || 'text-white'; + classes.dismiss = 'btn-close-white'; + break; + + case 'primary': + classes.header.bg = $.toastDefaults.style.info || 'bg-primary'; + classes.header.fg = $.toastDefaults.style.info || 'text-white'; + classes.dismiss = 'btn-close-white'; + break; + + case 'secondary': + classes.header.bg = $.toastDefaults.style.info || 'bg-secondary'; + classes.header.fg = $.toastDefaults.style.info || 'text-white'; + classes.dismiss = 'btn-close-white'; + break; + + case 'light': + classes.header.bg = $.toastDefaults.style.info || 'bg-light'; + classes.header.fg = $.toastDefaults.style.info || 'text-dark'; + break; + + case 'dark': + classes.header.bg = $.toastDefaults.style.info || 'bg-dark'; + classes.header.fg = $.toastDefaults.style.info || 'text-white'; + classes.dismiss = 'btn-close-white'; break; } @@ -88,23 +124,28 @@ hideAfter = `data-hide-after="${Math.floor(Date.now() / 1000) + (opts.delay / 1000)}"`; } - html = `