yet another vanilla growl like notification for the browser called 'trowl'

trowl.css

/* trowl.css - niko 2016 */

div.trowl-dock {
  position: fixed;
  top: 0;
  right: 0;
  max-width: 400px;
  overflow: hidden;
  z-index: 9999999;
  text-align: right;
}

div.trowl-dock.hidden {
  display: none;
}

div.trowl-dock > div {
  margin: 10px 5px 0 0;
  text-align: right;
  cursor: default;
}

div.trowl-dock > div > span {
  display: inline-block;
  padding: 10px 15px;
  border-radius: 4px;
  font: 18px "Sans Serif";
}

div.trowl-dock > div > span.info {
  color: #31708f;
  background-color: #d9edf7;
}

div.trowl-dock > div > span.success {
  color: #3c763d;
  background-color: #dff0d8;
}

div.trowl-dock > div > span.warning {
  color: #8a6d3b;
  background-color: #fcf8e3;
}

div.trowl-dock > div > span.error {
  color: #a94442;
  background-color: #f2dede;
}

trowl.js

//trowl.js - niko 2016

/*
TROWL.JS
========

Yet another vanilla growl-like notification display for the browser.

USAGES
------

  trowl.info(html[, opts]);
  trowl.success(html[, opts]);
  trowl.warning(html[, opts]);
  trowl.error(html[, opts]);

  opts = {
    timeout: 3000,       //default = 3000ms, false = sticky notification
    css: 'my-classname', //optional classname
    anim: 1500           //default = 1200ms, false = no animation
  };

eg:

  trowl.info('the answer is 42');
  trowl.warning('you know <u>nothing</u> john snow !',{css:'got',timeout:5000});
  trowl.success('so long and thanks for the fish',{timeout:false});

*/

var trowl = (function(){
  "use strict";

  const VISIBLE='trowl-dock', HIDDEN='trowl-dock hidden', FRAMEMS=50;
  var dock, count = 0;

  function init(){
    if( document && document.body ) {
      dock = document.createElement('div');
      dock.className = HIDDEN;
      document.body.appendChild(dock);
      return true;
    } else
      return false;
  }

  function show(html, cfg, css){
    if( !dock && !init() ) return;
    if( !cfg || typeof(cfg)!=='object' ) cfg = {};
    if( css ) cfg.css = css;
    var 
      spn = document.createElement('span'), 
      msg = { body: document.createElement('div'), id: count++, timer: false },
      timeout = 'timeout' in cfg ? cfg.timeout : 3000,
      anim = 'animation' in cfg ? cfg.animation : 1200,
      closefn;

    closefn = function(ev){
      if( msg.timer!==false ) clearTimeout(msg.timer);
      console.log('[trowl] close',msg.id,msg.timer);
      if( ev && ev.preventDefault ) {
        ev.preventDefault();
        ev.stopPropagation();
      }
      var opa = 1, opastep = 1/(anim/FRAMEMS), mrg = 0;
      function drop(){
        dock.removeChild(msg.body);
        msg.body.removeEventListener('click',closefn);
        msg.body.innerHTML = '';
        msg = undefined;
        if( !--count ) dock.className = HIDDEN;
      }
      function closeframe(){
        msg.body.style.opacity = (opa -= opastep);
        msg.body.style.marginRight = (mrg -= 5)+'px';
        if( opa <= 0 ) drop();
        else requestAnimationFrame(closeframe);
      }
      if( anim ) requestAnimationFrame(closeframe);
      else drop();
    };
    spn.className = css + ' ' + (cfg.css || '');
    spn.innerHTML = html;
    msg.body.appendChild(spn);
    dock.className = VISIBLE;
    dock.appendChild(msg.body);
    if( timeout ) msg.timer = setTimeout(closefn, timeout);
    msg.body.addEventListener('click', closefn, true);
  }

  function mkfn(css){
    return function(html, cfg){ show(html, cfg, css) };
  }

  return {
    info: mkfn('info'),
    ok: mkfn('success'),
    success: mkfn('success'),
    error: mkfn('error'),
    warn: mkfn('warning'),
    warning: mkfn('warning')
  };

})();