Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

flipping

Package Overview
Dependencies
Maintainers
1
Versions
23
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

flipping - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

2

dist/flipping.css.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(r){if(n[r])return n[r].exports;var i=n[r]={i:r,l:!1,exports:{}};return t[r].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,r){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:r})},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=8)}([function(t,e,n){"use strict";function r(t,e){var n={};return Object.keys(t||{}).forEach(function(r){n[r]=e(t[r],r,t)}),n}function i(t,e,n){var r={};return Object.keys(t||{}).forEach(function(i){r[i]=n(t[i],e[i],i)}),r}function o(t,e){return p.translate(t,e).join(",")}function a(t,e){return p.scale(t,e).join(",")}function u(){for(var t=[],e=0;e<arguments.length;e++)t[e]=arguments[e];return t.filter(function(t){return!!t}).reduce(p.multiply).join(",")}function f(t,e){return-1!==["height","width","top","left"].indexOf(t)&&"number"==typeof e?e+"px":e}function c(t,e){return"function"==typeof e?e(t):(e||0)*t}function s(t){var n=e.rect(t),r=n.width,i=n.height;return!(0===r&&0===i)}function l(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:d.NO_DELTA}e.__esModule=!0;var p=n(3),d=n(1);e.mapValues=r,e.mapTwoValues=i,e.matrixTranslate=o,e.matrixScale=a,e.matrixMultiply=u,e.styleValue=f,e.getStaggerDelay=c,e.identity=function(t){return t},e.noop=function(){},e.rect=function(t){var e=t.getBoundingClientRect();return{top:e.top,left:e.left,width:e.width,height:e.height,transform:getComputedStyle(t).transform||void 0}},e.isVisible=s,e.getDelta=l,e.deltaChanged=function(t){return!!t.top||!!t.left||1!==t.width||1!==t.height},e.boundsChanged=function(t,e){return!!(t.top-e.top||t.left-e.left||t.width-e.width||t.height-e.height)}},function(t,e,n){"use strict";e.__esModule=!0,e.FOLLOW_ATTR="data-flip-follow",e.KEY_ATTR="data-flip-key",e.STATE_ATTR="data-flip-state",e.NO_DELTA={top:0,left:0,width:1,height:1}},function(t,e,n){"use strict";var r=this&&this.__assign||Object.assign||function(t){for(var e,n=1,r=arguments.length;n<r;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 i=n(4),o=n(0),a=n(1),u=n(5),f=function(){return!0},c=function(t){return t},s={flipKey:["key",c],flipNoScale:["noScale",function(){return!0}]},l=function(t){if(!("dataset"in t))return{};var e=t.dataset,n={};return Object.keys(e).forEach(function(t){if(s[t]){var r=s[t],i=r[0],o=r[1];n[i]=o(e[t])}else 0===t.indexOf("flip")&&(n[t[4].toLowerCase()+t.slice(5)]=e[t])}),n},p=function(t,e){return void 0===e&&(e=a.KEY_ATTR),"string"==typeof t?function(n){var r=n.querySelectorAll(t),i={},a=[];return r.forEach(function(t){if(o.isVisible(t)){var n=t.getAttribute(e);n&&(i[n]=t,a.push(t))}}),a}:t},d=function(){function t(t){void 0===t&&(t={}),this.attribute=t.attribute||a.KEY_ATTR,this.selector=p(t.selector||"["+this.attribute+"]",this.attribute),this.active=t.active||f,this.activeSelector=t.activeSelector||o.isVisible,this.getBounds=t.getBounds||o.rect,this.getDelta=t.getDelta||o.getDelta,this.parentElement=t.parent||document.documentElement,this.plugins=t.plugins||[u.default],this.emitter=new i,t.onRead&&this.on("read",t.onRead),t.onFlip&&this.on("flip",t.onFlip),t.onEnter&&this.on("enter",t.onEnter),t.onLeave&&this.on("leave",t.onLeave),this.states={}}return t.prototype.getRelativeBounds=function(t,e){return r({},e,{top:e.top-t.top,left:e.left-t.left})},t.prototype.selectActive=function(t){var e=this,n=this.selector(t),r={},i=[];return n.forEach(function(t){if(e.activeSelector(t)){var n=t.getAttribute(e.attribute);n&&(r[n]=t,i.push(t))}}),i},t.prototype.findParent=function(t,e){void 0===e&&(e=this.parentElement);var n=t.getAttribute("data-flip-parent"),r=t.parentElement;if(n)for(;r&&r.getAttribute(this.attribute)!==n;)r=r.parentElement;else for(;r&&!r.hasAttribute(this.attribute);)r=r.parentElement;return r||e},t.prototype.dispatch=function(t,e){var n=this.plugins.reduce(function(e,n){return n(e,t)},e);this.emitter.emit(t,n)},t.prototype.on=function(t,e){this.emitter.on(t,e)},t.prototype.onFlip=function(){for(var t=[],e=0;e<arguments.length;e++)t[e]=arguments[e];var n,r;2===t.length?(n=t[0],r=t[1]):r=t[0],this.emitter.on("flip",n?function(t){var e=t[n];e&&r(e)}:r)},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,r=this.selectActive(n),i={};return r.forEach(function(t,r){var o=t.getAttribute(e.attribute);if(o){var a=l(t),u=e.findParent(t,n),f=u.getAttribute(e.attribute),c=f?i[f]:void 0,s=e.getBounds(u),p=e.states[o],d=p&&"LEAVE"!==p.type,h=e.getRelativeBounds(s,e.getBounds(t)),v=d&&p&&p.bounds?e.getDelta(p.bounds,h):void 0,y={type:d?"MOVE":"ENTER",key:o,element:t,bounds:h,delta:v,start:Date.now(),animation:d?p.animation:void 0,index:r,previous:p?{type:p.type,bounds:p.bounds,animation:p.animation,element:p.element}:void 0,parent:c,data:a};e.states[o]=i[o]=y}}),t.readOnly?this.dispatch("read",i):(Object.keys(this.states).forEach(function(t,n){if(!i[t]){var r=e.states[t];e.states[t]=i[t]={type:"LEAVE",key:t,element:void 0,bounds:void 0,start:Date.now(),animation:void 0,delta:void 0,index:n,parent:void 0,previous:{type:r.type,bounds:r.bounds,animation:r.animation,element:r.element}}}}),this.dispatch("flip",i))},t.prototype.setAnimation=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 r=[],i=0;i<arguments.length;i++)r[i]=arguments[i];n.read(e);var o=t.apply(null,r);return n.flip(e),o}},t.prototype.progress=function(e,n){var r=this.states[e].delta;if(r)return t.progress(r,n)},t.progress=function(t,e){if(!t)return a.NO_DELTA;var n=1-e;return{top:t.top*n,left:t.left*n,width:t.width*n,height:t.height*n}},t.rect=o.rect,t.willScale=function(t){return!(!t||!t.element||t.element.hasAttribute("data-noflip")||!t.delta||1===t.delta.width&&1===t.delta.height)},t.willMove=function(t){return!(!t||!t.delta)&&(t&&(0!==t.delta.top||0!==t.delta.left))},t}();e.default=d},function(t,e,n){"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 e=i();return e[0]=t[0],e[1]=t[1],e[4]=t[2],e[5]=t[3],e[12]=t[4],e[13]=t[5],e}throw new RangeError("Expected array with either 6 or 16 values.")}function i(){for(var t=[],e=0;e<16;e++)e%5==0?t.push(1):t.push(0);return t}function o(t){var e=r(t),n=e[0]*e[5]-e[4]*e[1],i=e[0]*e[6]-e[4]*e[2],o=e[0]*e[7]-e[4]*e[3],a=e[1]*e[6]-e[5]*e[2],u=e[1]*e[7]-e[5]*e[3],f=e[2]*e[7]-e[6]*e[3],c=e[10]*e[15]-e[14]*e[11],s=e[9]*e[15]-e[13]*e[11],l=e[9]*e[14]-e[13]*e[10],p=e[8]*e[15]-e[12]*e[11],d=e[8]*e[14]-e[12]*e[10],h=e[8]*e[13]-e[12]*e[9],v=1/(n*c-i*s+o*l+a*p-u*d+f*h);if(isNaN(v)||v===1/0)throw new Error("Inverse determinant attempted to divide by zero.");return[(e[5]*c-e[6]*s+e[7]*l)*v,(-e[1]*c+e[2]*s-e[3]*l)*v,(e[13]*f-e[14]*u+e[15]*a)*v,(-e[9]*f+e[10]*u-e[11]*a)*v,(-e[4]*c+e[6]*p-e[7]*d)*v,(e[0]*c-e[2]*p+e[3]*d)*v,(-e[12]*f+e[14]*o-e[15]*i)*v,(e[8]*f-e[10]*o+e[11]*i)*v,(e[4]*s-e[5]*p+e[7]*h)*v,(-e[0]*s+e[1]*p-e[3]*h)*v,(e[12]*u-e[13]*o+e[15]*n)*v,(-e[8]*u+e[9]*o-e[11]*n)*v,(-e[4]*l+e[5]*d-e[6]*h)*v,(e[0]*l-e[1]*d+e[2]*h)*v,(-e[12]*a+e[13]*i-e[14]*n)*v,(e[8]*a-e[9]*i+e[10]*n)*v]}function a(t,e){for(var n=r(t),i=r(e),o=[],a=0;a<4;a++)for(var u=[n[a],n[a+4],n[a+8],n[a+12]],f=0;f<4;f++){var c=4*f,s=[i[c],i[c+1],i[c+2],i[c+3]],l=u[0]*s[0]+u[1]*s[1]+u[2]*s[2]+u[3]*s[3];o[a+c]=l}return o}function u(t){if("string"==typeof t){var e=t.match(/matrix(3d)?\(([^)]+)\)/);if(e){return r(e[2].split(", ").map(function(t){return parseFloat(t)}))}}return i()}function f(t){var e=Math.PI/180*t,n=i();return n[5]=n[10]=Math.cos(e),n[6]=n[9]=Math.sin(e),n[9]*=-1,n}function c(t){var e=Math.PI/180*t,n=i();return n[0]=n[10]=Math.cos(e),n[2]=n[8]=Math.sin(e),n[2]*=-1,n}function s(t){var e=Math.PI/180*t,n=i();return n[0]=n[5]=Math.cos(e),n[1]=n[4]=Math.sin(e),n[4]*=-1,n}function l(t,e){var n=i();return n[0]=t,n[5]=e||t,n}function p(t){var e=i();return e[0]=t,e}function d(t){var e=i();return e[5]=t,e}function h(t){var e=i();return e[10]=t,e}function v(t,e){var n=Math.PI/180*t,r=i();if(r[4]=Math.tan(n),e){var o=Math.PI/180*e;r[1]=Math.tan(o)}return r}function y(t){var e=Math.PI/180*t,n=i();return n[4]=Math.tan(e),n}function g(t){var e=Math.PI/180*t,n=i();return n[1]=Math.tan(e),n}function m(t,e){var n=i();return n[12]=t,e&&(n[13]=e),n}function b(t){var e=i();return e[12]=t,e}function w(t){var e=i();return e[13]=t,e}function E(t){var e=i();return e[14]=t,e}Object.defineProperty(e,"__esModule",{value:!0}),n.d(e,"format",function(){return r}),n.d(e,"identity",function(){return i}),n.d(e,"inverse",function(){return o}),n.d(e,"multiply",function(){return a}),n.d(e,"parse",function(){return u}),n.d(e,"rotateX",function(){return f}),n.d(e,"rotateY",function(){return c}),n.d(e,"rotateZ",function(){return s}),n.d(e,"scale",function(){return l}),n.d(e,"scaleX",function(){return p}),n.d(e,"scaleY",function(){return d}),n.d(e,"scaleZ",function(){return h}),n.d(e,"skew",function(){return v}),n.d(e,"skewX",function(){return y}),n.d(e,"skewY",function(){return g}),n.d(e,"translate",function(){return m}),n.d(e,"translateX",function(){return b}),n.d(e,"translateY",function(){return w}),n.d(e,"translateZ",function(){return E})},function(t,e,n){!function(e,n){t.exports=n()}(0,function(){function t(t){return t=t||Object.create(null),{on:function(e,n){(t[e]||(t[e]=[])).push(n)},off:function(e,n){t[e]&&t[e].splice(t[e].indexOf(n)>>>0,1)},emit:function(e,n){(t[e]||[]).slice().map(function(t){t(n)}),(t["*"]||[]).slice().map(function(t){t(e,n)})}}}return t})},function(t,e,n){"use strict";function r(t,e){if("flip"!==e)return t;var n={};return Object.keys(t).forEach(function(e){var r=t[e],o=r.element||r.previous&&r.previous.element;if(o&&o.hasAttribute("data-flip-follow")){var a=o.getAttribute("data-flip-follow");if(a&&t[a])n[e]=i({},r,{delta:i({left:0,top:0},t[a].delta,{width:1,height:1})});else if("ENTER"===r.type||"LEAVE"===r.type){for(var u=o.nextElementSibling;u&&(!u.hasAttribute("data-flip-key")||"MOVE"!==t[u.getAttribute("data-flip-key")].type);)u=u.nextElementSibling;if(u){var f=t[u.getAttribute("data-flip-key")].delta;n[e]=i({},r,{delta:{left:f.left,top:f.top,width:1,height:1}})}}}}),Object.assign(t,n)}var i=this&&this.__assign||Object.assign||function(t){for(var e,n=1,r=arguments.length;n<r;n++){e=arguments[n];for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i])}return t};e.__esModule=!0,e.default=r},,,function(t,e,n){"use strict";function r(t,e,n){void 0===n&&(n="flip"),Object.keys(e).forEach(function(r){void 0!==e[r]&&t&&t.style.setProperty("--"+n+"-"+r,""+e[r])})}var i=this&&this.__extends||function(){var t=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n])};return function(e,n){function r(){this.constructor=e}t(e,n),e.prototype=null===n?Object.create(n):(r.prototype=n.prototype,new r)}}(),o=this&&this.__assign||Object.assign||function(t){for(var e,n=1,r=arguments.length;n<r;n++){e=arguments[n];for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i])}return t},a=n(2),u=function(t){return"\n["+t+"] {\n transition-property: transform;\n transition-duration: calc(var(--flip-active, 1) * 0.6s);\n transform-origin: top left;\n transform:\n translateX(calc(var(--flip-dx, 0) * 1px))\n translateY(calc(var(--flip-dy, 0) * 1px))\n scale(var(--flip-dw, 1), var(--flip-dh, 1));\n}\n"},f=function(t){function e(){var e=t.call(this,{onFlip:function(t){Object.keys(t).forEach(function(e){var n=t[e];n.delta&&r(n.element,o({dx:n.delta.left,dy:n.delta.top,dw:n.delta.width,dh:n.delta.height},n.data&&n.data.noScale?{dw:1,dh:1}:void 0,{active:0}))}),setTimeout(function(){Object.keys(t).forEach(function(e){var n=t[e];n.bounds&&r(n.element,{dx:0,dy:0,dw:1,dh:1,active:1})})},0)}})||this;return e.injectStyle(),e}return i(e,t),e.prototype.injectStyle=function(){var t=document.createElement("style");t.innerHTML=u(this.attribute),document.querySelector("head").appendChild(t)},e}(a.default);t.exports=f}])});
!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(r){if(n[r])return n[r].exports;var i=n[r]={i:r,l:!1,exports:{}};return t[r].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,r){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:r})},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=7)}([function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.FOLLOW_ATTR="data-flip-follow",e.KEY_ATTR="data-flip-key",e.STATE_ATTR="data-flip-state",e.NO_DELTA={top:0,left:0,width:1,height:1}},function(t,e,n){"use strict";function r(t,e){var n={};return Object.keys(t).forEach(function(r){n[r]=e(t[r],r,t)}),n}function i(t,e,n){var r={};return Object.keys(t||{}).forEach(function(i){r[i]=n(t[i],e[i],i)}),r}function o(t,e){return p.translate(t,e).join(",")}function a(t,e){return p.scale(t,e).join(",")}function u(){for(var t=[],e=0;e<arguments.length;e++)t[e]=arguments[e];return t.filter(function(t){return!!t}).reduce(p.multiply).join(",")}function f(t,e){return-1!==["height","width","top","left"].indexOf(t)&&"number"==typeof e?e+"px":e}function c(t,e){return"function"==typeof e?e(t):(e||0)*t}function s(t){var n=e.rect(t),r=n.width,i=n.height;return!(0===r&&0===i)}function l(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:h.NO_DELTA}function d(){var t={},e=[];return{on:function(n,r){"*"===n?e.push(r):(t[n]||(t[n]=[])).push(r)},off:function(n,r){"*"===n?e.splice(e.indexOf(r)>>>0,1):t[n]&&t[n].splice(t[n].indexOf(r)>>>0,1)},emit:function(n,r){(t[n]||[]).slice().map(function(t){t(r)}),e.slice().map(function(t){t(n,r)})}}}Object.defineProperty(e,"__esModule",{value:!0});var p=n(3),h=n(0);e.mapValues=r,e.mapTwoValues=i,e.matrixTranslate=o,e.matrixScale=a,e.matrixMultiply=u,e.styleValue=f,e.getStaggerDelay=c,e.identity=function(t){return t},e.noop=function(){},e.rect=function(t){var e=t.getBoundingClientRect();return{top:e.top,left:e.left,width:e.width,height:e.height,get transform(){return getComputedStyle(t).transform||void 0}}},e.isVisible=s,e.getDelta=l,e.deltaChanged=function(t){return!!t.top||!!t.left||1!==t.width||1!==t.height},e.boundsChanged=function(t,e){return!!(t.top-e.top||t.left-e.left||t.width-e.width||t.height-e.height)},e.mitt=d},function(t,e,n){"use strict";var r=this&&this.__assign||Object.assign||function(t){for(var e,n=1,r=arguments.length;n<r;n++){e=arguments[n];for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i])}return t};Object.defineProperty(e,"__esModule",{value:!0});var i=n(1),o=n(0),a=n(4),u=n(5),f=function(){return!0},c=function(t){return t},s={flipKey:["key",c],flipNoScale:["noScale",function(){return!0}]},l=function(t){if(!("dataset"in t))return{};var e=t.dataset,n={};return Object.keys(e).forEach(function(t){if(s[t]){var r=s[t],i=r[0],o=r[1];n[i]=o(e[t])}else 0===t.indexOf("flip")&&(n[t[4].toLowerCase()+t.slice(5)]=e[t])}),n},d=function(t,e){return void 0===e&&(e=o.KEY_ATTR),"string"==typeof t?function(n){var r=n.querySelectorAll(t),o={},a=[];return r.forEach(function(t){if(i.isVisible(t)){var n=t.getAttribute(e);n&&(o[n]=t,a.push(t))}}),a}:t},p=function(){function t(t){void 0===t&&(t={}),this.attribute=t.attribute||o.KEY_ATTR,this.selector=d(t.selector||"["+this.attribute+"]",this.attribute),this.active=t.active||f,this.activeSelector=t.activeSelector||i.isVisible,this.getBounds=t.getBounds||i.rect,this.getDelta=t.getDelta||i.getDelta,this.parentElement=t.parent||document.documentElement,this.plugins=t.plugins||[a.default,u.default],this.emitter=i.mitt(),t.onRead&&this.on("read",t.onRead),t.onFlip&&this.on("flip",t.onFlip),t.onEnter&&this.on("enter",t.onEnter),t.onLeave&&this.on("leave",t.onLeave),this.states={}}return t.prototype.getRelativeBounds=function(t,e){return r({},e,{top:e.top-t.top,left:e.left-t.left})},t.prototype.selectActive=function(t){var e=this,n=this.selector(t),r={},i=[];return n.forEach(function(t){if(e.activeSelector(t)){var n=t.getAttribute(e.attribute);n&&(r[n]=t,i.push(t))}}),i},t.prototype.findParent=function(t,e){void 0===e&&(e=this.parentElement);var n=t.getAttribute("data-flip-parent"),r=t.parentElement;if(n)for(;r&&r.getAttribute(this.attribute)!==n;)r=r.parentElement;else for(;r&&!r.hasAttribute(this.attribute);)r=r.parentElement;return r||e},t.prototype.dispatch=function(t,e){var n=this.plugins.reduce(function(e,n){return n(e,t)},e);this.emitter.emit(t,n)},t.prototype.on=function(t,e){this.emitter.on(t,e)},t.prototype.onFlip=function(){for(var t=[],e=0;e<arguments.length;e++)t[e]=arguments[e];var n,r;2===t.length?(n=t[0],r=t[1]):r=t[0],this.emitter.on("flip",n?function(t){var e=t[n];e&&r(e)}:r)},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,r=this.selectActive(n),i={};return r.forEach(function(t,r){var o=t.getAttribute(e.attribute);if(o){var a=l(t),u=e.findParent(t,n),f=u.getAttribute(e.attribute),c=f?i[f]:void 0,s=e.getBounds(u),d=e.states[o],p=d&&"LEAVE"!==d.type,h=e.getRelativeBounds(s,e.getBounds(t)),v=p&&d&&d.bounds?e.getDelta(d.bounds,h):void 0,y={type:p?"MOVE":"ENTER",key:o,element:t,bounds:h,delta:v,start:Date.now(),animation:p?d.animation:void 0,index:r,previous:d?{type:d.type,bounds:d.bounds,animation:d.animation,element:d.element,data:d.data}:void 0,parent:c,data:a};e.states[o]=i[o]=y}}),t.readOnly?this.dispatch("read",i):(Object.keys(this.states).forEach(function(t,n){if(!i[t]){var r=e.states[t];e.states[t]=i[t]={type:"LEAVE",key:t,element:void 0,bounds:void 0,start:Date.now(),animation:void 0,delta:void 0,index:n,parent:void 0,previous:{type:r.type,bounds:r.bounds,animation:r.animation,element:r.element}}}}),this.dispatch("flip",i))},t.prototype.setAnimation=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 r=[],i=0;i<arguments.length;i++)r[i]=arguments[i];n.read(e);var o=t.apply(null,r);return n.flip(e),o}},t.prototype.progress=function(e,n){var r=this.states[e].delta;if(r)return t.progress(r,n)},t.progress=function(t,e){if(!t)return o.NO_DELTA;var n=1-e;return{top:t.top*n,left:t.left*n,width:t.width*n,height:t.height*n}},t.rect=i.rect,t.willScale=function(t){return!(!t||!t.element||t.element.hasAttribute("data-noflip")||!t.delta||1===t.delta.width&&1===t.delta.height)},t.willMove=function(t){return!(!t||!t.delta)&&(t&&(0!==t.delta.top||0!==t.delta.left))},t}();e.default=p},function(t,e,n){"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 e=i();return e[0]=t[0],e[1]=t[1],e[4]=t[2],e[5]=t[3],e[12]=t[4],e[13]=t[5],e}throw new RangeError("Expected array with either 6 or 16 values.")}function i(){for(var t=[],e=0;e<16;e++)e%5==0?t.push(1):t.push(0);return t}function o(t){var e=r(t),n=e[0]*e[5]-e[4]*e[1],i=e[0]*e[6]-e[4]*e[2],o=e[0]*e[7]-e[4]*e[3],a=e[1]*e[6]-e[5]*e[2],u=e[1]*e[7]-e[5]*e[3],f=e[2]*e[7]-e[6]*e[3],c=e[10]*e[15]-e[14]*e[11],s=e[9]*e[15]-e[13]*e[11],l=e[9]*e[14]-e[13]*e[10],d=e[8]*e[15]-e[12]*e[11],p=e[8]*e[14]-e[12]*e[10],h=e[8]*e[13]-e[12]*e[9],v=1/(n*c-i*s+o*l+a*d-u*p+f*h);if(isNaN(v)||v===1/0)throw new Error("Inverse determinant attempted to divide by zero.");return[(e[5]*c-e[6]*s+e[7]*l)*v,(-e[1]*c+e[2]*s-e[3]*l)*v,(e[13]*f-e[14]*u+e[15]*a)*v,(-e[9]*f+e[10]*u-e[11]*a)*v,(-e[4]*c+e[6]*d-e[7]*p)*v,(e[0]*c-e[2]*d+e[3]*p)*v,(-e[12]*f+e[14]*o-e[15]*i)*v,(e[8]*f-e[10]*o+e[11]*i)*v,(e[4]*s-e[5]*d+e[7]*h)*v,(-e[0]*s+e[1]*d-e[3]*h)*v,(e[12]*u-e[13]*o+e[15]*n)*v,(-e[8]*u+e[9]*o-e[11]*n)*v,(-e[4]*l+e[5]*p-e[6]*h)*v,(e[0]*l-e[1]*p+e[2]*h)*v,(-e[12]*a+e[13]*i-e[14]*n)*v,(e[8]*a-e[9]*i+e[10]*n)*v]}function a(t,e){for(var n=r(t),i=r(e),o=[],a=0;a<4;a++)for(var u=[n[a],n[a+4],n[a+8],n[a+12]],f=0;f<4;f++){var c=4*f,s=[i[c],i[c+1],i[c+2],i[c+3]],l=u[0]*s[0]+u[1]*s[1]+u[2]*s[2]+u[3]*s[3];o[a+c]=l}return o}function u(t){if("string"==typeof t){var e=t.match(/matrix(3d)?\(([^)]+)\)/);if(e){return r(e[2].split(", ").map(function(t){return parseFloat(t)}))}}return i()}function f(t){var e=Math.PI/180*t,n=i();return n[5]=n[10]=Math.cos(e),n[6]=n[9]=Math.sin(e),n[9]*=-1,n}function c(t){var e=Math.PI/180*t,n=i();return n[0]=n[10]=Math.cos(e),n[2]=n[8]=Math.sin(e),n[2]*=-1,n}function s(t){var e=Math.PI/180*t,n=i();return n[0]=n[5]=Math.cos(e),n[1]=n[4]=Math.sin(e),n[4]*=-1,n}function l(t,e){var n=i();return n[0]=t,n[5]=e||t,n}function d(t){var e=i();return e[0]=t,e}function p(t){var e=i();return e[5]=t,e}function h(t){var e=i();return e[10]=t,e}function v(t,e){var n=Math.PI/180*t,r=i();if(r[4]=Math.tan(n),e){var o=Math.PI/180*e;r[1]=Math.tan(o)}return r}function y(t){var e=Math.PI/180*t,n=i();return n[4]=Math.tan(e),n}function g(t){var e=Math.PI/180*t,n=i();return n[1]=Math.tan(e),n}function m(t,e){var n=i();return n[12]=t,e&&(n[13]=e),n}function b(t){var e=i();return e[12]=t,e}function E(t){var e=i();return e[13]=t,e}function w(t){var e=i();return e[14]=t,e}Object.defineProperty(e,"__esModule",{value:!0}),n.d(e,"format",function(){return r}),n.d(e,"identity",function(){return i}),n.d(e,"inverse",function(){return o}),n.d(e,"multiply",function(){return a}),n.d(e,"parse",function(){return u}),n.d(e,"rotateX",function(){return f}),n.d(e,"rotateY",function(){return c}),n.d(e,"rotateZ",function(){return s}),n.d(e,"scale",function(){return l}),n.d(e,"scaleX",function(){return d}),n.d(e,"scaleY",function(){return p}),n.d(e,"scaleZ",function(){return h}),n.d(e,"skew",function(){return v}),n.d(e,"skewX",function(){return y}),n.d(e,"skewY",function(){return g}),n.d(e,"translate",function(){return m}),n.d(e,"translateX",function(){return b}),n.d(e,"translateY",function(){return E}),n.d(e,"translateZ",function(){return w})},function(t,e,n){"use strict";function r(t,e){if("flip"!==e)return t;var n={};return Object.keys(t).forEach(function(e){var r=t[e],o=r.element||r.previous&&r.previous.element;if(o&&o.hasAttribute("data-flip-follow")){var a=o.getAttribute("data-flip-follow");if(a&&t[a])n[e]=i({},r,{delta:i({left:0,top:0},t[a].delta,{width:1,height:1})});else if("ENTER"===r.type||"LEAVE"===r.type){for(var u=o.nextElementSibling;u&&(!u.hasAttribute("data-flip-key")||"MOVE"!==t[u.getAttribute("data-flip-key")].type);)u=u.nextElementSibling;if(u){var f=t[u.getAttribute("data-flip-key")].delta;n[e]=i({},r,{delta:{left:f.left,top:f.top,width:1,height:1}})}}}}),Object.assign(t,n)}var i=this&&this.__assign||Object.assign||function(t){for(var e,n=1,r=arguments.length;n<r;n++){e=arguments[n];for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i])}return t};Object.defineProperty(e,"__esModule",{value:!0}),e.default=r},function(t,e,n){"use strict";function r(t,e){return"read"===e&&Object.keys(t).forEach(function(e){var n=t[e],r=n.element;r&&(n.data.radius=getComputedStyle?getComputedStyle(r).borderRadius||"0":"0")}),t}Object.defineProperty(e,"__esModule",{value:!0}),e.default=r},,function(t,e,n){"use strict";function r(t,e,n){void 0===n&&(n="flip"),Object.keys(e).forEach(function(r){void 0!==e[r]&&t&&t.style.setProperty("--"+n+"-"+r,""+e[r])})}var i=this&&this.__extends||function(){var t=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n])};return function(e,n){function r(){this.constructor=e}t(e,n),e.prototype=null===n?Object.create(n):(r.prototype=n.prototype,new r)}}(),o=this&&this.__assign||Object.assign||function(t){for(var e,n=1,r=arguments.length;n<r;n++){e=arguments[n];for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i])}return t},a=n(2),u=function(t){return"\n["+t+"] {\n transition-property: transform;\n transition-duration: calc(var(--flip-active, 1) * 0.6s);\n transform-origin: top left;\n transform:\n translateX(calc(var(--flip-dx, 0) * 1px))\n translateY(calc(var(--flip-dy, 0) * 1px))\n scale(var(--flip-dw, 1), var(--flip-dh, 1));\n}\n"},f=/matrix\(.*, .*, .*, .*, (.*), (.*)\)/,c=function(t){function e(){var e=t.call(this,{onFlip:function(t){Object.keys(t).forEach(function(e){var n=t[e];if(n.delta){var i=0,a=0;if(n.bounds&&n.bounds.transform){var u=n.bounds.transform.match(f);u&&3===u.length&&(i=parseFloat(u[1]),a=parseFloat(u[2]))}r(n.element,o({dx:n.delta.left+i,dy:n.delta.top+a,dw:n.delta.width,dh:n.delta.height},n.data&&n.data.noScale?{dw:1,dh:1}:void 0,{active:0}))}}),requestAnimationFrame(function(){requestAnimationFrame(function(){Object.keys(t).forEach(function(e){var n=t[e];n.bounds&&r(n.element,{dx:0,dy:0,dw:1,dh:1,active:1})})})})}})||this;return e.injectStyle(),e}return i(e,t),e.prototype.injectStyle=function(){var t=document.createElement("style");t.innerHTML=u(this.attribute),document.querySelector("head").appendChild(t)},e}(a.default);t.exports=c}])});

2

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(r){if(n[r])return n[r].exports;var i=n[r]={i:r,l:!1,exports:{}};return t[r].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,r){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:r})},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=11)}([function(t,e,n){"use strict";function r(t,e){var n={};return Object.keys(t||{}).forEach(function(r){n[r]=e(t[r],r,t)}),n}function i(t,e,n){var r={};return Object.keys(t||{}).forEach(function(i){r[i]=n(t[i],e[i],i)}),r}function o(t,e){return p.translate(t,e).join(",")}function a(t,e){return p.scale(t,e).join(",")}function u(){for(var t=[],e=0;e<arguments.length;e++)t[e]=arguments[e];return t.filter(function(t){return!!t}).reduce(p.multiply).join(",")}function f(t,e){return-1!==["height","width","top","left"].indexOf(t)&&"number"==typeof e?e+"px":e}function c(t,e){return"function"==typeof e?e(t):(e||0)*t}function s(t){var n=e.rect(t),r=n.width,i=n.height;return!(0===r&&0===i)}function l(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:d.NO_DELTA}e.__esModule=!0;var p=n(3),d=n(1);e.mapValues=r,e.mapTwoValues=i,e.matrixTranslate=o,e.matrixScale=a,e.matrixMultiply=u,e.styleValue=f,e.getStaggerDelay=c,e.identity=function(t){return t},e.noop=function(){},e.rect=function(t){var e=t.getBoundingClientRect();return{top:e.top,left:e.left,width:e.width,height:e.height,transform:getComputedStyle(t).transform||void 0}},e.isVisible=s,e.getDelta=l,e.deltaChanged=function(t){return!!t.top||!!t.left||1!==t.width||1!==t.height},e.boundsChanged=function(t,e){return!!(t.top-e.top||t.left-e.left||t.width-e.width||t.height-e.height)}},function(t,e,n){"use strict";e.__esModule=!0,e.FOLLOW_ATTR="data-flip-follow",e.KEY_ATTR="data-flip-key",e.STATE_ATTR="data-flip-state",e.NO_DELTA={top:0,left:0,width:1,height:1}},function(t,e,n){"use strict";var r=this&&this.__assign||Object.assign||function(t){for(var e,n=1,r=arguments.length;n<r;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 i=n(4),o=n(0),a=n(1),u=n(5),f=function(){return!0},c=function(t){return t},s={flipKey:["key",c],flipNoScale:["noScale",function(){return!0}]},l=function(t){if(!("dataset"in t))return{};var e=t.dataset,n={};return Object.keys(e).forEach(function(t){if(s[t]){var r=s[t],i=r[0],o=r[1];n[i]=o(e[t])}else 0===t.indexOf("flip")&&(n[t[4].toLowerCase()+t.slice(5)]=e[t])}),n},p=function(t,e){return void 0===e&&(e=a.KEY_ATTR),"string"==typeof t?function(n){var r=n.querySelectorAll(t),i={},a=[];return r.forEach(function(t){if(o.isVisible(t)){var n=t.getAttribute(e);n&&(i[n]=t,a.push(t))}}),a}:t},d=function(){function t(t){void 0===t&&(t={}),this.attribute=t.attribute||a.KEY_ATTR,this.selector=p(t.selector||"["+this.attribute+"]",this.attribute),this.active=t.active||f,this.activeSelector=t.activeSelector||o.isVisible,this.getBounds=t.getBounds||o.rect,this.getDelta=t.getDelta||o.getDelta,this.parentElement=t.parent||document.documentElement,this.plugins=t.plugins||[u.default],this.emitter=new i,t.onRead&&this.on("read",t.onRead),t.onFlip&&this.on("flip",t.onFlip),t.onEnter&&this.on("enter",t.onEnter),t.onLeave&&this.on("leave",t.onLeave),this.states={}}return t.prototype.getRelativeBounds=function(t,e){return r({},e,{top:e.top-t.top,left:e.left-t.left})},t.prototype.selectActive=function(t){var e=this,n=this.selector(t),r={},i=[];return n.forEach(function(t){if(e.activeSelector(t)){var n=t.getAttribute(e.attribute);n&&(r[n]=t,i.push(t))}}),i},t.prototype.findParent=function(t,e){void 0===e&&(e=this.parentElement);var n=t.getAttribute("data-flip-parent"),r=t.parentElement;if(n)for(;r&&r.getAttribute(this.attribute)!==n;)r=r.parentElement;else for(;r&&!r.hasAttribute(this.attribute);)r=r.parentElement;return r||e},t.prototype.dispatch=function(t,e){var n=this.plugins.reduce(function(e,n){return n(e,t)},e);this.emitter.emit(t,n)},t.prototype.on=function(t,e){this.emitter.on(t,e)},t.prototype.onFlip=function(){for(var t=[],e=0;e<arguments.length;e++)t[e]=arguments[e];var n,r;2===t.length?(n=t[0],r=t[1]):r=t[0],this.emitter.on("flip",n?function(t){var e=t[n];e&&r(e)}:r)},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,r=this.selectActive(n),i={};return r.forEach(function(t,r){var o=t.getAttribute(e.attribute);if(o){var a=l(t),u=e.findParent(t,n),f=u.getAttribute(e.attribute),c=f?i[f]:void 0,s=e.getBounds(u),p=e.states[o],d=p&&"LEAVE"!==p.type,h=e.getRelativeBounds(s,e.getBounds(t)),v=d&&p&&p.bounds?e.getDelta(p.bounds,h):void 0,g={type:d?"MOVE":"ENTER",key:o,element:t,bounds:h,delta:v,start:Date.now(),animation:d?p.animation:void 0,index:r,previous:p?{type:p.type,bounds:p.bounds,animation:p.animation,element:p.element}:void 0,parent:c,data:a};e.states[o]=i[o]=g}}),t.readOnly?this.dispatch("read",i):(Object.keys(this.states).forEach(function(t,n){if(!i[t]){var r=e.states[t];e.states[t]=i[t]={type:"LEAVE",key:t,element:void 0,bounds:void 0,start:Date.now(),animation:void 0,delta:void 0,index:n,parent:void 0,previous:{type:r.type,bounds:r.bounds,animation:r.animation,element:r.element}}}}),this.dispatch("flip",i))},t.prototype.setAnimation=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 r=[],i=0;i<arguments.length;i++)r[i]=arguments[i];n.read(e);var o=t.apply(null,r);return n.flip(e),o}},t.prototype.progress=function(e,n){var r=this.states[e].delta;if(r)return t.progress(r,n)},t.progress=function(t,e){if(!t)return a.NO_DELTA;var n=1-e;return{top:t.top*n,left:t.left*n,width:t.width*n,height:t.height*n}},t.rect=o.rect,t.willScale=function(t){return!(!t||!t.element||t.element.hasAttribute("data-noflip")||!t.delta||1===t.delta.width&&1===t.delta.height)},t.willMove=function(t){return!(!t||!t.delta)&&(t&&(0!==t.delta.top||0!==t.delta.left))},t}();e.default=d},function(t,e,n){"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 e=i();return e[0]=t[0],e[1]=t[1],e[4]=t[2],e[5]=t[3],e[12]=t[4],e[13]=t[5],e}throw new RangeError("Expected array with either 6 or 16 values.")}function i(){for(var t=[],e=0;e<16;e++)e%5==0?t.push(1):t.push(0);return t}function o(t){var e=r(t),n=e[0]*e[5]-e[4]*e[1],i=e[0]*e[6]-e[4]*e[2],o=e[0]*e[7]-e[4]*e[3],a=e[1]*e[6]-e[5]*e[2],u=e[1]*e[7]-e[5]*e[3],f=e[2]*e[7]-e[6]*e[3],c=e[10]*e[15]-e[14]*e[11],s=e[9]*e[15]-e[13]*e[11],l=e[9]*e[14]-e[13]*e[10],p=e[8]*e[15]-e[12]*e[11],d=e[8]*e[14]-e[12]*e[10],h=e[8]*e[13]-e[12]*e[9],v=1/(n*c-i*s+o*l+a*p-u*d+f*h);if(isNaN(v)||v===1/0)throw new Error("Inverse determinant attempted to divide by zero.");return[(e[5]*c-e[6]*s+e[7]*l)*v,(-e[1]*c+e[2]*s-e[3]*l)*v,(e[13]*f-e[14]*u+e[15]*a)*v,(-e[9]*f+e[10]*u-e[11]*a)*v,(-e[4]*c+e[6]*p-e[7]*d)*v,(e[0]*c-e[2]*p+e[3]*d)*v,(-e[12]*f+e[14]*o-e[15]*i)*v,(e[8]*f-e[10]*o+e[11]*i)*v,(e[4]*s-e[5]*p+e[7]*h)*v,(-e[0]*s+e[1]*p-e[3]*h)*v,(e[12]*u-e[13]*o+e[15]*n)*v,(-e[8]*u+e[9]*o-e[11]*n)*v,(-e[4]*l+e[5]*d-e[6]*h)*v,(e[0]*l-e[1]*d+e[2]*h)*v,(-e[12]*a+e[13]*i-e[14]*n)*v,(e[8]*a-e[9]*i+e[10]*n)*v]}function a(t,e){for(var n=r(t),i=r(e),o=[],a=0;a<4;a++)for(var u=[n[a],n[a+4],n[a+8],n[a+12]],f=0;f<4;f++){var c=4*f,s=[i[c],i[c+1],i[c+2],i[c+3]],l=u[0]*s[0]+u[1]*s[1]+u[2]*s[2]+u[3]*s[3];o[a+c]=l}return o}function u(t){if("string"==typeof t){var e=t.match(/matrix(3d)?\(([^)]+)\)/);if(e){return r(e[2].split(", ").map(function(t){return parseFloat(t)}))}}return i()}function f(t){var e=Math.PI/180*t,n=i();return n[5]=n[10]=Math.cos(e),n[6]=n[9]=Math.sin(e),n[9]*=-1,n}function c(t){var e=Math.PI/180*t,n=i();return n[0]=n[10]=Math.cos(e),n[2]=n[8]=Math.sin(e),n[2]*=-1,n}function s(t){var e=Math.PI/180*t,n=i();return n[0]=n[5]=Math.cos(e),n[1]=n[4]=Math.sin(e),n[4]*=-1,n}function l(t,e){var n=i();return n[0]=t,n[5]=e||t,n}function p(t){var e=i();return e[0]=t,e}function d(t){var e=i();return e[5]=t,e}function h(t){var e=i();return e[10]=t,e}function v(t,e){var n=Math.PI/180*t,r=i();if(r[4]=Math.tan(n),e){var o=Math.PI/180*e;r[1]=Math.tan(o)}return r}function g(t){var e=Math.PI/180*t,n=i();return n[4]=Math.tan(e),n}function y(t){var e=Math.PI/180*t,n=i();return n[1]=Math.tan(e),n}function m(t,e){var n=i();return n[12]=t,e&&(n[13]=e),n}function b(t){var e=i();return e[12]=t,e}function E(t){var e=i();return e[13]=t,e}function w(t){var e=i();return e[14]=t,e}Object.defineProperty(e,"__esModule",{value:!0}),n.d(e,"format",function(){return r}),n.d(e,"identity",function(){return i}),n.d(e,"inverse",function(){return o}),n.d(e,"multiply",function(){return a}),n.d(e,"parse",function(){return u}),n.d(e,"rotateX",function(){return f}),n.d(e,"rotateY",function(){return c}),n.d(e,"rotateZ",function(){return s}),n.d(e,"scale",function(){return l}),n.d(e,"scaleX",function(){return p}),n.d(e,"scaleY",function(){return d}),n.d(e,"scaleZ",function(){return h}),n.d(e,"skew",function(){return v}),n.d(e,"skewX",function(){return g}),n.d(e,"skewY",function(){return y}),n.d(e,"translate",function(){return m}),n.d(e,"translateX",function(){return b}),n.d(e,"translateY",function(){return E}),n.d(e,"translateZ",function(){return w})},function(t,e,n){!function(e,n){t.exports=n()}(0,function(){function t(t){return t=t||Object.create(null),{on:function(e,n){(t[e]||(t[e]=[])).push(n)},off:function(e,n){t[e]&&t[e].splice(t[e].indexOf(n)>>>0,1)},emit:function(e,n){(t[e]||[]).slice().map(function(t){t(n)}),(t["*"]||[]).slice().map(function(t){t(e,n)})}}}return t})},function(t,e,n){"use strict";function r(t,e){if("flip"!==e)return t;var n={};return Object.keys(t).forEach(function(e){var r=t[e],o=r.element||r.previous&&r.previous.element;if(o&&o.hasAttribute("data-flip-follow")){var a=o.getAttribute("data-flip-follow");if(a&&t[a])n[e]=i({},r,{delta:i({left:0,top:0},t[a].delta,{width:1,height:1})});else if("ENTER"===r.type||"LEAVE"===r.type){for(var u=o.nextElementSibling;u&&(!u.hasAttribute("data-flip-key")||"MOVE"!==t[u.getAttribute("data-flip-key")].type);)u=u.nextElementSibling;if(u){var f=t[u.getAttribute("data-flip-key")].delta;n[e]=i({},r,{delta:{left:f.left,top:f.top,width:1,height:1}})}}}}),Object.assign(t,n)}var i=this&&this.__assign||Object.assign||function(t){for(var e,n=1,r=arguments.length;n<r;n++){e=arguments[n];for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i])}return t};e.__esModule=!0,e.default=r},,,,,,function(t,e,n){"use strict";var r=n(2);t.exports=r.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(r){if(n[r])return n[r].exports;var i=n[r]={i:r,l:!1,exports:{}};return t[r].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,r){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:r})},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=9)}([function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.FOLLOW_ATTR="data-flip-follow",e.KEY_ATTR="data-flip-key",e.STATE_ATTR="data-flip-state",e.NO_DELTA={top:0,left:0,width:1,height:1}},function(t,e,n){"use strict";function r(t,e){var n={};return Object.keys(t).forEach(function(r){n[r]=e(t[r],r,t)}),n}function i(t,e,n){var r={};return Object.keys(t||{}).forEach(function(i){r[i]=n(t[i],e[i],i)}),r}function o(t,e){return d.translate(t,e).join(",")}function a(t,e){return d.scale(t,e).join(",")}function u(){for(var t=[],e=0;e<arguments.length;e++)t[e]=arguments[e];return t.filter(function(t){return!!t}).reduce(d.multiply).join(",")}function f(t,e){return-1!==["height","width","top","left"].indexOf(t)&&"number"==typeof e?e+"px":e}function c(t,e){return"function"==typeof e?e(t):(e||0)*t}function s(t){var n=e.rect(t),r=n.width,i=n.height;return!(0===r&&0===i)}function l(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:h.NO_DELTA}function p(){var t={},e=[];return{on:function(n,r){"*"===n?e.push(r):(t[n]||(t[n]=[])).push(r)},off:function(n,r){"*"===n?e.splice(e.indexOf(r)>>>0,1):t[n]&&t[n].splice(t[n].indexOf(r)>>>0,1)},emit:function(n,r){(t[n]||[]).slice().map(function(t){t(r)}),e.slice().map(function(t){t(n,r)})}}}Object.defineProperty(e,"__esModule",{value:!0});var d=n(3),h=n(0);e.mapValues=r,e.mapTwoValues=i,e.matrixTranslate=o,e.matrixScale=a,e.matrixMultiply=u,e.styleValue=f,e.getStaggerDelay=c,e.identity=function(t){return t},e.noop=function(){},e.rect=function(t){var e=t.getBoundingClientRect();return{top:e.top,left:e.left,width:e.width,height:e.height,get transform(){return getComputedStyle(t).transform||void 0}}},e.isVisible=s,e.getDelta=l,e.deltaChanged=function(t){return!!t.top||!!t.left||1!==t.width||1!==t.height},e.boundsChanged=function(t,e){return!!(t.top-e.top||t.left-e.left||t.width-e.width||t.height-e.height)},e.mitt=p},function(t,e,n){"use strict";var r=this&&this.__assign||Object.assign||function(t){for(var e,n=1,r=arguments.length;n<r;n++){e=arguments[n];for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i])}return t};Object.defineProperty(e,"__esModule",{value:!0});var i=n(1),o=n(0),a=n(4),u=n(5),f=function(){return!0},c=function(t){return t},s={flipKey:["key",c],flipNoScale:["noScale",function(){return!0}]},l=function(t){if(!("dataset"in t))return{};var e=t.dataset,n={};return Object.keys(e).forEach(function(t){if(s[t]){var r=s[t],i=r[0],o=r[1];n[i]=o(e[t])}else 0===t.indexOf("flip")&&(n[t[4].toLowerCase()+t.slice(5)]=e[t])}),n},p=function(t,e){return void 0===e&&(e=o.KEY_ATTR),"string"==typeof t?function(n){var r=n.querySelectorAll(t),o={},a=[];return r.forEach(function(t){if(i.isVisible(t)){var n=t.getAttribute(e);n&&(o[n]=t,a.push(t))}}),a}:t},d=function(){function t(t){void 0===t&&(t={}),this.attribute=t.attribute||o.KEY_ATTR,this.selector=p(t.selector||"["+this.attribute+"]",this.attribute),this.active=t.active||f,this.activeSelector=t.activeSelector||i.isVisible,this.getBounds=t.getBounds||i.rect,this.getDelta=t.getDelta||i.getDelta,this.parentElement=t.parent||document.documentElement,this.plugins=t.plugins||[a.default,u.default],this.emitter=i.mitt(),t.onRead&&this.on("read",t.onRead),t.onFlip&&this.on("flip",t.onFlip),t.onEnter&&this.on("enter",t.onEnter),t.onLeave&&this.on("leave",t.onLeave),this.states={}}return t.prototype.getRelativeBounds=function(t,e){return r({},e,{top:e.top-t.top,left:e.left-t.left})},t.prototype.selectActive=function(t){var e=this,n=this.selector(t),r={},i=[];return n.forEach(function(t){if(e.activeSelector(t)){var n=t.getAttribute(e.attribute);n&&(r[n]=t,i.push(t))}}),i},t.prototype.findParent=function(t,e){void 0===e&&(e=this.parentElement);var n=t.getAttribute("data-flip-parent"),r=t.parentElement;if(n)for(;r&&r.getAttribute(this.attribute)!==n;)r=r.parentElement;else for(;r&&!r.hasAttribute(this.attribute);)r=r.parentElement;return r||e},t.prototype.dispatch=function(t,e){var n=this.plugins.reduce(function(e,n){return n(e,t)},e);this.emitter.emit(t,n)},t.prototype.on=function(t,e){this.emitter.on(t,e)},t.prototype.onFlip=function(){for(var t=[],e=0;e<arguments.length;e++)t[e]=arguments[e];var n,r;2===t.length?(n=t[0],r=t[1]):r=t[0],this.emitter.on("flip",n?function(t){var e=t[n];e&&r(e)}:r)},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,r=this.selectActive(n),i={};return r.forEach(function(t,r){var o=t.getAttribute(e.attribute);if(o){var a=l(t),u=e.findParent(t,n),f=u.getAttribute(e.attribute),c=f?i[f]:void 0,s=e.getBounds(u),p=e.states[o],d=p&&"LEAVE"!==p.type,h=e.getRelativeBounds(s,e.getBounds(t)),v=d&&p&&p.bounds?e.getDelta(p.bounds,h):void 0,g={type:d?"MOVE":"ENTER",key:o,element:t,bounds:h,delta:v,start:Date.now(),animation:d?p.animation:void 0,index:r,previous:p?{type:p.type,bounds:p.bounds,animation:p.animation,element:p.element,data:p.data}:void 0,parent:c,data:a};e.states[o]=i[o]=g}}),t.readOnly?this.dispatch("read",i):(Object.keys(this.states).forEach(function(t,n){if(!i[t]){var r=e.states[t];e.states[t]=i[t]={type:"LEAVE",key:t,element:void 0,bounds:void 0,start:Date.now(),animation:void 0,delta:void 0,index:n,parent:void 0,previous:{type:r.type,bounds:r.bounds,animation:r.animation,element:r.element}}}}),this.dispatch("flip",i))},t.prototype.setAnimation=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 r=[],i=0;i<arguments.length;i++)r[i]=arguments[i];n.read(e);var o=t.apply(null,r);return n.flip(e),o}},t.prototype.progress=function(e,n){var r=this.states[e].delta;if(r)return t.progress(r,n)},t.progress=function(t,e){if(!t)return o.NO_DELTA;var n=1-e;return{top:t.top*n,left:t.left*n,width:t.width*n,height:t.height*n}},t.rect=i.rect,t.willScale=function(t){return!(!t||!t.element||t.element.hasAttribute("data-noflip")||!t.delta||1===t.delta.width&&1===t.delta.height)},t.willMove=function(t){return!(!t||!t.delta)&&(t&&(0!==t.delta.top||0!==t.delta.left))},t}();e.default=d},function(t,e,n){"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 e=i();return e[0]=t[0],e[1]=t[1],e[4]=t[2],e[5]=t[3],e[12]=t[4],e[13]=t[5],e}throw new RangeError("Expected array with either 6 or 16 values.")}function i(){for(var t=[],e=0;e<16;e++)e%5==0?t.push(1):t.push(0);return t}function o(t){var e=r(t),n=e[0]*e[5]-e[4]*e[1],i=e[0]*e[6]-e[4]*e[2],o=e[0]*e[7]-e[4]*e[3],a=e[1]*e[6]-e[5]*e[2],u=e[1]*e[7]-e[5]*e[3],f=e[2]*e[7]-e[6]*e[3],c=e[10]*e[15]-e[14]*e[11],s=e[9]*e[15]-e[13]*e[11],l=e[9]*e[14]-e[13]*e[10],p=e[8]*e[15]-e[12]*e[11],d=e[8]*e[14]-e[12]*e[10],h=e[8]*e[13]-e[12]*e[9],v=1/(n*c-i*s+o*l+a*p-u*d+f*h);if(isNaN(v)||v===1/0)throw new Error("Inverse determinant attempted to divide by zero.");return[(e[5]*c-e[6]*s+e[7]*l)*v,(-e[1]*c+e[2]*s-e[3]*l)*v,(e[13]*f-e[14]*u+e[15]*a)*v,(-e[9]*f+e[10]*u-e[11]*a)*v,(-e[4]*c+e[6]*p-e[7]*d)*v,(e[0]*c-e[2]*p+e[3]*d)*v,(-e[12]*f+e[14]*o-e[15]*i)*v,(e[8]*f-e[10]*o+e[11]*i)*v,(e[4]*s-e[5]*p+e[7]*h)*v,(-e[0]*s+e[1]*p-e[3]*h)*v,(e[12]*u-e[13]*o+e[15]*n)*v,(-e[8]*u+e[9]*o-e[11]*n)*v,(-e[4]*l+e[5]*d-e[6]*h)*v,(e[0]*l-e[1]*d+e[2]*h)*v,(-e[12]*a+e[13]*i-e[14]*n)*v,(e[8]*a-e[9]*i+e[10]*n)*v]}function a(t,e){for(var n=r(t),i=r(e),o=[],a=0;a<4;a++)for(var u=[n[a],n[a+4],n[a+8],n[a+12]],f=0;f<4;f++){var c=4*f,s=[i[c],i[c+1],i[c+2],i[c+3]],l=u[0]*s[0]+u[1]*s[1]+u[2]*s[2]+u[3]*s[3];o[a+c]=l}return o}function u(t){if("string"==typeof t){var e=t.match(/matrix(3d)?\(([^)]+)\)/);if(e){return r(e[2].split(", ").map(function(t){return parseFloat(t)}))}}return i()}function f(t){var e=Math.PI/180*t,n=i();return n[5]=n[10]=Math.cos(e),n[6]=n[9]=Math.sin(e),n[9]*=-1,n}function c(t){var e=Math.PI/180*t,n=i();return n[0]=n[10]=Math.cos(e),n[2]=n[8]=Math.sin(e),n[2]*=-1,n}function s(t){var e=Math.PI/180*t,n=i();return n[0]=n[5]=Math.cos(e),n[1]=n[4]=Math.sin(e),n[4]*=-1,n}function l(t,e){var n=i();return n[0]=t,n[5]=e||t,n}function p(t){var e=i();return e[0]=t,e}function d(t){var e=i();return e[5]=t,e}function h(t){var e=i();return e[10]=t,e}function v(t,e){var n=Math.PI/180*t,r=i();if(r[4]=Math.tan(n),e){var o=Math.PI/180*e;r[1]=Math.tan(o)}return r}function g(t){var e=Math.PI/180*t,n=i();return n[4]=Math.tan(e),n}function y(t){var e=Math.PI/180*t,n=i();return n[1]=Math.tan(e),n}function b(t,e){var n=i();return n[12]=t,e&&(n[13]=e),n}function m(t){var e=i();return e[12]=t,e}function E(t){var e=i();return e[13]=t,e}function w(t){var e=i();return e[14]=t,e}Object.defineProperty(e,"__esModule",{value:!0}),n.d(e,"format",function(){return r}),n.d(e,"identity",function(){return i}),n.d(e,"inverse",function(){return o}),n.d(e,"multiply",function(){return a}),n.d(e,"parse",function(){return u}),n.d(e,"rotateX",function(){return f}),n.d(e,"rotateY",function(){return c}),n.d(e,"rotateZ",function(){return s}),n.d(e,"scale",function(){return l}),n.d(e,"scaleX",function(){return p}),n.d(e,"scaleY",function(){return d}),n.d(e,"scaleZ",function(){return h}),n.d(e,"skew",function(){return v}),n.d(e,"skewX",function(){return g}),n.d(e,"skewY",function(){return y}),n.d(e,"translate",function(){return b}),n.d(e,"translateX",function(){return m}),n.d(e,"translateY",function(){return E}),n.d(e,"translateZ",function(){return w})},function(t,e,n){"use strict";function r(t,e){if("flip"!==e)return t;var n={};return Object.keys(t).forEach(function(e){var r=t[e],o=r.element||r.previous&&r.previous.element;if(o&&o.hasAttribute("data-flip-follow")){var a=o.getAttribute("data-flip-follow");if(a&&t[a])n[e]=i({},r,{delta:i({left:0,top:0},t[a].delta,{width:1,height:1})});else if("ENTER"===r.type||"LEAVE"===r.type){for(var u=o.nextElementSibling;u&&(!u.hasAttribute("data-flip-key")||"MOVE"!==t[u.getAttribute("data-flip-key")].type);)u=u.nextElementSibling;if(u){var f=t[u.getAttribute("data-flip-key")].delta;n[e]=i({},r,{delta:{left:f.left,top:f.top,width:1,height:1}})}}}}),Object.assign(t,n)}var i=this&&this.__assign||Object.assign||function(t){for(var e,n=1,r=arguments.length;n<r;n++){e=arguments[n];for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i])}return t};Object.defineProperty(e,"__esModule",{value:!0}),e.default=r},function(t,e,n){"use strict";function r(t,e){return"read"===e&&Object.keys(t).forEach(function(e){var n=t[e],r=n.element;r&&(n.data.radius=getComputedStyle?getComputedStyle(r).borderRadius||"0":"0")}),t}Object.defineProperty(e,"__esModule",{value:!0}),e.default=r},,,,function(t,e,n){"use strict";var r=n(2);t.exports=r.default}])});

