From 275961ce71349ca284de0a948f50c9f532c96692 Mon Sep 17 00:00:00 2001 From: Paul Gascou-Vaillancourt Date: Mon, 22 Apr 2019 10:46:41 -0400 Subject: [PATCH] Add keepOnHover option When enabled, hovering on a visible toast prevents it from being closed by its timer. When the mouse leaves the element, the timer is resumed. --- README.md | 1 + src/js/show.js | 18 +++++++++++++++++- 2 files changed, 18 insertions(+), 1 deletion(-) 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 9bf4fce..5d74e65 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"; @@ -474,7 +477,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); @@ -500,6 +504,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);