diff --git a/README.md b/README.md index e1a1c54..e384add 100644 --- a/README.md +++ b/README.md @@ -181,6 +181,7 @@ below are the options you can pass to create a toast -----|-----|-----|----- position|String|'top-right'|Position of the toast container
**['top-right', 'top-center', 'top-left', 'bottom-right', 'bottom-center', 'bottom-left']** duration|Number|null|Display time of the toast in millisecond +keepOnHover|Boolean|false|When mouse is over a toast's element, the corresponding `duration` timer is paused until the cursor leaves the element action|Object, Array|null|Add single or multiple actions to toast [explained here](#actions--fire) fullWidth|Boolean|false|Enable Full Width fitToScreen|Boolean|false|Fits to Screen on Full Width diff --git a/src/js/show.js b/src/js/show.js index 18df0fa..25d94e9 100644 --- a/src/js/show.js +++ b/src/js/show.js @@ -43,6 +43,9 @@ const parseOptions = function (options) { // toast duration options.duration = options.duration || null; + // keep toast open on mouse over + options.keepOnHover = options.keepOnHover || false; + // normal type will allow the basic color options.theme = options.theme || "toasted-primary"; @@ -466,7 +469,8 @@ export default function (instance, message, options) { let timeLeft = options.duration; let counterInterval; if (timeLeft !== null) { - counterInterval = setInterval(function () { + + const createInterval = () => setInterval(function () { if (newToast.parentNode === null) window.clearInterval(counterInterval); @@ -492,6 +496,18 @@ export default function (instance, message, options) { window.clearInterval(counterInterval); } }, 20); + + counterInterval = createInterval(); + + // Toggle interval on hover + if (options.keepOnHover) { + newToast.addEventListener('mouseover', () => { + window.clearInterval(counterInterval); + }); + newToast.addEventListener('mouseout', () => { + counterInterval = createInterval(); + }); + } } return toastObject(newToast, _instance);