2

dist/flipping.web.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(r){if(n[r])return n[r].exports;var i=n[r]={i:r,l:!1,exports:{}};return t[r].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,r){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:r})},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=10)}([function(t,e,n){"use strict";function r(t,e){var n={};return Object.keys(t||{}).forEach(function(r){n[r]=e(t[r],r,t)}),n}function i(t,e,n){var r={};return Object.keys(t||{}).forEach(function(i){r[i]=n(t[i],e[i],i)}),r}function o(t,e){return h.translate(t,e).join(",")}function a(t,e){return h.scale(t,e).join(",")}function u(){for(var t=[],e=0;e<arguments.length;e++)t[e]=arguments[e];return t.filter(function(t){return!!t}).reduce(h.multiply).join(",")}function f(t,e){return-1!==["height","width","top","left"].indexOf(t)&&"number"==typeof e?e+"px":e}function s(t,e){return"function"==typeof e?e(t):(e||0)*t}function l(t){var n=e.rect(t),r=n.width,i=n.height;return!(0===r&&0===i)}function c(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:d.NO_DELTA}e.__esModule=!0;var h=n(3),d=n(1);e.mapValues=r,e.mapTwoValues=i,e.matrixTranslate=o,e.matrixScale=a,e.matrixMultiply=u,e.styleValue=f,e.getStaggerDelay=s,e.identity=function(t){return t},e.noop=function(){},e.rect=function(t){var e=t.getBoundingClientRect();return{top:e.top,left:e.left,width:e.width,height:e.height,transform:getComputedStyle(t).transform||void 0}},e.isVisible=l,e.getDelta=c,e.deltaChanged=function(t){return!!t.top||!!t.left||1!==t.width||1!==t.height},e.boundsChanged=function(t,e){return!!(t.top-e.top||t.left-e.left||t.width-e.width||t.height-e.height)}},function(t,e,n){"use strict";e.__esModule=!0,e.FOLLOW_ATTR="data-flip-follow",e.KEY_ATTR="data-flip-key",e.STATE_ATTR="data-flip-state",e.NO_DELTA={top:0,left:0,width:1,height:1}},function(t,e,n){"use strict";var r=this&&this.__assign||Object.assign||function(t){for(var e,n=1,r=arguments.length;n<r;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 i=n(4),o=n(0),a=n(1),u=n(5),f=function(){return!0},s=function(t){return t},l={flipKey:["key",s],flipNoScale:["noScale",function(){return!0}]},c=function(t){if(!("dataset"in t))return{};var e=t.dataset,n={};return Object.keys(e).forEach(function(t){if(l[t]){var r=l[t],i=r[0],o=r[1];n[i]=o(e[t])}else 0===t.indexOf("flip")&&(n[t[4].toLowerCase()+t.slice(5)]=e[t])}),n},h=function(t,e){return void 0===e&&(e=a.KEY_ATTR),"string"==typeof t?function(n){var r=n.querySelectorAll(t),i={},a=[];return r.forEach(function(t){if(o.isVisible(t)){var n=t.getAttribute(e);n&&(i[n]=t,a.push(t))}}),a}:t},d=function(){function t(t){void 0===t&&(t={}),this.attribute=t.attribute||a.KEY_ATTR,this.selector=h(t.selector||"["+this.attribute+"]",this.attribute),this.active=t.active||f,this.activeSelector=t.activeSelector||o.isVisible,this.getBounds=t.getBounds||o.rect,this.getDelta=t.getDelta||o.getDelta,this.parentElement=t.parent||document.documentElement,this.plugins=t.plugins||[u.default],this.emitter=new i,t.onRead&&this.on("read",t.onRead),t.onFlip&&this.on("flip",t.onFlip),t.onEnter&&this.on("enter",t.onEnter),t.onLeave&&this.on("leave",t.onLeave),this.states={}}return t.prototype.getRelativeBounds=function(t,e){return r({},e,{top:e.top-t.top,left:e.left-t.left})},t.prototype.selectActive=function(t){var e=this,n=this.selector(t),r={},i=[];return n.forEach(function(t){if(e.activeSelector(t)){var n=t.getAttribute(e.attribute);n&&(r[n]=t,i.push(t))}}),i},t.prototype.findParent=function(t,e){void 0===e&&(e=this.parentElement);var n=t.getAttribute("data-flip-parent"),r=t.parentElement;if(n)for(;r&&r.getAttribute(this.attribute)!==n;)r=r.parentElement;else for(;r&&!r.hasAttribute(this.attribute);)r=r.parentElement;return r||e},t.prototype.dispatch=function(t,e){var n=this.plugins.reduce(function(e,n){return n(e,t)},e);this.emitter.emit(t,n)},t.prototype.on=function(t,e){this.emitter.on(t,e)},t.prototype.onFlip=function(){for(var t=[],e=0;e<arguments.length;e++)t[e]=arguments[e];var n,r;2===t.length?(n=t[0],r=t[1]):r=t[0],this.emitter.on("flip",n?function(t){var e=t[n];e&&r(e)}:r)},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,r=this.selectActive(n),i={};return r.forEach(function(t,r){var o=t.getAttribute(e.attribute);if(o){var a=c(t),u=e.findParent(t,n),f=u.getAttribute(e.attribute),s=f?i[f]:void 0,l=e.getBounds(u),h=e.states[o],d=h&&"LEAVE"!==h.type,p=e.getRelativeBounds(l,e.getBounds(t)),v=d&&h&&h.bounds?e.getDelta(h.bounds,p):void 0,m={type:d?"MOVE":"ENTER",key:o,element:t,bounds:p,delta:v,start:Date.now(),animation:d?h.animation:void 0,index:r,previous:h?{type:h.type,bounds:h.bounds,animation:h.animation,element:h.element}:void 0,parent:s,data:a};e.states[o]=i[o]=m}}),t.readOnly?this.dispatch("read",i):(Object.keys(this.states).forEach(function(t,n){if(!i[t]){var r=e.states[t];e.states[t]=i[t]={type:"LEAVE",key:t,element:void 0,bounds:void 0,start:Date.now(),animation:void 0,delta:void 0,index:n,parent:void 0,previous:{type:r.type,bounds:r.bounds,animation:r.animation,element:r.element}}}}),this.dispatch("flip",i))},t.prototype.setAnimation=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 r=[],i=0;i<arguments.length;i++)r[i]=arguments[i];n.read(e);var o=t.apply(null,r);return n.flip(e),o}},t.prototype.progress=function(e,n){var r=this.states[e].delta;if(r)return t.progress(r,n)},t.progress=function(t,e){if(!t)return a.NO_DELTA;var n=1-e;return{top:t.top*n,left:t.left*n,width:t.width*n,height:t.height*n}},t.rect=o.rect,t.willScale=function(t){return!(!t||!t.element||t.element.hasAttribute("data-noflip")||!t.delta||1===t.delta.width&&1===t.delta.height)},t.willMove=function(t){return!(!t||!t.delta)&&(t&&(0!==t.delta.top||0!==t.delta.left))},t}();e.default=d},function(t,e,n){"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 e=i();return e[0]=t[0],e[1]=t[1],e[4]=t[2],e[5]=t[3],e[12]=t[4],e[13]=t[5],e}throw new RangeError("Expected array with either 6 or 16 values.")}function i(){for(var t=[],e=0;e<16;e++)e%5==0?t.push(1):t.push(0);return t}function o(t){var e=r(t),n=e[0]*e[5]-e[4]*e[1],i=e[0]*e[6]-e[4]*e[2],o=e[0]*e[7]-e[4]*e[3],a=e[1]*e[6]-e[5]*e[2],u=e[1]*e[7]-e[5]*e[3],f=e[2]*e[7]-e[6]*e[3],s=e[10]*e[15]-e[14]*e[11],l=e[9]*e[15]-e[13]*e[11],c=e[9]*e[14]-e[13]*e[10],h=e[8]*e[15]-e[12]*e[11],d=e[8]*e[14]-e[12]*e[10],p=e[8]*e[13]-e[12]*e[9],v=1/(n*s-i*l+o*c+a*h-u*d+f*p);if(isNaN(v)||v===1/0)throw new Error("Inverse determinant attempted to divide by zero.");return[(e[5]*s-e[6]*l+e[7]*c)*v,(-e[1]*s+e[2]*l-e[3]*c)*v,(e[13]*f-e[14]*u+e[15]*a)*v,(-e[9]*f+e[10]*u-e[11]*a)*v,(-e[4]*s+e[6]*h-e[7]*d)*v,(e[0]*s-e[2]*h+e[3]*d)*v,(-e[12]*f+e[14]*o-e[15]*i)*v,(e[8]*f-e[10]*o+e[11]*i)*v,(e[4]*l-e[5]*h+e[7]*p)*v,(-e[0]*l+e[1]*h-e[3]*p)*v,(e[12]*u-e[13]*o+e[15]*n)*v,(-e[8]*u+e[9]*o-e[11]*n)*v,(-e[4]*c+e[5]*d-e[6]*p)*v,(e[0]*c-e[1]*d+e[2]*p)*v,(-e[12]*a+e[13]*i-e[14]*n)*v,(e[8]*a-e[9]*i+e[10]*n)*v]}function a(t,e){for(var n=r(t),i=r(e),o=[],a=0;a<4;a++)for(var u=[n[a],n[a+4],n[a+8],n[a+12]],f=0;f<4;f++){var s=4*f,l=[i[s],i[s+1],i[s+2],i[s+3]],c=u[0]*l[0]+u[1]*l[1]+u[2]*l[2]+u[3]*l[3];o[a+s]=c}return o}function u(t){if("string"==typeof t){var e=t.match(/matrix(3d)?\(([^)]+)\)/);if(e){return r(e[2].split(", ").map(function(t){return parseFloat(t)}))}}return i()}function f(t){var e=Math.PI/180*t,n=i();return n[5]=n[10]=Math.cos(e),n[6]=n[9]=Math.sin(e),n[9]*=-1,n}function s(t){var e=Math.PI/180*t,n=i();return n[0]=n[10]=Math.cos(e),n[2]=n[8]=Math.sin(e),n[2]*=-1,n}function l(t){var e=Math.PI/180*t,n=i();return n[0]=n[5]=Math.cos(e),n[1]=n[4]=Math.sin(e),n[4]*=-1,n}function c(t,e){var n=i();return n[0]=t,n[5]=e||t,n}function h(t){var e=i();return e[0]=t,e}function d(t){var e=i();return e[5]=t,e}function p(t){var e=i();return e[10]=t,e}function v(t,e){var n=Math.PI/180*t,r=i();if(r[4]=Math.tan(n),e){var o=Math.PI/180*e;r[1]=Math.tan(o)}return r}function m(t){var e=Math.PI/180*t,n=i();return n[4]=Math.tan(e),n}function g(t){var e=Math.PI/180*t,n=i();return n[1]=Math.tan(e),n}function y(t,e){var n=i();return n[12]=t,e&&(n[13]=e),n}function b(t){var e=i();return e[12]=t,e}function w(t){var e=i();return e[13]=t,e}function x(t){var e=i();return e[14]=t,e}Object.defineProperty(e,"__esModule",{value:!0}),n.d(e,"format",function(){return r}),n.d(e,"identity",function(){return i}),n.d(e,"inverse",function(){return o}),n.d(e,"multiply",function(){return a}),n.d(e,"parse",function(){return u}),n.d(e,"rotateX",function(){return f}),n.d(e,"rotateY",function(){return s}),n.d(e,"rotateZ",function(){return l}),n.d(e,"scale",function(){return c}),n.d(e,"scaleX",function(){return h}),n.d(e,"scaleY",function(){return d}),n.d(e,"scaleZ",function(){return p}),n.d(e,"skew",function(){return v}),n.d(e,"skewX",function(){return m}),n.d(e,"skewY",function(){return g}),n.d(e,"translate",function(){return y}),n.d(e,"translateX",function(){return b}),n.d(e,"translateY",function(){return w}),n.d(e,"translateZ",function(){return x})},function(t,e,n){!function(e,n){t.exports=n()}(0,function(){function t(t){return t=t||Object.create(null),{on:function(e,n){(t[e]||(t[e]=[])).push(n)},off:function(e,n){t[e]&&t[e].splice(t[e].indexOf(n)>>>0,1)},emit:function(e,n){(t[e]||[]).slice().map(function(t){t(n)}),(t["*"]||[]).slice().map(function(t){t(e,n)})}}}return t})},function(t,e,n){"use strict";function r(t,e){if("flip"!==e)return t;var n={};return Object.keys(t).forEach(function(e){var r=t[e],o=r.element||r.previous&&r.previous.element;if(o&&o.hasAttribute("data-flip-follow")){var a=o.getAttribute("data-flip-follow");if(a&&t[a])n[e]=i({},r,{delta:i({left:0,top:0},t[a].delta,{width:1,height:1})});else if("ENTER"===r.type||"LEAVE"===r.type){for(var u=o.nextElementSibling;u&&(!u.hasAttribute("data-flip-key")||"MOVE"!==t[u.getAttribute("data-flip-key")].type);)u=u.nextElementSibling;if(u){var f=t[u.getAttribute("data-flip-key")].delta;n[e]=i({},r,{delta:{left:f.left,top:f.top,width:1,height:1}})}}}}),Object.assign(t,n)}var i=this&&this.__assign||Object.assign||function(t){for(var e,n=1,r=arguments.length;n<r;n++){e=arguments[n];for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i])}return t};e.__esModule=!0,e.default=r},function(t,e,n){"use strict";var r=this&&this.__assign||Object.assign||function(t){for(var e,n=1,r=arguments.length;n<r;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 i=n(0),o=n(3);e.scale=function(t){var e=t.bounds,n=t.delta;if(t.element&&n&&e){var a=!t.data.noScale&&(1!==n.width||1!==n.height),u=o.translate(n.left,n.top),f=a?o.scale(n.width,n.height):void 0,s=a?"top left":void 0,l=i.matrixMultiply(u,f);return{element:{from:r({x:n.left,y:n.top},s?{transformOrigin:s}:void 0,{transform:"matrix3d("+l+")"}),to:r({x:e.left,y:e.top},s?{transformOrigin:s}:void 0,{transform:e.transform||"none"})}}}},e.slide=function(t){var e=t.delta,n=t.previous,r=t.bounds;if(n&&n.bounds&&r){var o=Math.max(n.bounds.height,r.height),a=Math.max(n.bounds.width,r.width),u={from:{height:o,width:a,transformOrigin:"top left"},to:{height:o,width:a,transformOrigin:"top left"}},f={from:{height:o,width:a,transformOrigin:"top left"},to:{height:o,width:a,transformOrigin:"top left"}},s=r.width-n.bounds.width,l=r.height-n.bounds.height;if(e){s>0?(f.from.x=-s+e.left,f.to.x=0,u.from.x=s,u.to.x=0):(f.from.x=0,f.to.x=s-e.left,u.from.x=0,u.to.x=-s),l>0?(f.from.y=-l+e.top,f.to.y=0,u.from.y=l,u.to.y=0):(f.from.y=0,f.to.y=l-e.top,u.from.y=0,u.to.y=-l);var c=i.matrixTranslate(u.from.x,u.from.y),h=i.matrixTranslate(u.to.x,u.to.y),d=i.matrixTranslate(f.from.x,f.from.y),p=i.matrixTranslate(f.to.x,f.to.y);return u.from.transform="matrix3d("+c+")",u.to.transform="matrix3d("+h+")",f.from.transform="matrix3d("+d+")",f.to.transform="matrix3d("+p+")",{element:u,container:f}}}}},,,,function(t,e,n){"use strict";function r(t,e,n){var r=s.mapValues(e,function(e,r){requestAnimationFrame(function(){return e.setAttribute(l,"active")});var i=e.animate([s.mapValues(t[r].from,function(t,e){return s.styleValue(e,t)}),s.mapValues(t[r].to,function(t,e){return s.styleValue(e,t)})],n);return i.onfinish=function(){e.setAttribute(l,"complete")},i});return{finish:function(){s.mapValues(r,function(t){t.finish()})}}}function i(t){Object.keys(t).forEach(function(e){var n=t[e].animation;n&&n.finish&&n.finish()})}var o=this&&this.__extends||function(){var t=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n])};return function(e,n){function r(){this.constructor=e}t(e,n),e.prototype=null===n?Object.create(n):(r.prototype=n.prototype,new r)}}(),a=this&&this.__assign||Object.assign||function(t){for(var e,n=1,r=arguments.length;n<r;n++){e=arguments[n];for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i])}return t},u=n(2),f=n(6),s=n(0),l="data-flip-state",c=function(t,e){var n=t.element,i=f.slide(t);if(i&&n&&n.parentElement)return r(i,{element:n,container:n.parentElement},e)},h=function(t,e){void 0===e&&(e={});var n=t.element,i=f.scale(t);if(i&&n)return r(i,{element:n},e)},d=function(t,e){var n=t.element,r=t.delta,i=a({},e,{delay:+(e.delay||0)+s.getStaggerDelay(t.index,e.stagger||0),fill:e.stagger?"both":"none"});if(n&&r&&s.deltaChanged(r))return h(t,i)},p=function(t){function e(n){void 0===n&&(n={});var r=this,o=a({},e.defaults,n);return r=t.call(this,a({onRead:i,onFlip:function(t){Object.keys(t).forEach(function(n){var i=e.animate.auto(t[n],o);r.setAnimation(n,i)})}},o))||this}return o(e,t),e.defaults={duration:300,delay:0,easing:"ease",fill:"none",stagger:0},e.animate={auto:d,transform:h,slidingLayers:c},e}(u.default);t.exports=p}])});
!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(r){if(n[r])return n[r].exports;var i=n[r]={i:r,l:!1,exports:{}};return t[r].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,r){e.o(t,n)||Object.defineProperty(t,n,{configurable:!1,enumerable:!0,get:r})},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=8)}([function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.FOLLOW_ATTR="data-flip-follow",e.KEY_ATTR="data-flip-key",e.STATE_ATTR="data-flip-state",e.NO_DELTA={top:0,left:0,width:1,height:1}},function(t,e,n){"use strict";function r(t,e){var n={};return Object.keys(t).forEach(function(r){n[r]=e(t[r],r,t)}),n}function i(t,e,n){var r={};return Object.keys(t||{}).forEach(function(i){r[i]=n(t[i],e[i],i)}),r}function o(t,e){return h.translate(t,e).join(",")}function a(t,e){return h.scale(t,e).join(",")}function u(){for(var t=[],e=0;e<arguments.length;e++)t[e]=arguments[e];return t.filter(function(t){return!!t}).reduce(h.multiply).join(",")}function f(t,e){return-1!==["height","width","top","left"].indexOf(t)&&"number"==typeof e?e+"px":e}function s(t,e){return"function"==typeof e?e(t):(e||0)*t}function l(t){var n=e.rect(t),r=n.width,i=n.height;return!(0===r&&0===i)}function c(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:p.NO_DELTA}function d(){var t={},e=[];return{on:function(n,r){"*"===n?e.push(r):(t[n]||(t[n]=[])).push(r)},off:function(n,r){"*"===n?e.splice(e.indexOf(r)>>>0,1):t[n]&&t[n].splice(t[n].indexOf(r)>>>0,1)},emit:function(n,r){(t[n]||[]).slice().map(function(t){t(r)}),e.slice().map(function(t){t(n,r)})}}}Object.defineProperty(e,"__esModule",{value:!0});var h=n(3),p=n(0);e.mapValues=r,e.mapTwoValues=i,e.matrixTranslate=o,e.matrixScale=a,e.matrixMultiply=u,e.styleValue=f,e.getStaggerDelay=s,e.identity=function(t){return t},e.noop=function(){},e.rect=function(t){var e=t.getBoundingClientRect();return{top:e.top,left:e.left,width:e.width,height:e.height,get transform(){return getComputedStyle(t).transform||void 0}}},e.isVisible=l,e.getDelta=c,e.deltaChanged=function(t){return!!t.top||!!t.left||1!==t.width||1!==t.height},e.boundsChanged=function(t,e){return!!(t.top-e.top||t.left-e.left||t.width-e.width||t.height-e.height)},e.mitt=d},function(t,e,n){"use strict";var r=this&&this.__assign||Object.assign||function(t){for(var e,n=1,r=arguments.length;n<r;n++){e=arguments[n];for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i])}return t};Object.defineProperty(e,"__esModule",{value:!0});var i=n(1),o=n(0),a=n(4),u=n(5),f=function(){return!0},s=function(t){return t},l={flipKey:["key",s],flipNoScale:["noScale",function(){return!0}]},c=function(t){if(!("dataset"in t))return{};var e=t.dataset,n={};return Object.keys(e).forEach(function(t){if(l[t]){var r=l[t],i=r[0],o=r[1];n[i]=o(e[t])}else 0===t.indexOf("flip")&&(n[t[4].toLowerCase()+t.slice(5)]=e[t])}),n},d=function(t,e){return void 0===e&&(e=o.KEY_ATTR),"string"==typeof t?function(n){var r=n.querySelectorAll(t),o={},a=[];return r.forEach(function(t){if(i.isVisible(t)){var n=t.getAttribute(e);n&&(o[n]=t,a.push(t))}}),a}:t},h=function(){function t(t){void 0===t&&(t={}),this.attribute=t.attribute||o.KEY_ATTR,this.selector=d(t.selector||"["+this.attribute+"]",this.attribute),this.active=t.active||f,this.activeSelector=t.activeSelector||i.isVisible,this.getBounds=t.getBounds||i.rect,this.getDelta=t.getDelta||i.getDelta,this.parentElement=t.parent||document.documentElement,this.plugins=t.plugins||[a.default,u.default],this.emitter=i.mitt(),t.onRead&&this.on("read",t.onRead),t.onFlip&&this.on("flip",t.onFlip),t.onEnter&&this.on("enter",t.onEnter),t.onLeave&&this.on("leave",t.onLeave),this.states={}}return t.prototype.getRelativeBounds=function(t,e){return r({},e,{top:e.top-t.top,left:e.left-t.left})},t.prototype.selectActive=function(t){var e=this,n=this.selector(t),r={},i=[];return n.forEach(function(t){if(e.activeSelector(t)){var n=t.getAttribute(e.attribute);n&&(r[n]=t,i.push(t))}}),i},t.prototype.findParent=function(t,e){void 0===e&&(e=this.parentElement);var n=t.getAttribute("data-flip-parent"),r=t.parentElement;if(n)for(;r&&r.getAttribute(this.attribute)!==n;)r=r.parentElement;else for(;r&&!r.hasAttribute(this.attribute);)r=r.parentElement;return r||e},t.prototype.dispatch=function(t,e){var n=this.plugins.reduce(function(e,n){return n(e,t)},e);this.emitter.emit(t,n)},t.prototype.on=function(t,e){this.emitter.on(t,e)},t.prototype.onFlip=function(){for(var t=[],e=0;e<arguments.length;e++)t[e]=arguments[e];var n,r;2===t.length?(n=t[0],r=t[1]):r=t[0],this.emitter.on("flip",n?function(t){var e=t[n];e&&r(e)}:r)},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,r=this.selectActive(n),i={};return r.forEach(function(t,r){var o=t.getAttribute(e.attribute);if(o){var a=c(t),u=e.findParent(t,n),f=u.getAttribute(e.attribute),s=f?i[f]:void 0,l=e.getBounds(u),d=e.states[o],h=d&&"LEAVE"!==d.type,p=e.getRelativeBounds(l,e.getBounds(t)),v=h&&d&&d.bounds?e.getDelta(d.bounds,p):void 0,m={type:h?"MOVE":"ENTER",key:o,element:t,bounds:p,delta:v,start:Date.now(),animation:h?d.animation:void 0,index:r,previous:d?{type:d.type,bounds:d.bounds,animation:d.animation,element:d.element,data:d.data}:void 0,parent:s,data:a};e.states[o]=i[o]=m}}),t.readOnly?this.dispatch("read",i):(Object.keys(this.states).forEach(function(t,n){if(!i[t]){var r=e.states[t];e.states[t]=i[t]={type:"LEAVE",key:t,element:void 0,bounds:void 0,start:Date.now(),animation:void 0,delta:void 0,index:n,parent:void 0,previous:{type:r.type,bounds:r.bounds,animation:r.animation,element:r.element}}}}),this.dispatch("flip",i))},t.prototype.setAnimation=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 r=[],i=0;i<arguments.length;i++)r[i]=arguments[i];n.read(e);var o=t.apply(null,r);return n.flip(e),o}},t.prototype.progress=function(e,n){var r=this.states[e].delta;if(r)return t.progress(r,n)},t.progress=function(t,e){if(!t)return o.NO_DELTA;var n=1-e;return{top:t.top*n,left:t.left*n,width:t.width*n,height:t.height*n}},t.rect=i.rect,t.willScale=function(t){return!(!t||!t.element||t.element.hasAttribute("data-noflip")||!t.delta||1===t.delta.width&&1===t.delta.height)},t.willMove=function(t){return!(!t||!t.delta)&&(t&&(0!==t.delta.top||0!==t.delta.left))},t}();e.default=h},function(t,e,n){"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 e=i();return e[0]=t[0],e[1]=t[1],e[4]=t[2],e[5]=t[3],e[12]=t[4],e[13]=t[5],e}throw new RangeError("Expected array with either 6 or 16 values.")}function i(){for(var t=[],e=0;e<16;e++)e%5==0?t.push(1):t.push(0);return t}function o(t){var e=r(t),n=e[0]*e[5]-e[4]*e[1],i=e[0]*e[6]-e[4]*e[2],o=e[0]*e[7]-e[4]*e[3],a=e[1]*e[6]-e[5]*e[2],u=e[1]*e[7]-e[5]*e[3],f=e[2]*e[7]-e[6]*e[3],s=e[10]*e[15]-e[14]*e[11],l=e[9]*e[15]-e[13]*e[11],c=e[9]*e[14]-e[13]*e[10],d=e[8]*e[15]-e[12]*e[11],h=e[8]*e[14]-e[12]*e[10],p=e[8]*e[13]-e[12]*e[9],v=1/(n*s-i*l+o*c+a*d-u*h+f*p);if(isNaN(v)||v===1/0)throw new Error("Inverse determinant attempted to divide by zero.");return[(e[5]*s-e[6]*l+e[7]*c)*v,(-e[1]*s+e[2]*l-e[3]*c)*v,(e[13]*f-e[14]*u+e[15]*a)*v,(-e[9]*f+e[10]*u-e[11]*a)*v,(-e[4]*s+e[6]*d-e[7]*h)*v,(e[0]*s-e[2]*d+e[3]*h)*v,(-e[12]*f+e[14]*o-e[15]*i)*v,(e[8]*f-e[10]*o+e[11]*i)*v,(e[4]*l-e[5]*d+e[7]*p)*v,(-e[0]*l+e[1]*d-e[3]*p)*v,(e[12]*u-e[13]*o+e[15]*n)*v,(-e[8]*u+e[9]*o-e[11]*n)*v,(-e[4]*c+e[5]*h-e[6]*p)*v,(e[0]*c-e[1]*h+e[2]*p)*v,(-e[12]*a+e[13]*i-e[14]*n)*v,(e[8]*a-e[9]*i+e[10]*n)*v]}function a(t,e){for(var n=r(t),i=r(e),o=[],a=0;a<4;a++)for(var u=[n[a],n[a+4],n[a+8],n[a+12]],f=0;f<4;f++){var s=4*f,l=[i[s],i[s+1],i[s+2],i[s+3]],c=u[0]*l[0]+u[1]*l[1]+u[2]*l[2]+u[3]*l[3];o[a+s]=c}return o}function u(t){if("string"==typeof t){var e=t.match(/matrix(3d)?\(([^)]+)\)/);if(e){return r(e[2].split(", ").map(function(t){return parseFloat(t)}))}}return i()}function f(t){var e=Math.PI/180*t,n=i();return n[5]=n[10]=Math.cos(e),n[6]=n[9]=Math.sin(e),n[9]*=-1,n}function s(t){var e=Math.PI/180*t,n=i();return n[0]=n[10]=Math.cos(e),n[2]=n[8]=Math.sin(e),n[2]*=-1,n}function l(t){var e=Math.PI/180*t,n=i();return n[0]=n[5]=Math.cos(e),n[1]=n[4]=Math.sin(e),n[4]*=-1,n}function c(t,e){var n=i();return n[0]=t,n[5]=e||t,n}function d(t){var e=i();return e[0]=t,e}function h(t){var e=i();return e[5]=t,e}function p(t){var e=i();return e[10]=t,e}function v(t,e){var n=Math.PI/180*t,r=i();if(r[4]=Math.tan(n),e){var o=Math.PI/180*e;r[1]=Math.tan(o)}return r}function m(t){var e=Math.PI/180*t,n=i();return n[4]=Math.tan(e),n}function g(t){var e=Math.PI/180*t,n=i();return n[1]=Math.tan(e),n}function y(t,e){var n=i();return n[12]=t,e&&(n[13]=e),n}function b(t){var e=i();return e[12]=t,e}function O(t){var e=i();return e[13]=t,e}function w(t){var e=i();return e[14]=t,e}Object.defineProperty(e,"__esModule",{value:!0}),n.d(e,"format",function(){return r}),n.d(e,"identity",function(){return i}),n.d(e,"inverse",function(){return o}),n.d(e,"multiply",function(){return a}),n.d(e,"parse",function(){return u}),n.d(e,"rotateX",function(){return f}),n.d(e,"rotateY",function(){return s}),n.d(e,"rotateZ",function(){return l}),n.d(e,"scale",function(){return c}),n.d(e,"scaleX",function(){return d}),n.d(e,"scaleY",function(){return h}),n.d(e,"scaleZ",function(){return p}),n.d(e,"skew",function(){return v}),n.d(e,"skewX",function(){return m}),n.d(e,"skewY",function(){return g}),n.d(e,"translate",function(){return y}),n.d(e,"translateX",function(){return b}),n.d(e,"translateY",function(){return O}),n.d(e,"translateZ",function(){return w})},function(t,e,n){"use strict";function r(t,e){if("flip"!==e)return t;var n={};return Object.keys(t).forEach(function(e){var r=t[e],o=r.element||r.previous&&r.previous.element;if(o&&o.hasAttribute("data-flip-follow")){var a=o.getAttribute("data-flip-follow");if(a&&t[a])n[e]=i({},r,{delta:i({left:0,top:0},t[a].delta,{width:1,height:1})});else if("ENTER"===r.type||"LEAVE"===r.type){for(var u=o.nextElementSibling;u&&(!u.hasAttribute("data-flip-key")||"MOVE"!==t[u.getAttribute("data-flip-key")].type);)u=u.nextElementSibling;if(u){var f=t[u.getAttribute("data-flip-key")].delta;n[e]=i({},r,{delta:{left:f.left,top:f.top,width:1,height:1}})}}}}),Object.assign(t,n)}var i=this&&this.__assign||Object.assign||function(t){for(var e,n=1,r=arguments.length;n<r;n++){e=arguments[n];for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i])}return t};Object.defineProperty(e,"__esModule",{value:!0}),e.default=r},function(t,e,n){"use strict";function r(t,e){return"read"===e&&Object.keys(t).forEach(function(e){var n=t[e],r=n.element;r&&(n.data.radius=getComputedStyle?getComputedStyle(r).borderRadius||"0":"0")}),t}Object.defineProperty(e,"__esModule",{value:!0}),e.default=r},function(t,e,n){"use strict";var r=this&&this.__assign||Object.assign||function(t){for(var e,n=1,r=arguments.length;n<r;n++){e=arguments[n];for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i])}return t};Object.defineProperty(e,"__esModule",{value:!0});var i=n(1),o=n(3);e.scale=function(t){var e=t.bounds,n=t.delta;if(t.element&&n&&e){var a=!t.data.noScale&&(1!==n.width||1!==n.height),u=o.translate(n.left,n.top),f=a?o.scale(n.width,n.height):void 0,s=a?"top left":void 0,l=i.matrixMultiply(u,f);return{element:{from:r({x:n.left,y:n.top},s?{transformOrigin:s}:void 0,{transform:"matrix3d("+l+")"}),to:r({x:e.left,y:e.top},s?{transformOrigin:s}:void 0,{transform:e.transform||"none"})}}}},e.slide=function(t){var e=t.delta,n=t.previous,r=t.bounds;if(n&&n.bounds&&r){var o=Math.max(n.bounds.height,r.height),a=Math.max(n.bounds.width,r.width),u={from:{height:o,width:a,transformOrigin:"top left"},to:{height:o,width:a,transformOrigin:"top left"}},f={from:{height:o,width:a,transformOrigin:"top left"},to:{height:o,width:a,transformOrigin:"top left"}},s=r.width-n.bounds.width,l=r.height-n.bounds.height;if(e){s>0?(f.from.x=-s+e.left,f.to.x=0,u.from.x=s,u.to.x=0):(f.from.x=0,f.to.x=s-e.left,u.from.x=0,u.to.x=-s),l>0?(f.from.y=-l+e.top,f.to.y=0,u.from.y=l,u.to.y=0):(f.from.y=0,f.to.y=l-e.top,u.from.y=0,u.to.y=-l);var c=i.matrixTranslate(u.from.x,u.from.y),d=i.matrixTranslate(u.to.x,u.to.y),h=i.matrixTranslate(f.from.x,f.from.y),p=i.matrixTranslate(f.to.x,f.to.y);return u.from.transform="matrix3d("+c+")",u.to.transform="matrix3d("+d+")",f.from.transform="matrix3d("+h+")",f.to.transform="matrix3d("+p+")",{element:u,container:f}}}}},,function(t,e,n){"use strict";function r(t,e,n){var r=s.mapValues(e,function(e,r){requestAnimationFrame(function(){return e.setAttribute(l,"active")});var i=e.animate([s.mapValues(t[r].from,function(t,e){return s.styleValue(e,t)}),s.mapValues(t[r].to,function(t,e){return s.styleValue(e,t)})],n);return i.onfinish=function(){e.setAttribute(l,"complete")},i});return{finish:function(){s.mapValues(r,function(t){t.finish()})}}}function i(t){Object.keys(t).forEach(function(e){var n=t[e].animation;n&&n.finish&&n.finish()})}var o=this&&this.__extends||function(){var t=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var n in e)e.hasOwnProperty(n)&&(t[n]=e[n])};return function(e,n){function r(){this.constructor=e}t(e,n),e.prototype=null===n?Object.create(n):(r.prototype=n.prototype,new r)}}(),a=this&&this.__assign||Object.assign||function(t){for(var e,n=1,r=arguments.length;n<r;n++){e=arguments[n];for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i])}return t},u=n(2),f=n(6),s=n(1),l="data-flip-state",c=function(t,e){var n=t.element,i=f.slide(t);if(i&&n&&n.parentElement)return r(i,{element:n,container:n.parentElement},e)},d=function(t,e){void 0===e&&(e={});var n=t.element,i=f.scale(t);if(i&&n)return r(i,{element:n},e)},h=function(t,e){var n=t.element,r=t.delta,i=a({},e,{delay:+(e.delay||0)+s.getStaggerDelay(t.index,e.stagger||0),fill:e.stagger?"both":"none"});if(n&&r&&s.deltaChanged(r))return d(t,i)},p=function(t){function e(n){void 0===n&&(n={});var r=this,o=a({},e.defaults,n);return r=t.call(this,a({onRead:i,onFlip:function(t){Object.keys(t).forEach(function(n){var i=e.animate.auto(t[n],o);r.setAnimation(n,i)})}},o))||this}return o(e,t),e.defaults={duration:300,delay:0,easing:"cubic-bezier(.5, 0, .5, 1)",fill:"none",stagger:0},e.animate={auto:h,transform:d,slidingLayers:c},e}(u.default);t.exports=p}])});

3

dist/lib/adapters/gsap.d.ts

@@ -1,4 +0,3 @@

/// <reference types="web-animations-js" />
import Flipping from '../Flipping';
import { IFlippingConfig, IFlipState, GSAPAnimation } from '../types';
import { IFlippingConfig, IFlipState, GSAPAnimation, AnimationEffectTiming } from '../types';
declare class FlippingGsap extends Flipping<GSAPAnimation> {

@@ -5,0 +4,0 @@ static animate: {

16

dist/lib/Flipping.d.ts
import { IBounds, IFlippingConfig, IFlippingOptions, IFlipState, IFlipStateMap, FlipEventName, FlipPlugin, FlipEventListener, FlipStateEventListener, FlipSelector } from './types';
declare class Flipping<TAnimation = any> {
declare class Flipping<TAnimation = any, TAnimationConfig extends {} = {}> {
plugins: FlipPlugin[];

@@ -19,13 +19,13 @@ selector: FlipSelector;

constructor(options?: IFlippingConfig & Record<string, any>);
private getRelativeBounds(parentBounds, childBounds);
private selectActive(parentElement);
private findParent(element, parent?);
private dispatch(event, stateMap);
private getRelativeBounds;
private selectActive;
private findParent;
private dispatch;
on(event: FlipEventName, listener: FlipEventListener): void;
onFlip(key: string, listener: FlipStateEventListener): void;
onFlip(listener: FlipEventListener): void;
read(options?: IFlippingOptions): void;
flip(options?: IFlippingOptions): void;
read(options?: IFlippingOptions<TAnimationConfig>): void;
flip(options?: IFlippingOptions<TAnimationConfig>): void;
setAnimation(key: string, animation: any): void;
wrap<T>(fn: (...args: any[]) => T, options?: IFlippingOptions): Function;
wrap<T>(fn: (...args: any[]) => T, options?: IFlippingOptions<TAnimationConfig>): Function;
progress(key: string, fraction: number): IBounds | undefined;

@@ -32,0 +32,0 @@ static progress(delta: IBounds | undefined, fraction: number): IBounds;

51

dist/lib/types.d.ts

@@ -1,2 +0,1 @@

/// <reference types="web-animations-js" />
export interface IBounds {

@@ -22,3 +21,3 @@ top: number;

active?: (element: Element) => boolean;
getDelta?: (Bounds) => IBounds;
getDelta?: (Bounds: any) => IBounds;
getBounds?: (element: Element) => IBounds;

@@ -35,4 +34,5 @@ selector?: (parent: Element) => Element[];

}
export interface IFlippingOptions extends IFlippingConfig {
export interface IFlippingOptions<TAnimationConfig = {}> extends IFlippingConfig {
readOnly?: boolean;
timing?: TAnimationConfig | Record<string, TAnimationConfig>;
}

@@ -52,4 +52,3 @@ export interface IFlipElementStrategy {

export interface IFlipElementsStrategy {
element: IFlipElementStrategy;
container?: IFlipElementStrategy;
[key: string]: IFlipElementStrategy;
}

@@ -65,3 +64,3 @@ export declare type IFlipStateType = 'PENDING' | 'ENTER' | 'MOVE' | 'LEAVE';

index: number;
previous: Pick<IFlipState, 'type' | 'bounds' | 'animation' | 'element'> | undefined;
previous: Pick<IFlipState, 'type' | 'bounds' | 'animation' | 'element' | 'data'> | undefined;
start: number;

@@ -82,2 +81,9 @@ parent: IFlipState<TAnimation> | undefined;

}
export interface AnimationEffectTiming {
duration?: number;
delay?: number;
easing?: string;
fill?: 'none' | 'forwards' | 'backwards' | 'both' | 'auto' | undefined;
stagger?: number;
}
export declare type FlippingWebOptions = IFlippingConfig & AnimationEffectTiming & ICustomEffectTiming;

@@ -92,1 +98,34 @@ export declare type GSAPAnimation = {

export declare type FlipSelector = (element: Element) => Element[];
export declare namespace mitt {
type Handler = (event?: any) => void;
interface Emitter {
/**
* Register an event handler for the given type.
*
* @param {string} type Type of event to listen for, or `"*"` for all events.
* @param {Handler} handler Function to call in response to the given event.
*
* @memberOf Mitt
*/
on(type: string, handler: Handler): void;
/**
* Function to call in response to the given event
*
* @param {string} type Type of event to unregister `handler` from, or `"*"`
* @param {Handler} handler Handler function to remove.
*
* @memberOf Mitt
*/
off(type: string, handler: Handler): void;
/**
* Invoke all handlers for the given type.
* If present, `"*"` handlers are invoked prior to type-matched handlers.
*
* @param {string} type The event type to invoke
* @param {any} [event] An event object, passed to each handler
*
* @memberOf Mitt
*/
emit(type: string, event?: any): void;
}
}

39

dist/lib/utils.d.ts
import { IBounds } from './types';
export declare function mapValues(object: object, iteratee: (value: any, key: string, object: object) => any): object;
export declare function mapValues<T, P>(collection: {
[key: string]: T;
}, iteratee: (item: T, key: string, collection: {
[key: string]: T;
}) => P): {
[key: string]: P;
};
export declare function mapTwoValues(a: any, b: any, iteratee: any): {};

@@ -7,3 +13,3 @@ export declare function matrixTranslate(x: any, y: any): any;

export declare function matrixMultiply(...matrices: any[]): any;
export declare function styleValue(prop: string, value: string | number): string | number;
export declare function styleValue(prop: string, value: string | number | undefined): string | number | undefined;
export declare function getStaggerDelay(index: number, stagger: number | ((index: number) => number)): number;

@@ -17,1 +23,30 @@ export declare const identity: <T>(arg: T) => T;

export declare const boundsChanged: (a: IBounds, b: IBounds) => boolean;
declare type EventHandler = (event?: any) => void;
export declare function mitt(): {
/**
* Register an event handler for the given type.
*
* @param {String} type Type of event to listen for, or `"*"` for all events
* @param {Function} handler Function to call in response to given event
* @memberOf mitt
*/
on(type: string, handler: EventHandler): void;
/**
* Remove an event handler for the given type.
*
* @param {String} type Type of event to unregister `handler` from, or `"*"`
* @param {Function} handler Handler function to remove
* @memberOf mitt
*/
off(type: string, handler: EventHandler): void;
/**
* Invoke all handlers for the given type.
* If present, `"*"` handlers are invoked after type-matched handlers.
*
* @param {String} type The event type to invoke
* @param {Any} [evt] Any value (object is recommended and powerful), passed to each handler
* @memberOf mitt
*/
emit(type: string, evt: any): void;
};
export {};

42

lib/adapters/css.js

@@ -32,2 +32,3 @@ "use strict";

var flipStyle = function (attr) { return "\n[" + attr + "] {\n transition-property: transform;\n transition-duration: calc(var(--flip-active, 1) * 0.6s);\n transform-origin: top left;\n transform:\n translateX(calc(var(--flip-dx, 0) * 1px))\n translateY(calc(var(--flip-dy, 0) * 1px))\n scale(var(--flip-dw, 1), var(--flip-dh, 1));\n}\n"; };
var matrixRegex = /matrix\(.*, .*, .*, .*, (.*), (.*)\)/;
var FlippingCSS = /** @class */ (function (_super) {

@@ -41,3 +42,12 @@ __extends(FlippingCSS, _super);

if (state.delta) {
styleVars(state.element, __assign({ dx: state.delta.left, dy: state.delta.top, dw: state.delta.width, dh: state.delta.height }, (state.data && state.data.noScale
var tx = 0;
var ty = 0;
if (state.bounds && state.bounds.transform) {
var match = state.bounds.transform.match(matrixRegex);
if (match && match.length === 3) {
tx = parseFloat(match[1]);
ty = parseFloat(match[2]);
}
}
styleVars(state.element, __assign({ dx: state.delta.left + tx, dy: state.delta.top + ty, dw: state.delta.width, dh: state.delta.height }, (state.data && state.data.noScale
? { dw: 1, dh: 1 }

@@ -47,16 +57,18 @@ : undefined), { active: 0 }));

});
setTimeout(function () {
Object.keys(stateMap).forEach(function (key) {
var state = stateMap[key];
if (state.bounds) {
styleVars(state.element, {
dx: 0,
dy: 0,
dw: 1,
dh: 1,
active: 1
});
}
requestAnimationFrame(function () {
requestAnimationFrame(function () {
Object.keys(stateMap).forEach(function (key) {
var state = stateMap[key];
if (state.bounds) {
styleVars(state.element, {
dx: 0,
dy: 0,
dw: 1,
dh: 1,
active: 1
});
}
});
});
}, 0);
});
}

@@ -73,3 +85,3 @@ }) || this;

return FlippingCSS;
}(Flipping_1["default"]));
}(Flipping_1.default));
module.exports = FlippingCSS;

3

lib/adapters/gsap.d.ts

@@ -1,4 +0,3 @@

/// <reference types="web-animations-js" />
import Flipping from '../Flipping';
import { IFlippingConfig, IFlipState, GSAPAnimation } from '../types';
import { IFlippingConfig, IFlipState, GSAPAnimation, AnimationEffectTiming } from '../types';
declare class FlippingGsap extends Flipping<GSAPAnimation> {

@@ -5,0 +4,0 @@ static animate: {

3

lib/adapters/gsap.js

@@ -32,2 +32,3 @@ "use strict";

});
return animation;
});

@@ -119,3 +120,3 @@ return {

return FlippingGsap;
}(Flipping_1["default"]));
}(Flipping_1.default));
module.exports = FlippingGsap;

4

lib/adapters/web.js

@@ -105,3 +105,3 @@ "use strict";

delay: 0,
easing: 'ease',
easing: "cubic-bezier(.5, 0, .5, 1)",
fill: 'none',

@@ -116,3 +116,3 @@ stagger: 0

return FlippingWeb;
}(Flipping_1["default"]));
}(Flipping_1.default));
module.exports = FlippingWeb;

