izitoast 1.1.1

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 459868307a4489ece61211b3137bd9c78c81c88a
+  data.tar.gz: 33c8b5aea7e02eb7fd81dbcd3d4e24aabf27792c
+SHA512:
+  metadata.gz: b61d837ca40732ec100d4da9b40a3d667e070278e4784ba3426c4e4f1165e6ca667a6c8d91fe88bdbad2578a91d088f06b43455f31d00a6ca7203e07c77d340c
+  data.tar.gz: 70810c709c4f98787857ee7cc47bc17212887982f9e2cbb06c10c820b4c8b3753559df1202901f2243be67f7c728235b019ed23adebdbe757ccfa9d7191bb83e

data/.gitignore

@@ -0,0 +1,10 @@
+/.idea
+/.bundle/
+/.yardoc
+/Gemfile.lock
+/_yardoc/
+/coverage/
+/doc/
+/pkg/
+/spec/reports/
+/tmp/

data/CODE_OF_CONDUCT.md

@@ -0,0 +1,74 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+In the interest of fostering an open and welcoming environment, we as
+contributors and maintainers pledge to making participation in our project and
+our community a harassment-free experience for everyone, regardless of age, body
+size, disability, ethnicity, gender identity and expression, level of experience,
+nationality, personal appearance, race, religion, or sexual identity and
+orientation.
+
+## Our Standards
+
+Examples of behavior that contributes to creating a positive environment
+include:
+
+* Using welcoming and inclusive language
+* Being respectful of differing viewpoints and experiences
+* Gracefully accepting constructive criticism
+* Focusing on what is best for the community
+* Showing empathy towards other community members
+
+Examples of unacceptable behavior by participants include:
+
+* The use of sexualized language or imagery and unwelcome sexual attention or
+advances
+* Trolling, insulting/derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or electronic
+  address, without explicit permission
+* Other conduct which could reasonably be considered inappropriate in a
+  professional setting
+
+## Our Responsibilities
+
+Project maintainers are responsible for clarifying the standards of acceptable
+behavior and are expected to take appropriate and fair corrective action in
+response to any instances of unacceptable behavior.
+
+Project maintainers have the right and responsibility to remove, edit, or
+reject comments, commits, code, wiki edits, issues, and other contributions
+that are not aligned to this Code of Conduct, or to ban temporarily or
+permanently any contributor for other behaviors that they deem inappropriate,
+threatening, offensive, or harmful.
+
+## Scope
+
+This Code of Conduct applies both within project spaces and in public spaces
+when an individual is representing the project or its community. Examples of
+representing a project or community include using an official project e-mail
+address, posting via an official social media account, or acting as an appointed
+representative at an online or offline event. Representation of a project may be
+further defined and clarified by project maintainers.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported by contacting the project team at badalloffsh@gmail.com. All
+complaints will be reviewed and investigated and will result in a response that
+is deemed necessary and appropriate to the circumstances. The project team is
+obligated to maintain confidentiality with regard to the reporter of an incident.
+Further details of specific enforcement policies may be posted separately.
+
+Project maintainers who do not follow or enforce the Code of Conduct in good
+faith may face temporary or permanent repercussions as determined by other
+members of the project's leadership.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
+available at [http://contributor-covenant.org/version/1/4][version]
+
+[homepage]: http://contributor-covenant.org
+[version]: http://contributor-covenant.org/version/1/4/

data/Gemfile

@@ -0,0 +1,4 @@
+source 'https://rubygems.org'
+
+# Specify your gem's dependencies in izitoast.gemspec
+gemspec

data/LICENSE.txt

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2017 Shamil
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

data/README.md

@@ -0,0 +1,54 @@
+# Izitoast
+
+Simple wrapper around [IZITOAST](http://izitoast.marcelodolce.com) js notification plugin [visit Authors website.](https://www.google.com "Marcelo Dolce")
+
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+```ruby
+gem 'izitoast'
+```
+And then execute:
+
+    $ bundle
+
+
+Add this line to your application.js file:
+
+```javascript
+//= require iziToast
+```
+
+Add this line to your application.scss (css):
+
+```scss
+@import "iziToast";
+```
+
+That's it. It works now
+## Usage
+
+To test how it works, open your browser console and execute next command:
+
+```javascript
+iziToast.success({
+    title: 'Hey',
+    message: "It's alive! Congratulations!"
+});
+```
+
+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")
+
+## 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.
+
+
+## License
+
+The gem is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).
+

data/Rakefile

@@ -0,0 +1,2 @@
+require "bundler/gem_tasks"
+task :default => :spec

data/bin/console

@@ -0,0 +1,14 @@
+#!/usr/bin/env ruby
+
+require "bundler/setup"
+require "izitoast"
+
+# You can add fixtures and/or initialization code here to make experimenting
+# with your gem easier. You can also use a different console, if you like.
+
+# (If you use this, don't forget to add pry to your Gemfile!)
+# require "pry"
+# Pry.start
+
+require "irb"
+IRB.start

data/bin/setup

@@ -0,0 +1,8 @@
+#!/usr/bin/env bash
+set -euo pipefail
+IFS=$'\n\t'
+set -vx
+
+bundle install
+
+# Do any other automated setup that you need to do here

data/izitoast.gemspec

@@ -0,0 +1,35 @@
+# coding: utf-8
+lib = File.expand_path('../lib', __FILE__)
+$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
+require 'izitoast/version'
+
+Gem::Specification.new do |spec|
+  spec.name          = "izitoast"
+  spec.version       = Izitoast::VERSION
+  spec.authors       = ["Shamil"]
+  spec.email         = ["badalloffsh@gmail.com"]
+
+  spec.summary       = %q{Simple wrapper around IZITOAST js notification plugin}
+  spec.description   = %q{}
+  spec.homepage      = "https://github.com/BadAllOff/iziToast-rails"
+  spec.license       = "MIT"
+
+  # Prevent pushing this gem to RubyGems.org. To allow pushes either set the 'allowed_push_host'
+  # to allow pushing to a single host or delete this section to allow pushing to any host.
+  if spec.respond_to?(:metadata)
+    spec.metadata['allowed_push_host'] = "https://rubygems.org"
+  else
+    raise "RubyGems 2.0 or newer is required to protect against " \
+      "public gem pushes."
+  end
+
+  spec.files         = `git ls-files -z`.split("\x0").reject do |f|
+    f.match(%r{^(test|spec|features)/})
+  end
+  spec.bindir        = "exe"
+  spec.executables   = spec.files.grep(%r{^exe/}) { |f| File.basename(f) }
+  spec.require_paths = ["lib"]
+
+  spec.add_development_dependency "bundler", "~> 1.13"
+  spec.add_development_dependency "rake", "~> 10.0"
+end

data/lib/izitoast.rb

@@ -0,0 +1,5 @@
+require "izitoast/version"
+
+module Izitoast
+  class Engine < ::Rails::Engine; end
+end

data/lib/izitoast/version.rb

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

data/vendor/assets/javascripts/iziToast.js

@@ -0,0 +1,791 @@
+/*
+* iziToast | v1.1.1
+* http://izitoast.marcelodolce.com
+* by Marcelo Dolce.
+*/
+(function (root, factory) {
+	if (typeof define === 'function' && define.amd) {
+		define([], factory(root));
+	} else if (typeof exports === 'object') {
+		module.exports = factory(root);
+	} else {
+		root.iziToast = factory(root);
+	}
+})(typeof global !== "undefined" ? global : this.window || this.global, function (root) {
+
+	'use strict';
+
+	//
+	// Variables
+	//
+	var $iziToast = {},
+		PLUGIN_NAME = 'iziToast',
+		BODY = document.querySelector('body'),
+		ISMOBILE = (/Mobi/.test(navigator.userAgent)) ? true : false,
+		ISCHROME = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor),
+		ISFIREFOX = typeof InstallTrigger !== 'undefined',
+		ACCEPTSTOUCH = 'ontouchstart' in document.documentElement,
+		POSITIONS = ['bottomRight','bottomLeft','bottomCenter','topRight','topLeft','topCenter','center'],
+		THEMES = {
+			info: {
+				color: "blue",
+				icon: "ico-info"
+			},
+			success: {
+				color: "green",
+				icon: "ico-check",
+			},
+			warning: {
+				color: "yellow",
+				icon: "ico-warning",
+			},
+			error: {
+				color: "red",
+				icon: "ico-error",
+			}
+		},
+		MOBILEWIDTH = 568,
+		CONFIG = {};
+
+	// Default settings
+	var defaults = {
+		class: '',
+		title: '',
+		titleColor: '',
+		message: '',
+		messageColor: '',
+		backgroundColor: '',
+		color: '', // blue, red, green, yellow
+		icon: '',
+		iconText: '',
+		iconColor: '',
+		image: '',
+		imageWidth: 50,
+		zindex: 99999,
+		layout: 1,
+		balloon: false,
+		close: true,
+		rtl: false,
+		position: 'bottomRight', // bottomRight, bottomLeft, topRight, topLeft, topCenter, bottomCenter, center
+		target: '',
+		targetFirst: true,
+		timeout: 5000,
+		drag: true,
+		pauseOnHover: true,
+		resetOnHover: false,
+		progressBar: true,
+		progressBarColor: '',
+		animateInside: true,
+		buttons: {},
+		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 () {}
+	};
+
+	//
+	// Methods
+	//
+
+
+	/**
+	 * Polyfill for remove() method
+	 */
+	if (!('remove' in Element.prototype)) {
+	    Element.prototype.remove = function() {
+	        if (this.parentNode) {
+	            this.parentNode.removeChild(this);
+	        }
+	    };
+	}
+
+	/**
+	 * A simple forEach() implementation for Arrays, Objects and NodeLists
+	 * @private
+	 * @param {Array|Object|NodeList} collection Collection of items to iterate
+	 * @param {Function} callback Callback function for each iteration
+	 * @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]') {
+			for (var prop in collection) {
+				if (Object.prototype.hasOwnProperty.call(collection, prop)) {
+					callback.call(scope, collection[prop], prop, collection);
+				}
+			}
+		} else {
+			if(collection){
+				for (var i = 0, len = collection.length; i < len; i++) {
+					callback.call(scope, collection[i], i, collection);
+				}
+			}
+		}
+	};
+
+	/**
+	 * Merge defaults with user options
+	 * @private
+	 * @param {Object} defaults Default settings
+	 * @param {Object} options User options
+	 * @returns {Object} Merged values of defaults and options
+	 */
+	var extend = function (defaults, options) {
+		var extended = {};
+		forEach(defaults, function (value, prop) {
+			extended[prop] = defaults[prop];
+		});
+		forEach(options, function (value, prop) {
+			extended[prop] = options[prop];
+		});
+		return extended;
+	};
+
+
+	/**
+	 * Create a fragment DOM elements
+	 * @private
+	 */
+	var createFragElem = function(htmlStr) {
+		var frag = document.createDocumentFragment(),
+			temp = document.createElement('div');
+		temp.innerHTML = htmlStr;
+		while (temp.firstChild) {
+			frag.appendChild(temp.firstChild);
+		}
+		return frag;
+	};
+
+
+	/**
+	 * Check if is a color
+	 * @private
+	 */
+	var isColor = function(color){
+		if( color.substring(0,1) == "#" || color.substring(0,3) == "rgb" || color.substring(0,3) == "hsl" ){
+			return true;
+		} else {
+			return false;
+		}
+	};
+
+
+	/**
+	 * Drag method of toasts
+	 * @private
+	 */
+	var drag = function() {
+	    
+	    return {
+	        move: function(toast, instance, settings, xpos) {
+
+	        	var opacity,
+	        		opacityRange = 0.3,
+	        		distance = 180;
+	            
+	            toast.style.transform = 'translateX('+xpos + 'px)';
+
+	            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';
+
+					toast.parentNode.style.opacity = opacityRange;
+
+	                this.stopMoving(toast, null);
+				}
+				
+	        },
+	        startMoving: function(toast, instance, settings, e) {
+
+	            e = e || window.event;
+	            var posX = ((ACCEPTSTOUCH) ? e.touches[0].clientX : e.clientX),
+	                toastLeft = toast.style.transform.replace('px)', '');
+	                toastLeft = toastLeft.replace('translateX(', '');
+	            var offsetX = posX - toastLeft;
+
+				toast.classList.remove(settings.transitionIn);
+				toast.classList.remove(settings.transitionInMobile);
+				toast.style.transition = "";
+
+	            if (ACCEPTSTOUCH) {
+	                document.ontouchmove = function(e) {
+	                    e.preventDefault();
+	                    e = e || window.event;
+	                    var posX = e.touches[0].clientX,
+	                        finalX = posX - offsetX;
+                        drag.move(toast, instance, settings, finalX);
+	                };
+	            } else {
+	                document.onmousemove = function(e) {
+	                    e.preventDefault();
+	                    e = e || window.event;
+	                    var posX = e.clientX,
+	                        finalX = posX - offsetX;
+                        drag.move(toast, instance, settings, finalX);
+	                };
+	            }
+
+	        },
+	        stopMoving: function(toast, e) {
+
+	            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);
+	        }
+	    };
+
+	}();
+
+
+	/**
+	 * 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
+	 */
+	$iziToast.destroy = function () {
+
+		forEach(document.querySelectorAll('.'+PLUGIN_NAME+'-wrapper'), function(element, index) {
+			element.remove();
+		});
+
+		forEach(document.querySelectorAll('.'+PLUGIN_NAME), function(element, index) {
+			element.remove();
+		});
+
+		// Remove event listeners
+		document.removeEventListener(PLUGIN_NAME+'-open', {}, false);
+		document.removeEventListener(PLUGIN_NAME+'-close', {}, false);
+
+		// Reset variables
+		CONFIG = {};
+	};
+
+	/**
+	 * Initialize Plugin
+	 * @public
+	 * @param {Object} options User settings
+	 */
+	$iziToast.settings = function (options) {
+
+		// Destroy any existing initializations
+		$iziToast.destroy();
+
+		CONFIG = options;
+		defaults = extend(defaults, options || {});
+	};
+
+
+	/**
+	 * Building themes functions.
+	 * @public
+	 * @param {Object} options User settings
+	 */
+	forEach(THEMES, function (theme, name) {
+
+		$iziToast[name] = function (options) {
+
+			var settings = extend(CONFIG, options || {});
+			settings = extend(theme, settings || {});
+
+			this.show(settings);
+		};
+
+	});
+
+
+	/**
+	 * Close the specific Toast
+	 * @public
+	 * @param {Object} options User settings
+	 */
+	$iziToast.hide = function (options, $toast, closedBy) {
+
+		var settings = extend(defaults, options || {});
+			closedBy = closedBy || false;
+
+		if(typeof $toast != 'object'){
+			$toast = document.querySelector($toast);
+		}
+		$toast.classList.add(PLUGIN_NAME+'-closed');
+
+		if(settings.transitionIn || settings.transitionInMobile){
+			$toast.classList.remove(settings.transitionIn);
+			$toast.classList.remove(settings.transitionInMobile);
+		}
+
+		if(ISMOBILE || window.innerWidth <= MOBILEWIDTH){
+			if(settings.transitionOutMobile)
+				$toast.classList.add(settings.transitionOutMobile);
+		} else{
+			if(settings.transitionOut)
+				$toast.classList.add(settings.transitionOut);
+		}
+		var H = $toast.parentNode.offsetHeight;
+				$toast.parentNode.style.height = H+'px';
+				$toast.style.pointerEvents = 'none';
+		
+		if(!ISMOBILE || window.innerWidth > MOBILEWIDTH){
+			$toast.parentNode.style.transitionDelay = '0.2s';
+		}
+
+		setTimeout(function() {
+			$toast.parentNode.style.height = '0px';
+			$toast.parentNode.style.overflow = '';
+			window.setTimeout(function(){
+				$toast.parentNode.remove();
+			},1000);
+		},200);
+
+		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});
+				}
+				document.dispatchEvent(event);
+			} catch(ex){
+				console.warn(ex);
+			}
+		}
+
+		if(typeof settings.onClose !== "undefined"){
+			settings.onClose.apply(null, [settings, $toast, closedBy]);
+		}
+	};
+
+	/**
+	 * Create and show the Toast
+	 * @public
+	 * @param {Object} options User settings
+	 */
+	$iziToast.show = function (options) {
+
+		var that = this;
+
+		// Merge user options with defaults
+		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);
+
+		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.rtl){
+			$toast.classList.add(PLUGIN_NAME + '-rtl');
+		}
+
+		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;
+		}
+
+		if (settings.class){
+			$toast.classList.add(settings.class);
+		}
+
+		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);
+		}
+
+		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";
+			} else {
+				$toast.style.paddingRight = "30px";
+			}
+		}
+
+		if (settings.progressBar) {
+
+			var $progressBar = document.createElement("div");
+				$progressBar.classList.add(PLUGIN_NAME + '-progressbar');
+
+			var $progressBarDiv = document.createElement("div");
+				$progressBarDiv.style.background = settings.progressBarColor;
+
+			$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);
+		}
+
+		var $toastBody = document.createElement("div");
+			$toastBody.classList.add(PLUGIN_NAME + '-body');
+
+		if (settings.image) {
+			if(settings.rtl){
+				$toastBody.style.marginRight = (settings.imageWidth + 10) + 'px';
+			} else {
+				$toastBody.style.marginLeft = (settings.imageWidth + 10) + 'px';				
+			}
+		}
+
+		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.rtl){
+				$toastBody.style.paddingRight = '33px';
+			} else {
+				$toastBody.style.paddingLeft = '33px';				
+			}
+			
+			if (settings.iconColor){
+				$icon.style.color = settings.iconColor;
+			}
+			$toastBody.appendChild($icon);
+		}
+
+		var $strong = document.createElement("strong");
+		if (settings.titleColor.length > 0) {
+			$strong.style.color = settings.titleColor;
+		}
+		$strong.appendChild(createFragElem(settings.title));
+
+		var $p = document.createElement("p");
+		if (settings.messageColor.length > 0) {
+			$p.style.color = settings.messageColor;
+		}
+		$p.appendChild(createFragElem(settings.message));
+
+		if(settings.layout > 1){
+			$toast.classList.add(PLUGIN_NAME+"-layout"+settings.layout);
+		}
+
+		if(settings.balloon){
+			$toast.classList.add(PLUGIN_NAME+"-balloon");
+		}
+
+		$toastBody.appendChild($strong);
+		$toastBody.appendChild($p);
+
+		var $buttons;
+		if (settings.buttons.length > 0) {
+
+			$buttons = document.createElement("div");
+			$buttons.classList.add(PLUGIN_NAME + '-buttons');
+
+			$p.style.marginRight = '15px';
+
+			var i = 0;
+			forEach(settings.buttons, function (value, index) {
+				$buttons.appendChild(createFragElem(value[0]));
+
+				var $btns = $buttons.childNodes;
+
+				$btns[i].addEventListener('click', function (e) {
+					e.preventDefault();
+					var ts = value[1];
+					return new ts(that, $toast); 
+				});
+
+				i++;
+			});
+			$toastBody.appendChild($buttons);
+		}
+
+		$toast.appendChild($toastBody);
+		$toastCapsule.style.visibility = 'hidden';
+		$toastCapsule.appendChild($toast);
+
+		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';
+			setTimeout(function() {
+				$toastCapsule.style.height = 'auto';
+				if(settings.target){
+					$toastCapsule.style.overflow = 'visible';
+				}
+			},1000);
+		}, 100);
+
+		var position = settings.position,
+			$wrapper;
+
+		if(settings.target){
+
+			$wrapper = document.querySelector(settings.target);
+			$wrapper.classList.add(PLUGIN_NAME + '-target');
+
+			if (settings.targetFirst) {
+				$wrapper.insertBefore($toastCapsule, $wrapper.firstChild);
+			} else {
+				$wrapper.appendChild($toastCapsule);
+			}
+
+		} else {
+
+			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';
+				}
+				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;
+			}
+			$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);
+			} else {
+				$wrapper.appendChild($toastCapsule);
+			}
+		}
+
+		if (!isNaN(settings.zindex)) {
+			$wrapper.style.zIndex = settings.zindex;
+		} else {
+			console.warn("["+PLUGIN_NAME+"] Invalid zIndex.");
+		}
+
+		settings.onOpen.apply(null, [settings, $toast]);
+
+		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(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;
+			}
+
+			window.setTimeout(function(){
+				$strong.classList.add('slideIn');
+			},timeAnimation1);
+
+			window.setTimeout(function(){
+				$p.classList.add('slideIn');
+			},timeAnimation2);
+
+			if (settings.icon) {
+				window.setTimeout(function(){
+					$icon.classList.add('revealIn');
+				},timeAnimation3);
+			}
+
+			if (settings.buttons.length > 0 && $buttons) {
+				var counter = 150;
+				forEach($buttons.childNodes, function(element, index) {
+
+					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){
+			
+			$toast.addEventListener('mouseenter', function (e) {
+				this.classList.add(PLUGIN_NAME+'-paused');
+			});
+			$toast.addEventListener('mouseleave', function (e) {
+				this.classList.remove(PLUGIN_NAME+'-paused');
+			});
+		}
+
+		if(settings.resetOnHover){
+
+			$toast.addEventListener('mouseenter', function (e) {
+				this.classList.add(PLUGIN_NAME+'-reseted');
+			});
+			$toast.addEventListener('mouseleave', function (e) {
+				this.classList.remove(PLUGIN_NAME+'-reseted');
+			});
+		}
+
+		if(settings.drag){
+
+			if (ACCEPTSTOUCH) {
+
+			    $toast.addEventListener('touchstart', function(e) {
+			        drag.startMoving(this, that, settings, e);
+			    }, false);
+
+			    $toast.addEventListener('touchend', function(e) {
+			        drag.stopMoving(this, e);
+			    }, false);
+			} else {
+
+			    $toast.addEventListener('mousedown', function(e) {
+			    	e.preventDefault();
+			        drag.startMoving(this, that, settings, e);
+			    }, false);
+
+			    $toast.addEventListener('mouseup', function(e) {
+			    	e.preventDefault();
+			        drag.stopMoving(this, e);
+			    }, false);
+			}
+		}
+
+
+	};
+
+	return $iziToast;
+});