diff --git a/humane.js b/humane.js index 3a78b45..934af1e 100644 --- a/humane.js +++ b/humane.js @@ -11,8 +11,8 @@ * See more usage examples at: http://wavded.github.com/humane-js/ */ ;(function (win,doc) { - var on, - off, + var on, + off, isArray, eventing = false, animationInProgress = false, @@ -24,7 +24,7 @@ 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) }; @@ -34,11 +34,11 @@ 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) { + + 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']; @@ -70,7 +70,8 @@ off (doc.body,'keypress',remove); off (doc.body,'touchstart',remove); eventing = false; - if (animationInProgress) animate(0); + if (humane.closeOnClick) { off (humaneEl,'click',remove); off (humaneEl, 'touchstart', remove); } + if (animationInProgress) animate(0); } function run() { @@ -93,11 +94,13 @@ } }, win.humane.timeout); + if (humane.closeOnClick) { 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 = ''; @@ -111,7 +114,7 @@ } else { humaneEl.className = humaneEl.className.replace(" humane-animate",""); - if(after!=null) + if(after!=null) on(humaneEl,normalizeEvent('TransitionEnd'),after); end(); } @@ -129,7 +132,7 @@ if (useFilter) { return function(opacity){ humaneEl.filters.item('DXImageTransform.Microsoft.Alpha').Opacity = opacity*100; - + } } else { @@ -198,5 +201,6 @@ win.humane.timeout = 2500; win.humane.waitForMove = false; win.humane.forceNew = false; + win.humane.closeOnClick = false; }( window, document)); diff --git a/humane.min.js b/humane.min.js index 81f384c..1865789 100644 --- a/humane.min.js +++ b/humane.min.js @@ -9,4 +9,4 @@ * @example * humane('hello world'); * See more usage examples at: http://wavded.github.com/humane-js/ - */(function(a,b){function p(a){return l?l+a:a.toLowerCase()}function q(){h=b.createElement("div"),h.id="humane",h.className="humane",b.body.appendChild(h);for(vendor in k)h.style[vendor+"TransitionProperty"]!==undefined&&(l=k[vendor]);m=!0}function r(){d(b.body,"mousemove",r),d(b.body,"click",r),d(b.body,"keypress",r),d(b.body,"touchstart",r),f=!1,g&&t(0)}function s(){if(g&&!a.humane.forceNew)return;if(!n.length){r();return}o=null,g=!0,i&&(clearTimeout(i),i=null),i=setTimeout(function(){f||(c(b.body,"mousemove",r),c(b.body,"click",r),c(b.body,"keypress",r),c(b.body,"touchstart",r),f=!0,a.humane.waitForMove||r())},a.humane.timeout);var d=n.shift(),j=d[0],k=d[1],l=d[2];o=l,e(k)&&(k=""),h.innerHTML=k,t(j,1)}function t(a,b){b===1?h.className="humane humane-"+a+" humane-animate":(h.className=h.className.replace(" humane-animate",""),o!=null&&c(h,p("TransitionEnd"),o),u())}function u(){setTimeout(function(){g=!1,s()},500)}function w(b,c){var d,e;c===1?(e=0,h.className="humane humane-js-animate humane-"+b,h.filters&&(h.filters.item("DXImageTransform.Microsoft.Alpha").Opacity=0),a.humane.forceNew&&(e=j?h.filters.item("DXImageTransform.Microsoft.Alpha").Opacity/100|0:h.style.opacity|0),d=setInterval(function(){e<1?(e+=.1,e>1&&(e=1),v(e)):clearInterval(d)},5)):(e=1,d=setInterval(function(){e>0?(e-=.1,e<0&&(e=0),v(e)):(h.className=h.className.replace(" humane-js-animate",""),clearInterval(d),o!=null&&o(),u())},5))}function x(a){return function(b,c){n.push([a,b,c]),m&&s()}}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=[],o=null;"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",function(){var a=function(a){var b=["MozT","WebkitT","OT","msT","KhtmlT","t"];for(var c=0,d;d=b[c];c++)if(d+"ransition"in a)return!0;return!1}(b.body.style);a||(t=w),q(),s()});var v=function(){return 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.forceNew=!1})(window,document); \ No newline at end of file + */(function(a,b){function p(a){return l?l+a:a.toLowerCase()}function q(){h=b.createElement("div"),h.id="humane",h.className="humane",b.body.appendChild(h);for(vendor in k)h.style[vendor+"TransitionProperty"]!==undefined&&(l=k[vendor]);m=!0}function r(){d(b.body,"mousemove",r),d(b.body,"click",r),d(b.body,"keypress",r),d(b.body,"touchstart",r),f=!1,humane.closeOnClick&&(d(h,"click",r),d(h,"touchstart",r)),g&&t(0)}function s(){if(g&&!a.humane.forceNew)return;if(!n.length){r();return}o=null,g=!0,i&&(clearTimeout(i),i=null),i=setTimeout(function(){f||(c(b.body,"mousemove",r),c(b.body,"click",r),c(b.body,"keypress",r),c(b.body,"touchstart",r),f=!0,a.humane.waitForMove||r())},a.humane.timeout),humane.closeOnClick&&(c(h,"click",r),c(h,"touchstart",r));var d=n.shift(),j=d[0],k=d[1],l=d[2];o=l,e(k)&&(k=""),h.innerHTML=k,t(j,1)}function t(a,b){b===1?h.className="humane humane-"+a+" humane-animate":(h.className=h.className.replace(" humane-animate",""),o!=null&&c(h,p("TransitionEnd"),o),u())}function u(){setTimeout(function(){g=!1,s()},500)}function w(b,c){var d,e;c===1?(e=0,h.className="humane humane-js-animate humane-"+b,h.filters&&(h.filters.item("DXImageTransform.Microsoft.Alpha").Opacity=0),a.humane.forceNew&&(e=j?h.filters.item("DXImageTransform.Microsoft.Alpha").Opacity/100|0:h.style.opacity|0),d=setInterval(function(){e<1?(e+=.1,e>1&&(e=1),v(e)):clearInterval(d)},5)):(e=1,d=setInterval(function(){e>0?(e-=.1,e<0&&(e=0),v(e)):(h.className=h.className.replace(" humane-js-animate",""),clearInterval(d),o!=null&&o(),u())},5))}function x(a){return function(b,c){n.push([a,b,c]),m&&s()}}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=[],o=null;"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",function(){var a=function(a){var b=["MozT","WebkitT","OT","msT","KhtmlT","t"];for(var c=0,d;d=b[c];c++)if(d+"ransition"in a)return!0;return!1}(b.body.style);a||(t=w),q(),s()});var v=function(){return 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.forceNew=!1,a.humane.closeOnClick=!1})(window,document); \ No newline at end of file diff --git a/index.html b/index.html index bcb712b..ef0e75c 100644 --- a/index.html +++ b/index.html @@ -100,7 +100,7 @@

Options

humane.waitForMove = (true|false);
-

Wait for mouse, or keyboard action to be taken before clearing message (after timeout)

+

Wait for mouse, keyboard, or touch action to be taken before clearing message (after timeout)

Try It: true @@ -116,6 +116,15 @@

Options

false (default)

+ 
humane.clickToClose = (true|false);
+
+

Click or touch the notification to close

+

+ Try It: + true + false (default) +

+

Browser Support

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