2

lib/animations.js

@@ -10,3 +10,3 @@ "use strict";

};
exports.__esModule = true;
Object.defineProperty(exports, "__esModule", { value: true });
var utils_1 = require("./utils");

@@ -13,0 +13,0 @@ var Rematrix = require("rematrix");

2

lib/constants.js
"use strict";
exports.__esModule = true;
Object.defineProperty(exports, "__esModule", { value: true });
exports.FOLLOW_ATTR = 'data-flip-follow';

@@ -4,0 +4,0 @@ exports.KEY_ATTR = 'data-flip-key';

16

lib/Flipping.d.ts
import { IBounds, IFlippingConfig, IFlippingOptions, IFlipState, IFlipStateMap, FlipEventName, FlipPlugin, FlipEventListener, FlipStateEventListener, FlipSelector } from './types';
declare class Flipping<TAnimation = any> {
declare class Flipping<TAnimation = any, TAnimationConfig extends {} = {}> {
plugins: FlipPlugin[];

@@ -19,13 +19,13 @@ selector: FlipSelector;

constructor(options?: IFlippingConfig & Record<string, any>);
private getRelativeBounds(parentBounds, childBounds);
private selectActive(parentElement);
private findParent(element, parent?);
private dispatch(event, stateMap);
private getRelativeBounds;
private selectActive;
private findParent;
private dispatch;
on(event: FlipEventName, listener: FlipEventListener): void;
onFlip(key: string, listener: FlipStateEventListener): void;
onFlip(listener: FlipEventListener): void;
read(options?: IFlippingOptions): void;
flip(options?: IFlippingOptions): void;
read(options?: IFlippingOptions<TAnimationConfig>): void;
flip(options?: IFlippingOptions<TAnimationConfig>): void;
setAnimation(key: string, animation: any): void;
wrap<T>(fn: (...args: any[]) => T, options?: IFlippingOptions): Function;
wrap<T>(fn: (...args: any[]) => T, options?: IFlippingOptions<TAnimationConfig>): Function;
progress(key: string, fraction: number): IBounds | undefined;

@@ -32,0 +32,0 @@ static progress(delta: IBounds | undefined, fraction: number): IBounds;

13

lib/Flipping.js

@@ -10,7 +10,7 @@ "use strict";

};
exports.__esModule = true;
var mitt = require("mitt");
Object.defineProperty(exports, "__esModule", { value: true });
var utils_1 = require("./utils");
var constants_1 = require("./constants");
var mirror_1 = require("./plugins/mirror");
var radius_1 = require("./plugins/radius");
var active = function () { return true; };

@@ -73,4 +73,4 @@ var identity = function (a) { return a; };

this.parentElement = options.parent || document.documentElement;
this.plugins = options.plugins || [mirror_1["default"]];
this.emitter = new mitt();
this.plugins = options.plugins || [mirror_1.default, radius_1.default];
this.emitter = utils_1.mitt();
if (options.onRead) {

@@ -201,3 +201,4 @@ this.on('read', options.onRead);

animation: previous.animation,
element: previous.element
element: previous.element,
data: previous.data
}

@@ -290,2 +291,2 @@ : undefined,

}());
exports["default"] = Flipping;
exports.default = Flipping;

