izitoast 1.1.1 → 1.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 459868307a4489ece61211b3137bd9c78c81c88a
-  data.tar.gz: 33c8b5aea7e02eb7fd81dbcd3d4e24aabf27792c
+  metadata.gz: 21e2c9991adaafe4f9aa92bf1d3bad62a94dd48a
+  data.tar.gz: 48f3507dd14d5eb13a8cf6e1b9a950d8597152f9
 SHA512:
-  metadata.gz: b61d837ca40732ec100d4da9b40a3d667e070278e4784ba3426c4e4f1165e6ca667a6c8d91fe88bdbad2578a91d088f06b43455f31d00a6ca7203e07c77d340c
-  data.tar.gz: 70810c709c4f98787857ee7cc47bc17212887982f9e2cbb06c10c820b4c8b3753559df1202901f2243be67f7c728235b019ed23adebdbe757ccfa9d7191bb83e
+  metadata.gz: 49b942abd214ae947fda56ebc2b233fa37fc313ca245776f813856967aabec92ba966b750f670fb2009aa88a037283551173633e292a600da955f2d1d3833779
+  data.tar.gz: 50448bde1f7a9cead6089f1cf6f82c97b87ae45fe26b65cce9ec0933372191c26e608d5cf6a6a7eccbd876b40c6e66741527d0430e3eec15f462647e58491a11

data/README.md

@@ -1,6 +1,6 @@
 # Izitoast
 
