diff --git a/README.md b/README.md index a447cd9..5413b0c 100644 --- a/README.md +++ b/README.md @@ -1,9 +1,14 @@ -# jQuery Flip v1.0.13 +# jQuery Flip v1.0.14 **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
bower install flipdiff --git a/bower.json b/bower.json index 9976763..e9dfe42 100644 --- a/bower.json +++ b/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" } diff --git a/dist/jquery.flip.js b/dist/jquery.flip.js index 14c1aba..a88051f 100644 --- a/dist/jquery.flip.js +++ b/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 )); \ No newline at end of file diff --git a/dist/jquery.flip.min.js b/dist/jquery.flip.min.js index d9942dc..8233c66 100644 --- a/dist/jquery.flip.min.js +++ b/dist/jquery.flip.min.js @@ -1,6 +1,6 @@ -/*! 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(a){var b=function(a){a.data("flipped",!0);var b="rotate"+a.data("axis");a.find(a.data("front")).css({transform:b+(a.data("reverse")?"(-180deg)":"(180deg)"),"z-index":"0"}),a.find(a.data("back")).css({transform:b+"(0deg)","z-index":"1"})},c=function(a){a.data("flipped",!1);var b="rotate"+a.data("axis");a.find(a.data("front")).css({transform:b+"(0deg)","z-index":"1"}),a.find(a.data("back")).css({transform:b+(a.data("reverse")?"(180deg)":"(-180deg)"),"z-index":"0"})},d=function(){var a,b=document.createElement("fakeelement"),c={transition:"transitionend",OTransition:"oTransitionEnd",MozTransition:"transitionend",WebkitTransition:"webkitTransitionEnd"};for(a in c)if(void 0!==b.style[a])return c[a]};a.fn.flip=function(f,g){return"function"==typeof f&&(g=f),this.each(function(){var h=a(this);if(void 0===f||"boolean"!=typeof f&&"string"!=typeof f)if(h.data("initiated"))(void 0!==f.axis||void 0!==f.reverse)&&e.call(this,f,g);else{h.data("initiated",!0);var i=a.extend({axis:"y",reverse:!1,trigger:"click",speed:500,forceHeight:!1,forceWidth:!1,autoSize:!0,front:"auto",back:"auto"},f);"auto"==i.front?i.front=h.find(".front").length>0?".front":"div:first-child":"autostrict"==i.front&&(i.front="div:first-child"),"auto"==i.back?i.back=h.find(".back").length>0?".back":"div:first-child + div":"autostrict"==i.back&&(i.back="div:first-child + div"),h.data("reverse",i.reverse),h.data("axis",i.axis),h.data("front",i.front),h.data("back",i.back);var j="rotate"+("x"==i.axis.toLowerCase()?"x":"y"),k=2*h["outer"+("rotatex"==j?"Height":"Width")]();h.find(h.data("back")).css({transform:j+"("+(i.reverse?"180deg":"-180deg")+")"}),h.css({perspective:k,position:"relative"});var l=i.speed/1e3||.5,m=h.find(i.front).add(i.back,h);if(i.forceHeight?m.outerHeight(h.height()):i.autoSize&&m.css({height:"100%"}),i.forceWidth?m.outerWidth(h.width()):i.autoSize&&m.css({width:"100%"}),m.css({"backface-visibility":"hidden","transform-style":"preserve-3d",position:"absolute","z-index":"1"}),h.find(h.data("back")).css({transform:j+"("+(i.reverse?"180deg":"-180deg")+")","z-index":"0"}),setTimeout(function(){m.css({transition:"all "+l+"s ease-out"}),void 0!==g&&g.call(this)},20),"click"==i.trigger.toLowerCase())h.on(a.fn.tap?"tap":"click",function(d){d||(d=window.event),h.find(a(d.target).closest('button, a, input[type="submit"]')).length||(h.data("flipped")?c(h):b(h))});else if("hover"==i.trigger.toLowerCase()){var n=function(){h.unbind("mouseleave",o),b(h),setTimeout(function(){h.bind("mouseleave",o),h.is(":hover")||c(h)},i.speed+150)},o=function(){c(h)};h.mouseenter(n),h.mouseleave(o)}}else"toggle"==f&&(f=!h.data("flipped")),f?b(h):c(h),void 0!==g&&a(this).one(d(),g)}),this};var e=function(b,c){var d=!1;if(void 0!==b.axis&&a(this).data("axis")!=b.axis.toLowerCase()&&(a(this).data("axis",b.axis.toLowerCase()),d=!0),void 0!==b.reverse&&a(this).data("reverse")!=b.reverse&&(a(this).data("reverse",b.reverse),d=!0),d){var e=a(this).find(a(this).data("front")).add(a(this).data("back"),a(this)),f=e.css("transition");e.css({transition:"none"});var g="rotate"+a(this).data("axis");a(this).data("flipped")?a(this).find(a(this).data("front")).css({transform:g+(a(this).data("reverse")?"(-180deg)":"(180deg)"),"z-index":"0"}):a(this).find(a(this).data("back")).css({transform:g+"("+(a(this).data("reverse")?"180deg":"-180deg")+")","z-index":"0"}),setTimeout(function(){e.css({transition:f}),void 0!==c&&c.call(this)},0)}else void 0!==c&&setTimeout(c.bind(this),0)}}(jQuery); +!function(a){var b=function(b,c){b.data("flipped",!0);var e="rotate"+b.data("axis");b.find(b.data("front")).css({transform:e+(b.data("reverse")?"(-180deg)":"(180deg)"),"z-index":"0"}),b.find(b.data("back")).css({transform:e+"(0deg)","z-index":"1"}),b.one(d(),function(){a(this).trigger("flip:done"),void 0!==c&&c.call(this)})},c=function(b,c){b.data("flipped",!1);var e="rotate"+b.data("axis");b.find(b.data("front")).css({transform:e+"(0deg)","z-index":"1"}),b.find(b.data("back")).css({transform:e+(b.data("reverse")?"(180deg)":"(-180deg)"),"z-index":"0"}),b.one(d(),function(){a(this).trigger("flip:done"),void 0!==c&&c.call(this)})},d=function(){var a,b=document.createElement("fakeelement"),c={transition:"transitionend",OTransition:"oTransitionEnd",MozTransition:"transitionend",WebkitTransition:"webkitTransitionEnd"};for(a in c)if(void 0!==b.style[a])return c[a]};a.fn.flip=function(d,f){return"function"==typeof d&&(f=d),this.each(function(){var g=a(this);if(void 0===d||"boolean"!=typeof d&&"string"!=typeof d)if(g.data("initiated"))(void 0!==d.axis||void 0!==d.reverse)&&e.call(this,d,function(){g.trigger("flip:change"),void 0!==f&&f.call(this)});else{g.data("initiated",!0);var h=a.extend({axis:"y",reverse:!1,trigger:"click",speed:500,forceHeight:!1,forceWidth:!1,autoSize:!0,front:"auto",back:"auto"},d);"auto"==h.front?h.front=g.find(".front").length>0?".front":"div:first-child":"autostrict"==h.front&&(h.front="div:first-child"),"auto"==h.back?h.back=g.find(".back").length>0?".back":"div:first-child + div":"autostrict"==h.back&&(h.back="div:first-child + div"),g.data("reverse",h.reverse),g.data("axis",h.axis),g.data("front",h.front),g.data("back",h.back);var i="rotate"+("x"==h.axis.toLowerCase()?"x":"y"),j=2*g["outer"+("rotatex"==i?"Height":"Width")]();g.find(g.data("back")).css({transform:i+"("+(h.reverse?"180deg":"-180deg")+")"}),g.css({perspective:j,position:"relative"});var k=h.speed/1e3||.5,l=g.find(h.front).add(h.back,g);if(h.forceHeight?l.outerHeight(g.height()):h.autoSize&&l.css({height:"100%"}),h.forceWidth?l.outerWidth(g.width()):h.autoSize&&l.css({width:"100%"}),l.css({"backface-visibility":"hidden","transform-style":"preserve-3d",position:"absolute","z-index":"1"}),g.find(g.data("back")).css({transform:i+"("+(h.reverse?"180deg":"-180deg")+")","z-index":"0"}),setTimeout(function(){l.css({transition:"all "+k+"s ease-out"}),void 0!==f&&f.call(this)},20),"click"==h.trigger.toLowerCase())g.on(a.fn.tap?"tap":"click",function(d){d||(d=window.event),g.find(a(d.target).closest('button, a, input[type="submit"]')).length||(g.data("flipped")?c(g):b(g))});else if("hover"==h.trigger.toLowerCase()){var m=function(){g.unbind("mouseleave",n),b(g),setTimeout(function(){g.bind("mouseleave",n),g.is(":hover")||c(g)},h.speed+150)},n=function(){c(g)};g.mouseenter(m),g.mouseleave(n)}}else"toggle"==d&&(d=!g.data("flipped")),d?b(g,f):c(g,f)}),this};var e=function(b,c){var d=!1;if(void 0!==b.axis&&a(this).data("axis")!=b.axis.toLowerCase()&&(a(this).data("axis",b.axis.toLowerCase()),d=!0),void 0!==b.reverse&&a(this).data("reverse")!=b.reverse&&(a(this).data("reverse",b.reverse),d=!0),d){var e=a(this).find(a(this).data("front")).add(a(this).data("back"),a(this)),f=e.css("transition");e.css({transition:"none"});var g="rotate"+a(this).data("axis");a(this).data("flipped")?a(this).find(a(this).data("front")).css({transform:g+(a(this).data("reverse")?"(-180deg)":"(180deg)"),"z-index":"0"}):a(this).find(a(this).data("back")).css({transform:g+"("+(a(this).data("reverse")?"180deg":"-180deg")+")","z-index":"0"}),setTimeout(function(){e.css({transition:f}),c.call(this)}.bind(this),0)}else setTimeout(c.bind(this),0)}}(jQuery); //# sourceMappingURL=jquery.flip.min.js.map \ No newline at end of file diff --git a/dist/jquery.flip.min.js.map b/dist/jquery.flip.min.js.map index b1736ca..4b97b9c 100644 --- a/dist/jquery.flip.min.js.map +++ b/dist/jquery.flip.min.js.map @@ -1 +1 @@ -{"version":3,"file":"dist/jquery.flip.min.js","sources":["src/flip.js"],"names":["$","flip","$dom","data","rotateAxis","find","css","transform","z-index","unflip","whichTransitionEvent","t","el","document","createElement","transitions","transition","OTransition","MozTransition","WebkitTransition","undefined","style","fn","options","callback","this","each","axis","reverse","changeSettings","call","settings","extend","trigger","speed","forceHeight","forceWidth","autoSize","front","back","length","toLowerCase","perspective","position","speedInSec","faces","add","outerHeight","height","outerWidth","width","backface-visibility","transform-style","setTimeout","on","tap","event","window","target","closest","performFlip","unbind","performUnflip","bind","is","mouseenter","mouseleave","one","changeNeeded","savedTrans","jQuery"],"mappings":"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"} \ No newline at end of file +{"version":3,"file":"dist/jquery.flip.min.js","sources":["src/flip.js"],"names":["$","flip","$dom","callback","data","rotateAxis","find","css","transform","z-index","one","whichTransitionEvent","this","trigger","undefined","call","unflip","t","el","document","createElement","transitions","transition","OTransition","MozTransition","WebkitTransition","style","fn","options","each","axis","reverse","changeSettings","settings","extend","speed","forceHeight","forceWidth","autoSize","front","back","length","toLowerCase","perspective","position","speedInSec","faces","add","outerHeight","height","outerWidth","width","backface-visibility","transform-style","setTimeout","on","tap","event","window","target","closest","performFlip","unbind","performUnflip","bind","is","mouseenter","mouseleave","changeNeeded","savedTrans","jQuery"],"mappings":"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"} \ No newline at end of file diff --git a/package.json b/package.json index c622b0d..18849db 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "flip", - "version": "1.0.13", + "version": "1.0.14", "description": "jQuery Plugin - 3d Flip Content", "keywords": [ "jquery-plugin" diff --git a/src/flip.js b/src/flip.js index 55471da..0400376 100644 --- a/src/flip.js +++ b/src/flip.js @@ -1,5 +1,5 @@ (function( $ ) { - var flip = function($dom) { + var flip = function($dom, callback) { $dom.data("flipped", true); var rotateAxis = "rotate" + $dom.data("axis"); @@ -12,9 +12,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"); @@ -27,12 +35,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", @@ -58,14 +74,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); @@ -182,7 +201,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); + } + }); } } }); @@ -228,15 +252,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 )); \ No newline at end of file