Merge pull request #124 from paulgv/keep-on-hover

Add keepOnHover option

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 <br> **['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

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);