Merge pull request #34 from nnattawat/eventcallback

Mergeing eventcallback

README.md

@@ -1,9 +1,14 @@
-# jQuery Flip <sub><sup>v1.0.13</sup></sub>
+# jQuery Flip <sub><sup>v1.0.14</sup></sub>
 
 **A lightweight jQuery plugin to create 3d flip animation.** 
 See the [project page](http://nnattawat.github.io/flip/)
 
 ## What's new
+* **Flip v1.0.14**
+  * [Added missing jQuery dependency](https://github.com/nnattawat/flip/commit/0c913304c2b9f86099cb7a2b7fd6ea408297655c)
+  * [Fixed scoping issues](https://github.com/nnattawat/flip/commit/f1ce8f6a313fe905193cae22668dbced0d246451)
+  * [Added support for jquery event](https://github.com/nnattawat/flip/commit/780ab0322862a3626ca7732461423e67c76569d1)
+
 * **Flip v1.0.13**
   * [Added ability to change 'reverse' dynamically](https://github.com/nnattawat/flip/commit/a047b24569abd3e5357255a6b143781f91356af0)
 
@@ -43,15 +48,15 @@ See the [project page](http://nnattawat.github.io/flip/)
 ## Getting Started
 
 ### CDN
-    https://cdn.rawgit.com/nnattawat/flip/v1.0.13/dist/jquery.flip.min.js
+    https://cdn.rawgit.com/nnattawat/flip/v1.0.14/dist/jquery.flip.min.js
 
 ### Download 
 * [jquery.flip.js][max] (development version, commented ~9kB)
 * [jquery.flip.min.js][min] (production version, minified ~4kB, gzipped ~2kB)
 * [jquery.flip.min.js.map][map] (source map, ~5kB)
-[max]: https://cdn.rawgit.com/nnattawat/flip/v1.0.13/dist/jquery.flip.js
-[min]: https://cdn.rawgit.com/nnattawat/flip/v1.0.13/dist/jquery.flip.min.js
-[map]: https://cdn.rawgit.com/nnattawat/flip/v1.0.13/dist/jquery.flip.min.js.map
+[max]: https://cdn.rawgit.com/nnattawat/flip/v1.0.14/dist/jquery.flip.js
+[min]: https://cdn.rawgit.com/nnattawat/flip/v1.0.14/dist/jquery.flip.min.js
+[map]: https://cdn.rawgit.com/nnattawat/flip/v1.0.14/dist/jquery.flip.min.js.map
 
 ### Bower
 <pre>bower install flip</pre>

bower.json

@@ -1,7 +1,9 @@
 {
   "name": "flip",
-  "version": "1.0.13",
-  "dependencies": {},
+  "version": "1.0.14",
+  "dependencies": {
+  	"jquery": "~2.1.1"
+  	},
   "devDependencies": {
     "jquery": "~2.1.1"
   }

dist/jquery.flip.js

@@ -1,8 +1,8 @@
-/*! flip - v1.0.13 - 2015-07-16
+/*! flip - v1.0.14 - 2015-07-17
 * https://github.com/nnattawat/flip
 * Copyright (c) 2015 Nattawat Nonsung; Licensed MIT */
 (function( $ ) {
-  var flip = function($dom) {
+  var flip = function($dom, callback) {
     $dom.data("flipped", true);
 
     var rotateAxis = "rotate" + $dom.data("axis");
@@ -15,9 +15,17 @@
       transform: rotateAxis + "(0deg)",
       "z-index": "1"
     });
+
+    //Providing a nicely wrapped up callback because transform is essentially async
+     $dom.one(whichTransitionEvent(), function(){
+        $(this).trigger('flip:done');
+        if (callback !== undefined){
+          callback.call(this);
+        }
+      });
   };
 
-  var unflip = function($dom) {
+  var unflip = function($dom, callback) {
     $dom.data("flipped", false);
 
     var rotateAxis = "rotate" + $dom.data("axis");
@@ -30,12 +38,20 @@
       transform: rotateAxis + ($dom.data("reverse") ? "(180deg)" : "(-180deg)"),
       "z-index": "0"
     });
+
+    //Providing a nicely wrapped up callback because transform is essentially async
+     $dom.one(whichTransitionEvent(), function(){
+        $(this).trigger('flip:done');
+        if (callback !== undefined){
+          callback.call(this);
+        }
+      });
   };
   // Function from David Walsh: http://davidwalsh.name/css-animation-callback licensed with http://opensource.org/licenses/MIT
   var whichTransitionEvent = function(){
     var t,
         el = document.createElement("fakeelement"),
-		transitions = {
+    transitions = {
       "transition"      : "transitionend",
       "OTransition"     : "oTransitionEnd",
       "MozTransition"   : "transitionend",
@@ -61,14 +77,17 @@
             options = !$dom.data("flipped");
           }
           if (options) {
-            flip($dom);
+            flip($dom,callback);
           } else {
-            unflip($dom);
-          }
-          //Providing a nicely wrapped up callback because transform is essentially async
-          if (callback !== undefined){
-           $(this).one(whichTransitionEvent(), callback);
+            unflip($dom,callback);
           }
+          // //Providing a nicely wrapped up callback because transform is essentially async
+          //  $(this).one(whichTransitionEvent(), function(){
+          //     $(this).trigger('flip:done');
+          //     if (callback !== undefined){
+          //       callback.call(this);
+          //     }
+          //   });
         } else if (!$dom.data("initiated")){ //Init flipable DOM
           $dom.data("initiated", true);
 
@@ -185,7 +204,12 @@
         }else{
           //The element has been initiated, all we have to do is change applicable settings
           if (options.axis !== undefined || options.reverse !== undefined){
-            changeSettings.call(this,options,callback);
+            changeSettings.call(this,options,function(){
+              $dom.trigger('flip:change');
+              if (callback !== undefined){
+                callback.call(this);
+              }
+            });
           }
       }
     });
@@ -231,15 +255,11 @@
         faces.css({
           transition: savedTrans
         });
-        if (callback !== undefined){
           callback.call(this);
-        }
-      },0);
+      }.bind(this),0);
     }else{
       //If we didnt have to set the axis we can just call back.
-      if (callback !== undefined){
         setTimeout(callback.bind(this), 0);
-      }
     }
   };
 }( jQuery ));