flipping - npm Package Compare versions

Comparing version 0.6.0 to 0.6.1

dist/flipping.js

@@ -1,1 +0,1 @@
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.Flipping=e():t.Flipping=e()}(this,function(){return function(t){function e(o){if(n[o])return n[o].exports;var i=n[o]={i:o,l:!1,exports:{}};return t[o].call(i.exports,i,i.exports,e),i.l=!0,i.exports}var n={};return e.m=t,e.c=n,e.i=function(t){return t},e.d=function(t,n,o){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:o})},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=5)}({0:function(t,e,n){"use strict";function o(t){var e=s(t),n=e.width,o=e.height;return 0===n&&0===o}function i(t,e){return t?t.height?e.height?{top:t.top-e.top,left:t.left-e.left,width:t.width/e.width,height:t.height/e.height}:e:t:f}var r=this&&this.__assign||Object.assign||function(t){for(var e,n=1,o=arguments.length;n<o;n++){e=arguments[n];for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i])}return t};e.__esModule=!0;var a=function(t){return t},u=function(){},s=function(t){var e=t.getBoundingClientRect();return{top:e.top,left:e.left,width:e.width,height:e.height,transform:getComputedStyle(t).transform}},f={top:0,left:0,width:1,height:1},p=function(t){var e=t.querySelectorAll("[data-flip-key]"),n={},i=[];return e.forEach(function(t){if(!o(t)){var e=t.getAttribute("data-flip-key");n[e]=t,i.push(t)}}),i},c=function(){return!0},l=function(t){return t.getAttribute("data-flip-key")},d=function(){function t(t){void 0===t&&(t={});var e=this;this.selector=t.selector||p,this.active=t.active||c,this.selectActive=function(t){return e.selector(t).filter(function(t){return e.active(t)})},this.getBounds=t.getBounds||s,this.getDelta=t.getDelta||i,this.getKey=t.getKey||l,this.onRead=t.onRead||a,this.onEnter=t.onEnter||u,this.onFlip=t.onFlip||u,this.onLeave=t.onLeave||u,this.parentElement=t.parent||document.documentElement,this.states={}}return t.prototype.getRelativeBounds=function(t,e){return r({},e,{top:e.top-t.top,left:e.left-t.left})},t.prototype.read=function(t){void 0===t&&(t={}),this.flip(r({},t,{readOnly:!0}))},t.prototype.flip=function(t){var e=this;void 0===t&&(t={});var n=t.parent||this.parentElement,o=this.selectActive(n),i={},r=this.getBounds(n),a=!1;o.forEach(function(n){var o=e.getKey(n),u=e.states[o],s=u&&"LEAVE"!==u.type;a=!0;var f=e.getRelativeBounds(r,e.getBounds(n)),p={type:s?"MOVE":"ENTER",key:o,node:n,bounds:f,delta:s?e.getDelta(u.bounds,f):void 0,start:Date.now(),animation:s?u.animation:void 0,previous:u};e.states[o]=i[o]=p,t.readOnly&&e.onRead(p)}),t.readOnly||(Object.keys(this.states).forEach(function(t){i[t]||(e.states[t]=i[t]={type:"LEAVE",key:t,node:void 0,bounds:void 0,start:Date.now(),animation:void 0,previous:e.states[t]})}),Object.keys(i).forEach(function(t){var n=i[t],o=n.node||n.previous&&n.previous.node;if(o){var r=o.getAttribute("data-flip-follow");"ENTER"!==n.type&&"LEAVE"!==n.type||!r||(n.delta=i[r].delta)}var a={ENTER:e.onEnter,MOVE:e.onFlip,LEAVE:e.onLeave}[n.type].call(e,n,t,i);a&&e.animate(t,a)}))},t.prototype.animate=function(t,e){this.states[t].animation=e},t.prototype.wrap=function(t,e){var n=this;return void 0===e&&(e={}),function(){for(var o=[],i=0;i<arguments.length;i++)o[i]=arguments[i];n.read(e);var r=t.apply(null,o);return n.flip(e),r}},t.rect=s,t}();e.default=d},5:function(t,e,n){"use strict";var o=n(0);t.exports=o.default}})});
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.Flipping=e():t.Flipping=e()}(this,function(){return function(t){function e(o){if(n[o])return n[o].exports;var i=n[o]={i:o,l:!1,exports:{}};return t[o].call(i.exports,i,i.exports,e),i.l=!0,i.exports}var n={};return e.m=t,e.c=n,e.i=function(t){return t},e.d=function(t,n,o){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:o})},e.n=function(t){var n=t&&t.__esModule?function(){return t.default}:function(){return t};return e.d(n,"a",n),n},e.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},e.p="",e(e.s=5)}({0:function(t,e,n){"use strict";function o(t){var e=s(t),n=e.width,o=e.height;return 0===n&&0===o}function i(t,e){return t?t.height?e.height?{top:t.top-e.top,left:t.left-e.left,width:t.width/e.width,height:t.height/e.height}:e:t:f}var r=this&&this.__assign||Object.assign||function(t){for(var e,n=1,o=arguments.length;n<o;n++){e=arguments[n];for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i])}return t};e.__esModule=!0;var a=function(t){return t},u=function(){},s=function(t){var e=t.getBoundingClientRect();return{top:e.top,left:e.left,width:e.width,height:e.height,transform:getComputedStyle(t).transform}},f={top:0,left:0,width:1,height:1},p=function(t){var e=t.querySelectorAll("[data-flip-key]"),n={},i=[];return e.forEach(function(t){if(!o(t)){var e=t.getAttribute("data-flip-key");n[e]=t,i.push(t)}}),i},l=function(){return!0},c=function(t){return t.getAttribute("data-flip-key")},d=function(){function t(t){void 0===t&&(t={});var e=this;this.selector=t.selector||p,this.active=t.active||l,this.selectActive=function(t){return e.selector(t).filter(function(t){return e.active(t)})},this.getBounds=t.getBounds||s,this.getDelta=t.getDelta||i,this.getKey=t.getKey||c,this.onRead=t.onRead||a,this.onEnter=t.onEnter||u,this.onFlip=t.onFlip||u,this.onLeave=t.onLeave||u,this.parentElement=t.parent||document.documentElement,this.states={}}return t.prototype.getRelativeBounds=function(t,e){return r({},e,{top:e.top-t.top,left:e.left-t.left})},t.prototype.read=function(t){void 0===t&&(t={}),this.flip(r({},t,{readOnly:!0}))},t.prototype.flip=function(t){var e=this;void 0===t&&(t={});var n=t.parent||this.parentElement,o=this.selectActive(n),i={},a=this.getBounds(n),u=r({onFlip:this.onFlip,onEnter:this.onEnter,onLeave:this.onLeave},t);o.forEach(function(n,o){var r=e.getKey(n),u=e.states[r],s=u&&"LEAVE"!==u.type,f=e.getRelativeBounds(a,e.getBounds(n)),p={type:s?"MOVE":"ENTER",key:r,node:n,bounds:f,delta:s?e.getDelta(u.bounds,f):void 0,start:Date.now(),animation:s?u.animation:void 0,index:o,previous:u};e.states[r]=i[r]=p,t.readOnly&&e.onRead(p)}),t.readOnly||(Object.keys(this.states).forEach(function(t){i[t]||(e.states[t]=i[t]={type:"LEAVE",key:t,node:void 0,bounds:void 0,start:Date.now(),animation:void 0,previous:e.states[t]})}),Object.keys(i).forEach(function(t){var n=i[t],o=n.node||n.previous&&n.previous.node;if(o){var r=o.getAttribute("data-flip-follow");"ENTER"!==n.type&&"LEAVE"!==n.type||!r||(n.delta=i[r].delta)}var a={ENTER:u.onEnter,MOVE:u.onFlip,LEAVE:u.onLeave}[n.type].call(e,n,t,i);a&&e.animate(t,a)}))},t.prototype.animate=function(t,e){this.states[t].animation=e},t.prototype.wrap=function(t,e){var n=this;return void 0===e&&(e={}),function(){for(var o=[],i=0;i<arguments.length;i++)o[i]=arguments[i];n.read(e);var r=t.apply(null,o);return n.flip(e),r}},t.rect=s,t}();e.default=d},5:function(t,e,n){"use strict";var o=n(0);t.exports=o.default}})});

