/** * humanejs * humanized messages for notifications * @author marc harter (@wavded) * @contributers * alexander (@bga_) * jose (@joseanpg) * will mckenzie (@oinutter) * @example * humane('hello world'); * see more usage examples at: http://wavded.github.com/humane-js/ */ ;(function (win,doc) { var on, off, isarray, eventing = false, animationinprogress = false, humaneel = null, timeout = null, usefilter = /msie [678]/i.test(navigator.useragent), // sniff, sniff, vendors = {webkit: 'webkit', moz: '', o: 'o', ms: 'ms'}, eventprefix = "", issetup = false, queue = [], after = null; if ('addeventlistener' in win) { on = function (obj,type,fn) { obj.addeventlistener(type,fn,false) }; off = function (obj,type,fn) { obj.removeeventlistener(type,fn,false) }; } else { on = function (obj,type,fn) { obj.attachevent('on'+type,fn) }; off = function (obj,type,fn) { obj.detachevent('on'+type,fn) }; } isarray = array.isarray || function (obj) { return object.prototype.tostring.call(obj) === '[object array]' }; function normalizeevent(name) { return eventprefix ? eventprefix + name : name.tolowercase(); } on (win,'load',function () { var transitionsupported = ( function (style) { var prefixes = ['mozt','webkitt','ot','mst','khtmlt','t']; for(var i = 0, prefix; prefix = prefixes[i]; i++) { if (prefix+'ransition' in style) return true; } return false; }(doc.body.style)); if (!transitionsupported) animate = jsanimateopacity; // use js animation when no transition support setup(); run(); }); function setup() { humaneel = doc.createelement('div'); humaneel.id = 'humane'; humaneel.classname = 'humane'; doc.body.appendchild(humaneel); for (vendor in vendors){ if (humaneel.style[vendor + 'transitionproperty'] !== undefined) eventprefix = vendors[vendor]; } issetup = true; } function remove() { off (doc.body,'mousemove',remove); off (doc.body,'click',remove); off (doc.body,'keypress',remove); off (doc.body,'touchstart',remove); eventing = false; if (humane.clicktoclose) { off (humaneel,'click',remove); off (humaneel, 'touchstart', remove); } if (animationinprogress) animate(0); } function run() { if (animationinprogress && !win.humane.forcenew) return; if (!queue.length) { remove(); return; } after = null; animationinprogress = true; if (timeout) { cleartimeout(timeout); timeout = null; } timeout = settimeout(function(){ // allow notification to stay alive for timeout if (!eventing) { on (doc.body,'mousemove',remove); on (doc.body,'click',remove); on (doc.body,'keypress',remove); on (doc.body,'touchstart',remove); eventing = true; if(!win.humane.waitformove) remove(); } }, win.humane.timeout); if (humane.clicktoclose) { on (humaneel,'click',remove); on (humaneel, 'touchstart', remove); } var next = queue.shift(), type = next[0], content = next[1], callback = next[2]; after = callback; if ( isarray(content) ) content = ''; humaneel.innerhtml = content; animate(type,1); } function animate (type,level) { if(level === 1){ humaneel.classname = "humane humane-" + type + " humane-animate"; } else { humaneel.classname = humaneel.classname.replace(" humane-animate",""); if(after!=null) on(humaneel,normalizeevent('transitionend'),after); end(); } } function end(){ settimeout(function(){ animationinprogress = false; run(); },500); } // if css transitions not supported, fallback to js animation var setopacity = (function(){ if (usefilter) { return function(opacity){ humaneel.filters.item('dximagetransform.microsoft.alpha').opacity = opacity*100; } } else { return function (opacity) { humaneel.style.opacity = string(opacity); } } }()); function jsanimateopacity(type,level){ var interval; var opacity; if (level === 1) { opacity = 0; humaneel.classname = "humane humane-js-animate humane-" + type; if (humaneel.filters) humaneel.filters.item('dximagetransform.microsoft.alpha').opacity = 0; // reset value so hover states work if (win.humane.forcenew) { opacity = usefilter ? humaneel.filters.item('dximagetransform.microsoft.alpha').opacity/100|0 : humaneel.style.opacity|0; } interval = setinterval(function(){ if (opacity < 1) { opacity += 0.1; if (opacity > 1) opacity = 1; setopacity(opacity); } else { clearinterval(interval); } }, 100 / 20); } else { opacity = 1; interval = setinterval(function(){ if(opacity > 0) { opacity -= 0.1; if (opacity < 0) opacity = 0; setopacity(opacity); } else { humaneel.classname = humaneel.classname.replace(" humane-js-animate",""); clearinterval(interval); if(after!=null) after(); end(); } }, 100 / 20); } } function notifier (type) { return function (message,callback) { queue.push( [type, message,callback] ); if(issetup) run(); } } win.humane = notifier('log'); win.humane.log = notifier('log'); win.humane.error = notifier('error'); win.humane.info = notifier('info'); win.humane.success = notifier('success'); win.humane.timeout = 2500; win.humane.waitformove = false; win.humane.forcenew = false; win.humane.clicktoclose = false; }( window, document));