Notifier

by amindunited

HTML

<button class='notify orig'>Notify</button>
<button class='notify warn'>Warn</button>
<button class='notify alert'>Alert</button>

CSS

/*SOF Eric Meyer's Reset CSS*/
/** * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) * http://cssreset.com */html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {	margin: 0;	padding: 0;	border: 0;	font-size: 100%;	font: inherit;	vertical-align: baseline;}/* HTML5 display-role reset for older browsers */article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {	display: block;}body {	line-height: 1;}ol, ul {	list-style: none;}blockquote, q {	quotes: none;}blockquote:before, blockquote:after,q:before, q:after {	content: '';	content: none;}table {	border-collapse: collapse;	border-spacing: 0;}
/* EOF Eric Meyer's Reset CSS */

.notifyList {
    position: absolute;
    right: 0px;
    top: 0px;
    width: 100px;
    min-height: 40px;
/*    background-color: red;*/
}
.notifyList li {
    border-radius: 5px;
    background-color: #ededed;
    padding:5px;
}
.notifyList li.notify {
    background-color: #79ce33;
}

.notifyList li.warn {
    background-color: #e2d591;
}
.notifyList li.alert {
    background-color: #d13232;
}
/* SOF animateInBlind */
.notifyList li {
  animation: animateInBlind ease 1s;
  animation-iteration-count: 1;
  transform-origin: ;
  animation-fill-mode:forwards; /*when the spec is finished*/
  -webkit-animation: animateInBlind ease 1s;
  -webkit-animation-iteration-count: 1;
  -webkit-transform-origin: ;
  -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/ 
  -moz-animation: animateInBlind ease 1s;
  -moz-animation-iteration-count: 1;
  -moz-transform-origin:...

JavaScript

/* Request Animation Frame SHIM */
// shim layer with setTimeout fallback
window.requestAnimFrame = (function(){
    return  window.requestAnimationFrame       ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame    ||
        function( callback ){
            window.setTimeout(callback, 1000 / 60);
        };
})();

/* Deal with animation event prefixes */
var pfx = ["webkit", "moz", "MS", "o", ""];
function PrefixedEvent(element, type, callback) {
	for (var p = 0; p < pfx.length; p++) {
		if (!pfx[p]) type = type.toLowerCase();
		element.addEventListener(pfx[p]+type, callback, false);
	}
}

/* Custom Event IE 9 /10 SHIM */
(function () {
  function CustomEvent ( 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;

   };

  CustomEvent.prototype = window.Event.prototype;

  window.CustomEvent = CustomEvent;
    
})();

(function(){
    
    var defaults = {
        notify_level: "notify"
    };
    var vars = {
        container: null
    }
    var notifications = [];
    
    var methods = {
        //create the div and ul to hold the notifications
        createContainer: function(){
            var wrap = document.createElement('div');
            //@TODO some older browsers don't like when 
            // elements are created like this
            wrap.innerHTML = '<ul class="notifyList"></ul>';
            document.querySelector('body').appendChild(wrap);
            return document.querySelector('.notifyList');
        },
        createNotification: function(details){
            console.log('createNotification ', details);
            var elm = document.createElement('li');
           ...