dist/flipping.web.js

@@ -1,1 +0,1 @@
-!function(t,n){"object"==typeof exports&&"object"==typeof module?module.exports=n():"function"==typeof define&&define.amd?define([],n):"object"==typeof exports?exports.Flipping=n():t.Flipping=n()}(this,function(){return function(t){function n(e){if(r[e])return r[e].exports;var o=r[e]={i:e,l:!1,exports:{}};return t[e].call(o.exports,o,o.exports,n),o.l=!0,o.exports}var r={};return n.m=t,n.c=r,n.i=function(t){return t},n.d=function(t,r,e){n.o(t,r)||Object.defineProperty(t,r,{configurable:!1,enumerable:!0,get:e})},n.n=function(t){var r=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(r,"a",r),r},n.o=function(t,n){return Object.prototype.hasOwnProperty.call(t,n)},n.p="",n(n.s=7)}([function(t,n,r){"use strict";function e(t){var n=f(t),r=n.width,e=n.height;return 0===r&&0===e}function o(t,n){return t?t.height?n.height?{top:t.top-n.top,left:t.left-n.left,width:t.width/n.width,height:t.height/n.height}:n:t:s}var i=this&&this.__assign||Object.assign||function(t){for(var n,r=1,e=arguments.length;r<e;r++){n=arguments[r];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(t[o]=n[o])}return t};n.__esModule=!0;var a=function(t){return t},u=function(){},f=function(t){var n=t.getBoundingClientRect();return{top:n.top,left:n.left,width:n.width,height:n.height,transform:getComputedStyle(t).transform}},s={top:0,left:0,width:1,height:1},c=function(t){var n=t.querySelectorAll("[data-flip-key]"),r={},o=[];return n.forEach(function(t){if(!e(t)){var n=t.getAttribute("data-flip-key");r[n]=t,o.push(t)}}),o},l=function(){return!0},h=function(t){return t.getAttribute("data-flip-key")},d=function(){function t(t){void 0===t&&(t={});var n=this;this.selector=t.selector||c,this.active=t.active||l,this.selectActive=function(t){return n.selector(t).filter(function(t){return n.active(t)})},this.getBounds=t.getBounds||f,this.getDelta=t.getDelta||o,this.getKey=t.getKey||h,this.onRead=t.onRead||a,this.onEnter=t.onEnter||u,this.onFlip=t.onFlip||u,this.onLeave=t.onLeave||u,this.parentElement=t.parent||document.documentElement,this.states={}}return t.prototype.getRelativeBounds=function(t,n){return i({},n,{top:n.top-t.top,left:n.left-t.left})},t.prototype.read=function(t){void 0===t&&(t={}),this.flip(i({},t,{readOnly:!0}))},t.prototype.flip=function(t){var n=this;void 0===t&&(t={});var r=t.parent||this.parentElement,e=this.selectActive(r),o={},i=this.getBounds(r),a=!1;e.forEach(function(r){var e=n.getKey(r),u=n.states[e],f=u&&"LEAVE"!==u.type;a=!0;var s=n.getRelativeBounds(i,n.getBounds(r)),c={type:f?"MOVE":"ENTER",key:e,node:r,bounds:s,delta:f?n.getDelta(u.bounds,s):void 0,start:Date.now(),animation:f?u.animation:void 0,previous:u};n.states[e]=o[e]=c,t.readOnly&&n.onRead(c)}),t.readOnly||(Object.keys(this.states).forEach(function(t){o[t]||(n.states[t]=o[t]={type:"LEAVE",key:t,node:void 0,bounds:void 0,start:Date.now(),animation:void 0,previous:n.states[t]})}),Object.keys(o).forEach(function(t){var r=o[t],e=r.node||r.previous&&r.previous.node;if(e){var i=e.getAttribute("data-flip-follow");"ENTER"!==r.type&&"LEAVE"!==r.type||!i||(r.delta=o[i].delta)}var a={ENTER:n.onEnter,MOVE:n.onFlip,LEAVE:n.onLeave}[r.type].call(n,r,t,o);a&&n.animate(t,a)}))},t.prototype.animate=function(t,n){this.states[t].animation=n},t.prototype.wrap=function(t,n){var r=this;return void 0===n&&(n={}),function(){for(var e=[],o=0;o<arguments.length;o++)e[o]=arguments[o];r.read(n);var i=t.apply(null,e);return r.flip(n),i}},t.rect=f,t}();n.default=d},function(t,n,r){"use strict";function e(t,n){var r={};return Object.keys(t||{}).forEach(function(e){r[e]=n(t[e],e,t)}),r}function o(t,n,r){var e={};return Object.keys(t||{}).forEach(function(o){e[o]=r(t[o],n[o],o)}),e}function i(t,n){return s.translate(t,n).join(",")}function a(t,n){return s.scale(t,n).join(",")}function u(){for(var t=[],n=0;n<arguments.length;n++)t[n]=arguments[n];return t.filter(function(t){return!!t}).reduce(s.multiply).join(",")}function f(t,n){return-1!==["height","width"].indexOf(t)&&"number"==typeof n?n+"px":n}n.__esModule=!0;var s=r(2);n.mapValues=e,n.mapTwoValues=o,n.matrixTranslate=i,n.matrixScale=a,n.matrixMultiply=u,n.styleValue=f},function(t,n,r){"use strict";function e(t){if(t.constructor!==Array)throw new TypeError("Expected array.");if(16===t.length)return t;if(6===t.length){var n=o();return n[0]=t[0],n[1]=t[1],n[4]=t[2],n[5]=t[3],n[12]=t[4],n[13]=t[5],n}throw new RangeError("Expected array with either 6 or 16 values.")}function o(){for(var t=[],n=0;n<16;n++)n%5==0?t.push(1):t.push(0);return t}function i(t){var n=e(t),r=n[0]*n[5]-n[4]*n[1],o=n[0]*n[6]-n[4]*n[2],i=n[0]*n[7]-n[4]*n[3],a=n[1]*n[6]-n[5]*n[2],u=n[1]*n[7]-n[5]*n[3],f=n[2]*n[7]-n[6]*n[3],s=n[10]*n[15]-n[14]*n[11],c=n[9]*n[15]-n[13]*n[11],l=n[9]*n[14]-n[13]*n[10],h=n[8]*n[15]-n[12]*n[11],d=n[8]*n[14]-n[12]*n[10],p=n[8]*n[13]-n[12]*n[9],v=1/(r*s-o*c+i*l+a*h-u*d+f*p);if(isNaN(v)||v===1/0)throw new Error("Inverse determinant attempted to divide by zero.");return[(n[5]*s-n[6]*c+n[7]*l)*v,(-n[1]*s+n[2]*c-n[3]*l)*v,(n[13]*f-n[14]*u+n[15]*a)*v,(-n[9]*f+n[10]*u-n[11]*a)*v,(-n[4]*s+n[6]*h-n[7]*d)*v,(n[0]*s-n[2]*h+n[3]*d)*v,(-n[12]*f+n[14]*i-n[15]*o)*v,(n[8]*f-n[10]*i+n[11]*o)*v,(n[4]*c-n[5]*h+n[7]*p)*v,(-n[0]*c+n[1]*h-n[3]*p)*v,(n[12]*u-n[13]*i+n[15]*r)*v,(-n[8]*u+n[9]*i-n[11]*r)*v,(-n[4]*l+n[5]*d-n[6]*p)*v,(n[0]*l-n[1]*d+n[2]*p)*v,(-n[12]*a+n[13]*o-n[14]*r)*v,(n[8]*a-n[9]*o+n[10]*r)*v]}function a(t,n){for(var r=e(t),o=e(n),i=[],a=0;a<4;a++)for(var u=[r[a],r[a+4],r[a+8],r[a+12]],f=0;f<4;f++){var s=4*f,c=[o[s],o[s+1],o[s+2],o[s+3]],l=u[0]*c[0]+u[1]*c[1]+u[2]*c[2]+u[3]*c[3];i[a+s]=l}return i}function u(t){if("string"==typeof t){var n=t.match(/matrix(3d)?\(([^)]+)\)/);if(n){return e(n[2].split(", ").map(function(t){return parseFloat(t)}))}}return o()}function f(t){var n=Math.PI/180*t,r=o();return r[5]=r[10]=Math.cos(n),r[6]=r[9]=Math.sin(n),r[9]*=-1,r}function s(t){var n=Math.PI/180*t,r=o();return r[0]=r[10]=Math.cos(n),r[2]=r[8]=Math.sin(n),r[2]*=-1,r}function c(t){var n=Math.PI/180*t,r=o();return r[0]=r[5]=Math.cos(n),r[1]=r[4]=Math.sin(n),r[4]*=-1,r}function l(t,n){var r=o();return r[0]=t,r[5]=n||t,r}function h(t){var n=o();return n[0]=t,n}function d(t){var n=o();return n[5]=t,n}function p(t){var n=o();return n[10]=t,n}function v(t,n){var r=Math.PI/180*t,e=o();if(e[4]=Math.tan(r),n){var i=Math.PI/180*n;e[1]=Math.tan(i)}return e}function m(t){var n=Math.PI/180*t,r=o();return r[4]=Math.tan(n),r}function y(t){var n=Math.PI/180*t,r=o();return r[1]=Math.tan(n),r}function g(t,n){var r=o();return r[12]=t,n&&(r[13]=n),r}function x(t){var n=o();return n[12]=t,n}function w(t){var n=o();return n[13]=t,n}function E(t){var n=o();return n[14]=t,n}Object.defineProperty(n,"__esModule",{value:!0}),r.d(n,"format",function(){return e}),r.d(n,"identity",function(){return o}),r.d(n,"inverse",function(){return i}),r.d(n,"multiply",function(){return a}),r.d(n,"parse",function(){return u}),r.d(n,"rotateX",function(){return f}),r.d(n,"rotateY",function(){return s}),r.d(n,"rotateZ",function(){return c}),r.d(n,"scale",function(){return l}),r.d(n,"scaleX",function(){return h}),r.d(n,"scaleY",function(){return d}),r.d(n,"scaleZ",function(){return p}),r.d(n,"skew",function(){return v}),r.d(n,"skewX",function(){return m}),r.d(n,"skewY",function(){return y}),r.d(n,"translate",function(){return g}),r.d(n,"translateX",function(){return x}),r.d(n,"translateY",function(){return w}),r.d(n,"translateZ",function(){return E})},function(t,n,r){"use strict";n.__esModule=!0;var e=r(1),o=r(2);n.scale=function(t){var n=t.bounds,r=t.delta,i=1!==r.width||1!==r.height,a=o.translate(r.left,r.top),u=i?o.scale(r.width,r.height):void 0,f=i?"top left":void 0,s=e.matrixMultiply(a,u);return{node:{from:{x:r.left,y:r.top,transformOrigin:f,transform:"matrix3d("+s+")"},to:{x:n.left,y:n.top,transformOrigin:f,transform:n.transform}}}},n.slide=function(t){var n=t.delta,r=t.previous,o=t.bounds;if(r){var i=Math.max(r.bounds.height,o.height),a=Math.max(r.bounds.width,o.width),u={from:{height:i,width:a,transformOrigin:"top left"},to:{height:i,width:a,transformOrigin:"top left"}},f={from:{height:i,width:a,transformOrigin:"top left"},to:{height:i,width:a,transformOrigin:"top left"}},s=o.width-r.bounds.width,c=o.height-r.bounds.height;s>0?(f.from.x=-s+n.left,f.to.x=0,u.from.x=s,u.to.x=0):(f.from.x=0,f.to.x=s-n.left,u.from.x=0,u.to.x=-s),c>0?(f.from.y=-c+n.top,f.to.y=0,u.from.y=c,u.to.y=0):(f.from.y=0,f.to.y=c-n.top,u.from.y=0,u.to.y=-c);var l=e.matrixTranslate(u.from.x,u.from.y),h=e.matrixTranslate(u.to.x,u.to.y),d=e.matrixTranslate(f.from.x,f.from.y),p=e.matrixTranslate(f.to.x,f.to.y);return u.from.transform="matrix3d("+l+")",u.to.transform="matrix3d("+h+")",f.from.transform="matrix3d("+d+")",f.to.transform="matrix3d("+p+")",{node:u,container:f}}}},,,,function(t,n,r){"use strict";function e(t,n,r){var e=f.mapValues(n,function(n,e){return n.animate([f.mapValues(t[e].from,function(t,n){return f.styleValue(n,t)}),f.mapValues(t[e].to,function(t,n){return f.styleValue(n,t)})],r)});return{finish:function(){Object.keys(e).forEach(function(t){return e[t].finish()})}}}var o=this&&this.__extends||function(){var t=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,n){t.__proto__=n}||function(t,n){for(var r in n)n.hasOwnProperty(r)&&(t[r]=n[r])};return function(n,r){function e(){this.constructor=n}t(n,r),n.prototype=null===r?Object.create(r):(e.prototype=r.prototype,new e)}}(),i=this&&this.__assign||Object.assign||function(t){for(var n,r=1,e=arguments.length;r<e;r++){n=arguments[r];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(t[o]=n[o])}return t},a=r(0),u=r(3),f=r(1),s=function(t,n){var r=t.node;return e(u.slide(t),{node:r,container:r.parentElement},n)},c=function(t,n){void 0===n&&(n={});var r=t.node;return e(u.scale(t),{node:r},n)},l=function(t,n){var r=t.node;if(r)return r&&r.parentElement&&r.parentElement.hasAttribute("data-flip-wrap")?s(t,n):c(t,n)},h=function(t){var n=t.animation;n&&n.finish&&n.finish()},d={duration:300,easing:"ease",fill:"none",getBounds:function(t){var n=a.default.rect(t);if(t&&t.parentElement&&t.parentElement.hasAttribute("data-flip-wrap")){var r=a.default.rect(t.parentElement);n.width-=Math.abs(n.left-r.left),n.height-=Math.abs(n.top-r.top)}return n}},p=function(t){function n(r){void 0===r&&(r={});var e=i({},d,r);return t.call(this,i({onRead:h,onEnter:function(t){return n.animate.auto(t,e)},onFlip:function(t){return n.animate.auto(t,e)}},e))||this}return o(n,t),n.animate={auto:l,transform:c,slidingLayers:s},n}(a.default);t.exports=p}])});
+!function(t,n){"object"==typeof exports&&"object"==typeof module?module.exports=n():"function"==typeof define&&define.amd?define([],n):"object"==typeof exports?exports.Flipping=n():t.Flipping=n()}(this,function(){return function(t){function n(r){if(e[r])return e[r].exports;var o=e[r]={i:r,l:!1,exports:{}};return t[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}var e={};return n.m=t,n.c=e,n.i=function(t){return t},n.d=function(t,e,r){n.o(t,e)||Object.defineProperty(t,e,{configurable:!1,enumerable:!0,get:r})},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,n){return Object.prototype.hasOwnProperty.call(t,n)},n.p="",n(n.s=7)}([function(t,n,e){"use strict";function r(t){var n=f(t),e=n.width,r=n.height;return 0===e&&0===r}function o(t,n){return t?t.height?n.height?{top:t.top-n.top,left:t.left-n.left,width:t.width/n.width,height:t.height/n.height}:n:t:s}var i=this&&this.__assign||Object.assign||function(t){for(var n,e=1,r=arguments.length;e<r;e++){n=arguments[e];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(t[o]=n[o])}return t};n.__esModule=!0;var a=function(t){return t},u=function(){},f=function(t){var n=t.getBoundingClientRect();return{top:n.top,left:n.left,width:n.width,height:n.height,transform:getComputedStyle(t).transform}},s={top:0,left:0,width:1,height:1},c=function(t){var n=t.querySelectorAll("[data-flip-key]"),e={},o=[];return n.forEach(function(t){if(!r(t)){var n=t.getAttribute("data-flip-key");e[n]=t,o.push(t)}}),o},l=function(){return!0},h=function(t){return t.getAttribute("data-flip-key")},d=function(){function t(t){void 0===t&&(t={});var n=this;this.selector=t.selector||c,this.active=t.active||l,this.selectActive=function(t){return n.selector(t).filter(function(t){return n.active(t)})},this.getBounds=t.getBounds||f,this.getDelta=t.getDelta||o,this.getKey=t.getKey||h,this.onRead=t.onRead||a,this.onEnter=t.onEnter||u,this.onFlip=t.onFlip||u,this.onLeave=t.onLeave||u,this.parentElement=t.parent||document.documentElement,this.states={}}return t.prototype.getRelativeBounds=function(t,n){return i({},n,{top:n.top-t.top,left:n.left-t.left})},t.prototype.read=function(t){void 0===t&&(t={}),this.flip(i({},t,{readOnly:!0}))},t.prototype.flip=function(t){var n=this;void 0===t&&(t={});var e=t.parent||this.parentElement,r=this.selectActive(e),o={},a=this.getBounds(e),u=i({onFlip:this.onFlip,onEnter:this.onEnter,onLeave:this.onLeave},t);r.forEach(function(e,r){var i=n.getKey(e),u=n.states[i],f=u&&"LEAVE"!==u.type,s=n.getRelativeBounds(a,n.getBounds(e)),c={type:f?"MOVE":"ENTER",key:i,node:e,bounds:s,delta:f?n.getDelta(u.bounds,s):void 0,start:Date.now(),animation:f?u.animation:void 0,index:r,previous:u};n.states[i]=o[i]=c,t.readOnly&&n.onRead(c)}),t.readOnly||(Object.keys(this.states).forEach(function(t){o[t]||(n.states[t]=o[t]={type:"LEAVE",key:t,node:void 0,bounds:void 0,start:Date.now(),animation:void 0,previous:n.states[t]})}),Object.keys(o).forEach(function(t){var e=o[t],r=e.node||e.previous&&e.previous.node;if(r){var i=r.getAttribute("data-flip-follow");"ENTER"!==e.type&&"LEAVE"!==e.type||!i||(e.delta=o[i].delta)}var a={ENTER:u.onEnter,MOVE:u.onFlip,LEAVE:u.onLeave}[e.type].call(n,e,t,o);a&&n.animate(t,a)}))},t.prototype.animate=function(t,n){this.states[t].animation=n},t.prototype.wrap=function(t,n){var e=this;return void 0===n&&(n={}),function(){for(var r=[],o=0;o<arguments.length;o++)r[o]=arguments[o];e.read(n);var i=t.apply(null,r);return e.flip(n),i}},t.rect=f,t}();n.default=d},function(t,n,e){"use strict";function r(t,n){var e={};return Object.keys(t||{}).forEach(function(r){e[r]=n(t[r],r,t)}),e}function o(t,n,e){var r={};return Object.keys(t||{}).forEach(function(o){r[o]=e(t[o],n[o],o)}),r}function i(t,n){return c.translate(t,n).join(",")}function a(t,n){return c.scale(t,n).join(",")}function u(){for(var t=[],n=0;n<arguments.length;n++)t[n]=arguments[n];return t.filter(function(t){return!!t}).reduce(c.multiply).join(",")}function f(t,n){return-1!==["height","width"].indexOf(t)&&"number"==typeof n?n+"px":n}function s(t,n){return"function"==typeof n?n(t):(n||0)*t}n.__esModule=!0;var c=e(2);n.mapValues=r,n.mapTwoValues=o,n.matrixTranslate=i,n.matrixScale=a,n.matrixMultiply=u,n.styleValue=f,n.getStaggerDelay=s},function(t,n,e){"use strict";function r(t){if(t.constructor!==Array)throw new TypeError("Expected array.");if(16===t.length)return t;if(6===t.length){var n=o();return n[0]=t[0],n[1]=t[1],n[4]=t[2],n[5]=t[3],n[12]=t[4],n[13]=t[5],n}throw new RangeError("Expected array with either 6 or 16 values.")}function o(){for(var t=[],n=0;n<16;n++)n%5==0?t.push(1):t.push(0);return t}function i(t){var n=r(t),e=n[0]*n[5]-n[4]*n[1],o=n[0]*n[6]-n[4]*n[2],i=n[0]*n[7]-n[4]*n[3],a=n[1]*n[6]-n[5]*n[2],u=n[1]*n[7]-n[5]*n[3],f=n[2]*n[7]-n[6]*n[3],s=n[10]*n[15]-n[14]*n[11],c=n[9]*n[15]-n[13]*n[11],l=n[9]*n[14]-n[13]*n[10],h=n[8]*n[15]-n[12]*n[11],d=n[8]*n[14]-n[12]*n[10],p=n[8]*n[13]-n[12]*n[9],v=1/(e*s-o*c+i*l+a*h-u*d+f*p);if(isNaN(v)||v===1/0)throw new Error("Inverse determinant attempted to divide by zero.");return[(n[5]*s-n[6]*c+n[7]*l)*v,(-n[1]*s+n[2]*c-n[3]*l)*v,(n[13]*f-n[14]*u+n[15]*a)*v,(-n[9]*f+n[10]*u-n[11]*a)*v,(-n[4]*s+n[6]*h-n[7]*d)*v,(n[0]*s-n[2]*h+n[3]*d)*v,(-n[12]*f+n[14]*i-n[15]*o)*v,(n[8]*f-n[10]*i+n[11]*o)*v,(n[4]*c-n[5]*h+n[7]*p)*v,(-n[0]*c+n[1]*h-n[3]*p)*v,(n[12]*u-n[13]*i+n[15]*e)*v,(-n[8]*u+n[9]*i-n[11]*e)*v,(-n[4]*l+n[5]*d-n[6]*p)*v,(n[0]*l-n[1]*d+n[2]*p)*v,(-n[12]*a+n[13]*o-n[14]*e)*v,(n[8]*a-n[9]*o+n[10]*e)*v]}function a(t,n){for(var e=r(t),o=r(n),i=[],a=0;a<4;a++)for(var u=[e[a],e[a+4],e[a+8],e[a+12]],f=0;f<4;f++){var s=4*f,c=[o[s],o[s+1],o[s+2],o[s+3]],l=u[0]*c[0]+u[1]*c[1]+u[2]*c[2]+u[3]*c[3];i[a+s]=l}return i}function u(t){if("string"==typeof t){var n=t.match(/matrix(3d)?\(([^)]+)\)/);if(n){return r(n[2].split(", ").map(function(t){return parseFloat(t)}))}}return o()}function f(t){var n=Math.PI/180*t,e=o();return e[5]=e[10]=Math.cos(n),e[6]=e[9]=Math.sin(n),e[9]*=-1,e}function s(t){var n=Math.PI/180*t,e=o();return e[0]=e[10]=Math.cos(n),e[2]=e[8]=Math.sin(n),e[2]*=-1,e}function c(t){var n=Math.PI/180*t,e=o();return e[0]=e[5]=Math.cos(n),e[1]=e[4]=Math.sin(n),e[4]*=-1,e}function l(t,n){var e=o();return e[0]=t,e[5]=n||t,e}function h(t){var n=o();return n[0]=t,n}function d(t){var n=o();return n[5]=t,n}function p(t){var n=o();return n[10]=t,n}function v(t,n){var e=Math.PI/180*t,r=o();if(r[4]=Math.tan(e),n){var i=Math.PI/180*n;r[1]=Math.tan(i)}return r}function m(t){var n=Math.PI/180*t,e=o();return e[4]=Math.tan(n),e}function y(t){var n=Math.PI/180*t,e=o();return e[1]=Math.tan(n),e}function g(t,n){var e=o();return e[12]=t,n&&(e[13]=n),e}function x(t){var n=o();return n[12]=t,n}function E(t){var n=o();return n[13]=t,n}function w(t){var n=o();return n[14]=t,n}Object.defineProperty(n,"__esModule",{value:!0}),e.d(n,"format",function(){return r}),e.d(n,"identity",function(){return o}),e.d(n,"inverse",function(){return i}),e.d(n,"multiply",function(){return a}),e.d(n,"parse",function(){return u}),e.d(n,"rotateX",function(){return f}),e.d(n,"rotateY",function(){return s}),e.d(n,"rotateZ",function(){return c}),e.d(n,"scale",function(){return l}),e.d(n,"scaleX",function(){return h}),e.d(n,"scaleY",function(){return d}),e.d(n,"scaleZ",function(){return p}),e.d(n,"skew",function(){return v}),e.d(n,"skewX",function(){return m}),e.d(n,"skewY",function(){return y}),e.d(n,"translate",function(){return g}),e.d(n,"translateX",function(){return x}),e.d(n,"translateY",function(){return E}),e.d(n,"translateZ",function(){return w})},function(t,n,e){"use strict";var r=this&&this.__assign||Object.assign||function(t){for(var n,e=1,r=arguments.length;e<r;e++){n=arguments[e];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(t[o]=n[o])}return t};n.__esModule=!0;var o=e(1),i=e(2);n.scale=function(t){var n=t.bounds,e=t.delta,a=1!==e.width||1!==e.height,u=i.translate(e.left,e.top),f=a?i.scale(e.width,e.height):void 0,s=a?"top left":void 0,c=o.matrixMultiply(u,f);return{node:{from:r({x:e.left,y:e.top},s?{transformOrigin:s}:void 0,{transform:"matrix3d("+c+")"}),to:r({x:n.left,y:n.top},s?{transformOrigin:s}:void 0,{transform:n.transform})}}},n.slide=function(t){var n=t.delta,e=t.previous,r=t.bounds;if(e){var i=Math.max(e.bounds.height,r.height),a=Math.max(e.bounds.width,r.width),u={from:{height:i,width:a,transformOrigin:"top left"},to:{height:i,width:a,transformOrigin:"top left"}},f={from:{height:i,width:a,transformOrigin:"top left"},to:{height:i,width:a,transformOrigin:"top left"}},s=r.width-e.bounds.width,c=r.height-e.bounds.height;s>0?(f.from.x=-s+n.left,f.to.x=0,u.from.x=s,u.to.x=0):(f.from.x=0,f.to.x=s-n.left,u.from.x=0,u.to.x=-s),c>0?(f.from.y=-c+n.top,f.to.y=0,u.from.y=c,u.to.y=0):(f.from.y=0,f.to.y=c-n.top,u.from.y=0,u.to.y=-c);var l=o.matrixTranslate(u.from.x,u.from.y),h=o.matrixTranslate(u.to.x,u.to.y),d=o.matrixTranslate(f.from.x,f.from.y),p=o.matrixTranslate(f.to.x,f.to.y);return u.from.transform="matrix3d("+l+")",u.to.transform="matrix3d("+h+")",f.from.transform="matrix3d("+d+")",f.to.transform="matrix3d("+p+")",{node:u,container:f}}}},,,,function(t,n,e){"use strict";function r(t,n,e){var r=f.mapValues(n,function(n,r){return n.animate([f.mapValues(t[r].from,function(t,n){return f.styleValue(n,t)}),f.mapValues(t[r].to,function(t,n){return f.styleValue(n,t)})],e)});return{finish:function(){Object.keys(r).forEach(function(t){return r[t].finish()})}}}var o=this&&this.__extends||function(){var t=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,n){t.__proto__=n}||function(t,n){for(var e in n)n.hasOwnProperty(e)&&(t[e]=n[e])};return function(n,e){function r(){this.constructor=n}t(n,e),n.prototype=null===e?Object.create(e):(r.prototype=e.prototype,new r)}}(),i=this&&this.__assign||Object.assign||function(t){for(var n,e=1,r=arguments.length;e<r;e++){n=arguments[e];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(t[o]=n[o])}return t},a=e(0),u=e(3),f=e(1),s=function(t,n){var e=t.node;return r(u.slide(t),{node:e,container:e.parentElement},n)},c=function(t,n){void 0===n&&(n={});var e=t.node;return r(u.scale(t),{node:e},n)},l=function(t,n){var e=t.node,r=i({},n,{delay:+(n.delay||0)+f.getStaggerDelay(t.index,n.stagger),fill:n.stagger?"both":"none"});if(e)return e&&e.parentElement&&e.parentElement.hasAttribute("data-flip-wrap")?s(t,r):c(t,r)},h=function(t){var n=t.animation;n&&n.finish&&n.finish()},d=function(t){function n(e){void 0===e&&(e={});var r=i({},n.defaults,e);return t.call(this,i({onRead:h,onEnter:function(t){return n.animate.auto(t,r)},onFlip:function(t){return n.animate.auto(t,r)}},r))||this}return o(n,t),n.defaults={duration:300,easing:"ease",fill:"none",stagger:0,getBounds:function(t){var n=a.default.rect(t);if(t&&t.parentElement&&t.parentElement.hasAttribute("data-flip-wrap")){var e=a.default.rect(t.parentElement);n.width-=Math.abs(n.left-e.left),n.height-=Math.abs(n.top-e.top)}return n}},n.animate={auto:l,transform:c,slidingLayers:s},n}(a.default);t.exports=d}])});

