diff --git a/humane.js b/humane.js index 31b26d2..7325c66 100644 --- a/humane.js +++ b/humane.js @@ -8,8 +8,9 @@ */ ;(function (win,doc) { - var on, off, isArray, + var humane, on, off, isArray, eventing = false, + useTransitions = false, animationInProgress = false, humaneEl = null, timeout = null, @@ -17,6 +18,9 @@ vendors = { Webkit: 'webkit', Moz: '', O: 'o', ms: 'MS' }, eventPrefix = "", isSetup = false, + currentMessage = {}, + noop = function(){}, + events = { 'add': noop, 'show': noop, 'hide': noop }, queue = []; if ('addEventListener' in win) { @@ -38,10 +42,9 @@ return win.humane[type][config] !== void 0 ? win.humane[type][config] : win.humane[config]; } - on (win,'load', setup) + on (win,'load', setup); function setup() { - var useTransitions = false; humaneEl = doc.createElement('div'); humaneEl.id = 'humane'; humaneEl.className = 'humane'; @@ -68,18 +71,17 @@ timeout = null; } - var next = queue.shift(), - type = next[0], - content = next[1]; - - humane._lastCallback = next[2]; + var next = queue.shift(); + currentMessage = { type: next[0], message: next[1], callback: next[2] }; + var content = currentMessage.message, + type = currentMessage.type; if ( getConfig(type, 'clickToClose') === true ) { on (humaneEl, 'click', remove); on (humaneEl, 'touchstart', remove); } - timeoutInMillis = getConfig(type, 'timeout'); + var timeoutInMillis = getConfig(type, 'timeout'); if (timeoutInMillis > 0) { timeout = setTimeout(function(){ // allow notification to stay alive for timeout @@ -89,12 +91,12 @@ on (doc.body, 'keypress', remove); on (doc.body, 'touchstart', remove); eventing = true; - console.log( getConfig(type, 'waitForMove') ); if( getConfig(type, 'waitForMove') !== true ) remove(); } }, timeoutInMillis); } + events['show'](type,content,'show'); if ( isArray(content) ) content = ''; humaneEl.innerHTML = content; @@ -104,7 +106,6 @@ function animate (level,type) { if (level === 1) { humaneEl.className = "humane humane-" + type + " humane-animate"; - off ( humaneEl, normalizeEvent('TransitionEnd'), end ); } else { humaneEl.className = humaneEl.className.replace(" humane-animate",""); @@ -126,8 +127,11 @@ function end() { + // turn off animation event if supported, a little trigger happy + if(useTransitions) off ( humaneEl, normalizeEvent('TransitionEnd'), end ); animationInProgress = false; - if(humane._lastCallback) humane._lastCallback() + if(currentMessage.callback) currentMessage.callback(); + events['hide'](currentMessage.type, currentMessage.message,'hide'); run(); } @@ -175,19 +179,24 @@ function notifier (type) { return function (message, cb) { queue.push( [type, message, cb] ); + events['add'](type,message,'add'); 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'); + // types + humane = notifier('log'); + humane.log = notifier('log'); + humane.error = notifier('error'); + humane.info = notifier('info'); + humane.success = notifier('success'); // options - win.humane.timeout = 2500; - win.humane.waitForMove = false; - win.humane.clickToClose = false; + humane.timeout = 2500; + humane.waitForMove = false; + humane.clickToClose = false; + // events + humane.on = function(type, handler){ events[type] = handler; }; + win.humane = humane; })( window, document ); diff --git a/humane.min.js b/humane.min.js index dd76183..8bfe179 100644 --- a/humane.min.js +++ b/humane.min.js @@ -5,4 +5,4 @@ * @example * humane('hello world'); * See more usage examples at: http://wavded.github.com/humane-js/ - */(function(a,b){function o(a){return l?l+a:a.toLowerCase()}function p(b,c){return a.humane[b][c]!==void 0?a.humane[b][c]:a.humane[c]}function q(){var a=!1;h=b.createElement("div"),h.id="humane",h.className="humane",b.body.appendChild(h);for(vendor in k)vendor+"TransitionProperty"in h.style&&(l=k[vendor],a=!0);a||(s=w),m=!0,r()}function r(){if(g)return;if(!n.length){t();return}after=null,g=!0,i&&(clearTimeout(i),i=null);var a=n.shift(),d=a[0],j=a[1];humane._lastCallback=a[2],p(d,"clickToClose")===!0&&(c(h,"click",t),c(h,"touchstart",t)),timeoutInMillis=p(d,"timeout"),timeoutInMillis>0&&(i=setTimeout(function(){f||(c(b.body,"mousemove",t),c(b.body,"click",t),c(b.body,"keypress",t),c(b.body,"touchstart",t),f=!0,console.log(p(d,"waitForMove")),p(d,"waitForMove")!==!0&&t())},timeoutInMillis)),e(j)&&(j=""),h.innerHTML=j,s(1,d)}function s(a,b){a===1?(h.className="humane humane-"+b+" humane-animate",d(h,o("TransitionEnd"),u)):(h.className=h.className.replace(" humane-animate",""),c(h,o("TransitionEnd"),u))}function t(){d(b.body,"mousemove",t),d(b.body,"click",t),d(b.body,"keypress",t),d(b.body,"touchstart",t),d(h,"click",t),d(h,"touchstart",t),f=!1,g&&s(0)}function u(){g=!1,humane._lastCallback&&humane._lastCallback(),r()}function w(a,b){var c,d;a===1?(d=0,h.className="humane humane-js-animate humane-"+b,j&&v(0),c=setInterval(function(){d<1?(d+=.1,d>1&&(d=1),v(d)):clearInterval(c)},5)):(d=1,c=setInterval(function(){d>0?(d-=.1,d<0&&(d=0),v(d)):(h.className=h.className.replace(" humane-js-animate",""),clearInterval(c),u())},5))}function x(a){return function(b,c){n.push([a,b,c]),m&&r()}}var c,d,e,f=!1,g=!1,h=null,i=null,j=/msie [678]/i.test(navigator.userAgent),k={Webkit:"webkit",Moz:"",O:"o",ms:"MS"},l="",m=!1,n=[];"addEventListener"in a?(c=function(a,b,c){a.addEventListener(b,c,!1)},d=function(a,b,c){a.removeEventListener(b,c,!1)}):(c=function(a,b,c){a.attachEvent("on"+b,c)},d=function(a,b,c){a.detachEvent("on"+b,c)}),e=Array.isArray||function(a){return Object.prototype.toString.call(a)==="[object Array]"},c(a,"load",q);var v=j?function(a){h.filters.item("DXImageTransform.Microsoft.Alpha").Opacity=a*100}:function(a){h.style.opacity=String(a)};a.humane=x("log"),a.humane.log=x("log"),a.humane.error=x("error"),a.humane.info=x("info"),a.humane.success=x("success"),a.humane.timeout=2500,a.humane.waitForMove=!1,a.humane.clickToClose=!1})(window,document); \ No newline at end of file + */(function(a,b){function t(a){return n?n+a:a.toLowerCase()}function u(b,c){return a.humane[b][c]!==void 0?a.humane[b][c]:a.humane[c]}function v(){j=b.createElement("div"),j.id="humane",j.className="humane",b.body.appendChild(j);for(vendor in m)vendor+"TransitionProperty"in j.style&&(n=m[vendor],h=!0);h||(x=B),o=!0,w()}function w(){if(i)return;if(!s.length){y();return}after=null,i=!0,k&&(clearTimeout(k),k=null);var a=s.shift();p={type:a[0],message:a[1],callback:a[2]};var c=p.message,e=p.type;u(e,"clickToClose")===!0&&(d(j,"click",y),d(j,"touchstart",y));var h=u(e,"timeout");h>0&&(k=setTimeout(function(){g||(d(b.body,"mousemove",y),d(b.body,"click",y),d(b.body,"keypress",y),d(b.body,"touchstart",y),g=!0,u(e,"waitForMove")!==!0&&y())},h)),r.show(e,c,"show"),f(c)&&(c=""),j.innerHTML=c,x(1,e)}function x(a,b){a===1?j.className="humane humane-"+b+" humane-animate":(j.className=j.className.replace(" humane-animate",""),d(j,t("TransitionEnd"),z))}function y(){e(b.body,"mousemove",y),e(b.body,"click",y),e(b.body,"keypress",y),e(b.body,"touchstart",y),e(j,"click",y),e(j,"touchstart",y),g=!1,i&&x(0)}function z(){h&&e(j,t("TransitionEnd"),z),i=!1,p.callback&&p.callback(),r.hide(p.type,p.message,"hide"),w()}function B(a,b){var c,d;a===1?(d=0,j.className="humane humane-js-animate humane-"+b,l&&A(0),c=setInterval(function(){d<1?(d+=.1,d>1&&(d=1),A(d)):clearInterval(c)},5)):(d=1,c=setInterval(function(){d>0?(d-=.1,d<0&&(d=0),A(d)):(j.className=j.className.replace(" humane-js-animate",""),clearInterval(c),z())},5))}function C(a){return function(b,c){s.push([a,b,c]),r.add(a,b,"add"),o&&w()}}var c,d,e,f,g=!1,h=!1,i=!1,j=null,k=null,l=/msie [678]/i.test(navigator.userAgent),m={Webkit:"webkit",Moz:"",O:"o",ms:"MS"},n="",o=!1,p={},q=function(){},r={add:q,show:q,hide:q},s=[];"addEventListener"in a?(d=function(a,b,c){a.addEventListener(b,c,!1)},e=function(a,b,c){a.removeEventListener(b,c,!1)}):(d=function(a,b,c){a.attachEvent("on"+b,c)},e=function(a,b,c){a.detachEvent("on"+b,c)}),f=Array.isArray||function(a){return Object.prototype.toString.call(a)==="[object Array]"},d(a,"load",v);var A=l?function(a){j.filters.item("DXImageTransform.Microsoft.Alpha").Opacity=a*100}:function(a){j.style.opacity=String(a)};c=C("log"),c.log=C("log"),c.error=C("error"),c.info=C("info"),c.success=C("success"),c.timeout=2500,c.waitForMove=!1,c.clickToClose=!1,c.on=function(a,b){r[a]=b},a.humane=c})(window,document); \ No newline at end of file diff --git a/index.html b/index.html index f2e3712..16d58fe 100644 --- a/index.html +++ b/index.html @@ -137,6 +137,21 @@

Customizing Options Per Type

humane.log('I'm up for 3 seconds'); humane.info('I'm up for 1 second'); +

Events

+

humane.js provides some events more intended for plumbing purposes, say you wanted to implement stacking or logging:

+
humane.on('add', function(type, message) { ... });
+
+

Fires when a new message is added to the queue

+
+
humane.on('show', function(type, message) { ... });
+
+

Fires when a message is about to be shown

+
+
humane.on('hide', function(type, message) { ... });
+
+

Fires when a message is hidden and removed

+
+

Browser Support

Uses CSS Transitions where available otherwise falls back to JS animation, degrades gracefully.