Added callback support (@OiNutter)

wavded · Dec 2, 2011 · b495dae · b495dae
1 parent 021b33d
commit b495dae
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 22 deletions.
diff --git 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 = '<ul><li>' + content.join('<li>') + '</ul>';
 
     humaneEl.innerHTML = content;
@@ -92,14 +111,15 @@
     }
     else {
       humaneEl.className = humaneEl.className.replace(" humane-animate","");
+      if(after!=null) 
+    	  on(humaneEl,normalizeEvent('TransitionEnd'),after);
       end();
     }
   }
 
   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,15 +173,17 @@
         else {
           humaneEl.className = humaneEl.className.replace(" humane-js-animate","");
           clearInterval(interval);
+          if(after!=null)
+        	  after();
           end();
         }
       }, 100 / 20);
     }
   }
 
   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
diff --git a/index.html b/index.html
@@ -82,7 +82,11 @@ <h3>Select A Theme:
       <a href='javascript:humane.success(["List","of","Items"])'>
          <pre>humane.success(["List","of","Items"]);</pre>
       </a>
-
+      <a href='javascript:humane("The background color will change when finished",function(){document.body.style.backgroundColor="#6699FF"})'>
+         <pre>humane("Second parameter takes a callback that's fired when finished", function(){
+   document.body.style.backgroundColor="#6699FF";
+});</pre>
+      </a>
       <h3>Options</h3>
       <pre>humane.timeout = (number of milliseconds);</pre>
       <blockquote>

diff --git 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