package.json

 {
   "name": "flipping",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "description": "Flipping awesome animations.",
@@ -5,0 +5,0 @@ "main": "index.js",

src/animations.ts

@@ -23,3 +23,3 @@ import { IFlipState, IFlipNodeMode, IFlipNodesMode } from './Flipping';
       y: delta.top,
-      transformOrigin,
+      ...(transformOrigin ? { transformOrigin } : undefined),
       transform: `matrix3d(${invertedMatrix})`
@@ -30,3 +30,3 @@ },
       y: bounds.top,
-      transformOrigin,
+      ...(transformOrigin ? { transformOrigin } : undefined),
       transform: bounds.transform
@@ -33,0 +33,0 @@ }

src/Flipping.ts

@@ -57,2 +57,3 @@ interface IBounds {
   animation: any;
+  index: number;
   previous: IFlipState | undefined;
@@ -203,5 +204,10 @@ start: number;
     const parentBounds = this.getBounds(parentElement);
-    let flipped = false;
+    const config = {
+      onFlip: this.onFlip,
+      onEnter: this.onEnter,
+      onLeave: this.onLeave,
+      ...options
+    };
 
-    nodes.forEach(node => {
+    nodes.forEach((node, index) => {
       const key = this.getKey(node);
@@ -211,3 +217,2 @@ const previous = this.states[key];
 
-      flipped = true;
       const bounds = this.getRelativeBounds(parentBounds, this.getBounds(node));
@@ -223,2 +228,3 @@
         animation: isPresent ? previous.animation : undefined,
+        index,
         previous
@@ -267,5 +273,5 @@ };
       const nextAnimation = {
-        ENTER: this.onEnter,
-        MOVE: this.onFlip,
-        LEAVE: this.onLeave
+        ENTER: config.onEnter,
+        MOVE: config.onFlip,
+        LEAVE: config.onLeave
       }[state.type].call(this, state, key, fullState);
@@ -272,0 +278,0 @@

src/strategies/gsap.ts

 import Flipping, { IFlippingConfig, IFlipState, IFlipNodesMode } from '../Flipping';
 import * as animations from '../animations';
-import { mapValues, styleValue } from '../utils';
+import { mapValues, styleValue, getStaggerDelay } from '../utils';
 import * as GSAP from 'gsap';
@@ -13,3 +13,3 @@
       mapValues(mode[nodeKey].to, (value, prop) => styleValue(prop, value))
-    );
+    ).delay(options.delay);
   });
@@ -47,2 +47,8 @@
 
+  const timingOptions = {
+    ...options,
+    duration: (options.duration || 0) / 1000,
+    delay: +((options.delay || 0) + getStaggerDelay(state.index, options.stagger)) / 1000
+  }
+
   if (!node) {
@@ -57,6 +63,6 @@ return;
   ) {
-    return slidingLayersAnimation(state, options);
+    return slidingLayersAnimation(state, timingOptions);
   }
 
-  return scaleAnimation(state, options);
+  return scaleAnimation(state, timingOptions);
 };
@@ -63,0 +69,0 @@

src/strategies/web.ts

 import Flipping, { IFlippingConfig, IFlipState, IFlipNodesMode } from '../Flipping';
 import * as animations from '../animations';
-import { mapValues, styleValue } from '../utils';
+import { mapValues, styleValue, getStaggerDelay } from '../utils';
 
-function animate(mode: IFlipNodesMode, nodeMap: Record<string, Element>, options): any {
+interface ICustomEffectTiming {
+  stagger?: number | ((index: number) => number);
+}
+
+type FlippingWebOptions = IFlippingConfig & AnimationEffectTiming & ICustomEffectTiming;
+
+function animate(mode: IFlipNodesMode, nodeMap: Record<string, Element>, options: FlippingWebOptions): any {
   const nodeAnimations = mapValues(nodeMap, (node, nodeKey) => {
@@ -10,3 +16,3 @@ return node.animate([
       mapValues(mode[nodeKey].to, (value, prop) => styleValue(prop, value)),
-    ], options)
+    ], options);
   });
