SheepToasts v2

by Szymon Lisowiec

HTML

<button id="ShowSimpleToast">Show simple toast</button>
<button id="ShowToastWithIcon">Show toast with icon</button>
<button id="ShowToastWithLoremIpsum">Show Lorem Ipsum</button>

CSS

@import url(https://fonts.googleapis.com/css?family=PT+Sans);

#SheepToasts *, .SheepToast  {
  margin: 0;
  padding: 0;
  border: none;
  box-sizing: border-box;
  font-size: 0;
  z-index: 1000;
}

#SheepToasts {
  width: 0;
  height: 0;
  position: fixed;
  bottom: 32px;
  left: 24px;
}

#SheepToasts>.SheepToast, .SheepToast {
  display: inline-block;
  min-width: 88px;
  max-width: 280px;
  padding: 5px 7px;
  position: absolute;
  border-radius: 3px;
  font-family: 'PT Sans', sans-serif;
  font-weight: 300;
  opacity: 0;
  white-space: nowrap;
  transition: all 0.5s;
}

#SheepToasts>.SheepToast {
  cursor: pointer;
}

#SheepToasts>.SheepToast>img, .SheepToast>img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  vertical-align: middle;
}

#SheepToasts>.SheepToast>.content, .SheepToast>.content {
  display: inline-block;
  white-space: normal;
  vertical-align: middle;
  font-size: 13px;
}

#SheepToasts>.SheepToast>.withimg, .SheepToast>.withimg {
  padding-left: 7px;
  padding-right: 32px;
  font-size: 15px;
}

#SheepToasts>.SheepToast>.buttons, .SheepToast>.buttons {
  padding-top: 5px;
  text-align: right;
}

#SheepToasts>.SheepToast>.buttons>button, .SheepToast>.buttons>button {
  margin-right: 4px;
  padding: 3px 5px;
  border-radius: 3px;
  font-size: 13px;
  font-weight: 600;
  vertical-align: bottom;
  color: #eee;
  background: rgba(0, 0, 0, 0.15);
  border-top: 1px solid transparent;
  border-bottom: 2px solid rgba(0, 0, 0, 0.15);
  cursor: pointer;
}

#SheepToasts>.SheepToast>.buttons>button:last-child, .SheepToast>.buttons>button:last-child {
  margin-right: 0;
}

#SheepToasts>.SheepToast>.buttons>button:hover {
  border-top-width: 1px;
  border-bottom-width: 1px;
}

#SheepToasts>.style-warning {
  background: #e74C3c;
  color: #fafafa;
}

#SheepToasts>.style-success {
  background: #71ba51;
  color: #fafafa;
}

#SheepToasts>.style-info {
  background: #3498db;
  color: #fafafa;
}

JavaScript

function SheepToasts(customConfig){
	'use strict';
  if(typeof customConfig != 'object') customConfig = {};
  
  var config = {
  	spacing: 4,
    displayTime: 3200
  };
  
  var toasts = [];
  
  var body = document.getElementsByTagName('body')[0];
  var root = document.createElement('div');
  root.setAttribute('id', 'SheepToasts');
  body.appendChild(root);
  var checker = document.createElement('div');
  checker.setAttribute('class', 'SheepToast');
  checker.style.position = 'fixed';
	checker.style.top = 0;
	checker.style.left = 0;
  checker.style.zIndex = -1000;
  checker.style.visibility = 'hidden';
  body.appendChild(checker);
  
  
  root.sheet = window.getComputedStyle(root);
  if(root.sheet.top == 'auto' || parseFloat(root.sheet.top) >= parseFloat(root.sheet.bottom)){
  	root.directionY = 'bottom';
  }else root.directionY = 'top';
  
  if(root.sheet.right == 'auto' || parseFloat(root.sheet.right) >= parseFloat(root.sheet.left)){
  	root.directionX = 'left';
  }else root.directionX = 'right';
  
  var Toast = function(data){
  	
    var self = this;
    toasts.push(self);
    
    self.id = toasts.indexOf(self);
    self.isClosing = false;
    self.e = document.createElement('div');
    self.e.setAttribute('id', 'SheepToast'+self.id);
    
    var content = document.createElement('div');
    content.style.display = 'inline-block';
    content.innerHTML = data.text;
    
    self.e.setAttribute('class', 'SheepToast style-'+data.style);
    
    while(checker.firstChild)
    	checker.removeChild(checker.firstChild);
    
    if(typeof data.icon == 'string'){
    	var icon = document.createElement('img');
      icon.src = data.icon;
      icon.setAttribute('alt', 'icon');
      icon.setAttribute('draggable', 'false');
    	icon.style.display = 'inline-block';
    	checker.appendChild(icon.cloneNode(true));
    	self.e.appendChild(icon);
      content.setAttribute('class', 'content withimg');
    }else content.setAttribute('class', 'content');
    
   ...