2

lib/index.js
"use strict";
var Flipping_1 = require("./Flipping");
module.exports = Flipping_1["default"];
module.exports = Flipping_1.default;

4

lib/plugins/mirror.js

@@ -10,3 +10,3 @@ "use strict";

};
exports.__esModule = true;
Object.defineProperty(exports, "__esModule", { value: true });
function mirrorPlugin(states, event) {

@@ -50,2 +50,2 @@ if (event !== 'flip') {

}
exports["default"] = mirrorPlugin;
exports.default = mirrorPlugin;

40

lib/plugins/radius.js
"use strict";
exports.__esModule = true;
var utils_1 = require("../utils");
Object.defineProperty(exports, "__esModule", { value: true });
// import { deltaChanged } from '../utils';
function radiusPlugin(states, event) {
if (event !== 'flip') {
return states;
if (event === 'read') {
Object.keys(states).forEach(function (key) {
var state = states[key];
var element = state.element;
if (!element) {
return;
}
state.data.radius = getComputedStyle
? getComputedStyle(element).borderRadius || '0'
: '0';
});
}
var nextStates = {};
Object.keys(states).forEach(function (key) {
var state = states[key];
var element = state.element, previous = state.previous, delta = state.delta;
if (!element || !previous || !previous.element) {
return;
}
if (!delta || !utils_1.deltaChanged(delta)) {
return;
}
var prevComputedStyle = getComputedStyle(previous.element);
var computedStyle = getComputedStyle(element);
var prevRadius = prevComputedStyle.borderRadius;
var radius = computedStyle.borderRadius;
if (prevRadius === radius) {
return;
}
console.log({ prevRadius: prevRadius, radius: radius });
});
return Object.assign(states, nextStates);
return states;
}
exports["default"] = radiusPlugin;
exports.default = radiusPlugin;

51

lib/types.d.ts

@@ -1,2 +0,1 @@

/// <reference types="web-animations-js" />
export interface IBounds {

@@ -22,3 +21,3 @@ top: number;

active?: (element: Element) => boolean;
getDelta?: (Bounds) => IBounds;
getDelta?: (Bounds: any) => IBounds;
getBounds?: (element: Element) => IBounds;

@@ -35,4 +34,5 @@ selector?: (parent: Element) => Element[];

}
export interface IFlippingOptions extends IFlippingConfig {
export interface IFlippingOptions<TAnimationConfig = {}> extends IFlippingConfig {
readOnly?: boolean;
timing?: TAnimationConfig | Record<string, TAnimationConfig>;
}

@@ -52,4 +52,3 @@ export interface IFlipElementStrategy {

export interface IFlipElementsStrategy {
element: IFlipElementStrategy;
container?: IFlipElementStrategy;
[key: string]: IFlipElementStrategy;
}

@@ -65,3 +64,3 @@ export declare type IFlipStateType = 'PENDING' | 'ENTER' | 'MOVE' | 'LEAVE';

index: number;
previous: Pick<IFlipState, 'type' | 'bounds' | 'animation' | 'element'> | undefined;
previous: Pick<IFlipState, 'type' | 'bounds' | 'animation' | 'element' | 'data'> | undefined;
start: number;

@@ -82,2 +81,9 @@ parent: IFlipState<TAnimation> | undefined;

}
export interface AnimationEffectTiming {
duration?: number;
delay?: number;
easing?: string;
fill?: 'none' | 'forwards' | 'backwards' | 'both' | 'auto' | undefined;
stagger?: number;
}
export declare type FlippingWebOptions = IFlippingConfig & AnimationEffectTiming & ICustomEffectTiming;

@@ -92,1 +98,34 @@ export declare type GSAPAnimation = {

export declare type FlipSelector = (element: Element) => Element[];
export declare namespace mitt {
type Handler = (event?: any) => void;
interface Emitter {
/**
* Register an event handler for the given type.
*
* @param {string} type Type of event to listen for, or `"*"` for all events.
* @param {Handler} handler Function to call in response to the given event.
*
* @memberOf Mitt
*/
on(type: string, handler: Handler): void;
/**
* Function to call in response to the given event
*
* @param {string} type Type of event to unregister `handler` from, or `"*"`
* @param {Handler} handler Handler function to remove.
*
* @memberOf Mitt
*/
off(type: string, handler: Handler): void;
/**
* Invoke all handlers for the given type.
* If present, `"*"` handlers are invoked prior to type-matched handlers.
*
* @param {string} type The event type to invoke
* @param {any} [event] An event object, passed to each handler
*
* @memberOf Mitt
*/
emit(type: string, event?: any): void;
}
}

2

lib/types.js
"use strict";
exports.__esModule = true;
Object.defineProperty(exports, "__esModule", { value: true });

39

lib/utils.d.ts
import { IBounds } from './types';
export declare function mapValues(object: object, iteratee: (value: any, key: string, object: object) => any): object;
export declare function mapValues<T, P>(collection: {
[key: string]: T;
}, iteratee: (item: T, key: string, collection: {
[key: string]: T;
}) => P): {
[key: string]: P;
};
export declare function mapTwoValues(a: any, b: any, iteratee: any): {};

@@ -7,3 +13,3 @@ export declare function matrixTranslate(x: any, y: any): any;

export declare function matrixMultiply(...matrices: any[]): any;
export declare function styleValue(prop: string, value: string | number): string | number;
export declare function styleValue(prop: string, value: string | number | undefined): string | number | undefined;
export declare function getStaggerDelay(index: number, stagger: number | ((index: number) => number)): number;

@@ -17,1 +23,30 @@ export declare const identity: <T>(arg: T) => T;

export declare const boundsChanged: (a: IBounds, b: IBounds) => boolean;
declare type EventHandler = (event?: any) => void;
export declare function mitt(): {
/**
* Register an event handler for the given type.
*
* @param {String} type Type of event to listen for, or `"*"` for all events
* @param {Function} handler Function to call in response to given event
* @memberOf mitt
*/
on(type: string, handler: EventHandler): void;
/**
* Remove an event handler for the given type.
*
* @param {String} type Type of event to unregister `handler` from, or `"*"`
* @param {Function} handler Handler function to remove
* @memberOf mitt
*/
off(type: string, handler: EventHandler): void;
/**
* Invoke all handlers for the given type.
* If present, `"*"` handlers are invoked after type-matched handlers.
*
* @param {String} type The event type to invoke
* @param {Any} [evt] Any value (object is recommended and powerful), passed to each handler
* @memberOf mitt
*/
emit(type: string, evt: any): void;
};
export {};

65

lib/utils.js
"use strict";
exports.__esModule = true;
Object.defineProperty(exports, "__esModule", { value: true });
var Rematrix = require("rematrix");
var constants_1 = require("./constants");
function mapValues(object, iteratee) {
function mapValues(collection, iteratee) {
var result = {};
Object.keys(object || {}).forEach(function (key) {
result[key] = iteratee(object[key], key, object);
Object.keys(collection).forEach(function (key) {
result[key] = iteratee(collection[key], key, collection);
});

@@ -63,3 +63,5 @@ return result;

height: height,
transform: getComputedStyle(element).transform || undefined
get transform() {
return getComputedStyle(element).transform || undefined;
}
};

@@ -99,1 +101,54 @@ };

};
function mitt() {
var all = {};
var wild = [];
return {
/**
* Register an event handler for the given type.
*
* @param {String} type Type of event to listen for, or `"*"` for all events
* @param {Function} handler Function to call in response to given event
* @memberOf mitt
*/
on: function (type, handler) {
if (type === '*') {
wild.push(handler);
}
else {
(all[type] || (all[type] = [])).push(handler);
}
},
/**
* Remove an event handler for the given type.
*
* @param {String} type Type of event to unregister `handler` from, or `"*"`
* @param {Function} handler Handler function to remove
* @memberOf mitt
*/
off: function (type, handler) {
if (type === '*') {
wild.splice(wild.indexOf(handler) >>> 0, 1);
}
else if (all[type]) {
all[type].splice(all[type].indexOf(handler) >>> 0, 1);
}
},
/**
* Invoke all handlers for the given type.
* If present, `"*"` handlers are invoked after type-matched handlers.
*
* @param {String} type The event type to invoke
* @param {Any} [evt] Any value (object is recommended and powerful), passed to each handler
* @memberOf mitt
*/
emit: function (type, evt) {
(all[type] || []).slice().map(function (handler) {
handler(evt);
});
wild.slice().map(function (handler) {
handler(type, evt);
});
}
};
}
exports.mitt = mitt;

21

package.json
{
"name": "flipping",
"version": "1.0.0",
"version": "1.1.0",
"description": "Flipping awesome animations.",

@@ -9,3 +9,3 @@ "main": "lib/index.js",

"start": "npm run build:watch",
"test": "mocha -r ts-node/register test/**.test.ts",
"test": "NODE_ENV=test && mocha -r ts-node/register test/**.test.ts",
"build": "npm run build:prod",

@@ -34,20 +34,23 @@ "build:prod": "tsc && webpack --config webpack.config.prod.js",

"@types/gsap": "^1.19.2",
"@types/jsdom": "^11.0.6",
"@types/mocha": "^5.2.4",
"@types/web-animations-js": "^2.2.6",
"awesome-typescript-loader": "^3.5.0",
"babel-core": "^6.26.0",
"babel-core": "^6.26.3",
"chai": "^3.5.0",
"gsap": "^1.20.4",
"gsap": "^1.20.6",
"jsdom": "^11.11.0",
"jsdom-global": "^3.0.2",
"mocha": "^3.5.3",
"node-sass": "^4.7.2",
"prettier": "^1.11.1",
"node-sass": "^4.9.2",
"prettier": "^1.13.7",
"ts-loader": "^2.3.7",
"ts-node": "^3.3.0",
"tslint": "^5.9.1",
"typescript": "^2.7.2",
"tslint": "^5.10.0",
"typescript": "^2.9.2",
"webpack": "^2.7.0"
},
"dependencies": {
"mitt": "^1.1.3",
"rematrix": "^0.1.3"
}
}

54

src/adapters/css.ts

@@ -33,2 +33,4 @@ import Flipping from '../Flipping';

const matrixRegex = /matrix\(.*, .*, .*, .*, (.*), (.*)\)/;
class FlippingCSS extends Flipping {

@@ -42,7 +44,21 @@ constructor() {

if (state.delta) {
let tx = 0;
let ty = 0;
if ( state.bounds && state.bounds.transform )
{
const match = state.bounds.transform.match(matrixRegex);
if ( match && match.length === 3 )
{
tx = parseFloat( match[1] );
ty = parseFloat( match[2] );
}
}
styleVars(
state.element as HTMLElement,
{
dx: state.delta.left,
dy: state.delta.top,
dx: state.delta.left + tx,
dy: state.delta.top + ty,
dw: state.delta.width,

@@ -58,20 +74,22 @@ dh: state.delta.height,

});
setTimeout(() => {
Object.keys(stateMap).forEach(key => {
const state = stateMap[key];
requestAnimationFrame(() => {
requestAnimationFrame(() => {
Object.keys(stateMap).forEach(key => {
const state = stateMap[key];
if (state.bounds) {
styleVars(
state.element as HTMLElement,
{
dx: 0,
dy: 0,
dw: 1,
dh: 1,
active: 1
} as Record<string, any>
);
}
if (state.bounds) {
styleVars(
state.element as HTMLElement,
{
dx: 0,
dy: 0,
dw: 1,
dh: 1,
active: 1
} as Record<string, any>
);
}
});
});
}, 0);
});
}

@@ -78,0 +96,0 @@ });

5

src/adapters/gsap.ts

@@ -8,3 +8,4 @@ import Flipping from '../Flipping';

GSAPAnimation,
IGSAPOptions
IGSAPOptions,
AnimationEffectTiming
} from '../types';

@@ -32,2 +33,4 @@ import * as animations from '../animations';

});
return animation;
});

@@ -34,0 +37,0 @@

2

src/adapters/web.ts

@@ -120,3 +120,3 @@ import {

delay: 0,
easing: 'ease',
easing: `cubic-bezier(.5, 0, .5, 1)`,
fill: 'none',

@@ -123,0 +123,0 @@ stagger: 0

24

src/Flipping.ts

@@ -1,3 +0,2 @@

import * as mitt from 'mitt';
import { rect, isVisible, getDelta } from './utils';
import { rect, isVisible, getDelta, mitt } from './utils';
import {

@@ -14,6 +13,8 @@ IBounds,

FlipSelector,
FlipData
FlipData,
mitt as Mitt
} from './types';
import { NO_DELTA, KEY_ATTR } from './constants';
import mirrorPlugin from './plugins/mirror';
import radiusPlugin from './plugins/radius';

@@ -84,3 +85,3 @@ const active = () => true;

class Flipping<TAnimation = any> {
class Flipping<TAnimation = any, TAnimationConfig extends {} = {}> {
public plugins: FlipPlugin[];

@@ -99,3 +100,3 @@ public selector: FlipSelector;

private emitter: mitt.Emitter;
private emitter: Mitt.Emitter;

@@ -113,5 +114,5 @@ constructor(options: IFlippingConfig & Record<string, any> = {}) {

this.parentElement = options.parent || document.documentElement;
this.plugins = options.plugins || [mirrorPlugin];
this.plugins = options.plugins || [mirrorPlugin, radiusPlugin];
this.emitter = new mitt();
this.emitter = mitt();
if (options.onRead) {

@@ -223,6 +224,6 @@ this.on('read', options.onRead);

}
public read(options: IFlippingOptions = {}) {
public read(options: IFlippingOptions<TAnimationConfig> = {}) {
this.flip({ ...options, readOnly: true });
}
public flip(options: IFlippingOptions = {}) {
public flip(options: IFlippingOptions<TAnimationConfig> = {}) {
const parentElement = options.parent || this.parentElement;

@@ -272,3 +273,4 @@ const elements = this.selectActive(parentElement);

animation: previous.animation,
element: previous.element
element: previous.element,
data: previous.data
}

@@ -320,3 +322,3 @@ : undefined,

fn: (...args: any[]) => T,
options: IFlippingOptions = {}
options: IFlippingOptions<TAnimationConfig> = {}
): Function {

@@ -323,0 +325,0 @@ return (...args) => {

45

src/plugins/radius.ts
import { IFlipStateMap } from '../types';
import { deltaChanged } from '../utils';
// import { deltaChanged } from '../utils';

@@ -8,34 +8,17 @@ export default function radiusPlugin(

): IFlipStateMap {
if (event !== 'flip') {
return states;
if (event === 'read') {
Object.keys(states).forEach(key => {
const state = states[key];
const { element } = state;
if (!element) {
return;
}
state.data.radius = getComputedStyle
? getComputedStyle(element).borderRadius || '0'
: '0';
});
}
const nextStates: Partial<IFlipStateMap> = {};
Object.keys(states).forEach(key => {
const state = states[key];
const { element, previous, delta } = state;
if (!element || !previous || !previous.element) {
return;
}
if (!delta || !deltaChanged(delta)) {
return;
}
const prevComputedStyle = getComputedStyle(previous.element);
const computedStyle = getComputedStyle(element);
const { borderRadius: prevRadius } = prevComputedStyle;
const { borderRadius: radius } = computedStyle;
if (prevRadius === radius) {
return;
}
console.log({ prevRadius, radius });
});
return Object.assign(states, nextStates) as IFlipStateMap;
return states;
}

54

src/types.ts

@@ -43,4 +43,6 @@ export interface IBounds {

export interface IFlippingOptions extends IFlippingConfig {
export interface IFlippingOptions<TAnimationConfig = {}>
extends IFlippingConfig {
readOnly?: boolean;
timing?: TAnimationConfig | Record<string, TAnimationConfig>;
}

@@ -62,4 +64,3 @@

export interface IFlipElementsStrategy {
element: IFlipElementStrategy;
container?: IFlipElementStrategy;
[key: string]: IFlipElementStrategy;
}

@@ -77,3 +78,3 @@

previous:
| Pick<IFlipState, 'type' | 'bounds' | 'animation' | 'element'>
| Pick<IFlipState, 'type' | 'bounds' | 'animation' | 'element' | 'data'>
| undefined;

@@ -97,2 +98,10 @@ start: number;

export interface AnimationEffectTiming {
duration?: number;
delay?: number;
easing?: string;
fill?: 'none' | 'forwards' | 'backwards' | 'both' | 'auto' | undefined;
stagger?: number;
}
export type FlippingWebOptions = IFlippingConfig &

@@ -112,1 +121,38 @@ AnimationEffectTiming &

export type FlipSelector = (element: Element) => Element[];
export namespace mitt {
type Handler = (event?: any) => void;
export interface Emitter {
/**
* Register an event handler for the given type.
*
* @param {string} type Type of event to listen for, or `"*"` for all events.
* @param {Handler} handler Function to call in response to the given event.
*
* @memberOf Mitt
*/
on(type: string, handler: Handler): void;
/**
* Function to call in response to the given event
*
* @param {string} type Type of event to unregister `handler` from, or `"*"`
* @param {Handler} handler Handler function to remove.
*
* @memberOf Mitt
*/
off(type: string, handler: Handler): void;
/**
* Invoke all handlers for the given type.
* If present, `"*"` handlers are invoked prior to type-matched handlers.
*
* @param {string} type The event type to invoke
* @param {any} [event] An event object, passed to each handler
*
* @memberOf Mitt
*/
emit(type: string, event?: any): void;
}
}

79

src/utils.ts

@@ -5,10 +5,10 @@ import * as Rematrix from 'rematrix';

export function mapValues(
object: object,
iteratee: (value: any, key: string, object: object) => any
): object {
export function mapValues<T, P>(
collection: { [key: string]: T },
iteratee: (item: T, key: string, collection: { [key: string]: T }) => P
): { [key: string]: P } {
const result = {};
Object.keys(object || {}).forEach(key => {
result[key] = iteratee(object[key], key, object);
Object.keys(collection).forEach(key => {
result[key] = iteratee(collection[key], key, collection);
});

@@ -46,4 +46,4 @@

prop: string,
value: string | number
): string | number {
value: string | number | undefined
): string | number | undefined {
if (

@@ -78,3 +78,5 @@ ['height', 'width', 'top', 'left'].indexOf(prop) !== -1 &&

height,
transform: getComputedStyle(element).transform || undefined
get transform() {
return getComputedStyle(element).transform || undefined;
}
};

@@ -115,1 +117,60 @@ };

};
type EventHandler = (event?: any) => void;
type WildCardEventHandler = (type: string, event?: any) => void;
type EventHandlerList = Array<EventHandler>;
type WildCardEventHandlerList = Array<WildCardEventHandler>;
export function mitt() {
const all: Record<string, EventHandlerList> = {};
const wild: WildCardEventHandlerList = [];
return {
/**
* Register an event handler for the given type.
*
* @param {String} type Type of event to listen for, or `"*"` for all events
* @param {Function} handler Function to call in response to given event
* @memberOf mitt
*/
on(type: string, handler: EventHandler) {
if (type === '*') {
wild.push(handler);
} else {
(all[type] || (all[type] = [])).push(handler);
}
},
/**
* Remove an event handler for the given type.
*
* @param {String} type Type of event to unregister `handler` from, or `"*"`
* @param {Function} handler Handler function to remove
* @memberOf mitt
*/
off(type: string, handler: EventHandler) {
if (type === '*') {
wild.splice(wild.indexOf(handler) >>> 0, 1);
} else if (all[type]) {
all[type].splice(all[type].indexOf(handler) >>> 0, 1);
}
},
/**
* Invoke all handlers for the given type.
* If present, `"*"` handlers are invoked after type-matched handlers.
*
* @param {String} type The event type to invoke
* @param {Any} [evt] Any value (object is recommended and powerful), passed to each handler
* @memberOf mitt
*/
emit(type: string, evt: any) {
(all[type] || []).slice().map(handler => {
handler(evt);
});
wild.slice().map(handler => {
handler(type, evt);
});
}
};
}

8

tsconfig.json

@@ -6,3 +6,9 @@ {

"declaration": true,
"lib": ["es2015", "dom.iterable"],
"lib": ["es2015", "dom", "dom.iterable"],
"types": [
"mocha",
"node",
"web-animations-js"
],
"target": "es5",
"noUnusedLocals": true,

@@ -9,0 +15,0 @@ "noUnusedParameters": true,

2

webpack.config.js

@@ -10,3 +10,3 @@ /* eslint strict:0 */

'flipping.web': './src/adapters/web',
'flipping.gsap': './src/adapters/gsap',
// 'flipping.gsap': './src/adapters/gsap',
'flipping.css': './src/adapters/css'

@@ -13,0 +13,0 @@ },

dist/flipping.gsap.js

Sorry, the diff of this file is too big to display

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc