New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
flipping - npm Package Compare versions
Comparing version 0.9.0 to 0.10.0
@@ -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 p.translate(t,e).join(",")}function u(t,e){return p.scale(t,e).join(",")}function a(){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=u,e.matrixMultiply=a,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(5),o=n(0),u=n(1),a=n(4),f=function(t){var e=t.querySelectorAll("["+u.KEY_ATTR+"]"),n={},r=[];return e.forEach(function(t){if(o.isVisible(t)){var e=t.getAttribute(u.KEY_ATTR);e&&(n[e]=t,r.push(t))}}),r},c=function(){return!0},s=function(t){return t.getAttribute(u.KEY_ATTR)||void 0},l=function(){function t(t){void 0===t&&(t={}),this.selector=t.selector||f,this.active=t.active||c,this.activeSelector=t.activeSelector||o.isVisible,this.getBounds=t.getBounds||o.rect,this.getDelta=t.getDelta||o.getDelta,this.getKey=t.getKey||s,this.parentElement=t.parent||document.documentElement,this.plugins=t.plugins||[a.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=t.querySelectorAll("["+u.KEY_ATTR+"]"),r={},i=[];return n.forEach(function(t){if(e.activeSelector(t)){var n=t.getAttribute(u.KEY_ATTR);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&&this.getKey(r)!==n;)r=r.parentElement;else for(;r&&!r.hasAttribute("data-flip-key");)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=e.getKey(t);if(o){var u=e.findParent(t,n),a=e.getKey(u),f=a?i[a]:void 0,c=e.getBounds(u),s=e.states[o],l=s&&"LEAVE"!==s.type,p=e.getRelativeBounds(c,e.getBounds(t)),d=l&&s&&s.bounds?e.getDelta(s.bounds,p):void 0,h={type:l?"MOVE":"ENTER",key:o,element:t,bounds:p,delta:d,start:Date.now(),animation:l?s.animation:void 0,index:r,previous:s?{type:s.type,bounds:s.bounds,animation:s.animation,element:s.element}:void 0,parent:f};e.states[o]=i[o]=h}}),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 u.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=l},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],u=e[1]*e[6]-e[5]*e[2],a=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+u*p-a*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]*a+e[15]*u)*v,(-e[9]*f+e[10]*a-e[11]*u)*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]*a-e[13]*o+e[15]*n)*v,(-e[8]*a+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]*u+e[13]*i-e[14]*n)*v,(e[8]*u-e[9]*i+e[10]*n)*v]}function u(t,e){for(var n=r(t),i=r(e),o=[],u=0;u<4;u++)for(var a=[n[u],n[u+4],n[u+8],n[u+12]],f=0;f<4;f++){var c=4*f,s=[i[c],i[c+1],i[c+2],i[c+3]],l=a[0]*s[0]+a[1]*s[1]+a[2]*s[2]+a[3]*s[3];o[u+c]=l}return o}function a(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 E(t){var e=i();return e[12]=t,e}function b(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 u}),n.d(e,"parse",function(){return a}),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 E}),n.d(e,"translateY",function(){return b}),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)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;n[e]=u?i({},r,{delta:t[u.getAttribute("data-flip-key")].delta}):r}else n[e]=r}),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){!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";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=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)if(o.hasAttribute("data-flip-follow"))n[e]=i({},r,{delta:i({},t[o.getAttribute("data-flip-follow")].delta,{width:1,height:1})});else if("ENTER"===r.type||"LEAVE"===r.type){for(var a=o.nextElementSibling;a&&(!a.hasAttribute("data-flip-key")||"MOVE"!==t[a.getAttribute("data-flip-key")].type);)a=a.nextElementSibling;n[e]=a?i({},r,{delta:t[a.getAttribute("data-flip-key")].delta}):r}else n[e]=r}),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}])}); |
@@ -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=9)}([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 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:h.NO_DELTA}e.__esModule=!0;var p=n(3),h=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(5),o=n(0),a=n(1),u=n(4),f=function(t){var e=t.querySelectorAll("["+a.KEY_ATTR+"]"),n={},r=[];return e.forEach(function(t){if(o.isVisible(t)){var e=t.getAttribute(a.KEY_ATTR);e&&(n[e]=t,r.push(t))}}),r},s=function(){return!0},l=function(t){return t.getAttribute(a.KEY_ATTR)||void 0},c=function(){function t(t){void 0===t&&(t={}),this.selector=t.selector||f,this.active=t.active||s,this.activeSelector=t.activeSelector||o.isVisible,this.getBounds=t.getBounds||o.rect,this.getDelta=t.getDelta||o.getDelta,this.getKey=t.getKey||l,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=t.querySelectorAll("["+a.KEY_ATTR+"]"),r={},i=[];return n.forEach(function(t){if(e.activeSelector(t)){var n=t.getAttribute(a.KEY_ATTR);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&&this.getKey(r)!==n;)r=r.parentElement;else for(;r&&!r.hasAttribute("data-flip-key");)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=e.getKey(t);if(o){var a=e.findParent(t,n),u=e.getKey(a),f=u?i[u]:void 0,s=e.getBounds(a),l=e.states[o],c=l&&"LEAVE"!==l.type,p=e.getRelativeBounds(s,e.getBounds(t)),h=c&&l&&l.bounds?e.getDelta(l.bounds,p):void 0,d={type:c?"MOVE":"ENTER",key:o,element:t,bounds:p,delta:h,start:Date.now(),animation:c?l.animation:void 0,index:r,previous:l?{type:l.type,bounds:l.bounds,animation:l.animation,element:l.element}:void 0,parent:f};e.states[o]=i[o]=d}}),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=c},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],p=e[8]*e[15]-e[12]*e[11],h=e[8]*e[14]-e[12]*e[10],d=e[8]*e[13]-e[12]*e[9],m=1/(n*s-i*l+o*c+a*p-u*h+f*d);if(isNaN(m)||m===1/0)throw new Error("Inverse determinant attempted to divide by zero.");return[(e[5]*s-e[6]*l+e[7]*c)*m,(-e[1]*s+e[2]*l-e[3]*c)*m,(e[13]*f-e[14]*u+e[15]*a)*m,(-e[9]*f+e[10]*u-e[11]*a)*m,(-e[4]*s+e[6]*p-e[7]*h)*m,(e[0]*s-e[2]*p+e[3]*h)*m,(-e[12]*f+e[14]*o-e[15]*i)*m,(e[8]*f-e[10]*o+e[11]*i)*m,(e[4]*l-e[5]*p+e[7]*d)*m,(-e[0]*l+e[1]*p-e[3]*d)*m,(e[12]*u-e[13]*o+e[15]*n)*m,(-e[8]*u+e[9]*o-e[11]*n)*m,(-e[4]*c+e[5]*h-e[6]*d)*m,(e[0]*c-e[1]*h+e[2]*d)*m,(-e[12]*a+e[13]*i-e[14]*n)*m,(e[8]*a-e[9]*i+e[10]*n)*m]}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 p(t){var e=i();return e[0]=t,e}function h(t){var e=i();return e[5]=t,e}function d(t){var e=i();return e[10]=t,e}function m(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 v(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 x(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 s}),n.d(e,"rotateZ",function(){return l}),n.d(e,"scale",function(){return c}),n.d(e,"scaleX",function(){return p}),n.d(e,"scaleY",function(){return h}),n.d(e,"scaleZ",function(){return d}),n.d(e,"skew",function(){return m}),n.d(e,"skewX",function(){return v}),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 x}),n.d(e,"translateZ",function(){return E})},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)if("ENTER"===r.type||"LEAVE"===r.type){for(var a=o.nextElementSibling;a&&(!a.hasAttribute("data-flip-key")||"MOVE"!==t[a.getAttribute("data-flip-key")].type);)a=a.nextElementSibling;n[e]=a?i({},r,{delta:t[a.getAttribute("data-flip-key")].delta}):r}else n[e]=r}),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){!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";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,a=t.type,u=t.element;if(u&&n&&e){if("ENTER"===a)return{element:{from:{transform:"translate(\n "+(n?n.left:0)+"px,\n "+(n?n.top:0)+"px)\n scale(.01)"},to:{transform:"scale(1)"}}};var f=u.hasAttribute("data-flip-no-scale"),s=!f&&(1!==n.width||1!==n.height),l=o.translate(n.left,n.top),c=s?o.scale(n.width,n.height):void 0,p=s?"top left":void 0,h=i.matrixMultiply(l,c);return{element:{from:r({x:n.left,y:n.top},p?{transformOrigin:p}:void 0,{transform:"matrix3d("+h+")"}),to:r({x:e.left,y:e.top},p?{transformOrigin:p}: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),p=i.matrixTranslate(u.to.x,u.to.y),h=i.matrixTranslate(f.from.x,f.from.y),d=i.matrixTranslate(f.to.x,f.to.y);return u.from.transform="matrix3d("+c+")",u.to.transform="matrix3d("+p+")",f.from.transform="matrix3d("+h+")",f.to.transform="matrix3d("+d+")",{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)},p=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=a({},e,{delay:+(e.delay||0)+s.getStaggerDelay(t.index,e.stagger||0),fill:e.stagger?"both":"none"});if(n)return n&&n.parentElement&&n.parentElement.hasAttribute("data-flip-wrap")?c(t,r):p(t,r)},d=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:h,transform:p,slidingLayers:c},e}(u.default);t.exports=d}])}); | ||
| !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:p.NO_DELTA}e.__esModule=!0;var h=n(3),p=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},p=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],p=h&&"LEAVE"!==h.type,d=e.getRelativeBounds(l,e.getBounds(t)),v=p&&h&&h.bounds?e.getDelta(h.bounds,d):void 0,m={type:p?"MOVE":"ENTER",key:o,element:t,bounds:d,delta:v,start:Date.now(),animation:p?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=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],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],p=e[8]*e[14]-e[12]*e[10],d=e[8]*e[13]-e[12]*e[9],v=1/(n*s-i*l+o*c+a*h-u*p+f*d);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]*p)*v,(e[0]*s-e[2]*h+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]*l-e[5]*h+e[7]*d)*v,(-e[0]*l+e[1]*h-e[3]*d)*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]*p-e[6]*d)*v,(e[0]*c-e[1]*p+e[2]*d)*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 p(t){var e=i();return e[5]=t,e}function d(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 p}),n.d(e,"scaleZ",function(){return d}),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)if(o.hasAttribute("data-flip-follow"))n[e]=i({},r,{delta:i({},t[o.getAttribute("data-flip-follow")].delta,{width:1,height:1})});else if("ENTER"===r.type||"LEAVE"===r.type){for(var a=o.nextElementSibling;a&&(!a.hasAttribute("data-flip-key")||"MOVE"!==t[a.getAttribute("data-flip-key")].type);)a=a.nextElementSibling;n[e]=a?i({},r,{delta:t[a.getAttribute("data-flip-key")].delta}):r}else n[e]=r}),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),p=i.matrixTranslate(f.from.x,f.from.y),d=i.matrixTranslate(f.to.x,f.to.y);return u.from.transform="matrix3d("+c+")",u.to.transform="matrix3d("+h+")",f.from.transform="matrix3d("+p+")",f.to.transform="matrix3d("+d+")",{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)},p=function(t,e){var n=t.element,r=a({},e,{delay:+(e.delay||0)+s.getStaggerDelay(t.index,e.stagger||0),fill:e.stagger?"both":"none"});if(n)return h(t,r)},d=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:p,transform:h,slidingLayers:c},e}(u.default);t.exports=d}])}); |
@@ -75,7 +75,2 @@ "use strict"; | ||
| } | ||
| if (element && | ||
| element.parentElement && | ||
| element.parentElement.hasAttribute('data-flip-wrap')) { | ||
| return slidingLayersAnimation(state, timingOptions); | ||
| } | ||
| return scaleAnimation(state, timingOptions); | ||
@@ -82,0 +77,0 @@ }; |
@@ -14,20 +14,7 @@ "use strict"; | ||
| exports.scale = function (state) { | ||
| var bounds = state.bounds, delta = state.delta, type = state.type, element = state.element; | ||
| var bounds = state.bounds, delta = state.delta, element = state.element; | ||
| if (!element || !delta || !bounds) { | ||
| return undefined; | ||
| } | ||
| if (type === 'ENTER') { | ||
| return { | ||
| element: { | ||
| from: { | ||
| transform: "translate(\n " + (delta ? delta.left : 0) + "px,\n " + (delta ? delta.top : 0) + "px)\n scale(.01)" | ||
| }, | ||
| to: { | ||
| transform: 'scale(1)' | ||
| } | ||
| } | ||
| }; | ||
| } | ||
| var preventScale = element.hasAttribute('data-flip-no-scale'); | ||
| var scaleChanged = !preventScale && (delta.width !== 1 || delta.height !== 1); | ||
| var scaleChanged = !state.data.noScale && (delta.width !== 1 || delta.height !== 1); | ||
| var translate = Rematrix.translate(delta.left, delta.top); | ||
@@ -42,4 +29,4 @@ var scale = scaleChanged | ||
| var elementPosition = { | ||
| from: __assign({ x: delta.left, y: delta.top }, transformOrigin ? { transformOrigin: transformOrigin } : undefined, { transform: "matrix3d(" + invertedMatrix + ")" }), | ||
| to: __assign({ x: bounds.left, y: bounds.top }, transformOrigin ? { transformOrigin: transformOrigin } : undefined, { transform: bounds.transform || 'none' }) | ||
| from: __assign({ x: delta.left, y: delta.top }, (transformOrigin ? { transformOrigin: transformOrigin } : undefined), { transform: "matrix3d(" + invertedMatrix + ")" }), | ||
| to: __assign({ x: bounds.left, y: bounds.top }, (transformOrigin ? { transformOrigin: transformOrigin } : undefined), { transform: bounds.transform || 'none' }) | ||
| }; | ||
@@ -46,0 +33,0 @@ return { |
@@ -1,9 +0,9 @@ | ||
| import { IBounds, IFlippingConfig, IFlippingOptions, IFlipState, IFlipStateMap, FlipEventName, FlipPlugin, FlipEventListener, FlipStateEventListener } from './types'; | ||
| import { IBounds, IFlippingConfig, IFlippingOptions, IFlipState, IFlipStateMap, FlipEventName, FlipPlugin, FlipEventListener, FlipStateEventListener, FlipSelector } from './types'; | ||
| declare class Flipping<TAnimation = any> { | ||
| plugins: FlipPlugin[]; | ||
| selector: (element: Element) => Element[]; | ||
| selector: FlipSelector; | ||
| attribute: string; | ||
| active: (element: Element) => boolean; | ||
| private activeSelector; | ||
| getBounds: (element: Element) => IBounds; | ||
| getKey: (element: Element) => string | undefined; | ||
| getDelta: (first: IBounds, last: IBounds) => IBounds; | ||
@@ -18,5 +18,3 @@ onEnter?: FlipEventListener; | ||
| private emitter; | ||
| constructor(options?: IFlippingConfig & { | ||
| [key: string]: any; | ||
| }); | ||
| constructor(options?: IFlippingConfig & Record<string, any>); | ||
| private getRelativeBounds(parentBounds, childBounds); | ||
@@ -23,0 +21,0 @@ private selectActive(parentElement); |
@@ -15,25 +15,54 @@ "use strict"; | ||
| var mirror_1 = require("./plugins/mirror"); | ||
| var selector = function (parentElement) { | ||
| var elements = parentElement.querySelectorAll("[" + constants_1.KEY_ATTR + "]"); | ||
| var visibleElements = {}; | ||
| var result = []; | ||
| elements.forEach(function (element) { | ||
| if (!utils_1.isVisible(element)) { | ||
| return; | ||
| var active = function () { return true; }; | ||
| var identity = function (a) { return a; }; | ||
| var flipDatasetMap = { | ||
| flipKey: ['key', identity], | ||
| flipNoScale: ['noScale', function () { return true; }] | ||
| }; | ||
| var getFlipData = function (element) { | ||
| if (!('dataset' in element)) { | ||
| // not supported | ||
| return {}; | ||
| } | ||
| var dataset = element.dataset; | ||
| var data = {}; | ||
| Object.keys(dataset).forEach(function (key) { | ||
| if (flipDatasetMap[key]) { | ||
| var _a = flipDatasetMap[key], flipKey = _a[0], project = _a[1]; | ||
| data[flipKey] = project(dataset[key]); | ||
| } | ||
| var key = element.getAttribute(constants_1.KEY_ATTR); | ||
| if (!key) { | ||
| return; | ||
| else if (key.indexOf('flip') === 0) { | ||
| data[key[4].toLowerCase() + key.slice(5)] = dataset[key]; | ||
| } | ||
| visibleElements[key] = element; | ||
| result.push(element); | ||
| }); | ||
| return result; | ||
| return data; | ||
| }; | ||
| var active = function () { return true; }; | ||
| var getKey = function (element) { return element.getAttribute(constants_1.KEY_ATTR) || undefined; }; | ||
| var createSelector = function (selector, attribute) { | ||
| if (attribute === void 0) { attribute = constants_1.KEY_ATTR; } | ||
| if (typeof selector === 'string') { | ||
| return function (parentElement) { | ||
| var elements = parentElement.querySelectorAll(selector); | ||
| var visibleElements = {}; | ||
| var result = []; | ||
| elements.forEach(function (element) { | ||
| if (!utils_1.isVisible(element)) { | ||
| return; | ||
| } | ||
| var key = element.getAttribute(attribute); | ||
| if (!key) { | ||
| return; | ||
| } | ||
| visibleElements[key] = element; | ||
| result.push(element); | ||
| }); | ||
| return result; | ||
| }; | ||
| } | ||
| return selector; | ||
| }; | ||
| var Flipping = /** @class */ (function () { | ||
| function Flipping(options) { | ||
| if (options === void 0) { options = {}; } | ||
| this.selector = options.selector || selector; | ||
| this.attribute = options.attribute || constants_1.KEY_ATTR; | ||
| this.selector = createSelector(options.selector || "[" + this.attribute + "]", this.attribute); | ||
| this.active = options.active || active; | ||
@@ -43,3 +72,2 @@ this.activeSelector = options.activeSelector || utils_1.isVisible; | ||
| this.getDelta = options.getDelta || utils_1.getDelta; | ||
| this.getKey = options.getKey || getKey; | ||
| this.parentElement = options.parent || document.documentElement; | ||
@@ -67,3 +95,3 @@ this.plugins = options.plugins || [mirror_1["default"]]; | ||
| var _this = this; | ||
| var elements = parentElement.querySelectorAll("[" + constants_1.KEY_ATTR + "]"); | ||
| var elements = this.selector(parentElement); | ||
| var activeElements = {}; | ||
@@ -75,3 +103,3 @@ var result = []; | ||
| } | ||
| var key = element.getAttribute(constants_1.KEY_ATTR); | ||
| var key = element.getAttribute(_this.attribute); | ||
| if (!key) { | ||
@@ -90,3 +118,3 @@ return; | ||
| if (!parentKey) { | ||
| while (currentParent && !currentParent.hasAttribute('data-flip-key')) { | ||
| while (currentParent && !currentParent.hasAttribute(this.attribute)) { | ||
| currentParent = currentParent.parentElement; | ||
@@ -96,3 +124,4 @@ } | ||
| else { | ||
| while (currentParent && this.getKey(currentParent) !== parentKey) { | ||
| while (currentParent && | ||
| currentParent.getAttribute(this.attribute) !== parentKey) { | ||
| currentParent = currentParent.parentElement; | ||
@@ -144,16 +173,13 @@ } | ||
| var fullState = {}; | ||
| // const config = { | ||
| // onFlip: this.onFlip, | ||
| // onEnter: this.onEnter, | ||
| // onLeave: this.onLeave, | ||
| // ...options | ||
| // }; | ||
| elements.forEach(function (element, index) { | ||
| var key = _this.getKey(element); | ||
| var key = element.getAttribute(_this.attribute); | ||
| if (!key) { | ||
| return; | ||
| } | ||
| var data = getFlipData(element); | ||
| var childParent = _this.findParent(element, parentElement); | ||
| var childParentKey = _this.getKey(childParent); | ||
| var childParentState = childParentKey ? fullState[childParentKey] : undefined; | ||
| var childParentKey = childParent.getAttribute(_this.attribute); | ||
| var childParentState = childParentKey | ||
| ? fullState[childParentKey] | ||
| : undefined; | ||
| var parentBounds = _this.getBounds(childParent); | ||
@@ -183,3 +209,4 @@ var previous = _this.states[key]; | ||
| : undefined, | ||
| parent: childParentState | ||
| parent: childParentState, | ||
| data: data | ||
| }; | ||
@@ -254,3 +281,7 @@ _this.states[key] = fullState[key] = newState; | ||
| Flipping.willScale = function (state) { | ||
| return !!(state && state.element && !state.element.hasAttribute('data-noflip') && state.delta && (state.delta.width !== 1 || state.delta.height !== 1)); | ||
| return !!(state && | ||
| state.element && | ||
| !state.element.hasAttribute('data-noflip') && | ||
| state.delta && | ||
| (state.delta.width !== 1 || state.delta.height !== 1)); | ||
| }; | ||
@@ -257,0 +288,0 @@ Flipping.willMove = function (state) { |
@@ -21,11 +21,16 @@ "use strict"; | ||
| // const mirrorKey = element.getAttribute('data-flip-mirror'); | ||
| if (state.type === 'ENTER' || state.type === 'LEAVE') { | ||
| if (element.hasAttribute('data-flip-follow')) { | ||
| nextStates[key] = __assign({}, state, { delta: __assign({}, states[element.getAttribute('data-flip-follow')].delta, { width: 1, height: 1 }) }); | ||
| } | ||
| else if (state.type === 'ENTER' || state.type === 'LEAVE') { | ||
| var candidateElement = element.nextElementSibling; | ||
| while (candidateElement && | ||
| (!candidateElement.hasAttribute('data-flip-key') || | ||
| states[candidateElement.getAttribute('data-flip-key')].type !== 'MOVE')) { | ||
| states[candidateElement.getAttribute('data-flip-key')] | ||
| .type !== 'MOVE')) { | ||
| candidateElement = candidateElement.nextElementSibling; | ||
| } | ||
| if (candidateElement) { | ||
| nextStates[key] = __assign({}, state, { delta: states[candidateElement.getAttribute('data-flip-key')].delta }); | ||
| nextStates[key] = __assign({}, state, { delta: states[candidateElement.getAttribute('data-flip-key')] | ||
| .delta }); | ||
| } | ||
@@ -32,0 +37,0 @@ else { |
@@ -25,2 +25,3 @@ /// <reference types="web-animations-js" /> | ||
| selector?: (parent: Element) => Element[]; | ||
| attribute?: string; | ||
| onFlip?: (state: IFlipStateMap) => void; | ||
@@ -65,3 +66,12 @@ onRead?: (state: IFlipStateMap) => void; | ||
| parent: IFlipState<TAnimation> | undefined; | ||
| data: FlipData; | ||
| } | ||
| export interface IFlipData { | ||
| key?: string; | ||
| noScale?: boolean; | ||
| state?: string; | ||
| } | ||
| export declare type FlipData = { | ||
| [key: string]: string; | ||
| } & IFlipData; | ||
| export interface ICustomEffectTiming { | ||
@@ -78,1 +88,2 @@ stagger?: number | ((index: number) => number); | ||
| } | ||
| export declare type FlipSelector = (element: Element) => Element[]; |
| { | ||
| "name": "flipping", | ||
| "version": "0.9.0", | ||
| "version": "0.10.0", | ||
| "description": "Flipping awesome animations.", | ||
| "main": "lib/index.js", | ||
| "types": "lib/index.d.ts", | ||
| "scripts": { | ||
| "start": "npm run build:watch", | ||
| "test": "mocha -r ts-node/register test/**.test.ts", | ||
| "build": "npm run build:prod", | ||
| "build:prod": "tsc && webpack --config webpack.config.prod.js", | ||
@@ -30,15 +32,15 @@ "build:watch": "webpack --config webpack.config.js -w", | ||
| "devDependencies": { | ||
| "@types/gsap": "^1.19.1", | ||
| "@types/web-animations-js": "^2.2.5", | ||
| "awesome-typescript-loader": "^3.4.1", | ||
| "@types/gsap": "^1.19.2", | ||
| "@types/web-animations-js": "^2.2.6", | ||
| "awesome-typescript-loader": "^3.5.0", | ||
| "babel-core": "^6.26.0", | ||
| "chai": "^3.5.0", | ||
| "gsap": "^1.20.3", | ||
| "gsap": "^1.20.4", | ||
| "mocha": "^3.5.3", | ||
| "node-sass": "^4.7.2", | ||
| "prettier": "^1.10.2", | ||
| "prettier": "^1.11.1", | ||
| "ts-loader": "^2.3.7", | ||
| "ts-node": "^3.3.0", | ||
| "tslint": "^5.9.1", | ||
| "typescript": "^2.6.2", | ||
| "typescript": "^2.7.2", | ||
| "webpack": "^2.7.0" | ||
@@ -45,0 +47,0 @@ }, |
@@ -99,10 +99,2 @@ import { | ||
| if ( | ||
| element && | ||
| element.parentElement && | ||
| element.parentElement.hasAttribute('data-flip-wrap') | ||
| ) { | ||
| return slidingLayersAnimation(state, timingOptions); | ||
| } | ||
| return scaleAnimation(state, timingOptions); | ||
@@ -109,0 +101,0 @@ }; |
@@ -10,26 +10,10 @@ import { | ||
| export const scale = (state: IFlipState): IFlipElementsStrategy | undefined => { | ||
| const { bounds, delta, type, element } = state; | ||
| const { bounds, delta, element } = state; | ||
| if (!element || !delta || !bounds) { return undefined; } | ||
| if (type === 'ENTER') { | ||
| return { | ||
| element: { | ||
| from: { | ||
| transform: `translate( | ||
| ${delta ? delta.left : 0}px, | ||
| ${delta ? delta.top : 0}px) | ||
| scale(.01)` | ||
| }, | ||
| to: { | ||
| transform: 'scale(1)' | ||
| } | ||
| } | ||
| }; | ||
| if (!element || !delta || !bounds) { | ||
| return undefined; | ||
| } | ||
| const preventScale = element.hasAttribute('data-flip-no-scale'); | ||
| const scaleChanged = | ||
| !preventScale && (delta.width !== 1 || delta.height !== 1); | ||
| !state.data.noScale && (delta.width !== 1 || delta.height !== 1); | ||
| const translate = Rematrix.translate(delta.left, delta.top); | ||
@@ -50,3 +34,3 @@ const scale = scaleChanged | ||
| y: delta.top, | ||
| ...transformOrigin ? { transformOrigin } : undefined, | ||
| ...(transformOrigin ? { transformOrigin } : undefined), | ||
| transform: `matrix3d(${invertedMatrix})` | ||
@@ -57,3 +41,3 @@ }, | ||
| y: bounds.top, | ||
| ...transformOrigin ? { transformOrigin } : undefined, | ||
| ...(transformOrigin ? { transformOrigin } : undefined), | ||
| transform: bounds.transform || 'none' | ||
@@ -106,3 +90,5 @@ } | ||
| if (!delta) { return; } | ||
| if (!delta) { | ||
| return; | ||
| } | ||
@@ -109,0 +95,0 @@ if (deltaWidth > 0) { |
@@ -12,38 +12,80 @@ import * as mitt from 'mitt'; | ||
| FlipEventListener, | ||
| FlipStateEventListener | ||
| FlipStateEventListener, | ||
| FlipSelector, | ||
| FlipData | ||
| } from './types'; | ||
| import { NO_DELTA, KEY_ATTR /* FOLLOW_ATTR */ } from './constants'; | ||
| import { NO_DELTA, KEY_ATTR } from './constants'; | ||
| import mirrorPlugin from './plugins/mirror'; | ||
| const selector = (parentElement: Element): Element[] => { | ||
| const elements = parentElement.querySelectorAll(`[${KEY_ATTR}]`); | ||
| const visibleElements = {}; | ||
| const result: Element[] = []; | ||
| const active = () => true; | ||
| const identity: <T>(a: T) => T = a => a; | ||
| elements.forEach(element => { | ||
| if (!isVisible(element)) { | ||
| return; | ||
| } | ||
| const key = element.getAttribute(KEY_ATTR); | ||
| if (!key) { | ||
| return; | ||
| } | ||
| const flipDatasetMap: Record< | ||
| string, | ||
| [keyof FlipData, (value: string) => any] | ||
| > = { | ||
| flipKey: ['key', identity], | ||
| flipNoScale: ['noScale', () => true] | ||
| }; | ||
| visibleElements[key] = element; | ||
| const getFlipData = (element: Element): FlipData => { | ||
| if (!('dataset' in element)) { | ||
| // not supported | ||
| result.push(element); | ||
| return {}; | ||
| } | ||
| const dataset: Record<string, string> = (element as any).dataset; | ||
| const data: FlipData = {}; | ||
| Object.keys(dataset).forEach(key => { | ||
| if (flipDatasetMap[key]) { | ||
| const [flipKey, project] = flipDatasetMap[key]; | ||
| data[flipKey] = project(dataset[key]); | ||
| } else if (key.indexOf('flip') === 0) { | ||
| data[key[4].toLowerCase() + key.slice(5)] = dataset[key]; | ||
| } | ||
| }); | ||
| return result; | ||
| return data; | ||
| }; | ||
| const active = () => true; | ||
| const getKey = (element: Element): string | undefined => element.getAttribute(KEY_ATTR) || undefined; | ||
| const createSelector = ( | ||
| selector: FlipSelector | string, | ||
| attribute: string = KEY_ATTR | ||
| ): FlipSelector => { | ||
| if (typeof selector === 'string') { | ||
| return (parentElement: Element) => { | ||
| const elements = parentElement.querySelectorAll(selector); | ||
| const visibleElements = {}; | ||
| const result: Element[] = []; | ||
| elements.forEach(element => { | ||
| if (!isVisible(element)) { | ||
| return; | ||
| } | ||
| const key = element.getAttribute(attribute); | ||
| if (!key) { | ||
| return; | ||
| } | ||
| visibleElements[key] = element; | ||
| result.push(element); | ||
| }); | ||
| return result; | ||
| }; | ||
| } | ||
| return selector; | ||
| }; | ||
| class Flipping<TAnimation = any> { | ||
| public plugins: FlipPlugin[]; | ||
| public selector: (element: Element) => Element[]; | ||
| public selector: FlipSelector; | ||
| public attribute: string; | ||
| public active: (element: Element) => boolean; | ||
| private activeSelector: (element) => Element[]; | ||
| public getBounds: (element: Element) => IBounds; | ||
| public getKey: (element: Element) => string | undefined; | ||
| public getDelta: (first: IBounds, last: IBounds) => IBounds; | ||
@@ -58,4 +100,8 @@ public onEnter?: FlipEventListener; | ||
| constructor(options: IFlippingConfig & { [key: string]: any } = {}) { | ||
| this.selector = options.selector || selector; | ||
| constructor(options: IFlippingConfig & Record<string, any> = {}) { | ||
| this.attribute = options.attribute || KEY_ATTR; | ||
| this.selector = createSelector( | ||
| options.selector || `[${this.attribute}]`, | ||
| this.attribute | ||
| ); | ||
| this.active = options.active || active; | ||
@@ -65,3 +111,2 @@ this.activeSelector = options.activeSelector || isVisible; | ||
| this.getDelta = options.getDelta || getDelta; | ||
| this.getKey = options.getKey || getKey; | ||
| this.parentElement = options.parent || document.documentElement; | ||
@@ -97,3 +142,3 @@ this.plugins = options.plugins || [mirrorPlugin]; | ||
| private selectActive(parentElement: Element): Element[] { | ||
| const elements = parentElement.querySelectorAll(`[${KEY_ATTR}]`); | ||
| const elements = this.selector(parentElement); | ||
| const activeElements = {}; | ||
@@ -106,3 +151,3 @@ const result: Element[] = []; | ||
| } | ||
| const key = element.getAttribute(KEY_ATTR); | ||
| const key = element.getAttribute(this.attribute); | ||
| if (!key) { | ||
@@ -127,7 +172,10 @@ return; | ||
| if (!parentKey) { | ||
| while (currentParent && !currentParent.hasAttribute('data-flip-key')) { | ||
| while (currentParent && !currentParent.hasAttribute(this.attribute)) { | ||
| currentParent = currentParent.parentElement; | ||
| } | ||
| } else { | ||
| while (currentParent && this.getKey(currentParent) !== parentKey) { | ||
| while ( | ||
| currentParent && | ||
| currentParent.getAttribute(this.attribute) !== parentKey | ||
| ) { | ||
| currentParent = currentParent.parentElement; | ||
@@ -184,17 +232,16 @@ } | ||
| const fullState: IFlipStateMap = {}; | ||
| // const config = { | ||
| // onFlip: this.onFlip, | ||
| // onEnter: this.onEnter, | ||
| // onLeave: this.onLeave, | ||
| // ...options | ||
| // }; | ||
| elements.forEach((element, index) => { | ||
| const key = this.getKey(element); | ||
| const key = element.getAttribute(this.attribute); | ||
| if (!key) { return; } | ||
| if (!key) { | ||
| return; | ||
| } | ||
| const data = getFlipData(element); | ||
| const childParent = this.findParent(element, parentElement); | ||
| const childParentKey = this.getKey(childParent); | ||
| const childParentState = childParentKey ? fullState[childParentKey] : undefined; | ||
| const childParentKey = childParent.getAttribute(this.attribute); | ||
| const childParentState = childParentKey | ||
| ? fullState[childParentKey] | ||
| : undefined; | ||
| const parentBounds = this.getBounds(childParent); | ||
@@ -208,5 +255,6 @@ const previous = this.states[key]; | ||
| ); | ||
| const delta = isPresent && previous && previous.bounds | ||
| ? this.getDelta(previous.bounds, bounds) | ||
| : undefined; | ||
| const delta = | ||
| isPresent && previous && previous.bounds | ||
| ? this.getDelta(previous.bounds, bounds) | ||
| : undefined; | ||
@@ -230,3 +278,4 @@ const newState: IFlipState = { | ||
| : undefined, | ||
| parent: childParentState | ||
| parent: childParentState, | ||
| data | ||
| }; | ||
@@ -245,3 +294,3 @@ | ||
| } | ||
| const prevState = this.states[key]; | ||
@@ -286,3 +335,5 @@ | ||
| const { delta } = this.states[key]; | ||
| if (!delta) { return; } | ||
| if (!delta) { | ||
| return; | ||
| } | ||
@@ -307,10 +358,18 @@ return Flipping.progress(delta, fraction); | ||
| static willScale = (state: IFlipState): boolean => { | ||
| return !!(state && state.element && !state.element.hasAttribute('data-noflip') && state.delta && (state.delta.width !== 1 || state.delta.height !== 1)); | ||
| } | ||
| return !!( | ||
| state && | ||
| state.element && | ||
| !state.element.hasAttribute('data-noflip') && | ||
| state.delta && | ||
| (state.delta.width !== 1 || state.delta.height !== 1) | ||
| ); | ||
| }; | ||
| static willMove = (state: IFlipState): boolean => { | ||
| if (!state || !state.delta) { return false; } | ||
| if (!state || !state.delta) { | ||
| return false; | ||
| } | ||
| return state && (state.delta.top !== 0 || state.delta.left !== 0); | ||
| } | ||
| }; | ||
| } | ||
| export default Flipping; |
@@ -1,2 +0,2 @@ | ||
| import { IFlipStateMap } from '../types'; | ||
| import { IFlipStateMap, IBounds } from '../types'; | ||
@@ -20,3 +20,12 @@ export default function mirrorPlugin( | ||
| if (state.type === 'ENTER' || state.type === 'LEAVE') { | ||
| if (element.hasAttribute('data-flip-follow')) { | ||
| nextStates[key] = { | ||
| ...state, | ||
| delta: { | ||
| ...states[element.getAttribute('data-flip-follow')!].delta, | ||
| width: 1, | ||
| height: 1 | ||
| } as IBounds | ||
| }; | ||
| } else if (state.type === 'ENTER' || state.type === 'LEAVE') { | ||
| let candidateElement = element.nextElementSibling; | ||
@@ -26,3 +35,4 @@ while ( | ||
| (!candidateElement.hasAttribute('data-flip-key') || | ||
| states[candidateElement.getAttribute('data-flip-key') as string].type !== 'MOVE') | ||
| states[candidateElement.getAttribute('data-flip-key') as string] | ||
| .type !== 'MOVE') | ||
| ) { | ||
@@ -35,3 +45,5 @@ candidateElement = candidateElement.nextElementSibling; | ||
| ...state, | ||
| delta: states[candidateElement.getAttribute('data-flip-key') as string].delta | ||
| delta: | ||
| states[candidateElement.getAttribute('data-flip-key') as string] | ||
| .delta | ||
| }; | ||
@@ -38,0 +50,0 @@ } else { |
@@ -33,2 +33,3 @@ export interface IBounds { | ||
| selector?: (parent: Element) => Element[]; | ||
| attribute?: string; | ||
| onFlip?: (state: IFlipStateMap) => void; | ||
@@ -66,3 +67,2 @@ onRead?: (state: IFlipStateMap) => void; | ||
| export type IFlipStateType = 'PENDING' | 'ENTER' | 'MOVE' | 'LEAVE'; | ||
| export interface IFlipState<TAnimation = any> { | ||
@@ -81,4 +81,13 @@ type: IFlipStateType; | ||
| parent: IFlipState<TAnimation> | undefined; | ||
| data: FlipData; | ||
| } | ||
| export interface IFlipData { | ||
| key?: string; | ||
| noScale?: boolean; | ||
| state?: string; | ||
| } | ||
| export type FlipData = { [key: string]: string } & IFlipData; | ||
| export interface ICustomEffectTiming { | ||
@@ -100,1 +109,3 @@ stagger?: number | ((index: number) => number); | ||
| } | ||
| export type FlipSelector = (element: Element) => Element[]; |
@@ -8,5 +8,6 @@ /* eslint strict:0 */ | ||
| entry: { | ||
| flipping: './lib/index', | ||
| 'flipping.web': './lib/adapters/web', | ||
| 'flipping.gsap': './lib/adapters/gsap' | ||
| flipping: './src/index', | ||
| 'flipping.web': './src/adapters/web', | ||
| 'flipping.gsap': './src/adapters/gsap', | ||
| 'flipping.css': './src/adapters/css' | ||
| }, | ||
@@ -13,0 +14,0 @@ output: { |
Sorry, the diff of this file is too big to display
No alert changes
Improved metrics
- Number of package files
59
25.53%Worsened metrics
- Total package byte prevSize
276706
-17.07%- Lines of code
2989
-38.38%No dependency changes