diff --git a/humane.js b/humane.js index 2fdb09a..3a78b45 100644 --- a/humane.js +++ b/humane.js @@ -5,11 +5,26 @@ * @contributers * Alexander (@bga_) * Jose (@joseanpg) + * Will McKenzie (@OiNutter) * @example - * humane('hello world'); + * humane('hello world'); + * See more usage examples at: http://wavded.github.com/humane-js/ */ ;(function (win,doc) { - var on, off, isArray; + 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) }; @@ -19,15 +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]' }; - - var eventing = false; - var animationInProgress = false; - var humaneEl = null; - var timeout = null; - var useFilter = /msie [678]/i.test(navigator.userAgent); // sniff, sniff - var isSetup = false; - var queue = []; - + + 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']; @@ -46,6 +57,10 @@ 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; } @@ -55,12 +70,13 @@ off (doc.body,'keypress',remove); off (doc.body,'touchstart',remove); eventing = false; - if (animationInProgress) animate(0); + 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); @@ -77,9 +93,12 @@ } }, win.humane.timeout); - var next = queue.shift(); - var type = next[0]; - var content = next[1]; + var next = queue.shift(), + type = next[0], + content = next[1], + callback = next[2]; + + after = callback; if ( isArray(content) ) content = ''; humaneEl.innerHTML = content; @@ -92,6 +111,8 @@ } else { humaneEl.className = humaneEl.className.replace(" humane-animate",""); + if(after!=null) + on(humaneEl,normalizeEvent('TransitionEnd'),after); end(); } } @@ -99,7 +120,6 @@ function end(){ setTimeout(function(){ animationInProgress = false; - humaneEl.className = "humane"; run(); },500); } @@ -109,6 +129,7 @@ if (useFilter) { return function(opacity){ humaneEl.filters.item('DXImageTransform.Microsoft.Alpha').Opacity = opacity*100; + } } else { @@ -152,6 +173,8 @@ else { humaneEl.className = humaneEl.className.replace(" humane-js-animate",""); clearInterval(interval); + if(after!=null) + after(); end(); } }, 100 / 20); @@ -159,8 +182,8 @@ } function notifier (type) { - return function (message) { - queue.push( [type, message] ); + return function (message,callback) { + queue.push( [type, message,callback] ); if(isSetup) run(); } } @@ -176,4 +199,4 @@ win.humane.waitForMove = false; win.humane.forceNew = false; -}( window, document )); +}( window, document)); diff --git a/humane.min.js b/humane.min.js index ac05f7a..81f384c 100644 --- a/humane.min.js +++ b/humane.min.js @@ -5,6 +5,8 @@ * @contributers * Alexander (@bga_) * Jose (@joseanpg) + * Will McKenzie (@OiNutter) * @example - * humane('hello world'); - */(function(a,b){function m(){h=b.createElement("div"),h.id="humane",h.className="humane",b.body.appendChild(h),k=!0}function n(){d(b.body,"mousemove",n),d(b.body,"click",n),d(b.body,"keypress",n),d(b.body,"touchstart",n),f=!1,g&&p(0)}function o(){if(g&&!a.humane.forceNew)return;if(!l.length){n();return}g=!0,i&&(clearTimeout(i),i=null),i=setTimeout(function(){f||(c(b.body,"mousemove",n),c(b.body,"click",n),c(b.body,"keypress",n),c(b.body,"touchstart",n),f=!0,a.humane.waitForMove||n())},a.humane.timeout);var d=l.shift(),j=d[0],k=d[1];e(k)&&(k=""),h.innerHTML=k,p(j,1)}function p(a,b){b===1?h.className="humane humane-"+a+" humane-animate":(h.className=h.className.replace(" humane-animate",""),q())}function q(){setTimeout(function(){g=!1,h.className="humane",o()},500)}function s(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),r(e)):clearInterval(d)},5)):(e=1,d=setInterval(function(){e>0?(e-=.1,e<0&&(e=0),r(e)):(h.className=h.className.replace(" humane-js-animate",""),clearInterval(d),q())},5))}function t(a){return function(b){l.push([a,b]),k&&o()}}var c,d,e;"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]"};var f=!1,g=!1,h=null,i=null,j=/msie [678]/i.test(navigator.userAgent),k=!1,l=[];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||(p=s),m(),o()});var r=function(){return j?function(a){h.filters.item("DXImageTransform.Microsoft.Alpha").Opacity=a*100}:function(a){h.style.opacity=String(a)}}();a.humane=t("log"),a.humane.log=t("log"),a.humane.error=t("error"),a.humane.info=t("info"),a.humane.success=t("success"),a.humane.timeout=2500,a.humane.waitForMove=!1,a.humane.forceNew=!1})(window,document); \ No newline at end of file + * 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 diff --git a/index.html b/index.html index fdada69..bcb712b 100644 --- a/index.html +++ b/index.html @@ -82,7 +82,11 @@

Select A Theme:
humane.success(["List","of","Items"]);
- + +
humane("Second parameter takes a callback that's fired when finished", function(){
+   document.body.style.backgroundColor="#6699FF";
+});
+

Options

humane.timeout = (number of milliseconds);
diff --git a/readme.md b/readme.md index bdab2d2..2b751ab 100644 --- a/readme.md +++ b/readme.md @@ -56,6 +56,7 @@ Many thanks to the JS/Browser wizards that helped make this better, community ro - @bga_ (Alexander) - @joseanpg (Jose) +- @OiNutter (Will McKenzie) ## License