Web Toasts

web_toast.js

import Toastify from 'toastify-js'; //https://github.com/apvarun/toastify-js/blob/master/README.md
import "toastify-js/src/toastify.css";

//To use:
//import toast from '../web_toast.js';
//toast(message,class(optional), options)
//My default is that the toast stays open until dismissed and defaults to bootstrap's "bg-info" if no class is specified.

//NOTE: In an SPA, you'll need to clear any persistent toasts on page switch
//use import {closeAll as clearToasts} from './web_toast.js';


var allToasts = [];
function newToast(text,className,options){
	const newToast = Toastify({
		text,
		duration: options && options.duration || -1, //-1 is stay open until close
		//destination: "https://github.com/apvarun/toastify-js",
		//newWindow: true,
		close: true,
		className,
		//gravity: "top", // `top` or `bottom`
		position: "center", // `left`, `center` or `right` //for mobile
		backgroundColor: "transparent" //unset/none - unset the defalt linear-gradient(to right, #00b09b, #96c93d)",
		//stopOnFocus: true, // Prevents dismissing of toast on hover
		//onClick: function(){} // Callback after click
		});
	allToasts.push(newToast);
	newToast.showToast();
	}

const map = {
	primary: 'bg-primary'
	,secondary: 'bg-secondary'

	,success: 'bg-success'
	,green: 'bg-success'

	,danger: 'bg-danger'
	,red: 'bg-danger'
	,error: 'bg-danger'

	,warning: 'bg-warning'
	,info: 'bg-info'
	,light: 'bg-light'
	,dark: 'bg-dark'
	,white: 'bg-white'
	}

export default function(text, type, options){
	if(type && map[type]) type=map[type];
	else type='bg-info';

	return newToast(text, type, options);
	}

export function closeAll(){
	allToasts.forEach(s=>s.hideToast());
	}