-Simple wrapper around [IZITOAST](http://izitoast.marcelodolce.com) js notification plugin [visit Authors website.](https://www.google.com "Marcelo Dolce")
+Simple wrapper around [IZITOAST](https://github.com/dolce/iziToast) js notification plugin [visit Authors website.](http://izitoast.marcelodolce.com)
 
 
 ## Installation
@@ -41,11 +41,11 @@ iziToast.success({
 
 You will see notification in the bottom-right corner of your browser.
 
-To find more about usage options, please [visit Authors website.](https://www.google.com "Marcelo Dolce")
+To find more about usage options, please [visit Authors website.](http://izitoast.marcelodolce.com)
 
 ## Contributing
 
-Bug reports and pull requests are welcome on GitHub at https://github.com/BadAllOff/izitoast. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.
+Bug reports and pull requests are welcome on GitHub at https://github.com/BadAllOff/iziToast-rails. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.
 
 
 ## License

data/lib/izitoast/version.rb

@@ -1,3 +1,3 @@
 module Izitoast
-  VERSION = "1.1.1"
+  VERSION = "1.2.0"
 end

data/vendor/assets/javascripts/iziToast.js

@@ -1,17 +1,17 @@
 /*
-* iziToast | v1.1.1
+* iziToast | v1.2.0
 * http://izitoast.marcelodolce.com
 * by Marcelo Dolce.
 */
 (function (root, factory) {
-	if (typeof define === 'function' && define.amd) {
+	if(typeof define === 'function' && define.amd) {
 		define([], factory(root));
-	} else if (typeof exports === 'object') {
+	} else if(typeof exports === 'object') {
 		module.exports = factory(root);
 	} else {
 		root.iziToast = factory(root);
 	}
-})(typeof global !== "undefined" ? global : this.window || this.global, function (root) {
+})(typeof global !== 'undefined' ? global : window || this.window || this.global, function (root) {
 
 	'use strict';
 
@@ -28,61 +28,81 @@
 		POSITIONS = ['bottomRight','bottomLeft','bottomCenter','topRight','topLeft','topCenter','center'],
 		THEMES = {
 			info: {
-				color: "blue",
-				icon: "ico-info"
+				color: 'blue',
+				icon: 'ico-info'
 			},
 			success: {
-				color: "green",
-				icon: "ico-check",
+				color: 'green',
+				icon: 'ico-success'
 			},
 			warning: {
-				color: "yellow",
-				icon: "ico-warning",
+				color: 'orange',
+				icon: 'ico-warning'
 			},
 			error: {
-				color: "red",
-				icon: "ico-error",
+				color: 'red',
+				icon: 'ico-error'
+			},
+			question: {
+				color: 'yellow',
+				icon: 'ico-question'
 			}
 		},
 		MOBILEWIDTH = 568,
 		CONFIG = {};
 
+
 	// Default settings
 	var defaults = {
+		id: null, 
 		class: '',
 		title: '',
 		titleColor: '',
+		titleSize: '',
+		titleLineHeight: '',
 		message: '',
 		messageColor: '',
+		messageSize: '',
+		messageLineHeight: '',
 		backgroundColor: '',
+		theme: 'light', // dark
 		color: '', // blue, red, green, yellow
 		icon: '',
 		iconText: '',
 		iconColor: '',
 		image: '',
 		imageWidth: 50,
-		zindex: 99999,
+		maxWidth: null,
+		zindex: null,
 		layout: 1,
 		balloon: false,
 		close: true,
+		closeOnEscape: false,
 		rtl: false,
 		position: 'bottomRight', // bottomRight, bottomLeft, topRight, topLeft, topCenter, bottomCenter, center
 		target: '',
 		targetFirst: true,
+		toastOnce: false,
 		timeout: 5000,
+		animateInside: true,
 		drag: true,
 		pauseOnHover: true,
 		resetOnHover: false,
 		progressBar: true,
 		progressBarColor: '',
-		animateInside: true,
-		buttons: {},
+		progressBarEasing: 'linear',
+		overlay: false,
+		overlayClose: false,
+		overlayColor: 'rgba(0, 0, 0, 0.6)',
 		transitionIn: 'fadeInUp', // bounceInLeft, bounceInRight, bounceInUp, bounceInDown, fadeIn, fadeInDown, fadeInUp, fadeInLeft, fadeInRight, flipInX
 		transitionOut: 'fadeOut', // fadeOut, fadeOutUp, fadeOutDown, fadeOutLeft, fadeOutRight, flipOutX
 		transitionInMobile: 'fadeInUp',
 		transitionOutMobile: 'fadeOutDown',
-		onOpen: function () {},
-		onClose: function () {}
+		buttons: {},
+		onOpening: function () {},
+		onOpened: function () {},
+		onClosing: function () {},
+		onClosed: function () {}
 	};
 
 	//
@@ -93,14 +113,31 @@
 	/**
 	 * Polyfill for remove() method
 	 */
-	if (!('remove' in Element.prototype)) {
+	if(!('remove' in Element.prototype)) {
 	    Element.prototype.remove = function() {
-	        if (this.parentNode) {
+	        if(this.parentNode) {
 	            this.parentNode.removeChild(this);
 	        }
 	    };
 	}
 
+	/*
+     * Polyfill for CustomEvent for IE >= 9
+     * https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent#Polyfill
+     */
+    if(typeof window.CustomEvent !== 'function') {
+        var CustomEventPolyfill = function (event, params) {
+            params = params || { bubbles: false, cancelable: false, detail: undefined };
+            var evt = document.createEvent('CustomEvent');
+            evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
+            return evt;
+        };
+
+        CustomEventPolyfill.prototype = window.Event.prototype;
+
+        window.CustomEvent = CustomEventPolyfill;
+    } 
+
 	/**
 	 * A simple forEach() implementation for Arrays, Objects and NodeLists
 	 * @private
@@ -109,9 +146,9 @@
 	 * @param {Array|Object|NodeList} scope Object/NodeList/Array that forEach is iterating over (aka `this`)
 	 */
 	var forEach = function (collection, callback, scope) {
-		if (Object.prototype.toString.call(collection) === '[object Object]') {
+		if(Object.prototype.toString.call(collection) === '[object Object]') {
 			for (var prop in collection) {
-				if (Object.prototype.hasOwnProperty.call(collection, prop)) {
+				if(Object.prototype.hasOwnProperty.call(collection, prop)) {
 					callback.call(scope, collection[prop], prop, collection);
 				}
 			}
@@ -163,7 +200,7 @@
 	 * @private
 	 */
 	var isColor = function(color){
-		if( color.substring(0,1) == "#" || color.substring(0,3) == "rgb" || color.substring(0,3) == "hsl" ){
+		if( color.substring(0,1) == '#' || color.substring(0,3) == 'rgb' || color.substring(0,3) == 'hsl' ){
 			return true;
 		} else {
 			return false;
@@ -171,6 +208,19 @@
 	};
 
 
+	/**
+	 * Check if is a Base64 string
+	 * @private
+	 */
+	var isBase64 = function(str) {
+	    try {
+	        return btoa(atob(str)) == str;
+	    } catch (err) {
+	        return false;
+	    }
+	};
+
+
 	/**
 	 * Drag method of toasts
 	 * @private
@@ -184,30 +234,36 @@
 	        		opacityRange = 0.3,
 	        		distance = 180;
 	            
-	            toast.style.transform = 'translateX('+xpos + 'px)';
+	            if(xpos !== 0){
+	            	
+	            	toast.classList.add(PLUGIN_NAME+'-dragged');
+
+	            	toast.style.transform = 'translateX('+xpos + 'px)';
+
+		            if(xpos > 0){
+		            	opacity = (distance-xpos) / distance;
+		            	if(opacity < opacityRange){
+							instance.hide(toast, extend(settings, { transitionOut: 'fadeOutRight', transitionOutMobile: 'fadeOutRight' }), 'drag');
+						}
+		            } else {
+		            	opacity = (distance+xpos) / distance;
+		            	if(opacity < opacityRange){
+							instance.hide(toast, extend(settings, { transitionOut: 'fadeOutLeft', transitionOutMobile: 'fadeOutLeft' }), 'drag');
+						}
+		            }
+					toast.style.opacity = opacity;
+			
+					if(opacity < opacityRange){
 
-	            if(xpos > 0){
-	            	opacity = (distance-xpos) / distance;
-	            	if(opacity < opacityRange){
-						instance.hide(extend(settings, { transitionOut: 'fadeOutRight', transitionOutMobile: 'fadeOutRight' }), toast, 'drag');
-					}
-	            } else {
-	            	opacity = (distance+xpos) / distance;
-	            	if(opacity < opacityRange){
-						instance.hide(extend(settings, { transitionOut: 'fadeOutLeft', transitionOutMobile: 'fadeOutLeft' }), toast, 'drag');
-					}
-	            }
-				toast.style.opacity = opacity;
-		
-				if(opacity < opacityRange){
+						if(ISCHROME || ISFIREFOX)
+							toast.style.left = xpos+'px';
 
-					if(ISCHROME || ISFIREFOX)
-						toast.style.left = xpos+'px';
+						toast.parentNode.style.opacity = opacityRange;
 
-					toast.parentNode.style.opacity = opacityRange;
+		                this.stopMoving(toast, null);
+					}
+	            }
 
-	                this.stopMoving(toast, null);
-				}
 				
 	        },
 	        startMoving: function(toast, instance, settings, e) {
@@ -220,9 +276,9 @@
 
 				toast.classList.remove(settings.transitionIn);
 				toast.classList.remove(settings.transitionInMobile);
-				toast.style.transition = "";
+				toast.style.transition = '';
 
-	            if (ACCEPTSTOUCH) {
+	            if(ACCEPTSTOUCH) {
 	                document.ontouchmove = function(e) {
 	                    e.preventDefault();
 	                    e = e || window.event;
@@ -243,75 +299,31 @@
 	        },
 	        stopMoving: function(toast, e) {
 
-	            if (ACCEPTSTOUCH) {
+	            if(ACCEPTSTOUCH) {
 	                document.ontouchmove = function() {};
 	            } else {
 	            	document.onmousemove = function() {};
 	            }
-				toast.style.transition = "transform 0.4s ease, opacity 0.4s ease";
-				toast.style.opacity = "";
-				toast.style.transform = "";
-				window.setTimeout(function() {
-					toast.style.transition = "";
-				}, 400);
+
+				toast.style.opacity = '';
+				toast.style.transform = '';
+
+	            if(toast.classList.contains(PLUGIN_NAME+'-dragged')){
+	            	
+	            	toast.classList.remove(PLUGIN_NAME+'-dragged');
+
+					toast.style.transition = 'transform 0.4s ease, opacity 0.4s ease';
+					setTimeout(function() {
+						toast.style.transition = '';
+					}, 400);
+	            }
+
 	        }
 	    };
 
 	}();
 
 
-	/**
-	 * Do the calculation to move the progress bar
-	 * @private
-	 */
-	var moveProgress = function(toast, settings, callback){
-
-		var isPaused = false;
-		var isReseted = false;
-		var isClosed = false;
-		var timerTimeout = null;
-		var elem = toast.querySelector("."+PLUGIN_NAME+"-progressbar div");
-		var progressBar = {
-			hideEta: null,
-			maxHideTime: null,
-			currentTime: new Date().getTime(),
-			updateProgress: function()
-			{
-				isPaused = toast.classList.contains(PLUGIN_NAME+'-paused') ? true : false;
-				isReseted = toast.classList.contains(PLUGIN_NAME+'-reseted') ? true : false;
-				isClosed = toast.classList.contains(PLUGIN_NAME+'-closed') ? true : false;
-
-				if(isReseted){
-					clearTimeout(timerTimeout);
-					elem.style.width = '100%';
-					moveProgress(toast, settings, callback);
-					toast.classList.remove(PLUGIN_NAME+'-reseted');
-				}
-				if(isClosed){
-					clearTimeout(timerTimeout);
-					toast.classList.remove(PLUGIN_NAME+'-closed');
-				}
-
-				if(!isPaused && !isReseted && !isClosed){
-					progressBar.currentTime = progressBar.currentTime+10;
-					var percentage = ((progressBar.hideEta - (progressBar.currentTime)) / progressBar.maxHideTime) * 100;
-					elem.style.width = percentage + '%';
-
-					if(Math.round(percentage) < 0 || typeof toast != 'object'){
-						clearTimeout(timerTimeout);
-						callback.apply();
-					}
-				}
-
-			}
-		};
-		if (settings.timeout > 0) {
-			progressBar.maxHideTime = parseFloat(settings.timeout);
-			progressBar.hideEta = new Date().getTime() + progressBar.maxHideTime;
-			timerTimeout = setInterval(progressBar.updateProgress, 10);
-		}
-	};
-
 	/**
 	 * Destroy the current initialization.
 	 * @public
@@ -327,8 +339,11 @@
 		});
 
 		// Remove event listeners
-		document.removeEventListener(PLUGIN_NAME+'-open', {}, false);
-		document.removeEventListener(PLUGIN_NAME+'-close', {}, false);
+		document.removeEventListener(PLUGIN_NAME+'-opened', {}, false);
+		document.removeEventListener(PLUGIN_NAME+'-opening', {}, false);
+		document.removeEventListener(PLUGIN_NAME+'-closing', {}, false);
+		document.removeEventListener(PLUGIN_NAME+'-closed', {}, false);
+		document.removeEventListener('keyup', {}, false);
 
 		// Reset variables
 		CONFIG = {};
@@ -367,20 +382,151 @@
 	});
 
 
+	/**
+	 * Do the calculation to move the progress bar
+	 * @private
+	 */
+	 $iziToast.progress = function ($toast, options, callback) {
+
+		var that = this,
+			settings = extend(that.settings, options || {}),
+			$elem = $toast.querySelector('.'+PLUGIN_NAME+'-progressbar div');
+
+	    return {
+	        start: function() {
+
+	        	if($elem !== null){
+					$elem.style.transition = 'width '+ settings.timeout +'ms '+settings.progressBarEasing;
+					$elem.style.width = '0%';
+				}
+	        	settings.TIME.START = new Date().getTime();
+	        	settings.TIME.END = settings.TIME.START + settings.timeout;
+				settings.TIME.TIMER = setTimeout(function() {
+
+					clearTimeout(settings.TIME.TIMER);
+
+					if(!$toast.classList.contains(PLUGIN_NAME+'-closing')){
+
+						that.hide($toast, settings, 'timeout');
+
+						if(typeof callback === 'function'){
+							callback.apply(that);
+						}
+					}
+
+				}, settings.timeout);
+				
+	        },
+	        pause: function() {
+
+				settings.TIME.REMAINING = settings.TIME.END - new Date().getTime();
+
+				clearTimeout(settings.TIME.TIMER);
+
+				if($elem !== null){
+					var computedStyle = window.getComputedStyle($elem),
+						propertyWidth = computedStyle.getPropertyValue('width');
+
+					$elem.style.transition = 'none';
+					$elem.style.width = propertyWidth;					
+				}
+
+				if(typeof callback === 'function'){
+					setTimeout(function() {
+						callback.apply(that);						
+					}, 10);
+				}
+
+	        },
+	        resume: function() {
+
+	        	if($elem !== null){
+					$elem.style.transition = 'width '+ settings.TIME.REMAINING +'ms '+settings.progressBarEasing;
+					$elem.style.width = '0%';
+				}
+
+	        	settings.TIME.END = new Date().getTime() + settings.TIME.REMAINING;
+				settings.TIME.TIMER = setTimeout(function() {
+
+					clearTimeout(settings.TIME.TIMER);
+
+					if(!$toast.classList.contains(PLUGIN_NAME+'-closing')){
+
+						that.hide($toast, settings, 'timeout');
+
+						if(typeof callback === 'function'){
+							callback.apply(that);
+						}
+					}
+
+
+				}, settings.TIME.REMAINING);
+
+	        },
+	        reset: function(){
+
+				clearTimeout(settings.TIME.TIMER);
+
+				if($elem !== null){
+					$elem.style.transition = 'none';
+					$elem.style.width = '100%';
+				}
+
+				if(typeof callback === 'function'){
+					setTimeout(function() {
+						callback.apply(that);						
+					}, 10);
+				}
+
+	        }
+	    };
+
+	};
+
+
 	/**
 	 * Close the specific Toast
 	 * @public
 	 * @param {Object} options User settings
 	 */
-	$iziToast.hide = function (options, $toast, closedBy) {
+	$iziToast.hide = function ($toast, options, closedBy) {
 
-		var settings = extend(defaults, options || {});
-			closedBy = closedBy || false;
+		var settings = extend(this.settings, options || {});
+			closedBy = closedBy || null;
 
 		if(typeof $toast != 'object'){
 			$toast = document.querySelector($toast);
 		}
-		$toast.classList.add(PLUGIN_NAME+'-closed');
+
+		$toast.classList.add(PLUGIN_NAME+'-closing');
+
+		settings.closedBy = closedBy;
+		settings.REF = $toast.getAttribute('data-iziToast-ref');
+
+		// Overlay
+		(function(){
+
+			var $overlay = document.querySelector('.'+PLUGIN_NAME+'-overlay');
+			if($overlay !== null){
+				var refs = $overlay.getAttribute('data-iziToast-ref');		
+					refs = refs.split(',');
+				var index = refs.indexOf(settings.REF);
+
+				if(index !== -1){
+					refs.splice(index, 1);			
+				}
+				$overlay.setAttribute('data-iziToast-ref', refs.join());
+
+				if(refs.length === 0){
+					$overlay.classList.remove('fadeIn');
+					$overlay.classList.add('fadeOut');
+					setTimeout(function() {
+						$overlay.remove();
+					}, 700);
+				}
+			}
+
+		})();
 
 		if(settings.transitionIn || settings.transitionInMobile){
 			$toast.classList.remove(settings.transitionIn);
@@ -390,7 +536,7 @@
 		if(ISMOBILE || window.innerWidth <= MOBILEWIDTH){
 			if(settings.transitionOutMobile)
 				$toast.classList.add(settings.transitionOutMobile);
-		} else{
+		} else {
 			if(settings.transitionOut)
 				$toast.classList.add(settings.transitionOut);
 		}
@@ -402,31 +548,40 @@
 			$toast.parentNode.style.transitionDelay = '0.2s';
 		}
 
+		try {
+			settings.closedBy = closedBy;
+			var event = new CustomEvent(PLUGIN_NAME+'-closing', {detail: settings, bubbles: true, cancelable: true});
+			document.dispatchEvent(event);
+		} catch(ex){
+			console.warn(ex);
+		}
+
 		setTimeout(function() {
+			
 			$toast.parentNode.style.height = '0px';
 			$toast.parentNode.style.overflow = '';
-			window.setTimeout(function(){
+
+			setTimeout(function(){
+				
 				$toast.parentNode.remove();
-			},1000);
-		},200);
+				try {
+					settings.closedBy = closedBy;
+					var event = new CustomEvent(PLUGIN_NAME+'-closed', {detail: settings, bubbles: true, cancelable: true});
+					document.dispatchEvent(event);
+				} catch(ex){
+					console.warn(ex);
+				}
 
-		if (settings.class){
-			try {
-				var event;
-				if (window.CustomEvent) {
-					event = new CustomEvent(PLUGIN_NAME+'-close', {detail: {class: settings.class}});
-				} else {
-					event = document.createEvent('CustomEvent');
-					event.initCustomEvent(PLUGIN_NAME+'-close', true, true, {class: settings.class});
+				if(typeof settings.onClosed !== 'undefined'){
+					settings.onClosed.apply(null, [settings, $toast, closedBy]);
 				}
-				document.dispatchEvent(event);
-			} catch(ex){
-				console.warn(ex);
-			}
-		}
 
-		if(typeof settings.onClose !== "undefined"){
-			settings.onClose.apply(null, [settings, $toast, closedBy]);
+			}, 1000);
+		}, 200);
+
+
+		if(typeof settings.onClosing !== 'undefined'){
+			settings.onClosing.apply(null, [settings, $toast, closedBy]);
 		}
 	};
 
@@ -443,349 +598,542 @@
 		var settings = extend(CONFIG, options || {});
 			settings = extend(defaults, settings);
 
-		var $toastCapsule = document.createElement("div");
-			$toastCapsule.classList.add(PLUGIN_NAME+"-capsule");
-
-		var $toast = document.createElement("div");
-			$toast.classList.add(PLUGIN_NAME);
+			settings.TIME = {};
 
-		if(ISMOBILE || window.innerWidth <= MOBILEWIDTH){
-			if(settings.transitionInMobile.length>0)
-				$toast.classList.add(settings.transitionInMobile);
-		} else {
-			if(settings.transitionIn.length>0)
-				$toast.classList.add(settings.transitionIn);
+		if(settings.toastOnce && settings.id && document.querySelectorAll('.'+PLUGIN_NAME+'#'+settings.id).length > 0){
+			return false;
 		}
 
-		if(settings.rtl){
-			$toast.classList.add(PLUGIN_NAME + '-rtl');
-		}
+		settings.REF = new Date().getTime() + Math.floor((Math.random() * 10000000) + 1);
+
+		var $DOM = {
+			body: document.querySelector('body'),
+			overlay: document.createElement('div'),
+			toast: document.createElement('div'),
+			toastBody: document.createElement('div'),
+			toastTexts: document.createElement('div'),
+			toastCapsule: document.createElement('div'),
+			icon: document.createElement('i'),
+			cover: document.createElement('div'),
+			buttons: document.createElement('div'),
+			wrapper: null
+		};
 
-		if (settings.color.length > 0) { //#, rgb, rgba, hsl
-			
-			if( isColor(settings.color) ){
-				$toast.style.background = settings.color;
-			} else {
-				$toast.classList.add(PLUGIN_NAME+'-color-'+settings.color);
-			}
-		}
-		if (settings.backgroundColor.length > 0) {
-			$toast.style.background = settings.backgroundColor;
-		}
+		$DOM.toast.setAttribute('data-iziToast-ref', settings.REF);
+		$DOM.toast.appendChild($DOM.toastBody);
+		$DOM.toastCapsule.appendChild($DOM.toast);
 
-		if (settings.class){
-			$toast.classList.add(settings.class);
-		}
+		// CSS Settings
+		(function(){
 
-		if (settings.image) {
-			var $cover = document.createElement("div");
-			$cover.classList.add(PLUGIN_NAME + '-cover');
-			$cover.style.width = settings.imageWidth + "px";
-			$cover.style.backgroundImage = 'url(' + settings.image + ')';
-			$toast.appendChild($cover);
-		}
+			$DOM.toast.classList.add(PLUGIN_NAME);
+			$DOM.toast.classList.add(PLUGIN_NAME+'-opening');
+			$DOM.toastCapsule.classList.add(PLUGIN_NAME+'-capsule');
+			$DOM.toastBody.classList.add(PLUGIN_NAME + '-body');
+			$DOM.toastTexts.classList.add(PLUGIN_NAME + '-texts');
 
-		var $buttonClose;
-		if(settings.close){
-			$buttonClose = document.createElement("button");
-			$buttonClose.classList.add(PLUGIN_NAME + '-close');
-			$toast.appendChild($buttonClose);
-		} else {
-			if(settings.rtl){
-				$toast.style.paddingLeft = "30px";
+			if(ISMOBILE || window.innerWidth <= MOBILEWIDTH){
+				if(settings.transitionInMobile)
+					$DOM.toast.classList.add(settings.transitionInMobile);
 			} else {
-				$toast.style.paddingRight = "30px";
+				if(settings.transitionIn)
+					$DOM.toast.classList.add(settings.transitionIn);
 			}
-		}
 
-		if (settings.progressBar) {
+			if(settings.class){
+				var classes = settings.class.split(' ');
+				forEach(classes, function (value, index) {
+					$DOM.toast.classList.add(value);
+				});
+			}
 
-			var $progressBar = document.createElement("div");
-				$progressBar.classList.add(PLUGIN_NAME + '-progressbar');
+			if(settings.id){ $DOM.toast.id = settings.id; }
 
-			var $progressBarDiv = document.createElement("div");
-				$progressBarDiv.style.background = settings.progressBarColor;
+			if(settings.rtl){ $DOM.toast.classList.add(PLUGIN_NAME + '-rtl'); }
 
-			$progressBar.appendChild($progressBarDiv);
-			$toast.appendChild($progressBar);
-			
-			setTimeout(function() {
-				moveProgress($toast, settings, function(){
-					that.hide(settings, $toast);
-				});
-			},300);
-		}
-		else if( settings.progressBar === false && settings.timeout > 0){
-			setTimeout(function() {
-				that.hide(settings, $toast);
-			}, settings.timeout);
-		}
+			if(settings.layout > 1){ $DOM.toast.classList.add(PLUGIN_NAME+'-layout'+settings.layout); }
 
-		var $toastBody = document.createElement("div");
-			$toastBody.classList.add(PLUGIN_NAME + '-body');
+			if(settings.balloon){ $DOM.toast.classList.add(PLUGIN_NAME+'-balloon'); }
 
-		if (settings.image) {
-			if(settings.rtl){
-				$toastBody.style.marginRight = (settings.imageWidth + 10) + 'px';
-			} else {
-				$toastBody.style.marginLeft = (settings.imageWidth + 10) + 'px';				
+			if(settings.maxWidth){
+				if( !isNaN(settings.maxWidth) ){
+					$DOM.toast.style.maxWidth = settings.maxWidth+'px';
+				} else {
+					$DOM.toast.style.maxWidth = settings.maxWidth;
+				}
 			}
-		}
 
-		if (settings.icon) {
-			var $icon = document.createElement("i");
-				$icon.setAttribute("class", PLUGIN_NAME + '-icon ' + settings.icon);
-			
-			if (settings.iconText){
-				$icon.appendChild(document.createTextNode(settings.iconText));
+			if(settings.theme !== '' || settings.theme !== 'light') {
+
+				$DOM.toast.classList.add(PLUGIN_NAME+'-theme-'+settings.theme);
 			}
 
-			if(settings.rtl){
-				$toastBody.style.paddingRight = '33px';
+			if(settings.color) { //#, rgb, rgba, hsl
+				
+				if( isColor(settings.color) ){
+					$DOM.toast.style.background = settings.color;
+				} else {
+					$DOM.toast.classList.add(PLUGIN_NAME+'-color-'+settings.color);
+				}
+			}
+
+			if(settings.backgroundColor) {
+				$DOM.toast.style.background = settings.backgroundColor;
+				if(settings.balloon){
+					$DOM.toast.style.borderColor = settings.backgroundColor;				
+				}
+			}
+		})();
+
+		// Cover image
+		(function(){
+			if(settings.image) {
+				$DOM.cover.classList.add(PLUGIN_NAME + '-cover');
+				$DOM.cover.style.width = settings.imageWidth + 'px';
+
+				if(isBase64(settings.image.replace(/ /g,''))){
+					$DOM.cover.style.backgroundImage = 'url(data:image/png;base64,' + settings.image.replace(/ /g,'') + ')';
+				} else {
+					$DOM.cover.style.backgroundImage = 'url(' + settings.image + ')';
+				}
+
+				if(settings.rtl){
+					$DOM.toastBody.style.marginRight = (settings.imageWidth + 10) + 'px';
+				} else {
+					$DOM.toastBody.style.marginLeft = (settings.imageWidth + 10) + 'px';				
+				}
+				$DOM.toast.appendChild($DOM.cover);
+			}
+		})();
+
+		// Button close
+		(function(){
+			if(settings.close){
+				
+				$DOM.buttonClose = document.createElement('button');
+
+				$DOM.buttonClose.classList.add(PLUGIN_NAME + '-close');
+				$DOM.buttonClose.addEventListener('click', function (e) {
+					var button = e.target;
+					that.hide($DOM.toast, settings, 'button');
+				});
+				$DOM.toast.appendChild($DOM.buttonClose);
 			} else {
-				$toastBody.style.paddingLeft = '33px';				
+				if(settings.rtl){
+					$DOM.toast.style.paddingLeft = '20px';
+				} else {
+					$DOM.toast.style.paddingRight = '20px';
+				}
 			}
-			
-			if (settings.iconColor){
-				$icon.style.color = settings.iconColor;
+		})();
+
+		// Progress Bar & Timeout
+		(function(){
+			if(settings.timeout) {
+
+				if(settings.progressBar){
+					$DOM.progressBar = document.createElement('div');
+					$DOM.progressBarDiv = document.createElement('div');
+					$DOM.progressBar.classList.add(PLUGIN_NAME + '-progressbar');
+					$DOM.progressBarDiv.style.background = settings.progressBarColor;
+					$DOM.progressBar.appendChild($DOM.progressBarDiv);
+					$DOM.toast.appendChild($DOM.progressBar);
+				}
+
+				if(settings.pauseOnHover && !settings.resetOnHover){
+					
+					$DOM.toast.addEventListener('mouseenter', function (e) {
+						this.classList.add(PLUGIN_NAME+'-paused');
+
+						that.progress($DOM.toast, settings).pause();
+					});
+					$DOM.toast.addEventListener('mouseleave', function (e) {
+						this.classList.remove(PLUGIN_NAME+'-paused');
+
+						that.progress($DOM.toast, settings).resume();
+					});
+				}
+
+				if(settings.resetOnHover){
+
+					$DOM.toast.addEventListener('mouseenter', function (e) {
+						this.classList.add(PLUGIN_NAME+'-reseted');
+
+						that.progress($DOM.toast, settings).reset();
+					});
+					$DOM.toast.addEventListener('mouseleave', function (e) {
+						this.classList.remove(PLUGIN_NAME+'-reseted');
+
+						that.progress($DOM.toast, settings).start();
+					});
+				}
 			}
-			$toastBody.appendChild($icon);
-		}
+		})();
 
-		var $strong = document.createElement("strong");
-		if (settings.titleColor.length > 0) {
-			$strong.style.color = settings.titleColor;
-		}
-		$strong.appendChild(createFragElem(settings.title));
+		// Icon
+		(function(){
+			if(settings.icon) {
+				$DOM.icon.setAttribute('class', PLUGIN_NAME + '-icon ' + settings.icon);
+				
+				if(settings.iconText){
+					$DOM.icon.appendChild(document.createTextNode(settings.iconText));
+				}
 
-		var $p = document.createElement("p");
-		if (settings.messageColor.length > 0) {
-			$p.style.color = settings.messageColor;
-		}
-		$p.appendChild(createFragElem(settings.message));
+				if(settings.rtl){
+					$DOM.toastBody.style.paddingRight = '33px';
+				} else {
+					$DOM.toastBody.style.paddingLeft = '33px';				
+				}
+				
+				if(settings.iconColor){
+					$DOM.icon.style.color = settings.iconColor;
+				}
+				$DOM.toastBody.appendChild($DOM.icon);
+			}
+		})();
 
-		if(settings.layout > 1){
-			$toast.classList.add(PLUGIN_NAME+"-layout"+settings.layout);
-		}
+		// Title
+		(function(){
+			if(settings.title.length > 0) {
+
+				$DOM.strong = document.createElement('strong');
+				$DOM.strong.classList.add(PLUGIN_NAME + '-title');
+				$DOM.strong.appendChild(createFragElem(settings.title));
+				$DOM.toastTexts.appendChild($DOM.strong);
+
+				if(settings.titleColor) {
+					$DOM.strong.style.color = settings.titleColor;
+				}
+				if(settings.titleSize) {
+					if( !isNaN(settings.titleSize) ){
+						$DOM.strong.style.fontSize = settings.titleSize+'px';
+					} else {
+						$DOM.strong.style.fontSize = settings.titleSize;
+					}
+				}
+				if(settings.titleLineHeight) {
+					if( !isNaN(settings.titleSize) ){
+						$DOM.strong.style.lineHeight = settings.titleLineHeight+'px';
+					} else {
+						$DOM.strong.style.lineHeight = settings.titleLineHeight;
+					}
+				}
+			}
+		})();
+		
+		// Message
+		(function(){
+			if(settings.message.length > 0) {
+
+				$DOM.p = document.createElement('p');
+				$DOM.p.classList.add(PLUGIN_NAME + '-message');
+				$DOM.p.appendChild(createFragElem(settings.message));
+				$DOM.toastTexts.appendChild($DOM.p);
+
+				if(settings.messageColor) {
+					$DOM.p.style.color = settings.messageColor;
+				}
+				if(settings.messageSize) {
+					if( !isNaN(settings.titleSize) ){
+						$DOM.p.style.fontSize = settings.messageSize+'px';
+					} else {
+						$DOM.p.style.fontSize = settings.messageSize;
+					}
+				}
+				if(settings.messageLineHeight) {
+					
+					if( !isNaN(settings.titleSize) ){
+						$DOM.p.style.lineHeight = settings.messageLineHeight+'px';
+					} else {
+						$DOM.p.style.lineHeight = settings.messageLineHeight;
+					}
+				}
+			}
+		})();
 
-		if(settings.balloon){
-			$toast.classList.add(PLUGIN_NAME+"-balloon");
+		if(settings.title.length > 0 && settings.message.length > 0) {
+			if(settings.rtl){
+				$DOM.strong.style.marginLeft = '10px';
+			} else if(settings.layout !== 2 && !settings.rtl) {
+				$DOM.strong.style.marginRight = '10px';	
+			}
 		}
 
-		$toastBody.appendChild($strong);
-		$toastBody.appendChild($p);
+		$DOM.toastBody.appendChild($DOM.toastTexts);
 
-		var $buttons;
-		if (settings.buttons.length > 0) {
+		// Buttons
+		(function(){
+			if(settings.buttons.length > 0) {
 
-			$buttons = document.createElement("div");
-			$buttons.classList.add(PLUGIN_NAME + '-buttons');
+				$DOM.buttons.classList.add(PLUGIN_NAME + '-buttons');
 
-			$p.style.marginRight = '15px';
+				if(settings.title.length > 0 && settings.message.length === 0) {
+					if(settings.rtl){
+						$DOM.strong.style.marginLeft = '15px';
+					} else {
+						$DOM.strong.style.marginRight = '15px';
+					}
+				}
+				if(settings.message.length > 0) {
+					if(settings.rtl){
+						$DOM.p.style.marginLeft = '15px';
+					} else {
+						$DOM.p.style.marginRight = '15px';
+					}
+					$DOM.p.style.marginBottom = '0';
+				}
 
-			var i = 0;
-			forEach(settings.buttons, function (value, index) {
-				$buttons.appendChild(createFragElem(value[0]));
+				forEach(settings.buttons, function (value, index) {
+					$DOM.buttons.appendChild(createFragElem(value[0]));
 
-				var $btns = $buttons.childNodes;
+					var $btns = $DOM.buttons.childNodes;
 
-				$btns[i].addEventListener('click', function (e) {
-					e.preventDefault();
-					var ts = value[1];
-					return new ts(that, $toast); 
-				});
+					$btns[index].classList.add(PLUGIN_NAME + '-buttons-child');
 
-				i++;
-			});
-			$toastBody.appendChild($buttons);
-		}
+					if(value[2]){
+						setTimeout(function() {
+							$btns[index].focus();
+						}, 300);
+					}
 
-		$toast.appendChild($toastBody);
-		$toastCapsule.style.visibility = 'hidden';
-		$toastCapsule.appendChild($toast);
+					$btns[index].addEventListener('click', function (e) {
+						e.preventDefault();
+						var ts = value[1];
+						return ts(that, $DOM.toast);
+					});
+				});
+			}
+			$DOM.toastBody.appendChild($DOM.buttons);
+		})();
 
-		setTimeout(function() {
-			var H = $toast.offsetHeight;
-			var style = $toast.currentStyle || window.getComputedStyle($toast);
-			var marginTop = style.marginTop;
-				marginTop = marginTop.split("px");
-				marginTop = parseInt(marginTop[0]);
-			var marginBottom = style.marginBottom;
-				marginBottom = marginBottom.split("px");
-				marginBottom = parseInt(marginBottom[0]);
-
-			$toastCapsule.style.visibility = '';
-			$toastCapsule.style.height = (H+marginBottom+marginTop)+'px';
+		// Target
+		(function(){
+			$DOM.toastCapsule.style.visibility = 'hidden';
 			setTimeout(function() {
-				$toastCapsule.style.height = 'auto';
-				if(settings.target){
-					$toastCapsule.style.overflow = 'visible';
+				var H = $DOM.toast.offsetHeight;
+				var style = $DOM.toast.currentStyle || window.getComputedStyle($DOM.toast);
+				var marginTop = style.marginTop;
+					marginTop = marginTop.split('px');
+					marginTop = parseInt(marginTop[0]);
+				var marginBottom = style.marginBottom;
+					marginBottom = marginBottom.split('px');
+					marginBottom = parseInt(marginBottom[0]);
+
+				$DOM.toastCapsule.style.visibility = '';
+				$DOM.toastCapsule.style.height = (H+marginBottom+marginTop)+'px';
+
+				setTimeout(function() {
+					$DOM.toastCapsule.style.height = 'auto';
+					if(settings.target){
+						$DOM.toastCapsule.style.overflow = 'visible';
+					}
+				}, 500);
+
+				if(settings.timeout) {
+					that.progress($DOM.toast, settings).start();
 				}
-			},1000);
-		}, 100);
+			}, 100);
+		})();
 
-		var position = settings.position,
-			$wrapper;
+		// Target
+		(function(){
+			var position = settings.position;
 
-		if(settings.target){
+			if(settings.target){
 
-			$wrapper = document.querySelector(settings.target);
-			$wrapper.classList.add(PLUGIN_NAME + '-target');
+				$DOM.wrapper = document.querySelector(settings.target);
+				$DOM.wrapper.classList.add(PLUGIN_NAME + '-target');
 
-			if (settings.targetFirst) {
-				$wrapper.insertBefore($toastCapsule, $wrapper.firstChild);
-			} else {
-				$wrapper.appendChild($toastCapsule);
-			}
+				if(settings.targetFirst) {
+					$DOM.wrapper.insertBefore($DOM.toastCapsule, $DOM.wrapper.firstChild);
+				} else {
+					$DOM.wrapper.appendChild($DOM.toastCapsule);
+				}
 
-		} else {
+			} else {
 
-			if( POSITIONS.indexOf(settings.position) == -1 ){
-				console.warn("["+PLUGIN_NAME+"] Incorrect position.\nIt can be › " + POSITIONS);
-				return;
-			}
+				if( POSITIONS.indexOf(settings.position) == -1 ){
+					console.warn('['+PLUGIN_NAME+'] Incorrect position.\nIt can be › ' + POSITIONS);
+					return;
+				}
 
-			if(ISMOBILE || window.innerWidth <= MOBILEWIDTH){
-				if(settings.position == "bottomLeft" || settings.position == "bottomRight" || settings.position == "bottomCenter"){
-					position = PLUGIN_NAME+'-wrapper-bottomCenter';
+				if(ISMOBILE || window.innerWidth <= MOBILEWIDTH){
+					if(settings.position == 'bottomLeft' || settings.position == 'bottomRight' || settings.position == 'bottomCenter'){
+						position = PLUGIN_NAME+'-wrapper-bottomCenter';
+					}
+					else if(settings.position == 'topLeft' || settings.position == 'topRight' || settings.position == 'topCenter'){
+						position = PLUGIN_NAME+'-wrapper-topCenter';
+					}
+					else {
+						position = PLUGIN_NAME+'-wrapper-center';
+					}
+				} else {
+					position = PLUGIN_NAME+'-wrapper-'+position;
 				}
-				else if(settings.position == "topLeft" || settings.position == "topRight" || settings.position == "topCenter"){
-					position = PLUGIN_NAME+'-wrapper-topCenter';
+				$DOM.wrapper = document.querySelector('.' + PLUGIN_NAME + '-wrapper.'+position);
+
+				if(!$DOM.wrapper) {
+					$DOM.wrapper = document.createElement('div');
+					$DOM.wrapper.classList.add(PLUGIN_NAME + '-wrapper');
+					$DOM.wrapper.classList.add(position);
+					document.body.appendChild($DOM.wrapper);
 				}
-				else{
-					position = PLUGIN_NAME+'-wrapper-center';
+				if(settings.position == 'topLeft' || settings.position == 'topCenter' || settings.position == 'topRight'){
+					$DOM.wrapper.insertBefore($DOM.toastCapsule, $DOM.wrapper.firstChild);
+				} else {
+					$DOM.wrapper.appendChild($DOM.toastCapsule);
 				}
-			} else {
-				position = PLUGIN_NAME+'-wrapper-'+position;
 			}
-			$wrapper = document.querySelector('.' + PLUGIN_NAME + '-wrapper.'+position);
 
-			if (!$wrapper) {
-				$wrapper = document.createElement("div");
-				$wrapper.classList.add(PLUGIN_NAME + '-wrapper');
-				$wrapper.classList.add(position);
-				document.body.appendChild($wrapper);
-			}
-			if(settings.position == "topLeft" || settings.position == "topCenter" || settings.position == "topRight"){
-				$wrapper.insertBefore($toastCapsule, $wrapper.firstChild);
+			if(!isNaN(settings.zindex)) {
+				$DOM.wrapper.style.zIndex = settings.zindex;
 			} else {
-				$wrapper.appendChild($toastCapsule);
+				console.warn('['+PLUGIN_NAME+'] Invalid zIndex.');
 			}
-		}
+		})();
 
-		if (!isNaN(settings.zindex)) {
-			$wrapper.style.zIndex = settings.zindex;
-		} else {
-			console.warn("["+PLUGIN_NAME+"] Invalid zIndex.");
-		}
+		// Overlay
+		(function(){
 
-		settings.onOpen.apply(null, [settings, $toast]);
+			if(settings.overlay) {
 
-		try {
-			var event;
-			if (window.CustomEvent) {
-				event = new CustomEvent(PLUGIN_NAME+'-open', {detail: {class: settings.class}});
-			} else {
-				event = document.createEvent('CustomEvent');
-				event.initCustomEvent(PLUGIN_NAME+'-open', true, true, {class: settings.class});
-			}
-			document.dispatchEvent(event);
-		} catch(ex){
-			console.warn(ex);
-		}
+				if( document.querySelector('.'+PLUGIN_NAME+'-overlay.fadeIn') !== null ){
 
-		if(settings.animateInside){
-			$toast.classList.add(PLUGIN_NAME+'-animateInside');
-		
-			var timeAnimation1 = 200;
-			var timeAnimation2 = 100;
-			var timeAnimation3 = 300;
-			if(settings.transitionIn == "bounceInLeft"){
-				timeAnimation1 = 400;
-				timeAnimation2 = 200;
-				timeAnimation3 = 400;
-			}
+					$DOM.overlay = document.querySelector('.'+PLUGIN_NAME+'-overlay');
+					$DOM.overlay.setAttribute('data-iziToast-ref', $DOM.overlay.getAttribute('data-iziToast-ref') + ',' + settings.REF);
 
-			window.setTimeout(function(){
-				$strong.classList.add('slideIn');
-			},timeAnimation1);
+					if(!isNaN(settings.zindex) && settings.zindex !== null) {
+						$DOM.overlay.style.zIndex = settings.zindex-1;
+					}
+				} else {
 
-			window.setTimeout(function(){
-				$p.classList.add('slideIn');
-			},timeAnimation2);
+					$DOM.overlay.classList.add(PLUGIN_NAME+'-overlay');
+					$DOM.overlay.classList.add('fadeIn');
+					$DOM.overlay.style.background = settings.overlayColor;
+					$DOM.overlay.setAttribute('data-iziToast-ref', settings.REF);
+					if(!isNaN(settings.zindex) && settings.zindex !== null) {
+						$DOM.overlay.style.zIndex = settings.zindex-1;
+					}
+					document.querySelector('body').appendChild($DOM.overlay);
+				}
 
-			if (settings.icon) {
-				window.setTimeout(function(){
-					$icon.classList.add('revealIn');
-				},timeAnimation3);
-			}
+				if(settings.overlayClose) {
 
-			if (settings.buttons.length > 0 && $buttons) {
-				var counter = 150;
-				forEach($buttons.childNodes, function(element, index) {
+					$DOM.overlay.removeEventListener('click', {});
+					$DOM.overlay.addEventListener('click', function (e) {
+						that.hide($DOM.toast, settings, 'overlay');
+					});
+				} else {
+					$DOM.overlay.removeEventListener('click', {});
+				}
 
-					window.setTimeout(function(){
-						element.classList.add('revealIn');
-					},counter);
-					counter = counter + counter;
-				});
 			}
-		}
-		
-		if($buttonClose){
-			$buttonClose.addEventListener('click', function (e) {
-				var button = e.target;
-				that.hide(settings, $toast, 'button');
-			});
-		}
 
-		if(settings.pauseOnHover){
+		})();
+
+		// Inside animations
+		(function(){
+			if(settings.animateInside){
+				$DOM.toast.classList.add(PLUGIN_NAME+'-animateInside');
 			
-			$toast.addEventListener('mouseenter', function (e) {
-				this.classList.add(PLUGIN_NAME+'-paused');
-			});
-			$toast.addEventListener('mouseleave', function (e) {
-				this.classList.remove(PLUGIN_NAME+'-paused');
-			});
-		}
+				var animationTimes = [200, 100, 300];
+				if(settings.transitionIn == 'bounceInLeft'){
+					animationTimes = [400, 200, 400];
+				}
 
-		if(settings.resetOnHover){
+				if(settings.title.length > 0) {
+					setTimeout(function(){
+						$DOM.strong.classList.add('slideIn');
+					}, animationTimes[0]);
+				}
 
-			$toast.addEventListener('mouseenter', function (e) {
-				this.classList.add(PLUGIN_NAME+'-reseted');
-			});
-			$toast.addEventListener('mouseleave', function (e) {
-				this.classList.remove(PLUGIN_NAME+'-reseted');
-			});
+				if(settings.message.length > 0) {
+					setTimeout(function(){
+						$DOM.p.classList.add('slideIn');
+					}, animationTimes[1]);
+				}
+
+				if(settings.icon) {
+					setTimeout(function(){
+						$DOM.icon.classList.add('revealIn');
+					}, animationTimes[2]);
+				}
+
+				if(settings.buttons.length > 0 && $DOM.buttons) {
+					var counter = 150;
+					forEach($DOM.buttons.childNodes, function(element, index) {
+
+						setTimeout(function(){
+							element.classList.add('revealIn');
+						}, counter);
+						counter = counter + 150;
+					});
+				}
+			}
+		})();
+
+		settings.onOpening.apply(null, [settings, $DOM.toast]);
+
+		try {
+			var event = new CustomEvent(PLUGIN_NAME + '-opening', {detail: settings, bubbles: true, cancelable: true});
+			document.dispatchEvent(event);
+		} catch(ex){
+			console.warn(ex);
 		}
 
+		setTimeout(function() {
+
+			$DOM.toast.classList.remove(PLUGIN_NAME+'-opening');
+			$DOM.toast.classList.add(PLUGIN_NAME+'-opened');
+
+			try {
+				var event = new CustomEvent(PLUGIN_NAME + '-opened', {detail: settings, bubbles: true, cancelable: true});
+				document.dispatchEvent(event);
+			} catch(ex){
+				console.warn(ex);
+			}
+
+			settings.onOpened.apply(null, [settings, $DOM.toast]);
+		}, 1000);
+
 		if(settings.drag){
 
-			if (ACCEPTSTOUCH) {
+			if(ACCEPTSTOUCH) {
 
-			    $toast.addEventListener('touchstart', function(e) {
+			    $DOM.toast.addEventListener('touchstart', function(e) {
 			        drag.startMoving(this, that, settings, e);
 			    }, false);
 
-			    $toast.addEventListener('touchend', function(e) {
+			    $DOM.toast.addEventListener('touchend', function(e) {
 			        drag.stopMoving(this, e);
 			    }, false);
 			} else {
 
-			    $toast.addEventListener('mousedown', function(e) {
+			    $DOM.toast.addEventListener('mousedown', function(e) {
 			    	e.preventDefault();
 			        drag.startMoving(this, that, settings, e);
 			    }, false);
 
-			    $toast.addEventListener('mouseup', function(e) {
+			    $DOM.toast.addEventListener('mouseup', function(e) {
 			    	e.preventDefault();
 			        drag.stopMoving(this, e);
 			    }, false);
 			}
 		}
 
+		if(settings.closeOnEscape) {
+
+			document.addEventListener('keyup', function (evt) {
+				evt = evt || window.event;
+				if(evt.keyCode == 27) {
+				    that.hide($DOM.toast, settings, 'esc');
+				}
+			});
+		}
 
+		that.toast = $DOM.toast;		
 	};
+	
 
 	return $iziToast;
-});
+});