humane.js

gistfile1.js

/**
 * HumaneJS
 * Humanized Messages for Notifications
 * @example
 *  humane('hello world');
 */
;(function(win,doc){

    var eventOn, eventOff;
    if (win.addEventListener) {
      eventOn  = function(type,fn){win.addEventListener(type,fn,false)}
      eventOff = function(type,fn){win.removeEventListener(type,fn,false)}
    }
    else {
      eventOn  = function(type,fn){win.attachEvent('on'+type,fn)};
      eventOff = function(type,fn){win.detachEvent('on'+type,fn)};
    }

    var eventing = false,
    animationInProgress = false,
    humaneEl = null,
    timeout = null,
    useFilter = /msie [678]/i.test(navigator.userAgent), // ua sniff for filter support
    isSetup = false,
    queue = [];

    eventOn('load',function(){
      var prefixes = ['MozT','WebkitT','OT','msT','KhtmlT','t'],
          style = doc.body.style,
          transitionSupported = false; 
      for(var i = 0, prefix; prefix = prefixes[i]; i++){
        if(prefix+'ransition' in style) {
           transitionSupported = true;
           break;
        }
      }
      if (!transitionSupported) animate = jsAnimateOpacity;
      setup();
      run();
    });

   animate = jsAnimateOpacity;

   function setup() {
     humaneEl = doc.createElement('div');
     humaneEl.id = 'humane';
     humaneEl.className = 'humane';
     doc.body.appendChild(humaneEl);
     isSetup = true;
   }


   function remove(){
     eventOff('mousemove',remove);
     eventOff('click',remove);
     eventOff('keypress',remove);
     eventing = false;
     if (timeout) clearTimeout(timeout);
     if (animationInProgress) animate(0);
   }

   function run(){
     if(animationInProgress) return;
     if (!queue.length) {
        remove();
        return;
     }

     animationInProgress = true;

     if (!eventing) { 
       eventOn('mousemove',remove);
       eventOn('click',remove);
       eventOn('keypress',remove);
       eventing = true;
     }

     humaneEl.innerHTML = queue.shift();
     animate(1);
   }


    function animate(level){
      if (level === 1) {
        humaneEl.className = "humane humane-show";
        down();
      }
      else {
        humaneEl.className = "humane";
        end();
      }
    }

    function down() {
      timeout = setTimeout(function(){animate(0);},win.humane.timeout);
    }

    function end() {
     animationInProgress = false;
     setTimeout(run,500);
    }

    ////////////////////////////////////// jsAnimateOpacity  /////////////////////////////// 
   
    var getOpacity, addOpacity,opacity;
    if (useFilter) {
      (function(){
        var hatedie = humaneEl.filters.item('DXImageTransform.Microsoft.Alpha'),
        setOpacity = function(opacity) {
           hatedie.Opacity = opacity*100;
        }
      })();
    }
    else {
      setOpacity = function(opacity) {
         humaneEl.style.opacity = String(opacity);
      }
    } 

    function jsAnimateOpacity(level){
      var interval;
      var opacity;
      if (level === 1) {
        opacity = 0;
        interval = setInterval(function(){
          if(opacity < 1) {
            opacity +=0.1;
            if (opacity>1) opacity = 1;
            setOpacity(opacity);
          }
          else {
            clearInterval(interval);
            humaneEl.style.visibility = "visible";
            down();
          }
        },25);
      }
      else {
        opacity = 1;
        interval = setInterval(function(){
          if(opacity > 0) { 
            opacity -=0.1;
            if (opacity<0) opacity = 0;
            setOpacity(opacity);
          }
          else {
            clearInterval(interval);
            humaneEl.style.visibility = "hidden";
            end();
          }
        },25);
      }
    }
 



    /////////////////////////// Export //////////////////////////////////////

    function notify(message) {
      queue.push(message);
      run();
    };

    win.humane = notify;
    win.humane.timeout = 2000;

})(window,document);