@@ -21,3 +27,3 @@
 
-const slidingLayersAnimation = (state: IFlipState, options): any => {
+const slidingLayersAnimation = (state: IFlipState, options: FlippingWebOptions): any => {
   const { node } = state;
@@ -32,3 +38,3 @@ const mode = animations.slide(state);
 
-const scaleAnimation = (state: IFlipState, options: any = {}): any => {
+const scaleAnimation = (state: IFlipState, options: FlippingWebOptions = {}): any => {
   const { node } = state;
@@ -40,5 +46,11 @@ const mode = animations.scale(state);
 
-const autoAnimation = (state: IFlipState, options): any => {
+const autoAnimation = (state: IFlipState, options: FlippingWebOptions): any => {
   const { node } = state;
 
+  const timingOptions: FlippingWebOptions = {
+    ...options,
+    delay: +(options.delay || 0) + getStaggerDelay(state.index, options.stagger),
+    fill: options.stagger ? 'both' : 'none'
+  }
+
   if (!node) {
@@ -53,6 +65,6 @@ return;
   ) {
-    return slidingLayersAnimation(state, options);
+    return slidingLayersAnimation(state, timingOptions);
   }
 
-  return scaleAnimation(state, options);
+  return scaleAnimation(state, timingOptions);
 };
@@ -66,25 +78,26 @@
 
-const defaultOptions: IFlippingConfig & AnimationEffectTiming = {
-  duration: 300,
-  easing: 'ease',
-  fill: 'none',
-  getBounds: node => {
-    const bounds = Flipping.rect(node);
+class FlippingWeb extends Flipping {
+  static defaults: FlippingWebOptions = {
+    duration: 300,
+    easing: 'ease',
+    fill: 'none',
+    stagger: 0,
+    getBounds: node => {
+      const bounds = Flipping.rect(node);
 
-    if (
-      node &&
-      node.parentElement &&
-      node.parentElement.hasAttribute('data-flip-wrap')
-    ) {
-      const wrapBounds = Flipping.rect(node.parentElement);
+      if (
+        node &&
+        node.parentElement &&
+        node.parentElement.hasAttribute('data-flip-wrap')
+      ) {
+        const wrapBounds = Flipping.rect(node.parentElement);
 
-      bounds.width -= Math.abs(bounds.left - wrapBounds.left);
-      bounds.height -= Math.abs(bounds.top - wrapBounds.top);
+        bounds.width -= Math.abs(bounds.left - wrapBounds.left);
+        bounds.height -= Math.abs(bounds.top - wrapBounds.top);
+      }
+
+      return bounds;
     }
+  };
 
-    return bounds;
-  }
-};
-
-class FlippingWeb extends Flipping {
   static animate = {
@@ -96,5 +109,5 @@ auto: autoAnimation,
 
-  constructor(options: IFlippingConfig & AnimationEffectTiming = {}) {
+  constructor(options: FlippingWebOptions = {}) {
     const optionsWithDefaults = {
-      ...defaultOptions,
+      ...FlippingWeb.defaults,
       ...options
@@ -101,0 +114,0 @@ };

src/utils.ts

@@ -46,2 +46,8 @@ import * as Rematrix from 'rematrix';
 
+export function getStaggerDelay(index: number, stagger: number | ((index: number) => number)): number {
+  return typeof stagger === 'function'
+    ? stagger(index)
+    : (stagger || 0) * index;
+}
+
 // (window as any).persistLayout = (node: Element): any[] => {
@@ -48,0 +54,0 @@ //   const result = [];

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

286058

increased by2.63%

Number of package files

28

increased by3.7%

Lines of code

3703

increased by0.71%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes