diff --git a/README.md b/README.md index 3d9e85e..652d2b2 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ * [About](#about) * [Usage](#usage) - * [Live Example](https://jsfiddle.net/j4dc86ky/) + * [Live Example](https://jsfiddle.net/e4nyhsL6/) * [Caveats](#caveats) * [Roadmap](#roadmap) * [Contributing](#contributing) @@ -23,6 +23,7 @@ You can pass to the `$.toast` function an object with the settings for your toas | 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 | **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/dist/toast.min.js b/dist/toast.min.js index 01827d5..52b5720 100644 --- a/dist/toast.min.js +++ b/dist/toast.min.js @@ -1,8 +1,9 @@ /** * @author Script47 (https://github.com/Script47/Toast) * @description Toast - A Bootstrap 4.2+ jQuery plugin for the toast component - * @version 0.6.0 + * @version 0.7.0 **/ -(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 +(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 diff --git a/example/index.html b/example/index.html index bc32cfb..fe04110 100644 --- a/example/index.html +++ b/example/index.html @@ -15,6 +15,8 @@
+ +

@@ -43,7 +45,7 @@ 'error': 'It all went wrong.' }; - function show_random_toast() { + function show_random_toast(pause_on_hover = false) { let type = TYPES[Math.floor(Math.random() * TYPES.length)], title = TITLES[type], content = CONTENT[type]; @@ -53,6 +55,7 @@ subtitle: '11 mins ago', content: content, type: type, + pause_on_hover: pause_on_hover, delay: 5000 }); } diff --git a/js/toast.js b/js/toast.js index 1567b94..32ac38c 100644 --- a/js/toast.js +++ b/js/toast.js @@ -1,11 +1,11 @@ /** * @author Script47 (https://github.com/Script47/Toast) * @description Toast - A Bootstrap 4.2+ jQuery plugin for the toast component - * @version 0.6.0 + * @version 0.7.0 **/ (function ($) { - const TOAST_CONTAINER_HTML = '
'; - const TOAST_WRAPPER_HTML = '
'; + var TOAST_CONTAINER_HTML = '
'; + var TOAST_WRAPPER_HTML = '
'; $.toast = function (opts) { if (!$('#toast-container').length) { @@ -17,7 +17,9 @@ }); } - let bg_header_class = '', + var id = 'toast-' + ($('.toast').length + 1), + html = '', + bg_header_class = '', fg_header_class = '', fg_subtitle_class = 'text-muted', fg_dismiss_class = '', @@ -26,7 +28,10 @@ content = opts.content || '', type = opts.type || 'info', delay = opts.delay || -1, - img = opts.img; + img = opts.img, + pause_on_hover = opts.pause_on_hover || false, + pause = false, + delay_or_autohide = ''; switch (type) { case 'info': @@ -60,15 +65,20 @@ break; } - let delay_or_autohide = ''; + if (pause_on_hover !== false) { + var hide_timestamp = Math.floor(Date.now() / 1000) + (delay / 1000); - if (delay === -1) { delay_or_autohide = 'data-autohide="false"'; + pause_on_hover = 'data-hide-timestamp="' + hide_timestamp + '"'; } else { - delay_or_autohide = 'data-delay="' + delay + '"'; + if (delay === -1) { + delay_or_autohide = 'data-autohide="false"'; + } else { + delay_or_autohide = 'data-delay="' + delay + '"'; + } } - let html = '