@infinityfx/lively 0.0.2 → 0.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/animations.js +1 -0
- package/dist/cjs/hooks.js +1 -0
- package/dist/cjs/index.js +1 -0
- package/dist/cjs/pop-a6252bea.js +1 -0
- package/dist/esm/animations.js +1 -0
- package/dist/esm/hooks.js +1 -0
- package/dist/esm/index.js +1 -0
- package/dist/esm/pop-fc3e182f.js +1 -0
- package/package.json +30 -12
- package/types/animatable.d.ts +55 -0
- package/types/animate.d.ts +28 -0
- package/types/index.d.ts +4 -0
- package/types/morph.d.ts +27 -0
- package/dist/index.js +0 -3
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/defineProperty"),r=require("./pop-a6252bea.js"),t=require("@babel/runtime/helpers/objectWithoutProperties");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("@babel/runtime/helpers/asyncToGenerator"),require("@babel/runtime/helpers/slicedToArray"),require("@babel/runtime/helpers/toConsumableArray"),require("@babel/runtime/helpers/typeof"),require("@babel/runtime/helpers/classCallCheck"),require("@babel/runtime/helpers/createClass"),require("@babel/runtime/regenerator");var o=n(e),i=n(t);function c(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);r&&(n=n.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,n)}return t}function u(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?c(Object(t),!0).forEach((function(r){o.default(e,r,t[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):c(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))}))}return e}function a(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return a.use=a.use.bind(a,e),a}a.use=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return new r.Animation(u({opacity:1,duration:.65},e),{opacity:0})};var p=["direction"];function s(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);r&&(n=n.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,n)}return t}function l(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?s(Object(t),!0).forEach((function(r){o.default(e,r,t[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):s(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))}))}return e}function b(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return b.use=b.use.bind(b,e),b}b.use=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=e.direction,n=void 0===t?"right":t,o=i.default(e,p),c=0,u=1,a={x:0,y:.5};switch(n){case"left":a.x=1;break;case"up":c=1,u=0,a={x:0,y:1};break;case"down":c=1,u=0,a={x:0,y:0}}return new r.Animation(l({scale:{x:1},origin:a,duration:.6},o),{scale:{x:c,y:u}})};var f=["direction"];function O(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);r&&(n=n.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,n)}return t}function y(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?O(Object(t),!0).forEach((function(r){o.default(e,r,t[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):O(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))}))}return e}function d(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return d.use=d.use.bind(d,e),d}d.use=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=e.direction,n=void 0===t?"right":t,c=i.default(e,f);return["left","right","top","bottom"].includes(n)||(n="right"),new r.Animation(y({clip:o.default({},n,0)},c),{clip:o.default({},n,1)})},exports.Move=r.Move,exports.Pop=r.Pop,exports.Fade=a,exports.Scale=b,exports.Wipe=d;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/slicedToArray"),r=require("react");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=t(e);exports.useUnmount=function(e){var t=r.useState(e),n=u.default(t,2),c=n[0],o=n[1],a=r.useRef();return r.useEffect((function(){e&&o(!0),!e&&a.current&&a.current.play(a.current.props.onUnmount,{reverse:!0,callback:function(){o(!1)}})}),[e]),[c,a]};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/asyncToGenerator"),t=require("@babel/runtime/helpers/slicedToArray"),r=require("@babel/runtime/helpers/typeof"),n=require("@babel/runtime/helpers/classCallCheck"),i=require("@babel/runtime/helpers/createClass"),o=require("@babel/runtime/helpers/inherits"),a=require("@babel/runtime/helpers/possibleConstructorReturn"),s=require("@babel/runtime/helpers/getPrototypeOf"),l=require("@babel/runtime/helpers/defineProperty"),u=require("@babel/runtime/regenerator"),p=require("react"),c=require("./pop-a6252bea.js"),h=require("@babel/runtime/helpers/extends"),f=require("@babel/runtime/helpers/objectWithoutProperties"),d=require("@babel/runtime/helpers/get");function v(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("@babel/runtime/helpers/toConsumableArray");var y=v(e),m=v(t),b=v(r),g=v(n),w=v(i),k=v(o),O=v(a),E=v(s),L=v(l),x=v(u),j=v(p),P=v(h),A=v(f),C=v(d);function S(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function D(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?S(Object(r),!0).forEach((function(t){L.default(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):S(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function M(e){var t=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var r,n=E.default(e);if(t){var i=E.default(this).constructor;r=Reflect.construct(n,arguments,i)}else r=n.apply(this,arguments);return O.default(this,r)}}var R=function(e){k.default(f,e);var t,r,n,i,o,a,s,l,u,h=M(f);function f(e){var t;for(var r in g.default(this,f),(t=h.call(this,e)).hover=!1,t.hasFocus=!1,t.inView=!1,t.scrollDelta=0,t.viewportMargin=e.viewportMargin,t.elements=[],t.animations={default:t.toAnimation(t.props.animate)},t.props.animations)t.animations[r]=t.toAnimation(t.props.animations[r]);return t.level=0,t.children=[],t}return w.default(f,[{key:"toAnimation",value:function(e){return!e||"object"!==b.default(e)&&"function"!=typeof e?null:"use"in e?e.use():new c.Animation(D({},e),this.props.initial)}},{key:"countNestedLevels",value:function(e){var t=this;if(!e)return 0;var r=0,n=0;return p.Children.forEach(e,(function(e){var i;if(p.isValidElement(e)){e.type===f&&(r=1);var o=t.countNestedLevels(null===(i=e.props)||void 0===i?void 0:i.children);n=n<o?o:n}})),n+r}},{key:"componentDidMount",value:function(){var e=this;this.elements.forEach((function(t){var r;null===(r=e.animations.default)||void 0===r||r.setInitial(t,!0)})),(this.props.parentLevel<1||this.props.noCascade)&&(this.scrollEventListener=this.onScroll.bind(this),c.addEventListener("scroll",this.scrollEventListener),this.props.onMount&&this.play(this.props.onMount,{staggerDelay:.001,immediate:!0}),this.props.whileViewport&&this.onScroll()),this.resizeEventListener=this.onResize.bind(this),c.addEventListener("resize",this.resizeEventListener)}},{key:"componentWillUnmount",value:function(){c.removeEventListener("scroll",this.scrollEventListener),c.removeEventListener("resize",this.resizeEventListener),this.props.onUnmount&&(this.props.parentLevel<1||this.props.noCascade)&&this.play(this.props.onUnmount,{reverse:!0,immediate:!0})}},{key:"inViewport",value:function(){var e=this,t=!0,r=!0;return this.elements.forEach((function(n){var i=n.getBoundingClientRect().y;t=t&&i+n.clientHeight*(1-e.viewportMargin)<window.innerHeight,r=r&&i>window.innerHeight+n.clientHeight*e.viewportMargin})),this.elements.length||this.children.forEach((function(e){var n=e.animatable.inViewport(),i=m.default(n,2),o=i[0],a=i[1];t=t&&o,r=r&&a})),[t,r]}},{key:"onScroll",value:(u=y.default(x.default.mark((function e(){var t,r,n,i;return x.default.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:if(!(Date.now()-this.scrollDelta<350)){e.next=2;break}return e.abrupt("return");case 2:this.scrollDelta=Date.now(),t=this.inViewport(),r=m.default(t,2),n=r[0],i=r[1],!this.inView&&n&&(this.inView=!0,this.props.whileViewport&&this.play(this.props.whileViewport)),this.inView&&i&&(this.inView=!1,this.props.whileViewport&&this.play(this.props.whileViewport,{reverse:!0,immediate:!0}));case 6:case"end":return e.stop()}}),e,this)}))),function(){return u.apply(this,arguments)})},{key:"onResize",value:(l=y.default(x.default.mark((function e(){return x.default.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:case"end":return e.stop()}}),e)}))),function(){return l.apply(this,arguments)})},{key:"onEnter",value:(s=y.default(x.default.mark((function e(t){var r,n=arguments;return x.default.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:r=n.length>1&&void 0!==n[1]&&n[1],this.hover||(this.props.whileHover&&this.play(this.props.whileHover),this.hover=!0),r&&r(t);case 3:case"end":return e.stop()}}),e,this)}))),function(e){return s.apply(this,arguments)})},{key:"onLeave",value:(a=y.default(x.default.mark((function e(t){var r,n=arguments;return x.default.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:r=n.length>1&&void 0!==n[1]&&n[1],this.hover&&(this.props.whileHover&&this.play(this.props.whileHover,{reverse:!0}),this.hover=!1),r&&r(t);case 3:case"end":return e.stop()}}),e,this)}))),function(e){return a.apply(this,arguments)})},{key:"onFocus",value:(o=y.default(x.default.mark((function e(t){var r,n=arguments;return x.default.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:r=n.length>1&&void 0!==n[1]&&n[1],this.hasFocus||(this.props.whileFocus&&this.play(this.props.whileFocus),this.hasFocus=!0),r&&r(t);case 3:case"end":return e.stop()}}),e,this)}))),function(e){return o.apply(this,arguments)})},{key:"onBlur",value:(i=y.default(x.default.mark((function e(t){var r,n=arguments;return x.default.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:r=n.length>1&&void 0!==n[1]&&n[1],this.hasFocus&&(this.props.whileFocus&&this.play(this.props.whileFocus,{reverse:!0}),this.hasFocus=!1),r&&r(t);case 3:case"end":return e.stop()}}),e,this)}))),function(e){return i.apply(this,arguments)})},{key:"onClick",value:(n=y.default(x.default.mark((function e(t){var r,n=arguments;return x.default.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:r=n.length>1&&void 0!==n[1]&&n[1],this.props.onClick&&this.play(this.props.onClick),r&&r(t);case 3:case"end":return e.stop()}}),e,this)}))),function(e){return n.apply(this,arguments)})},{key:"setInitial",value:(r=y.default(x.default.mark((function e(t){var r,n,i=arguments;return x.default.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:if(r=i.length>1&&void 0!==i[1]&&i[1],n="string"==typeof t?this.animations[t]:this.animations.default){e.next=4;break}return e.abrupt("return");case 4:this.elements.forEach((function(e){n.setInitial(e,r)})),this.children.forEach((function(e){var n=e.animatable;null==n||n.setInitial(t,r)}));case 6:case"end":return e.stop()}}),e,this)}))),function(e){return r.apply(this,arguments)})},{key:"play",value:(t=y.default(x.default.mark((function e(t){var r,n,i,o,a,s,l,u,p,h,f,d,v,y,m,b,g=this,w=arguments;return x.default.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:if(r=w.length>1&&void 0!==w[1]?w[1]:{},n=r.callback,i=r.reverse,o=void 0!==i&&i,a=r.immediate,s=void 0!==a&&a,l=r.cascade,u=void 0!==l&&l,p=r.groupAdjust,h=void 0===p?0:p,f=r.cascadeDelay,d=void 0===f?0:f,v=r.staggerDelay,y=void 0===v?0:v,!(this.props.parentLevel>0)||u){e.next=3;break}return e.abrupt("return");case 3:if(m="string"==typeof t?this.animations[t]:this.animations.default){e.next=6;break}return e.abrupt("return");case 6:b=0,this.elements.forEach((function(e,t){var r="group"in g.props?g.props.parentLevel-g.props.group:g.level+h;d=o?m.duration:d;var n=o?r*d:(g.props.parentLevel-r)*d;n=g.props.stagger*t+n+y,b=n>b?n:b,m.play(e,{delay:n,reverse:o,immediate:s})})),this.children.forEach((function(e){var r=e.animatable,n=e.staggerIndex,i=void 0===n?-1:n;null==r||r.play(t,{reverse:o,immediate:s,cascade:!0,staggerDelay:i<0?0:g.props.stagger*i,cascadeDelay:m.duration,groupAdjust:i<0?0:1})})),n&&c.AnimationQueue.delay(n,b+m.duration);case 10:case"end":return e.stop()}}),e,this)}))),function(e){return t.apply(this,arguments)})},{key:"mergeProperties",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},r=D(D({},t),e);for(var n in r)["children","parentLevel","ref"].includes(n)?delete r[n]:Array.isArray(e[n])||Array.isArray(t[n])||"object"===b.default(e[n])&&"object"===b.default(t[n])&&(r[n]=D(D({},t[n]),e[n]));return r}},{key:"deepClone",value:function(e){var t,r=this,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},i=n.index,o=void 0===i?0:i,a=n.useElements,s=void 0!==a&&a,l=n.useEvents,u=void 0!==l&&l;if(!p.isValidElement(e))return e;var c={};e.type===f||e.type.prototype instanceof f||(s&&(c={ref:function(e){return r.elements[o]=e}}),u&&(this.props.parentLevel<1||this.props.noCascade)&&(c=D(D({},c),{},{onMouseEnter:function(t){var n;return r.onEnter(t,null===(n=e.props)||void 0===n?void 0:n.onMouseEnter)},onMouseLeave:function(t){var n;return r.onLeave(t,null===(n=e.props)||void 0===n?void 0:n.onMouseLeave)},onFocus:function(t){var n;return r.onFocus(t,null===(n=e.props)||void 0===n?void 0:n.onFocus)},onBlur:function(t){var n;return r.onBlur(t,null===(n=e.props)||void 0===n?void 0:n.onBlur)},onClick:function(t){var n;return r.onClick(t,null===(n=e.props)||void 0===n?void 0:n.onClick)}}),u=!1)),!(e.type===f||e.type.prototype instanceof f)||null!==(t=e.props)&&void 0!==t&&t.noCascade||(c=D(D(D({},c),this.mergeProperties(e.props,this.props)),{},{parentLevel:this.parentLevel>0?this.parentLevel:this.level,ref:function(e){return r.children[r.childrenIndex++]={animatable:e,staggerIndex:s?o:-1}}}));var h=p.Children.map(e.props.children,(function(e,t){return r.deepClone(e,{index:t,useEvents:u})}));return p.cloneElement(e,c,h)}},{key:"render",value:function(){var e=this,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.props.children;return this.level=this.countNestedLevels(t),this.childrenIndex=0,p.Children.map(t,(function(t,r){return e.deepClone(t,{index:r,useElements:!0,useEvents:!0})}))}}]),f}(p.Component);L.default(R,"defaultProps",{parentLevel:0,stagger:.1,viewportMargin:.25,animate:{},animations:{}});var q=["levels","animations"];function I(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function V(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?I(Object(r),!0).forEach((function(t){L.default(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):I(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function F(e){var t=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var r,n=E.default(e);if(t){var i=E.default(this).constructor;r=Reflect.construct(n,arguments,i)}else r=n.apply(this,arguments);return O.default(this,r)}}var B=function(e){k.default(r,e);var t=F(r);function r(e){var n;return g.default(this,r),(n=t.call(this,e)).levels=n.props.levels,n.animations=new Array(n.levels).fill(0).map((function(e,t){return t<n.props.animations.length?n.props.animations[t]:n.props.animations[n.props.animations.length-1]})),n}return w.default(r,[{key:"makeAnimatable",value:function(e){var t=this,r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1;if(r<1||p.Children.count(e)<1)return e;var n=this.props;n.levels,n.animations;var i=A.default(n,q),o=this.animations[this.levels-r];return r===this.levels&&(i.ref=function(e){return t.animatable=e}),j.default.createElement(R,P.default({animate:o},i),p.Children.map(e,(function(e){return p.isValidElement(e)?p.cloneElement(e,{},t.makeAnimatable(e.props.children,r-1)):e})))}},{key:"play",value:function(e){var t,r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};null===(t=this.animatable)||void 0===t||t.play(e,V({},r))}},{key:"render",value:function(){return this.makeAnimatable(this.props.children,this.levels)}}]),r}(p.Component);function H(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function G(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?H(Object(r),!0).forEach((function(t){L.default(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):H(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function z(e,t){var r="undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(!r){if(Array.isArray(e)||(r=function(e,t){if(!e)return;if("string"==typeof e)return U(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);"Object"===r&&e.constructor&&(r=e.constructor.name);if("Map"===r||"Set"===r)return Array.from(e);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return U(e,t)}(e))||t&&e&&"number"==typeof e.length){r&&(e=r);var n=0,i=function(){};return{s:i,n:function(){return n>=e.length?{done:!0}:{done:!1,value:e[n++]}},e:function(e){throw e},f:i}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var o,a=!0,s=!1;return{s:function(){r=r.call(e)},n:function(){var e=r.next();return a=e.done,e},e:function(e){s=!0,o=e},f:function(){try{a||null==r.return||r.return()}finally{if(s)throw o}}}}function U(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}function K(e){var t=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var r,n=E.default(e);if(t){var i=E.default(this).constructor;r=Reflect.construct(n,arguments,i)}else r=n.apply(this,arguments);return O.default(this,r)}}L.default(B,"defaultProps",{levels:1,stagger:.1,viewportMargin:.25,animations:[c.Move,c.Pop]});var T=function(e){k.default(i,e);var t,r,n=K(i);function i(e){var t;return g.default(this,i),(t=n.call(this,e)).group=t.props.parentGroup+t.props.group,t.state={useContainer:!1,childStyles:{},parentStyles:{position:"relative",background:"transparent",border:"none",pointerEvents:"none",backdropFilter:"none"}},t}return w.default(i,[{key:"setUniqueId",value:function(){if(!this.props.parentGroup.length){"Lively"in window||(window.Lively={}),"Morph"in window.Lively||(window.Lively.Morph={}),this.group in window.Lively.Morph||(window.Lively.Morph[this.group]=0),this.id=window.Lively.Morph[this.group]++,this.element.setAttribute("lively-morph-id",this.id);var e,t=z(this.children);try{for(t.s();!(e=t.n()).done;){var r=e.value.animatable;r&&(r.id=this.id),null==r||r.element.setAttribute("lively-morph-id",this.id)}}catch(e){t.e(e)}finally{t.f()}}}},{key:"reset",value:function(){this.element=this.elements[0],this.setUniqueId(),c.cacheElementStyles(this.element),this.animations={},this.animations.default=this.createResetAnimation(),this.props.active||this.props.parentGroup.length||this.setInitial()}},{key:"componentDidMount",value:(r=y.default(x.default.mark((function e(){var t,r;return x.default.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:if(this.element=this.elements[0],this.element){e.next=3;break}return e.abrupt("return");case 3:this.props.useLayout&&(t=getComputedStyle(this.element),"absolute"===(r=t.position)||"fixed"===r?this.setState({childStyles:{top:this.element.offsetTop,left:this.element.offsetLeft}}):this.setState({childStyles:{position:"absolute",margin:0,top:0,left:0,pointerEvents:"initial"},parentStyles:G({width:this.element.offsetWidth,height:this.element.offsetHeight},this.state.parentStyles),useContainer:!0})),this.reset();case 5:case"end":return e.stop()}}),e,this)}))),function(){return r.apply(this,arguments)})},{key:"componentDidUpdate",value:(t=y.default(x.default.mark((function e(t,r){var n,i;return x.default.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:if(r.useContainer!==this.state.useContainer&&this.reset(),t.active!==this.props.active){e.next=3;break}return e.abrupt("return");case 3:return this.props.active&&this.element.setAttribute("lively-morph-target",!0),e.next=6,c.AnimationQueue.sleep(.001);case 6:this.props.active?this.play("default"):(n=document.querySelector('[lively-morph-group="'.concat(this.group,'"][lively-morph-target="true"]')))&&(n.removeAttribute("lively-morph-target"),(i=n.getAttribute("lively-morph-id"))in this.animations||this.createAnimation(i),this.play(i));case 7:case"end":return e.stop()}}),e,this)}))),function(e,r){return t.apply(this,arguments)})},{key:"createAnimation",value:function(e){var t=document.querySelector('[lively-morph-group="'.concat(this.group,'"][lively-morph-id="').concat(e,'"]'));t&&(this.animations[e]=this.createMorphAnimation(t),this.children.forEach((function(t){var r=t.animatable;return null==r?void 0:r.createAnimation(e)})))}},{key:"getParentPosition",value:function(e){var t,r=this.props.useLayout&&this.state.useContainer?null===(t=e.parentElement)||void 0===t?void 0:t.parentElement:e.parentElement;return(null==r?void 0:r.getBoundingClientRect())||{x:0,y:0}}},{key:"positionKeyframes",value:function(e){var t,r,n=null===(t=this.element.Lively)||void 0===t?void 0:t.initials,i=null===(r=e.Lively)||void 0===r?void 0:r.initials,o=i.x-n.x,a=i.y-n.y;if(this.props.parentGroup.length){var s=this.getParentPosition(this.element),l=this.getParentPosition(e);o-=l.x-s.x,a-=l.y-s.y}return this.props.useLayout||(o+=(i.width-n.width)/2,a+=(i.height-n.height)/2),[{x:0,y:0},{x:o,y:a},{x:o,y:a}]}},{key:"scaleKeyframes",value:function(e,t){var r=parseInt(t.width)/parseInt(e.width),n=parseInt(t.height)/parseInt(e.height);return[{x:1,y:1},{x:r,y:n},{x:r,y:n}]}},{key:"createMorphAnimation",value:function(e){var t,r,n,o=null===(t=this.element.Lively)||void 0===t?void 0:t.initials,a=null===(r=e.Lively)||void 0===r?void 0:r.initials,s={useLayout:this.props.useLayout,interpolate:this.props.interpolate},l=z(i.properties);try{for(l.s();!(n=l.n()).done;){var u=n.value;if(!this.props.ignore.includes(u))switch(u){case"position":s[u]=this.positionKeyframes(e);break;case"scale":s[u]=this.scaleKeyframes(o,a);break;case"opacity":s[u]=[1,1,0];break;case"interact":s[u]=[!0,!0,!1];break;default:s[u]=[o[u],a[u],a[u]]}}}catch(e){l.e(e)}finally{l.f()}return new c.Animation(s)}},{key:"createResetAnimation",value:function(){var e,t,r=null===(e=this.element.Lively)||void 0===e?void 0:e.initials,n={useLayout:this.props.useLayout,interpolate:this.props.interpolate},o=z(i.properties);try{for(o.s();!(t=o.n()).done;){var a=t.value;if(!this.props.ignore.includes(a))switch(a){case"position":n[a]={x:0,y:0};break;case"scale":n[a]={x:1,y:1};break;case"opacity":n[a]=[0,0,1];break;case"interact":n[a]=[!1,!1,!0];break;default:n[a]=[r[a],r[a],r[a]]}}}catch(e){o.e(e)}finally{o.f()}return new c.Animation(n)}},{key:"getChildren",value:function(e){var t=this;return p.Children.map(e,(function(e){if(!p.isValidElement(e))return e;var r=e.type!==i?{}:{parentGroup:t.props.parentGroup+t.props.group};return p.cloneElement(e,r,t.getChildren(e.props.children))}))}},{key:"render",value:function(){var e,t=null!==(e=this.props.children)&&void 0!==e&&e.length?this.props.children[0]:this.props.children;if(!p.isValidElement(t))return t;var r=this.getChildren(t.props.children),n={"lively-morph-group":this.group,style:this.state.childStyles},o=C.default(E.default(i.prototype),"render",this).call(this,p.cloneElement(t,n,r));return this.state.useContainer?p.cloneElement(t,{style:this.state.parentStyles},o):o}}]),i}(R);L.default(T,"properties",["position","scale","opacity","backgroundColor","color","borderRadius","interact"]),L.default(T,"defaultProps",{id:null,group:0,parentGroup:"",active:!1,useLayout:!1,interpolate:"ease",ignore:[]}),exports.Animatable=R,exports.Animate=B,exports.Morph=T;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";var e=require("@babel/runtime/helpers/defineProperty"),t=require("@babel/runtime/helpers/objectWithoutProperties"),i=require("@babel/runtime/helpers/asyncToGenerator"),n=require("@babel/runtime/helpers/slicedToArray"),r=require("@babel/runtime/helpers/toConsumableArray"),a=require("@babel/runtime/helpers/typeof"),o=require("@babel/runtime/helpers/classCallCheck"),s=require("@babel/runtime/helpers/createClass"),l=require("@babel/runtime/regenerator");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=c(e),d=c(t),f=c(i),p=c(n),y=c(r),v=c(a),h=c(o),g=c(s),b=c(l),m=function(){function e(){h.default(this,e),this.queue=[],this.tick()}var t,i;return g.default(e,[{key:"tick",value:(i=f.default(b.default.mark((function e(){var t,i;return b.default.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:t=Date.now(),i=0;case 2:if(!(i<this.queue.length+1)){e.next=10;break}if(!(this.queue.length===i||this.queue[i].timestamp>t)){e.next=6;break}return this.queue.splice(0,i),e.abrupt("break",10);case 6:this.queue[i].callback();case 7:i++,e.next=2;break;case 10:requestAnimationFrame(this.tick.bind(this));case 11:case"end":return e.stop()}}),e,this)}))),function(){return i.apply(this,arguments)})},{key:"search",value:function(e){for(var t,i,n=0,r=this.queue.length-1;n<=r;)if(t=n+r>>>1,(i=this.queue[t].timestamp-e.timestamp)<0)n=t+1;else{if(!(i>0))return t;r=t-1}return n}},{key:"insert",value:function(e){var t=this.search(e);this.queue.splice(t,0,e)}},{key:"delay",value:function(e,t){e instanceof Function&&this.insert({callback:e,timestamp:Date.now()+1e3*t})}}],[{key:"get",value:function(){return"Lively"in window||(window.Lively={}),"AnimationLoop"in window.Lively||(window.Lively.AnimationQueue=new e),window.Lively.AnimationQueue}},{key:"delay",value:(t=f.default(b.default.mark((function e(t,i){return b.default.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return e.abrupt("return",this.get().delay(t,i));case 1:case"end":return e.stop()}}),e,this)}))),function(e,i){return t.apply(this,arguments)})},{key:"sleep",value:function(){var e=this,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1;return new Promise((function(i){e.delay(i,t)}))}}]),e}(),k=function(e){var t=e.match(/^#([\da-f]{1,2})([\da-f]{1,2})([\da-f]{1,2})([\da-f]{2})?/i),i=p.default(t,5);i[0];var n=i[1],r=i[2],a=i[3],o=i[4];return{r:parseInt(n.padStart(2,n),16),g:parseInt(r.padStart(2,r),16),b:parseInt(a.padStart(2,a),16),a:void 0!==o?parseInt(o,16):255}},w=function(e){var t=e.match(/^rgba?\((\d+)\D+(\d+)\D+(\d+)\D*(\d+)?\)/i),i=p.default(t,5);i[0];var n=i[1],r=i[2],a=i[3],o=i[4];return{r:parseInt(n),g:parseInt(r),b:parseInt(a),a:void 0!==o?parseInt(o):255}},x=function(e){"Lively"in e||(e.Lively={queue:[],initials:{}}),e.Lively.style||(e.Lively.style=function(e){for(var t={},i=0;i<e.style.length;i++)t[e.style[i]]=e.style[e.style[i]];return t}(e),e.Lively.style.transitionProperty="transform, opacity, clip-path, border-radius, background-color, color, width, height, left, top",e.Lively.style.willChange="transform"),e.style={},function(e,t){for(var i in t)e.style[i]=t[i]}(e,e.Lively.style);var t=getComputedStyle(e),i=t.paddingLeft,n=t.paddingRight,r=t.paddingTop,a=t.paddingBottom,o=t.borderRadius,s=t.boxSizing,l=t.backgroundColor,c=t.color,u=e.getBoundingClientRect(),d=u.x,f=u.y;e.Lively.initials={x:d,y:f,includePadding:"border-box"===s,width:e.offsetWidth+"px",height:e.offsetHeight+"px",paddingLeft:parseInt(i),paddingRight:parseInt(n),paddingTop:parseInt(r),paddingBottom:parseInt(a),borderRadius:parseInt(o.split(" ")[0]),backgroundColor:l,color:c}},L=["delay","duration","repeat","interpolate","origin","useLayout"],O=function(){function e(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},i=t.delay,n=void 0===i?0:i,r=t.duration,a=void 0===r?1:r,o=t.repeat,s=void 0===o?1:o,l=t.interpolate,c=void 0===l?"ease":l,u=t.origin,f=void 0===u?{x:.5,y:.5}:u,p=t.useLayout,y=void 0!==p&&p,v=d.default(t,L),g=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};h.default(this,e),this.useLayout=y,this.keyframes=this.getKeyframes(v,g),this.delay=n,this.duration=a,this.delta=a/(this.keyframes.length-1),this.interpolation="spring"===c?"cubic-bezier(0.65, 0.34, 0.7, 1.42)":c,this.origin=this.originToStyle(f),this.repeat=s}var t;return g.default(e,[{key:"originToStyle",value:function(e){var t=.5,i=.5;if("object"===v.default(e))t=e.x,i=e.y;else if("string"==typeof e)switch(e){case"left":t=0;break;case"right":t=1;break;case"top":i=0;break;case"bottom":i=1}else t=i=e;return"".concat(100*t,"% ").concat(100*i,"%")}},{key:"getKeyframes",value:function(t){var i=this,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},r=0,a=function(a){var o=a in n?n[a]:e.initials[a];Array.isArray(t[a])||(t[a]=[t[a]]),t[a]=t[a].length>1?t[a]:[o].concat(y.default(t[a])),t[a]=t[a].map((function(e){return i.sanitize(a,e)})),r=t[a].length>r?t[a].length:r};for(var o in t)a(o);return new Array(r).fill(0).map((function(n,a){var o={};for(var s in t)s in e.initials&&(o[s]=i.interpolateKeyframe(t[s],a,r));return i.keyframeToStyle(o)}))}},{key:"sanitize",value:function(t,i){var n=this,r=arguments.length>2&&void 0!==arguments[2]&&arguments[2];if("string"==typeof i){if(i.match(/^#[0-9a-f]{3,8}$/i))return k(i);if(i.match(/^rgba?\(.*\)$/i))return w(i);var a=parseFloat(i),o=i.match(/[^0-9\.]*$/i);return isNaN(a)?e.initials[t]:("%"===o&&(a/=100),o?[a,o]:a)}if("object"===v.default(i)){var s=Object.keys(i);("x"in i||"y"in i)&&(s=["x","y"]),("r"in i||"g"in i||"b"in i||"a"in i)&&(s=["r","g","b","a"]),("left"in i||"right"in i||"top"in i||"bottom"in i)&&(s=["left","right","top","bottom"]),s.forEach((function(e){i[e]=n.sanitize(t,i[e],e)}))}return void 0!==i?i:r?e.initials[t][r]:e.initials[t]}},{key:"interpolate",value:function(e,t,i){if("number"!=typeof e||"number"!=typeof t)return i>.5?t:e;var n=!1;Array.isArray(e)&&(n=e[1],e=e[0]),Array.isArray(t)&&(n=t[1],t=t[0]);var r=e*(1-i)+t*i;return n?[r,n]:r}},{key:"interpolateKeyframe",value:function(e,t,i){var n=this;if(e.length===i)return e[t];var r=t*((e.length-1)/(i-1)),a=Math.floor(r),o=e[a];if(a===e.length-1)return o;var s=e[a+1];if("object"===v.default(o)){var l={};return Object.keys(o).forEach((function(e){l[e]=n.interpolate(o[e],s[e],r-a)})),l}return this.interpolate(o,s,r-a)}},{key:"toString",value:function(e,t){return Array.isArray(e)&&(t=e[1],e=e[0]),e*("%"===t?100:1)+t}},{key:"toLength",value:function(e){return Array.isArray(e)&&(e="px"===e[1]?e[0]+"px":e[0]),e}},{key:"keyframeToStyle",value:function(e){var t=this,i={transform:""};return Object.entries(e).forEach((function(e){var n=p.default(e,2),r=n[0],a=n[1];switch(r){case"position":i.transform+="translate(".concat(t.toString(a.x,"px"),", ").concat(t.toString(a.y,"px"),") ");break;case"scale":if("number"==typeof a&&(a={x:a,y:a}),t.useLayout){i.width=t.toLength(a.x),i.height=t.toLength(a.y);break}i.transform+="scale(".concat(t.toString(a.x,"%"),", ").concat(t.toString(a.y,"%"),") ");break;case"rotation":i.transform+="rotate(".concat((t.toString(a),"deg"),") ");break;case"clip":i.clipPath="inset(".concat(t.toString(a.top,"%")," ").concat(t.toString(a.right,"%")," ").concat(t.toString(a.bottom,"%")," ").concat(t.toString(a.left,"%"),")");break;case"borderRadius":case"padding":case"fontSize":i[r]=t.toString(a,"px");break;case"backgroundColor":case"color":i[r]="rgba(".concat(a.r,", ").concat(a.g,", ").concat(a.b,", ").concat(a.a,")");break;case"interact":i.pointerEvents=a?"all":"none";break;case"opacity":case"active":i[r]=a}})),i.transform.length||delete i.transform,i}},{key:"setInitial",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1];t&&x(e),e.style.transitionDuration="0s",e.style.transitionTimingFunction=this.interpolation,e.style.transformOrigin=this.origin;var i=this.keyframes[0];this.apply(e,i,!0)}},{key:"setLength",value:function(e,t,i,n,r){var a=e.Lively.initials[i],o=e.Lively.initials[n],s=e.Lively.initials[r],l=t[i],c=t.padding?1:o/s;"string"==typeof l&&(l="calc(".concat(l," / ").concat(a,")"));var u=t.padding?t.padding:o+s+"px";e.style[i]="max(calc(".concat(a," * ").concat(l," - ").concat("border-box"!==e.style.boxSizing?"0px":u,"), 0px)");var d="calc(min(calc(".concat(a," * ").concat(l,"), ").concat(u,") * ");e.style[n]=d+.5*c,e.style[r]=d+1/c*.5}},{key:"apply",value:(t=f.default(b.default.mark((function e(t,i){var n,r,a=this,o=arguments;return b.default.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:if(n=o.length>2&&void 0!==o[2]&&o[2],!("active"in i)){e.next=11;break}if("start"!==(r=Object.keys(i.active)[0])&&!n){e.next=10;break}if(t.style.display=i.active[r]?"":"none",n){e.next=8;break}return e.next=8,m.sleep(.001);case 8:e.next=11;break;case 10:m.delay((function(){t.style.display=i.active[r]?"":"none"}),this.delta);case 11:Object.entries(i).forEach((function(e){var n=p.default(e,2),r=n[0],o=n[1];return"width"===r?a.setLength(t,i,"width","paddingLeft","paddingRight"):"height"===r?a.setLength(t,i,"height","paddingTop","paddingBottom"):void("active"===r||"padding"===r&&(i.width||i.height)||(t.style[r]=o))}));case 12:case"end":return e.stop()}}),e,this)}))),function(e,i){return t.apply(this,arguments)})},{key:"start",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},i=t.immediate,n=void 0!==i&&i,r=t.reverse,a=void 0!==r&&r,o=t.repeat,s=void 0===o?this.repeat:o;!e.Lively.animating||n?(this.setInitial(e),e.style.transitionDuration="".concat(this.delta,"s"),e.Lively.animating=!0,e.Lively.index=1,this.getNext(e,a,s)):e.Lively.queue.push([this,{reverse:a,repeat:s}])}},{key:"play",value:function(e){var t=this,i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=i.delay,r=void 0===n?0:n,a=i.immediate,o=void 0!==a&&a,s=i.reverse,l=void 0!==s&&s;e.style&&(this.delay||r?m.delay((function(){return t.start(e,{immediate:o,reverse:l})}),this.delay+r):this.start(e,{immediate:o,reverse:l}))}},{key:"getNext",value:function(e){var t=this,i=arguments.length>1&&void 0!==arguments[1]&&arguments[1],n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:1;if(e.Lively.index===this.keyframes.length){e.Lively.animating=!1;var r=e.Lively.queue.shift()||[],a=p.default(r,2),o=a[0],s=a[1];return o?o.start(e,s):void(n>1&&this.start(e,{reverse:i,repeat:n-1}))}var l=e.Lively.index;i&&(l=this.keyframes.length-1-l),requestAnimationFrame((function(){t.apply(e,t.keyframes[l])})),e.Lively.index++,m.delay((function(){return t.getNext(e,i,n)}),this.delta)}}]),e}();u.default(O,"initials",{opacity:1,scale:{x:1,y:1},position:{x:0,y:0},clip:{left:0,top:0,right:0,bottom:0},borderRadius:0,padding:0,fontSize:"1em",backgroundColor:{r:127,g:127,b:127,a:255},color:{r:127,g:127,b:127,a:255},active:{start:!0},interact:!0});var j=["direction"];function S(e,t){var i=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),i.push.apply(i,n)}return i}function q(e){for(var t=1;t<arguments.length;t++){var i=null!=arguments[t]?arguments[t]:{};t%2?S(Object(i),!0).forEach((function(t){u.default(e,t,i[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(i)):S(Object(i)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(i,t))}))}return e}function P(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return P.use=P.use.bind(P,e),P}function E(e,t){var i=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),i.push.apply(i,n)}return i}function A(e){for(var t=1;t<arguments.length;t++){var i=null!=arguments[t]?arguments[t]:{};t%2?E(Object(i),!0).forEach((function(t){u.default(e,t,i[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(i)):E(Object(i)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(i,t))}))}return e}function D(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return D.use=D.use.bind(D,e),D}P.use=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=e.direction,i=void 0===t?"up":t,n=d.default(e,j),r="0px",a="20px";switch(i){case"down":a="-20px";break;case"left":r="20px",a="0px";break;case"right":r="-20px",a="0px"}return new O(q({position:{x:"0px",y:"0px"},opacity:1,duration:.5},n),{position:{x:r,y:a},opacity:0})},D.use=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return new O(A({opacity:1,scale:1,duration:.25},e),{opacity:0,scale:.85})},exports.Animation=O,exports.AnimationQueue=m,exports.Move=P,exports.Pop=D,exports.addEventListener=function(e,t){var i;if(t instanceof Function){null!==(i=window.Lively)&&void 0!==i&&i.Events||(window.Lively={Events:{}}),e in window.Lively.Events||(window.Lively.Events[e]={unique:0},window.addEventListener(e,(function(t){Object.values(window.Lively.Events[e]).forEach((function(e){e instanceof Function&&e(t)}))})));var n=window.Lively.Events[e];t.Lively={ListenerID:n.unique},n[n.unique++]=t}},exports.cacheElementStyles=x,exports.removeEventListener=function(e,t){var i,n,r;"undefined"!=typeof window&&null!==(i=window.Lively)&&void 0!==i&&null!==(n=i.Events)&&void 0!==n&&n[e]&&null!=t&&null!==(r=t.Lively)&&void 0!==r&&r.ListenerID&&delete window.Lively.Events[e][t.Lively.ListenerID]};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import e from"@babel/runtime/helpers/defineProperty";import{A as r}from"./pop-fc3e182f.js";export{M as Move,P as Pop}from"./pop-fc3e182f.js";import t from"@babel/runtime/helpers/objectWithoutProperties";import"@babel/runtime/helpers/asyncToGenerator";import"@babel/runtime/helpers/slicedToArray";import"@babel/runtime/helpers/toConsumableArray";import"@babel/runtime/helpers/typeof";import"@babel/runtime/helpers/classCallCheck";import"@babel/runtime/helpers/createClass";import"@babel/runtime/regenerator";function n(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);r&&(n=n.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,n)}return t}function o(r){for(var t=1;t<arguments.length;t++){var o=null!=arguments[t]?arguments[t]:{};t%2?n(Object(o),!0).forEach((function(t){e(r,t,o[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(r,Object.getOwnPropertyDescriptors(o)):n(Object(o)).forEach((function(e){Object.defineProperty(r,e,Object.getOwnPropertyDescriptor(o,e))}))}return r}function i(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return i.use=i.use.bind(i,e),i}i.use=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return new r(o({opacity:1,duration:.65},e),{opacity:0})};var c=["direction"];function p(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);r&&(n=n.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,n)}return t}function s(r){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?p(Object(n),!0).forEach((function(t){e(r,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(r,Object.getOwnPropertyDescriptors(n)):p(Object(n)).forEach((function(e){Object.defineProperty(r,e,Object.getOwnPropertyDescriptor(n,e))}))}return r}function u(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return u.use=u.use.bind(u,e),u}u.use=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e.direction,o=void 0===n?"right":n,i=t(e,c),p=0,u=1,b={x:0,y:.5};switch(o){case"left":b.x=1;break;case"up":p=1,u=0,b={x:0,y:1};break;case"down":p=1,u=0,b={x:0,y:0}}return new r(s({scale:{x:1},origin:b,duration:.6},i),{scale:{x:p,y:u}})};var b=["direction"];function a(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);r&&(n=n.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,n)}return t}function l(r){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?a(Object(n),!0).forEach((function(t){e(r,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(r,Object.getOwnPropertyDescriptors(n)):a(Object(n)).forEach((function(e){Object.defineProperty(r,e,Object.getOwnPropertyDescriptor(n,e))}))}return r}function f(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return f.use=f.use.bind(f,e),f}f.use=function(){var n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},o=n.direction,i=void 0===o?"right":o,c=t(n,b);return["left","right","top","bottom"].includes(i)||(i="right"),new r(l({clip:e({},i,0)},c),{clip:e({},i,1)})};export{i as Fade,u as Scale,f as Wipe};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import r from"@babel/runtime/helpers/slicedToArray";import{useState as e,useRef as n,useEffect as t}from"react";function o(o){var c=e(o),u=r(c,2),a=u[0],i=u[1],p=n();return t((function(){o&&i(!0),!o&&p.current&&p.current.play(p.current.props.onUnmount,{reverse:!0,callback:function(){i(!1)}})}),[o]),[a,p]}export{o as useUnmount};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import e from"@babel/runtime/helpers/asyncToGenerator";import t from"@babel/runtime/helpers/slicedToArray";import r from"@babel/runtime/helpers/typeof";import n from"@babel/runtime/helpers/classCallCheck";import i from"@babel/runtime/helpers/createClass";import o from"@babel/runtime/helpers/inherits";import s from"@babel/runtime/helpers/possibleConstructorReturn";import a from"@babel/runtime/helpers/getPrototypeOf";import l from"@babel/runtime/helpers/defineProperty";import u from"@babel/runtime/regenerator";import p,{Children as c,isValidElement as h,cloneElement as f,Component as v}from"react";import{A as y,a as d,r as m,b,M as g,P as w,c as k}from"./pop-fc3e182f.js";import O from"@babel/runtime/helpers/extends";import x from"@babel/runtime/helpers/objectWithoutProperties";import L from"@babel/runtime/helpers/get";import"@babel/runtime/helpers/toConsumableArray";function j(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function P(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?j(Object(r),!0).forEach((function(t){l(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):j(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function E(e){var t=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var r,n=a(e);if(t){var i=a(this).constructor;r=Reflect.construct(n,arguments,i)}else r=n.apply(this,arguments);return s(this,r)}}var A=function(s){o(A,v);var a,l,p,g,w,k,O,x,L,j=E(A);function A(e){var t;for(var r in n(this,A),(t=j.call(this,e)).hover=!1,t.hasFocus=!1,t.inView=!1,t.scrollDelta=0,t.viewportMargin=e.viewportMargin,t.elements=[],t.animations={default:t.toAnimation(t.props.animate)},t.props.animations)t.animations[r]=t.toAnimation(t.props.animations[r]);return t.level=0,t.children=[],t}return i(A,[{key:"toAnimation",value:function(e){return!e||"object"!==r(e)&&"function"!=typeof e?null:"use"in e?e.use():new y(P({},e),this.props.initial)}},{key:"countNestedLevels",value:function(e){var t=this;if(!e)return 0;var r=0,n=0;return c.forEach(e,(function(e){var i;if(h(e)){e.type===A&&(r=1);var o=t.countNestedLevels(null===(i=e.props)||void 0===i?void 0:i.children);n=n<o?o:n}})),n+r}},{key:"componentDidMount",value:function(){var e=this;this.elements.forEach((function(t){var r;null===(r=e.animations.default)||void 0===r||r.setInitial(t,!0)})),(this.props.parentLevel<1||this.props.noCascade)&&(this.scrollEventListener=this.onScroll.bind(this),d("scroll",this.scrollEventListener),this.props.onMount&&this.play(this.props.onMount,{staggerDelay:.001,immediate:!0}),this.props.whileViewport&&this.onScroll()),this.resizeEventListener=this.onResize.bind(this),d("resize",this.resizeEventListener)}},{key:"componentWillUnmount",value:function(){m("scroll",this.scrollEventListener),m("resize",this.resizeEventListener),this.props.onUnmount&&(this.props.parentLevel<1||this.props.noCascade)&&this.play(this.props.onUnmount,{reverse:!0,immediate:!0})}},{key:"inViewport",value:function(){var e=this,r=!0,n=!0;return this.elements.forEach((function(t){var i=t.getBoundingClientRect().y;r=r&&i+t.clientHeight*(1-e.viewportMargin)<window.innerHeight,n=n&&i>window.innerHeight+t.clientHeight*e.viewportMargin})),this.elements.length||this.children.forEach((function(e){var i=e.animatable.inViewport(),o=t(i,2),s=o[0],a=o[1];r=r&&s,n=n&&a})),[r,n]}},{key:"onScroll",value:(L=e(u.mark((function e(){var r,n,i,o;return u.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:if(!(Date.now()-this.scrollDelta<350)){e.next=2;break}return e.abrupt("return");case 2:this.scrollDelta=Date.now(),r=this.inViewport(),n=t(r,2),i=n[0],o=n[1],!this.inView&&i&&(this.inView=!0,this.props.whileViewport&&this.play(this.props.whileViewport)),this.inView&&o&&(this.inView=!1,this.props.whileViewport&&this.play(this.props.whileViewport,{reverse:!0,immediate:!0}));case 6:case"end":return e.stop()}}),e,this)}))),function(){return L.apply(this,arguments)})},{key:"onResize",value:(x=e(u.mark((function e(){return u.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:case"end":return e.stop()}}),e)}))),function(){return x.apply(this,arguments)})},{key:"onEnter",value:(O=e(u.mark((function e(t){var r,n=arguments;return u.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:r=n.length>1&&void 0!==n[1]&&n[1],this.hover||(this.props.whileHover&&this.play(this.props.whileHover),this.hover=!0),r&&r(t);case 3:case"end":return e.stop()}}),e,this)}))),function(e){return O.apply(this,arguments)})},{key:"onLeave",value:(k=e(u.mark((function e(t){var r,n=arguments;return u.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:r=n.length>1&&void 0!==n[1]&&n[1],this.hover&&(this.props.whileHover&&this.play(this.props.whileHover,{reverse:!0}),this.hover=!1),r&&r(t);case 3:case"end":return e.stop()}}),e,this)}))),function(e){return k.apply(this,arguments)})},{key:"onFocus",value:(w=e(u.mark((function e(t){var r,n=arguments;return u.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:r=n.length>1&&void 0!==n[1]&&n[1],this.hasFocus||(this.props.whileFocus&&this.play(this.props.whileFocus),this.hasFocus=!0),r&&r(t);case 3:case"end":return e.stop()}}),e,this)}))),function(e){return w.apply(this,arguments)})},{key:"onBlur",value:(g=e(u.mark((function e(t){var r,n=arguments;return u.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:r=n.length>1&&void 0!==n[1]&&n[1],this.hasFocus&&(this.props.whileFocus&&this.play(this.props.whileFocus,{reverse:!0}),this.hasFocus=!1),r&&r(t);case 3:case"end":return e.stop()}}),e,this)}))),function(e){return g.apply(this,arguments)})},{key:"onClick",value:(p=e(u.mark((function e(t){var r,n=arguments;return u.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:r=n.length>1&&void 0!==n[1]&&n[1],this.props.onClick&&this.play(this.props.onClick),r&&r(t);case 3:case"end":return e.stop()}}),e,this)}))),function(e){return p.apply(this,arguments)})},{key:"setInitial",value:(l=e(u.mark((function e(t){var r,n,i=arguments;return u.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:if(r=i.length>1&&void 0!==i[1]&&i[1],n="string"==typeof t?this.animations[t]:this.animations.default){e.next=4;break}return e.abrupt("return");case 4:this.elements.forEach((function(e){n.setInitial(e,r)})),this.children.forEach((function(e){var n=e.animatable;null==n||n.setInitial(t,r)}));case 6:case"end":return e.stop()}}),e,this)}))),function(e){return l.apply(this,arguments)})},{key:"play",value:(a=e(u.mark((function e(t){var r,n,i,o,s,a,l,p,c,h,f,v,y,d,m,g,w=this,k=arguments;return u.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:if(r=k.length>1&&void 0!==k[1]?k[1]:{},n=r.callback,i=r.reverse,o=void 0!==i&&i,s=r.immediate,a=void 0!==s&&s,l=r.cascade,p=void 0!==l&&l,c=r.groupAdjust,h=void 0===c?0:c,f=r.cascadeDelay,v=void 0===f?0:f,y=r.staggerDelay,d=void 0===y?0:y,!(this.props.parentLevel>0)||p){e.next=3;break}return e.abrupt("return");case 3:if(m="string"==typeof t?this.animations[t]:this.animations.default){e.next=6;break}return e.abrupt("return");case 6:g=0,this.elements.forEach((function(e,t){var r="group"in w.props?w.props.parentLevel-w.props.group:w.level+h;v=o?m.duration:v;var n=o?r*v:(w.props.parentLevel-r)*v;n=w.props.stagger*t+n+d,g=n>g?n:g,m.play(e,{delay:n,reverse:o,immediate:a})})),this.children.forEach((function(e){var r=e.animatable,n=e.staggerIndex,i=void 0===n?-1:n;null==r||r.play(t,{reverse:o,immediate:a,cascade:!0,staggerDelay:i<0?0:w.props.stagger*i,cascadeDelay:m.duration,groupAdjust:i<0?0:1})})),n&&b.delay(n,g+m.duration);case 10:case"end":return e.stop()}}),e,this)}))),function(e){return a.apply(this,arguments)})},{key:"mergeProperties",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=P(P({},t),e);for(var i in n)["children","parentLevel","ref"].includes(i)?delete n[i]:Array.isArray(e[i])||Array.isArray(t[i])||"object"===r(e[i])&&"object"===r(t[i])&&(n[i]=P(P({},t[i]),e[i]));return n}},{key:"deepClone",value:function(e){var t,r=this,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},i=n.index,o=void 0===i?0:i,s=n.useElements,a=void 0!==s&&s,l=n.useEvents,u=void 0!==l&&l;if(!h(e))return e;var p={};e.type===A||e.type.prototype instanceof A||(a&&(p={ref:function(e){return r.elements[o]=e}}),u&&(this.props.parentLevel<1||this.props.noCascade)&&(p=P(P({},p),{},{onMouseEnter:function(t){var n;return r.onEnter(t,null===(n=e.props)||void 0===n?void 0:n.onMouseEnter)},onMouseLeave:function(t){var n;return r.onLeave(t,null===(n=e.props)||void 0===n?void 0:n.onMouseLeave)},onFocus:function(t){var n;return r.onFocus(t,null===(n=e.props)||void 0===n?void 0:n.onFocus)},onBlur:function(t){var n;return r.onBlur(t,null===(n=e.props)||void 0===n?void 0:n.onBlur)},onClick:function(t){var n;return r.onClick(t,null===(n=e.props)||void 0===n?void 0:n.onClick)}}),u=!1)),!(e.type===A||e.type.prototype instanceof A)||null!==(t=e.props)&&void 0!==t&&t.noCascade||(p=P(P(P({},p),this.mergeProperties(e.props,this.props)),{},{parentLevel:this.parentLevel>0?this.parentLevel:this.level,ref:function(e){return r.children[r.childrenIndex++]={animatable:e,staggerIndex:a?o:-1}}}));var v=c.map(e.props.children,(function(e,t){return r.deepClone(e,{index:t,useEvents:u})}));return f(e,p,v)}},{key:"render",value:function(){var e=this,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.props.children;return this.level=this.countNestedLevels(t),this.childrenIndex=0,c.map(t,(function(t,r){return e.deepClone(t,{index:r,useElements:!0,useEvents:!0})}))}}]),A}();l(A,"defaultProps",{parentLevel:0,stagger:.1,viewportMargin:.25,animate:{},animations:{}});var C=["levels","animations"];function S(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function D(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?S(Object(r),!0).forEach((function(t){l(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):S(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function M(e){var t=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var r,n=a(e);if(t){var i=a(this).constructor;r=Reflect.construct(n,arguments,i)}else r=n.apply(this,arguments);return s(this,r)}}var R=function(e){o(r,v);var t=M(r);function r(e){var i;return n(this,r),(i=t.call(this,e)).levels=i.props.levels,i.animations=new Array(i.levels).fill(0).map((function(e,t){return t<i.props.animations.length?i.props.animations[t]:i.props.animations[i.props.animations.length-1]})),i}return i(r,[{key:"makeAnimatable",value:function(e){var t=this,r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1;if(r<1||c.count(e)<1)return e;var n=this.props;n.levels,n.animations;var i=x(n,C),o=this.animations[this.levels-r];return r===this.levels&&(i.ref=function(e){return t.animatable=e}),p.createElement(A,O({animate:o},i),c.map(e,(function(e){return h(e)?f(e,{},t.makeAnimatable(e.props.children,r-1)):e})))}},{key:"play",value:function(e){var t,r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};null===(t=this.animatable)||void 0===t||t.play(e,D({},r))}},{key:"render",value:function(){return this.makeAnimatable(this.props.children,this.levels)}}]),r}();function I(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function F(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?I(Object(r),!0).forEach((function(t){l(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):I(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function V(e,t){var r="undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(!r){if(Array.isArray(e)||(r=function(e,t){if(!e)return;if("string"==typeof e)return B(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);"Object"===r&&e.constructor&&(r=e.constructor.name);if("Map"===r||"Set"===r)return Array.from(e);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return B(e,t)}(e))||t&&e&&"number"==typeof e.length){r&&(e=r);var n=0,i=function(){};return{s:i,n:function(){return n>=e.length?{done:!0}:{done:!1,value:e[n++]}},e:function(e){throw e},f:i}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var o,s=!0,a=!1;return{s:function(){r=r.call(e)},n:function(){var e=r.next();return s=e.done,e},e:function(e){a=!0,o=e},f:function(){try{s||null==r.return||r.return()}finally{if(a)throw o}}}}function B(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}function H(e){var t=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var r,n=a(e);if(t){var i=a(this).constructor;r=Reflect.construct(n,arguments,i)}else r=n.apply(this,arguments);return s(this,r)}}l(R,"defaultProps",{levels:1,stagger:.1,viewportMargin:.25,animations:[g,w]});var G=function(t){o(p,A);var r,s,l=H(p);function p(e){var t;return n(this,p),(t=l.call(this,e)).group=t.props.parentGroup+t.props.group,t.state={useContainer:!1,childStyles:{},parentStyles:{position:"relative",background:"transparent",border:"none",pointerEvents:"none",backdropFilter:"none"}},t}return i(p,[{key:"setUniqueId",value:function(){if(!this.props.parentGroup.length){"Lively"in window||(window.Lively={}),"Morph"in window.Lively||(window.Lively.Morph={}),this.group in window.Lively.Morph||(window.Lively.Morph[this.group]=0),this.id=window.Lively.Morph[this.group]++,this.element.setAttribute("lively-morph-id",this.id);var e,t=V(this.children);try{for(t.s();!(e=t.n()).done;){var r=e.value.animatable;r&&(r.id=this.id),null==r||r.element.setAttribute("lively-morph-id",this.id)}}catch(e){t.e(e)}finally{t.f()}}}},{key:"reset",value:function(){this.element=this.elements[0],this.setUniqueId(),k(this.element),this.animations={},this.animations.default=this.createResetAnimation(),this.props.active||this.props.parentGroup.length||this.setInitial()}},{key:"componentDidMount",value:(s=e(u.mark((function e(){var t,r;return u.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:if(this.element=this.elements[0],this.element){e.next=3;break}return e.abrupt("return");case 3:this.props.useLayout&&(t=getComputedStyle(this.element),"absolute"===(r=t.position)||"fixed"===r?this.setState({childStyles:{top:this.element.offsetTop,left:this.element.offsetLeft}}):this.setState({childStyles:{position:"absolute",margin:0,top:0,left:0,pointerEvents:"initial"},parentStyles:F({width:this.element.offsetWidth,height:this.element.offsetHeight},this.state.parentStyles),useContainer:!0})),this.reset();case 5:case"end":return e.stop()}}),e,this)}))),function(){return s.apply(this,arguments)})},{key:"componentDidUpdate",value:(r=e(u.mark((function e(t,r){var n,i;return u.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:if(r.useContainer!==this.state.useContainer&&this.reset(),t.active!==this.props.active){e.next=3;break}return e.abrupt("return");case 3:return this.props.active&&this.element.setAttribute("lively-morph-target",!0),e.next=6,b.sleep(.001);case 6:this.props.active?this.play("default"):(n=document.querySelector('[lively-morph-group="'.concat(this.group,'"][lively-morph-target="true"]')))&&(n.removeAttribute("lively-morph-target"),(i=n.getAttribute("lively-morph-id"))in this.animations||this.createAnimation(i),this.play(i));case 7:case"end":return e.stop()}}),e,this)}))),function(e,t){return r.apply(this,arguments)})},{key:"createAnimation",value:function(e){var t=document.querySelector('[lively-morph-group="'.concat(this.group,'"][lively-morph-id="').concat(e,'"]'));t&&(this.animations[e]=this.createMorphAnimation(t),this.children.forEach((function(t){var r=t.animatable;return null==r?void 0:r.createAnimation(e)})))}},{key:"getParentPosition",value:function(e){var t,r=this.props.useLayout&&this.state.useContainer?null===(t=e.parentElement)||void 0===t?void 0:t.parentElement:e.parentElement;return(null==r?void 0:r.getBoundingClientRect())||{x:0,y:0}}},{key:"positionKeyframes",value:function(e){var t,r,n=null===(t=this.element.Lively)||void 0===t?void 0:t.initials,i=null===(r=e.Lively)||void 0===r?void 0:r.initials,o=i.x-n.x,s=i.y-n.y;if(this.props.parentGroup.length){var a=this.getParentPosition(this.element),l=this.getParentPosition(e);o-=l.x-a.x,s-=l.y-a.y}return this.props.useLayout||(o+=(i.width-n.width)/2,s+=(i.height-n.height)/2),[{x:0,y:0},{x:o,y:s},{x:o,y:s}]}},{key:"scaleKeyframes",value:function(e,t){var r=parseInt(t.width)/parseInt(e.width),n=parseInt(t.height)/parseInt(e.height);return[{x:1,y:1},{x:r,y:n},{x:r,y:n}]}},{key:"createMorphAnimation",value:function(e){var t,r,n,i=null===(t=this.element.Lively)||void 0===t?void 0:t.initials,o=null===(r=e.Lively)||void 0===r?void 0:r.initials,s={useLayout:this.props.useLayout,interpolate:this.props.interpolate},a=V(p.properties);try{for(a.s();!(n=a.n()).done;){var l=n.value;if(!this.props.ignore.includes(l))switch(l){case"position":s[l]=this.positionKeyframes(e);break;case"scale":s[l]=this.scaleKeyframes(i,o);break;case"opacity":s[l]=[1,1,0];break;case"interact":s[l]=[!0,!0,!1];break;default:s[l]=[i[l],o[l],o[l]]}}}catch(e){a.e(e)}finally{a.f()}return new y(s)}},{key:"createResetAnimation",value:function(){var e,t,r=null===(e=this.element.Lively)||void 0===e?void 0:e.initials,n={useLayout:this.props.useLayout,interpolate:this.props.interpolate},i=V(p.properties);try{for(i.s();!(t=i.n()).done;){var o=t.value;if(!this.props.ignore.includes(o))switch(o){case"position":n[o]={x:0,y:0};break;case"scale":n[o]={x:1,y:1};break;case"opacity":n[o]=[0,0,1];break;case"interact":n[o]=[!1,!1,!0];break;default:n[o]=[r[o],r[o],r[o]]}}}catch(e){i.e(e)}finally{i.f()}return new y(n)}},{key:"getChildren",value:function(e){var t=this;return c.map(e,(function(e){if(!h(e))return e;var r=e.type!==p?{}:{parentGroup:t.props.parentGroup+t.props.group};return f(e,r,t.getChildren(e.props.children))}))}},{key:"render",value:function(){var e,t=null!==(e=this.props.children)&&void 0!==e&&e.length?this.props.children[0]:this.props.children;if(!h(t))return t;var r=this.getChildren(t.props.children),n={"lively-morph-group":this.group,style:this.state.childStyles},i=L(a(p.prototype),"render",this).call(this,f(t,n,r));return this.state.useContainer?f(t,{style:this.state.parentStyles},i):i}}]),p}();l(G,"properties",["position","scale","opacity","backgroundColor","color","borderRadius","interact"]),l(G,"defaultProps",{id:null,group:0,parentGroup:"",active:!1,useLayout:!1,interpolate:"ease",ignore:[]});export{A as Animatable,R as Animate,G as Morph};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import e from"@babel/runtime/helpers/defineProperty";import t from"@babel/runtime/helpers/objectWithoutProperties";import i from"@babel/runtime/helpers/asyncToGenerator";import n from"@babel/runtime/helpers/slicedToArray";import r from"@babel/runtime/helpers/toConsumableArray";import a from"@babel/runtime/helpers/typeof";import o from"@babel/runtime/helpers/classCallCheck";import s from"@babel/runtime/helpers/createClass";import c from"@babel/runtime/regenerator";var l=function(){function e(){o(this,e),this.queue=[],this.tick()}var t,n;return s(e,[{key:"tick",value:(n=i(c.mark((function e(){var t,i;return c.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:t=Date.now(),i=0;case 2:if(!(i<this.queue.length+1)){e.next=10;break}if(!(this.queue.length===i||this.queue[i].timestamp>t)){e.next=6;break}return this.queue.splice(0,i),e.abrupt("break",10);case 6:this.queue[i].callback();case 7:i++,e.next=2;break;case 10:requestAnimationFrame(this.tick.bind(this));case 11:case"end":return e.stop()}}),e,this)}))),function(){return n.apply(this,arguments)})},{key:"search",value:function(e){for(var t,i,n=0,r=this.queue.length-1;n<=r;)if(t=n+r>>>1,(i=this.queue[t].timestamp-e.timestamp)<0)n=t+1;else{if(!(i>0))return t;r=t-1}return n}},{key:"insert",value:function(e){var t=this.search(e);this.queue.splice(t,0,e)}},{key:"delay",value:function(e,t){e instanceof Function&&this.insert({callback:e,timestamp:Date.now()+1e3*t})}}],[{key:"get",value:function(){return"Lively"in window||(window.Lively={}),"AnimationLoop"in window.Lively||(window.Lively.AnimationQueue=new e),window.Lively.AnimationQueue}},{key:"delay",value:(t=i(c.mark((function e(t,i){return c.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return e.abrupt("return",this.get().delay(t,i));case 1:case"end":return e.stop()}}),e,this)}))),function(e,i){return t.apply(this,arguments)})},{key:"sleep",value:function(){var e=this,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1;return new Promise((function(i){e.delay(i,t)}))}}]),e}(),u=function(e){var t=e.match(/^#([\da-f]{1,2})([\da-f]{1,2})([\da-f]{1,2})([\da-f]{2})?/i),i=n(t,5);i[0];var r=i[1],a=i[2],o=i[3],s=i[4];return{r:parseInt(r.padStart(2,r),16),g:parseInt(a.padStart(2,a),16),b:parseInt(o.padStart(2,o),16),a:void 0!==s?parseInt(s,16):255}},p=function(e){var t=e.match(/^rgba?\((\d+)\D+(\d+)\D+(\d+)\D*(\d+)?\)/i),i=n(t,5);i[0];var r=i[1],a=i[2],o=i[3],s=i[4];return{r:parseInt(r),g:parseInt(a),b:parseInt(o),a:void 0!==s?parseInt(s):255}},y=function(e,t){var i;if(t instanceof Function){null!==(i=window.Lively)&&void 0!==i&&i.Events||(window.Lively={Events:{}}),e in window.Lively.Events||(window.Lively.Events[e]={unique:0},window.addEventListener(e,(function(t){Object.values(window.Lively.Events[e]).forEach((function(e){e instanceof Function&&e(t)}))})));var n=window.Lively.Events[e];t.Lively={ListenerID:n.unique},n[n.unique++]=t}},d=function(e,t){var i,n,r;"undefined"!=typeof window&&null!==(i=window.Lively)&&void 0!==i&&null!==(n=i.Events)&&void 0!==n&&n[e]&&null!=t&&null!==(r=t.Lively)&&void 0!==r&&r.ListenerID&&delete window.Lively.Events[e][t.Lively.ListenerID]},v=function(e){"Lively"in e||(e.Lively={queue:[],initials:{}}),e.Lively.style||(e.Lively.style=function(e){for(var t={},i=0;i<e.style.length;i++)t[e.style[i]]=e.style[e.style[i]];return t}(e),e.Lively.style.transitionProperty="transform, opacity, clip-path, border-radius, background-color, color, width, height, left, top",e.Lively.style.willChange="transform"),e.style={},function(e,t){for(var i in t)e.style[i]=t[i]}(e,e.Lively.style);var t=getComputedStyle(e),i=t.paddingLeft,n=t.paddingRight,r=t.paddingTop,a=t.paddingBottom,o=t.borderRadius,s=t.boxSizing,c=t.backgroundColor,l=t.color,u=e.getBoundingClientRect(),p=u.x,y=u.y;e.Lively.initials={x:p,y:y,includePadding:"border-box"===s,width:e.offsetWidth+"px",height:e.offsetHeight+"px",paddingLeft:parseInt(i),paddingRight:parseInt(n),paddingTop:parseInt(r),paddingBottom:parseInt(a),borderRadius:parseInt(o.split(" ")[0]),backgroundColor:c,color:l}},f=["delay","duration","repeat","interpolate","origin","useLayout"],h=function(){function e(){var i=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=i.delay,r=void 0===n?0:n,a=i.duration,s=void 0===a?1:a,c=i.repeat,l=void 0===c?1:c,u=i.interpolate,p=void 0===u?"ease":u,y=i.origin,d=void 0===y?{x:.5,y:.5}:y,v=i.useLayout,h=void 0!==v&&v,g=t(i,f),b=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};o(this,e),this.useLayout=h,this.keyframes=this.getKeyframes(g,b),this.delay=r,this.duration=s,this.delta=s/(this.keyframes.length-1),this.interpolation="spring"===p?"cubic-bezier(0.65, 0.34, 0.7, 1.42)":p,this.origin=this.originToStyle(d),this.repeat=l}var y;return s(e,[{key:"originToStyle",value:function(e){var t=.5,i=.5;if("object"===a(e))t=e.x,i=e.y;else if("string"==typeof e)switch(e){case"left":t=0;break;case"right":t=1;break;case"top":i=0;break;case"bottom":i=1}else t=i=e;return"".concat(100*t,"% ").concat(100*i,"%")}},{key:"getKeyframes",value:function(t){var i=this,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},a=0,o=function(o){var s=o in n?n[o]:e.initials[o];Array.isArray(t[o])||(t[o]=[t[o]]),t[o]=t[o].length>1?t[o]:[s].concat(r(t[o])),t[o]=t[o].map((function(e){return i.sanitize(o,e)})),a=t[o].length>a?t[o].length:a};for(var s in t)o(s);return new Array(a).fill(0).map((function(n,r){var o={};for(var s in t)s in e.initials&&(o[s]=i.interpolateKeyframe(t[s],r,a));return i.keyframeToStyle(o)}))}},{key:"sanitize",value:function(t,i){var n=this,r=arguments.length>2&&void 0!==arguments[2]&&arguments[2];if("string"==typeof i){if(i.match(/^#[0-9a-f]{3,8}$/i))return u(i);if(i.match(/^rgba?\(.*\)$/i))return p(i);var o=parseFloat(i),s=i.match(/[^0-9\.]*$/i);return isNaN(o)?e.initials[t]:("%"===s&&(o/=100),s?[o,s]:o)}if("object"===a(i)){var c=Object.keys(i);("x"in i||"y"in i)&&(c=["x","y"]),("r"in i||"g"in i||"b"in i||"a"in i)&&(c=["r","g","b","a"]),("left"in i||"right"in i||"top"in i||"bottom"in i)&&(c=["left","right","top","bottom"]),c.forEach((function(e){i[e]=n.sanitize(t,i[e],e)}))}return void 0!==i?i:r?e.initials[t][r]:e.initials[t]}},{key:"interpolate",value:function(e,t,i){if("number"!=typeof e||"number"!=typeof t)return i>.5?t:e;var n=!1;Array.isArray(e)&&(n=e[1],e=e[0]),Array.isArray(t)&&(n=t[1],t=t[0]);var r=e*(1-i)+t*i;return n?[r,n]:r}},{key:"interpolateKeyframe",value:function(e,t,i){var n=this;if(e.length===i)return e[t];var r=t*((e.length-1)/(i-1)),o=Math.floor(r),s=e[o];if(o===e.length-1)return s;var c=e[o+1];if("object"===a(s)){var l={};return Object.keys(s).forEach((function(e){l[e]=n.interpolate(s[e],c[e],r-o)})),l}return this.interpolate(s,c,r-o)}},{key:"toString",value:function(e,t){return Array.isArray(e)&&(t=e[1],e=e[0]),e*("%"===t?100:1)+t}},{key:"toLength",value:function(e){return Array.isArray(e)&&(e="px"===e[1]?e[0]+"px":e[0]),e}},{key:"keyframeToStyle",value:function(e){var t=this,i={transform:""};return Object.entries(e).forEach((function(e){var r=n(e,2),a=r[0],o=r[1];switch(a){case"position":i.transform+="translate(".concat(t.toString(o.x,"px"),", ").concat(t.toString(o.y,"px"),") ");break;case"scale":if("number"==typeof o&&(o={x:o,y:o}),t.useLayout){i.width=t.toLength(o.x),i.height=t.toLength(o.y);break}i.transform+="scale(".concat(t.toString(o.x,"%"),", ").concat(t.toString(o.y,"%"),") ");break;case"rotation":i.transform+="rotate(".concat((t.toString(o),"deg"),") ");break;case"clip":i.clipPath="inset(".concat(t.toString(o.top,"%")," ").concat(t.toString(o.right,"%")," ").concat(t.toString(o.bottom,"%")," ").concat(t.toString(o.left,"%"),")");break;case"borderRadius":case"padding":case"fontSize":i[a]=t.toString(o,"px");break;case"backgroundColor":case"color":i[a]="rgba(".concat(o.r,", ").concat(o.g,", ").concat(o.b,", ").concat(o.a,")");break;case"interact":i.pointerEvents=o?"all":"none";break;case"opacity":case"active":i[a]=o}})),i.transform.length||delete i.transform,i}},{key:"setInitial",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1];t&&v(e),e.style.transitionDuration="0s",e.style.transitionTimingFunction=this.interpolation,e.style.transformOrigin=this.origin;var i=this.keyframes[0];this.apply(e,i,!0)}},{key:"setLength",value:function(e,t,i,n,r){var a=e.Lively.initials[i],o=e.Lively.initials[n],s=e.Lively.initials[r],c=t[i],l=t.padding?1:o/s;"string"==typeof c&&(c="calc(".concat(c," / ").concat(a,")"));var u=t.padding?t.padding:o+s+"px";e.style[i]="max(calc(".concat(a," * ").concat(c," - ").concat("border-box"!==e.style.boxSizing?"0px":u,"), 0px)");var p="calc(min(calc(".concat(a," * ").concat(c,"), ").concat(u,") * ");e.style[n]=p+.5*l,e.style[r]=p+1/l*.5}},{key:"apply",value:(y=i(c.mark((function e(t,i){var r,a,o=this,s=arguments;return c.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:if(r=s.length>2&&void 0!==s[2]&&s[2],!("active"in i)){e.next=11;break}if("start"!==(a=Object.keys(i.active)[0])&&!r){e.next=10;break}if(t.style.display=i.active[a]?"":"none",r){e.next=8;break}return e.next=8,l.sleep(.001);case 8:e.next=11;break;case 10:l.delay((function(){t.style.display=i.active[a]?"":"none"}),this.delta);case 11:Object.entries(i).forEach((function(e){var r=n(e,2),a=r[0],s=r[1];return"width"===a?o.setLength(t,i,"width","paddingLeft","paddingRight"):"height"===a?o.setLength(t,i,"height","paddingTop","paddingBottom"):void("active"===a||"padding"===a&&(i.width||i.height)||(t.style[a]=s))}));case 12:case"end":return e.stop()}}),e,this)}))),function(e,t){return y.apply(this,arguments)})},{key:"start",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},i=t.immediate,n=void 0!==i&&i,r=t.reverse,a=void 0!==r&&r,o=t.repeat,s=void 0===o?this.repeat:o;!e.Lively.animating||n?(this.setInitial(e),e.style.transitionDuration="".concat(this.delta,"s"),e.Lively.animating=!0,e.Lively.index=1,this.getNext(e,a,s)):e.Lively.queue.push([this,{reverse:a,repeat:s}])}},{key:"play",value:function(e){var t=this,i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=i.delay,r=void 0===n?0:n,a=i.immediate,o=void 0!==a&&a,s=i.reverse,c=void 0!==s&&s;e.style&&(this.delay||r?l.delay((function(){return t.start(e,{immediate:o,reverse:c})}),this.delay+r):this.start(e,{immediate:o,reverse:c}))}},{key:"getNext",value:function(e){var t=this,i=arguments.length>1&&void 0!==arguments[1]&&arguments[1],r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:1;if(e.Lively.index===this.keyframes.length){e.Lively.animating=!1;var a=e.Lively.queue.shift()||[],o=n(a,2),s=o[0],c=o[1];return s?s.start(e,c):void(r>1&&this.start(e,{reverse:i,repeat:r-1}))}var u=e.Lively.index;i&&(u=this.keyframes.length-1-u),requestAnimationFrame((function(){t.apply(e,t.keyframes[u])})),e.Lively.index++,l.delay((function(){return t.getNext(e,i,r)}),this.delta)}}]),e}();e(h,"initials",{opacity:1,scale:{x:1,y:1},position:{x:0,y:0},clip:{left:0,top:0,right:0,bottom:0},borderRadius:0,padding:0,fontSize:"1em",backgroundColor:{r:127,g:127,b:127,a:255},color:{r:127,g:127,b:127,a:255},active:{start:!0},interact:!0});var g=["direction"];function b(e,t){var i=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),i.push.apply(i,n)}return i}function m(t){for(var i=1;i<arguments.length;i++){var n=null!=arguments[i]?arguments[i]:{};i%2?b(Object(n),!0).forEach((function(i){e(t,i,n[i])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):b(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}function k(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return k.use=k.use.bind(k,e),k}function w(e,t){var i=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),i.push.apply(i,n)}return i}function x(t){for(var i=1;i<arguments.length;i++){var n=null!=arguments[i]?arguments[i]:{};i%2?w(Object(n),!0).forEach((function(i){e(t,i,n[i])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):w(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}function L(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return L.use=L.use.bind(L,e),L}k.use=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},i=e.direction,n=void 0===i?"up":i,r=t(e,g),a="0px",o="20px";switch(n){case"down":o="-20px";break;case"left":a="20px",o="0px";break;case"right":a="-20px",o="0px"}return new h(m({position:{x:"0px",y:"0px"},opacity:1,duration:.5},r),{position:{x:a,y:o},opacity:0})},L.use=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return new h(x({opacity:1,scale:1,duration:.25},e),{opacity:0,scale:.85})};export{h as A,k as M,L as P,y as a,l as b,v as c,d as r};
|
package/package.json
CHANGED
|
@@ -1,14 +1,30 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@infinityfx/lively",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.5",
|
|
4
4
|
"description": "Zero configuration, performant react animation library",
|
|
5
|
-
"main": "dist/index.js",
|
|
6
|
-
"module": "dist/index.js",
|
|
5
|
+
"main": "dist/cjs/index.js",
|
|
6
|
+
"module": "dist/esm/index.js",
|
|
7
|
+
"exports": {
|
|
8
|
+
".": {
|
|
9
|
+
"import": "./dist/esm/index.js",
|
|
10
|
+
"require": "./dist/cjs/index.js"
|
|
11
|
+
},
|
|
12
|
+
"./animations": {
|
|
13
|
+
"import": "./dist/esm/animations.js",
|
|
14
|
+
"require": "./dist/cjs/animations.js"
|
|
15
|
+
},
|
|
16
|
+
"./hooks": {
|
|
17
|
+
"import": "./dist/esm/hooks.js",
|
|
18
|
+
"require": "./dist/cjs/hooks.js"
|
|
19
|
+
}
|
|
20
|
+
},
|
|
21
|
+
"types": "./types/index.d.ts",
|
|
7
22
|
"repository": "infinityfx-llc/lively",
|
|
8
23
|
"author": "InfinityFX <contact@infinity-fx.com> (https://infinity-fx.com)",
|
|
9
24
|
"license": "GPL-3.0",
|
|
10
25
|
"bugs": "https://github.com/infinityfx-llc/lively/issues",
|
|
11
26
|
"homepage": "https://github.com/infinityfx-llc/lively#readme",
|
|
27
|
+
"funding": "https://ko-fi.com/infinityfx",
|
|
12
28
|
"keywords": [
|
|
13
29
|
"animation",
|
|
14
30
|
"react",
|
|
@@ -17,22 +33,24 @@
|
|
|
17
33
|
"animate"
|
|
18
34
|
],
|
|
19
35
|
"scripts": {
|
|
20
|
-
"build": "rollup -c",
|
|
36
|
+
"build": "rollup -c --environment NODE_ENV:production",
|
|
21
37
|
"watch": "rollup -c -w"
|
|
22
38
|
},
|
|
23
39
|
"peerDependencies": {
|
|
24
|
-
"react": ">=16.0.0"
|
|
40
|
+
"react": ">=16.0.0",
|
|
41
|
+
"react-dom": ">=16.0.0",
|
|
42
|
+
"@babel/runtime": "^7.0.0"
|
|
25
43
|
},
|
|
26
44
|
"devDependencies": {
|
|
27
|
-
"
|
|
28
|
-
"
|
|
45
|
+
"@babel/core": "^7.18.6",
|
|
46
|
+
"@babel/preset-env": "^7.18.6",
|
|
47
|
+
"@babel/preset-react": "^7.18.6",
|
|
48
|
+
"@babel/plugin-transform-runtime": "^7.18.6",
|
|
29
49
|
"@rollup/plugin-babel": "^5.3.1",
|
|
30
50
|
"@rollup/plugin-node-resolve": "^13.3.0",
|
|
51
|
+
"rollup": "^2.75.7",
|
|
31
52
|
"rollup-plugin-terser": "^7.0.2",
|
|
32
|
-
"
|
|
33
|
-
"@babel/core": "^7.18.6",
|
|
34
|
-
"@babel/preset-env": "^7.18.6",
|
|
35
|
-
"@babel/preset-react": "^7.18.6"
|
|
53
|
+
"rollup-plugin-delete": "^2.0.0"
|
|
36
54
|
},
|
|
37
55
|
"sideEffects": false
|
|
38
|
-
}
|
|
56
|
+
}
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
|
|
3
|
+
declare interface Animatable {
|
|
4
|
+
stagger?: number;
|
|
5
|
+
viewportMargin?: number;
|
|
6
|
+
animate?: object;
|
|
7
|
+
initial?: object;
|
|
8
|
+
animations?: object;
|
|
9
|
+
noCascade?: boolean;
|
|
10
|
+
onMount?: string | boolean;
|
|
11
|
+
onUnmount?: string | boolean;
|
|
12
|
+
whileViewport?: string | boolean;
|
|
13
|
+
whileHover?: string | boolean;
|
|
14
|
+
whileFocus?: string | boolean;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
export class Animatable extends React.Component<Animatable> {
|
|
18
|
+
|
|
19
|
+
private toAnimation;
|
|
20
|
+
|
|
21
|
+
private countNestedLevels;
|
|
22
|
+
|
|
23
|
+
private inViewport;
|
|
24
|
+
|
|
25
|
+
private onScroll;
|
|
26
|
+
|
|
27
|
+
private onEnter;
|
|
28
|
+
|
|
29
|
+
private onLeave;
|
|
30
|
+
|
|
31
|
+
private onFocus;
|
|
32
|
+
|
|
33
|
+
private onBlur;
|
|
34
|
+
|
|
35
|
+
private onClick;
|
|
36
|
+
|
|
37
|
+
setInitial(animationName: string, reset?: boolean): Promise<void>;
|
|
38
|
+
|
|
39
|
+
play(animationName: string, { callback, reverse, immediate, cascade, groupAdjust, cascadeDelay, staggerDelay }?: {
|
|
40
|
+
callback?: Function;
|
|
41
|
+
reverse?: boolean;
|
|
42
|
+
immediate?: boolean;
|
|
43
|
+
cascade?: boolean;
|
|
44
|
+
groupAdjust?: number;
|
|
45
|
+
cascadeDelay?: number;
|
|
46
|
+
staggerDelay?: number;
|
|
47
|
+
}): Promise<void>;
|
|
48
|
+
|
|
49
|
+
private style;
|
|
50
|
+
|
|
51
|
+
private mergeProperties;
|
|
52
|
+
|
|
53
|
+
private deepClone;
|
|
54
|
+
|
|
55
|
+
}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
|
|
3
|
+
declare interface Animate {
|
|
4
|
+
stagger?: number;
|
|
5
|
+
viewportMargin?: number;
|
|
6
|
+
animations?: array;
|
|
7
|
+
onMount?: string | boolean;
|
|
8
|
+
onUnmount?: string | boolean;
|
|
9
|
+
whileViewport?: string | boolean;
|
|
10
|
+
whileHover?: string | boolean;
|
|
11
|
+
whileFocus?: string | boolean;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
export class Animate extends React.Component<Animate> {
|
|
15
|
+
|
|
16
|
+
private makeAnimatable;
|
|
17
|
+
|
|
18
|
+
play(animationName: string, { callback, reverse, immediate, cascade, groupAdjust, cascadeDelay, staggerDelay }?: {
|
|
19
|
+
callback?: Function;
|
|
20
|
+
reverse?: boolean;
|
|
21
|
+
immediate?: boolean;
|
|
22
|
+
cascade?: boolean;
|
|
23
|
+
groupAdjust?: number;
|
|
24
|
+
cascadeDelay?: number;
|
|
25
|
+
staggerDelay?: number;
|
|
26
|
+
}): Promise<void>;
|
|
27
|
+
|
|
28
|
+
}
|
package/types/index.d.ts
ADDED
package/types/morph.d.ts
ADDED
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
|
|
3
|
+
declare interface Morph {
|
|
4
|
+
active?: boolean;
|
|
5
|
+
group?: number;
|
|
6
|
+
useLayout?: boolean;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
export class Morph extends React.Component<Morph> {
|
|
10
|
+
|
|
11
|
+
private getParentPosition;
|
|
12
|
+
|
|
13
|
+
private positionKeyframes;
|
|
14
|
+
|
|
15
|
+
private scaleKeyframes;
|
|
16
|
+
|
|
17
|
+
private createMorphAnimation;
|
|
18
|
+
|
|
19
|
+
private createResetAnimation;
|
|
20
|
+
|
|
21
|
+
private parentStyle;
|
|
22
|
+
|
|
23
|
+
private childStyle;
|
|
24
|
+
|
|
25
|
+
private getChildren;
|
|
26
|
+
|
|
27
|
+
}
|
package/dist/index.js
DELETED
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).Lively={},t.React)}(this,(function(t,e){"use strict";function n(t,e){var n=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);e&&(r=r.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),n.push.apply(n,r)}return n}function r(t){for(var e=1;e<arguments.length;e++){var r=null!=arguments[e]?arguments[e]:{};e%2?n(Object(r),!0).forEach((function(e){p(t,e,r[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(r)):n(Object(r)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(r,e))}))}return t}function i(){
|
|
2
|
-
/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */
|
|
3
|
-
i=function(){return t};var t={},e=Object.prototype,n=e.hasOwnProperty,r="function"==typeof Symbol?Symbol:{},o=r.iterator||"@@iterator",a=r.asyncIterator||"@@asyncIterator",s=r.toStringTag||"@@toStringTag";function l(t,e,n){return Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}),t[e]}try{l({},"")}catch(t){l=function(t,e,n){return t[e]=n}}function c(t,e,n,r){var i=e&&e.prototype instanceof h?e:h,o=Object.create(i.prototype),a=new T(r||[]);return o._invoke=function(t,e,n){var r="suspendedStart";return function(i,o){if("executing"===r)throw new Error("Generator is already running");if("completed"===r){if("throw"===i)throw o;return O()}for(n.method=i,n.arg=o;;){var a=n.delegate;if(a){var s=k(a,n);if(s){if(s===p)continue;return s}}if("next"===n.method)n.sent=n._sent=n.arg;else if("throw"===n.method){if("suspendedStart"===r)throw r="completed",n.arg;n.dispatchException(n.arg)}else"return"===n.method&&n.abrupt("return",n.arg);r="executing";var l=u(t,e,n);if("normal"===l.type){if(r=n.done?"completed":"suspendedYield",l.arg===p)continue;return{value:l.arg,done:n.done}}"throw"===l.type&&(r="completed",n.method="throw",n.arg=l.arg)}}}(t,n,a),o}function u(t,e,n){try{return{type:"normal",arg:t.call(e,n)}}catch(t){return{type:"throw",arg:t}}}t.wrap=c;var p={};function h(){}function f(){}function d(){}var v={};l(v,o,(function(){return this}));var y=Object.getPrototypeOf,g=y&&y(y(I([])));g&&g!==e&&n.call(g,o)&&(v=g);var m=d.prototype=h.prototype=Object.create(v);function w(t){["next","throw","return"].forEach((function(e){l(t,e,(function(t){return this._invoke(e,t)}))}))}function b(t,e){function r(i,o,a,s){var l=u(t[i],t,o);if("throw"!==l.type){var c=l.arg,p=c.value;return p&&"object"==typeof p&&n.call(p,"__await")?e.resolve(p.__await).then((function(t){r("next",t,a,s)}),(function(t){r("throw",t,a,s)})):e.resolve(p).then((function(t){c.value=t,a(c)}),(function(t){return r("throw",t,a,s)}))}s(l.arg)}var i;this._invoke=function(t,n){function o(){return new e((function(e,i){r(t,n,e,i)}))}return i=i?i.then(o,o):o()}}function k(t,e){var n=t.iterator[e.method];if(void 0===n){if(e.delegate=null,"throw"===e.method){if(t.iterator.return&&(e.method="return",e.arg=void 0,k(t,e),"throw"===e.method))return p;e.method="throw",e.arg=new TypeError("The iterator does not provide a 'throw' method")}return p}var r=u(n,t.iterator,e.arg);if("throw"===r.type)return e.method="throw",e.arg=r.arg,e.delegate=null,p;var i=r.arg;return i?i.done?(e[t.resultName]=i.value,e.next=t.nextLoc,"return"!==e.method&&(e.method="next",e.arg=void 0),e.delegate=null,p):i:(e.method="throw",e.arg=new TypeError("iterator result is not an object"),e.delegate=null,p)}function x(t){var e={tryLoc:t[0]};1 in t&&(e.catchLoc=t[1]),2 in t&&(e.finallyLoc=t[2],e.afterLoc=t[3]),this.tryEntries.push(e)}function E(t){var e=t.completion||{};e.type="normal",delete e.arg,t.completion=e}function T(t){this.tryEntries=[{tryLoc:"root"}],t.forEach(x,this),this.reset(!0)}function I(t){if(t){var e=t[o];if(e)return e.call(t);if("function"==typeof t.next)return t;if(!isNaN(t.length)){var r=-1,i=function e(){for(;++r<t.length;)if(n.call(t,r))return e.value=t[r],e.done=!1,e;return e.value=void 0,e.done=!0,e};return i.next=i}}return{next:O}}function O(){return{value:void 0,done:!0}}return f.prototype=d,l(m,"constructor",d),l(d,"constructor",f),f.displayName=l(d,s,"GeneratorFunction"),t.isGeneratorFunction=function(t){var e="function"==typeof t&&t.constructor;return!!e&&(e===f||"GeneratorFunction"===(e.displayName||e.name))},t.mark=function(t){return Object.setPrototypeOf?Object.setPrototypeOf(t,d):(t.__proto__=d,l(t,s,"GeneratorFunction")),t.prototype=Object.create(m),t},t.awrap=function(t){return{__await:t}},w(b.prototype),l(b.prototype,a,(function(){return this})),t.AsyncIterator=b,t.async=function(e,n,r,i,o){void 0===o&&(o=Promise);var a=new b(c(e,n,r,i),o);return t.isGeneratorFunction(n)?a:a.next().then((function(t){return t.done?t.value:a.next()}))},w(m),l(m,s,"Generator"),l(m,o,(function(){return this})),l(m,"toString",(function(){return"[object Generator]"})),t.keys=function(t){var e=[];for(var n in t)e.push(n);return e.reverse(),function n(){for(;e.length;){var r=e.pop();if(r in t)return n.value=r,n.done=!1,n}return n.done=!0,n}},t.values=I,T.prototype={constructor:T,reset:function(t){if(this.prev=0,this.next=0,this.sent=this._sent=void 0,this.done=!1,this.delegate=null,this.method="next",this.arg=void 0,this.tryEntries.forEach(E),!t)for(var e in this)"t"===e.charAt(0)&&n.call(this,e)&&!isNaN(+e.slice(1))&&(this[e]=void 0)},stop:function(){this.done=!0;var t=this.tryEntries[0].completion;if("throw"===t.type)throw t.arg;return this.rval},dispatchException:function(t){if(this.done)throw t;var e=this;function r(n,r){return a.type="throw",a.arg=t,e.next=n,r&&(e.method="next",e.arg=void 0),!!r}for(var i=this.tryEntries.length-1;i>=0;--i){var o=this.tryEntries[i],a=o.completion;if("root"===o.tryLoc)return r("end");if(o.tryLoc<=this.prev){var s=n.call(o,"catchLoc"),l=n.call(o,"finallyLoc");if(s&&l){if(this.prev<o.catchLoc)return r(o.catchLoc,!0);if(this.prev<o.finallyLoc)return r(o.finallyLoc)}else if(s){if(this.prev<o.catchLoc)return r(o.catchLoc,!0)}else{if(!l)throw new Error("try statement without catch or finally");if(this.prev<o.finallyLoc)return r(o.finallyLoc)}}}},abrupt:function(t,e){for(var r=this.tryEntries.length-1;r>=0;--r){var i=this.tryEntries[r];if(i.tryLoc<=this.prev&&n.call(i,"finallyLoc")&&this.prev<i.finallyLoc){var o=i;break}}o&&("break"===t||"continue"===t)&&o.tryLoc<=e&&e<=o.finallyLoc&&(o=null);var a=o?o.completion:{};return a.type=t,a.arg=e,o?(this.method="next",this.next=o.finallyLoc,p):this.complete(a)},complete:function(t,e){if("throw"===t.type)throw t.arg;return"break"===t.type||"continue"===t.type?this.next=t.arg:"return"===t.type?(this.rval=this.arg=t.arg,this.method="return",this.next="end"):"normal"===t.type&&e&&(this.next=e),p},finish:function(t){for(var e=this.tryEntries.length-1;e>=0;--e){var n=this.tryEntries[e];if(n.finallyLoc===t)return this.complete(n.completion,n.afterLoc),E(n),p}},catch:function(t){for(var e=this.tryEntries.length-1;e>=0;--e){var n=this.tryEntries[e];if(n.tryLoc===t){var r=n.completion;if("throw"===r.type){var i=r.arg;E(n)}return i}}throw new Error("illegal catch attempt")},delegateYield:function(t,e,n){return this.delegate={iterator:I(t),resultName:e,nextLoc:n},"next"===this.method&&(this.arg=void 0),p}},t}function o(t){return o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},o(t)}function a(t,e,n,r,i,o,a){try{var s=t[o](a),l=s.value}catch(t){return void n(t)}s.done?e(l):Promise.resolve(l).then(r,i)}function s(t){return function(){var e=this,n=arguments;return new Promise((function(r,i){var o=t.apply(e,n);function s(t){a(o,r,i,s,l,"next",t)}function l(t){a(o,r,i,s,l,"throw",t)}s(void 0)}))}}function l(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function c(t,e){for(var n=0;n<e.length;n++){var r=e[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}function u(t,e,n){return e&&c(t.prototype,e),n&&c(t,n),Object.defineProperty(t,"prototype",{writable:!1}),t}function p(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function h(){return h=Object.assign?Object.assign.bind():function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(t[r]=n[r])}return t},h.apply(this,arguments)}function f(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),e&&v(t,e)}function d(t){return d=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t)},d(t)}function v(t,e){return v=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,e){return t.__proto__=e,t},v(t,e)}function y(t,e){if(null==t)return{};var n,r,i=function(t,e){if(null==t)return{};var n,r,i={},o=Object.keys(t);for(r=0;r<o.length;r++)n=o[r],e.indexOf(n)>=0||(i[n]=t[n]);return i}(t,e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(t);for(r=0;r<o.length;r++)n=o[r],e.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(t,n)&&(i[n]=t[n])}return i}function g(t,e){if(e&&("object"==typeof e||"function"==typeof e))return e;if(void 0!==e)throw new TypeError("Derived constructors may only return object or undefined");return function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(t)}function m(t){var e=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(t){return!1}}();return function(){var n,r=d(t);if(e){var i=d(this).constructor;n=Reflect.construct(r,arguments,i)}else n=r.apply(this,arguments);return g(this,n)}}function w(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){var n=null==t?null:"undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(null==n)return;var r,i,o=[],a=!0,s=!1;try{for(n=n.call(t);!(a=(r=n.next()).done)&&(o.push(r.value),!e||o.length!==e);a=!0);}catch(t){s=!0,i=t}finally{try{a||null==n.return||n.return()}finally{if(s)throw i}}return o}(t,e)||k(t,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function b(t){return function(t){if(Array.isArray(t))return x(t)}(t)||function(t){if("undefined"!=typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}(t)||k(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function k(t,e){if(t){if("string"==typeof t)return x(t,e);var n=Object.prototype.toString.call(t).slice(8,-1);return"Object"===n&&t.constructor&&(n=t.constructor.name),"Map"===n||"Set"===n?Array.from(t):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?x(t,e):void 0}}function x(t,e){(null==e||e>t.length)&&(e=t.length);for(var n=0,r=new Array(e);n<e;n++)r[n]=t[n];return r}var E=function(){function t(){l(this,t),this.queue=[],this.tick()}var e,n;return u(t,[{key:"tick",value:(n=s(i().mark((function t(){var e,n;return i().wrap((function(t){for(;;)switch(t.prev=t.next){case 0:e=Date.now(),n=0;case 2:if(!(n<this.queue.length+1)){t.next=10;break}if(!(this.queue.length===n||this.queue[n].timestamp>e)){t.next=6;break}return this.queue.splice(0,n),t.abrupt("break",10);case 6:this.queue[n].callback();case 7:n++,t.next=2;break;case 10:requestAnimationFrame(this.tick.bind(this));case 11:case"end":return t.stop()}}),t,this)}))),function(){return n.apply(this,arguments)})},{key:"search",value:function(t){for(var e,n,r=0,i=this.queue.length-1;r<=i;)if(e=r+i>>>1,(n=this.queue[e].timestamp-t.timestamp)<0)r=e+1;else{if(!(n>0))return e;i=e-1}return r}},{key:"insert",value:function(t){var e=this.search(t);this.queue.splice(e,0,t)}},{key:"delay",value:function(t,e){t instanceof Function&&this.insert({callback:t,timestamp:Date.now()+1e3*e})}}],[{key:"get",value:function(){return"UITools"in window||(window.UITools={}),"AnimationLoop"in window.UITools||(window.UITools.AnimationQueue=new t),window.UITools.AnimationQueue}},{key:"delay",value:(e=s(i().mark((function t(e,n){return i().wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return t.abrupt("return",this.get().delay(e,n));case 1:case"end":return t.stop()}}),t,this)}))),function(t,n){return e.apply(this,arguments)})}]),t}(),T=["delay","duration","loop","interpolate","origin","scaleCorrection"],I=function(){function t(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e.delay,r=void 0===n?0:n,i=e.duration,o=void 0===i?1:i,a=e.loop,s=void 0!==a&&a,c=e.interpolate,u=void 0===c?"ease":c,p=e.origin,h=void 0===p?{x:.5,y:.5}:p,f=e.scaleCorrection,d=void 0!==f&&f,v=y(e,T),g=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};l(this,t),this.scaleCorrection=d,this.keyframes=this.getKeyframes(v,g),this.delay=r,this.duration=o,this.delta=o/(this.keyframes.length-1),this.interpolation=u,this.origin=this.originToStyle(h),this.loop=s}return u(t,[{key:"originToStyle",value:function(t){var e=.5,n=.5;if("object"===o(t))e=t.x,n=t.y;else if("string"==typeof t)switch(t){case"left":e=0;break;case"right":e=1;break;case"top":n=0;break;case"bottom":n=1;case"center":break;default:e=n=parseFloat(t)}else e=n=t;return"".concat(100*e,"% ").concat(100*n,"%")}},{key:"getKeyframes",value:function(e){var n=this,r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};for(var i in e){var o=i in r?r[i]:t.initials[i];Array.isArray(e[i])?e[i]=e[i].length>1?e[i]:[o].concat(b(e[i])):e[i]=[o,e[i]]}var a=Object.values(e).reduce((function(t,e){return e.length>t?e.length:t}),0),s=new Array(a).fill(0);return s=s.map((function(t,r){var i={};for(var o in e)i[o]=n.interpolateKeyframe(e[o],r,a);return n.keyframeToStyle(i)}))}},{key:"interpolate",value:function(t,e,n){var r="string"==typeof t?t.match(/[^0-9\.]*/i):null;"string"!=typeof e||r||(r=e.match(/[^0-9\.]*/i));var i=(t=parseFloat(t))*(1-n)+(e=parseFloat(e))*n;return r?i+r:i}},{key:"interpolateKeyframe",value:function(t,e,n){var r=this;if(!t)return null;if(t.length===n)return t[e];var i=e*((t.length-1)/(n-1)),a=Math.floor(i),s=t[a],l=a===t.length-1?null:t[a+1];if(!l)return s;if("object"===o(s)){var c={};return Object.keys(s).forEach((function(t){c[t]=r.interpolate(s[t],l[t],i-a)})),c}return this.interpolate(s,l,i-a)}},{key:"propertyToString",value:function(e,n,r,i){return"string"==typeof(n=n[r])?n:(n=isNaN(n)?t.initials[e][r]:n,"".concat(n*("%"===i?100:1)).concat(i))}},{key:"propertyToNumber",value:function(e,n,r){return"string"==typeof(n=n[r])?"%"===n.match(/[^0-9\.]*/i)?parseFloat(n)/100:n:isNaN(n)?t.initials[e][r]:n}},{key:"keyframeToStyle",value:function(t){var e=this,n={transform:""};return Object.entries(t).forEach((function(t){var r=w(t,2),i=r[0],a=r[1];if(null!=a)switch(i){case"position":n.transform+="translate(".concat(e.propertyToString(i,a,"x","px"),", ").concat(e.propertyToString(i,a,"y","px"),") ");break;case"scale":if(a="object"!==o(a)?{x:a,y:a}:a,e.scaleCorrection){n.width=e.propertyToNumber(i,a,"x"),n.height=e.propertyToNumber(i,a,"y");break}n.transform+="scale(".concat(e.propertyToString(i,a,"x","%"),", ").concat(e.propertyToString(i,a,"y","%"),") ");break;case"rotation":n.transform+="rotate(".concat(parseFloat(a),"deg) ");break;case"clip":var s=e.propertyToString(i,a,"top","%"),l=e.propertyToString(i,a,"right","%"),c=e.propertyToString(i,a,"bottom","%"),u=e.propertyToString(i,a,"left","%");n.clipPath="inset(".concat(s," ").concat(l," ").concat(c," ").concat(u,")");break;case"borderRadius":n[i]="string"==typeof a?a:a+"px";break;case"opacity":case"active":case"backgroundColor":case"color":n[i]=a}})),n.transform.length||delete n.transform,n}},{key:"setInitialStyles",value:function(e){t.setInitial(e);var n=this.keyframes[0];e.style.transitionDuration="0s",this.apply(e,n,!0)}},{key:"test",value:function(t,e,n,r,i,o){var a=r+i+((n-=e-(t="string"==typeof t?parseInt(t)/e:t)*e)<0?n:0),s=r/(r+i);return{size:(n<0?0:n)+"px",padStart:(r=o?t*r:a*s)+"px",padEnd:(i=o?t*i:a*(1-s))+"px"}}},{key:"apply",value:function(t,e){var n=this,r=arguments.length>2&&void 0!==arguments[2]&&arguments[2],i=function(){var r=t.UITools.initialStyles;Object.entries(e).forEach((function(e){var i=w(e,2),o=i[0],a=i[1];if("width"===o){var s=r.clientWidth,l=r.width,c=r.paddingLeft,u=r.paddingRight,p=r.includePadding,h=n.test(a,s,l,c,u,p),f=h.size,d=h.padStart,v=h.padEnd;return t.style.width=f,t.style.paddingLeft=d,void(t.style.paddingRight=v)}if("height"===o){var y=r.clientHeight,g=r.height,m=r.paddingTop,b=r.paddingBottom,k=r.includePadding,x=n.test(a,y,g,m,b,k),E=x.size,T=x.padStart,I=x.padEnd;return t.style.height=E,t.style.paddingTop=T,void(t.style.paddingBottom=I)}"active"!==o&&(t.style[o]=a)}))};if("active"in e){var o=Object.keys(e.active)[0];"start"===o||r?(t.style.display=e.active[o]?"":"none",r?i():E.delay(i,.01)):(E.delay((function(){t.style.display=e.active[o]?"":"none"}),this.delta),i())}else i()}},{key:"start",value:function(t){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=e.immediate,r=void 0!==n&&n,i=e.reverse,o=void 0!==i&&i;!t.UITools.animating||r?(t.style.transitionDuration="".concat(this.delta,"s"),t.style.transitionTimingFunction=this.interpolation,t.style.transformOrigin=this.origin,t.UITools.animating=!0,t.UITools.index=1,this.getNext(t,o)):t.UITools.queue.push([this,{reverse:o}])}},{key:"play",value:function(t){var e=this,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},r=n.delay,i=void 0===r?0:r,o=n.immediate,a=void 0!==o&&o,s=n.reverse,l=void 0!==s&&s;t.style&&(this.delay||i?E.delay((function(){return e.start(t,{immediate:a,reverse:l})}),this.delay+i):this.start(t,{immediate:a,reverse:l}))}},{key:"getNext",value:function(t){var e=this,n=arguments.length>1&&void 0!==arguments[1]&&arguments[1];if(t.UITools.index===this.keyframes.length){t.UITools.animating=!1;var r=t.UITools.queue.shift()||[],i=w(r,2),o=i[0],a=i[1];return o?o.start(t,a):void(this.loop&&this.start(t,a))}var s=t.UITools.index;n&&(s=this.keyframes.length-1-s),requestAnimationFrame((function(){e.apply(t,e.keyframes[s])})),t.UITools.index++,E.delay((function(){return e.getNext(t,n)}),this.delta)}}],[{key:"from",value:function(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},i=arguments.length>2&&void 0!==arguments[2]&&arguments[2];return e&&"boolean"!=typeof e?new t(r(r({},e),{},{scaleCorrection:i}),n):null}},{key:"setInitial",value:function(t){var e=getComputedStyle(t),n=e.width,r=e.height,i=e.paddingLeft,o=e.paddingRight,a=e.paddingTop,s=e.paddingBottom,l=e.borderRadius,c=e.boxSizing,u=e.backgroundColor,p=e.color,h=t.getBoundingClientRect(),f=h.x,d=h.y;"UITools"in t||(t.UITools={}),"queue"in t.UITools||(t.UITools.queue=[]),"initialStyles"in t.UITools||(t.UITools.initialStyles={x:f,y:d,includePadding:"border-box"===c,clientWidth:t.clientWidth,clientHeight:t.clientHeight,width:parseInt(n),height:parseInt(r),paddingLeft:parseInt(i),paddingRight:parseInt(o),paddingTop:parseInt(a),paddingBottom:parseInt(s),borderRadius:parseInt(l.split(" ")[0]),backgroundColor:u,color:p})}}]),t}();p(I,"initials",{opacity:1,scale:{x:1,y:1},position:{x:0,y:0},clip:{left:0,top:0,right:0,bottom:0},borderRadius:0,active:{value:!0,at:0},backgroundColor:"initial",color:"initial"});var O=function(t){f(g,t);var n,a,c,p,h,d,v,y=m(g);function g(t){var e;return l(this,g),(e=y.call(this,t)).hover=!1,e.hasFocus=!1,e.inView=!1,e.scrollDelta=0,e.viewportMargin=t.viewportMargin,e.elements=[],e.animations={animate:e.getAnimation(),onMount:e.getAnimation("onMount"),onUnmount:e.getAnimation("onUnmount"),onClick:e.getAnimation("onClick"),whileHover:e.getAnimation("whileHover"),whileFocus:e.getAnimation("whileFocus"),whileViewport:e.getAnimation("whileViewport")},e.level=0,e.children=[],e}return u(g,[{key:"getAnimation",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"animate";return"animate"===t&&this.props.animation&&("object"===o(this.props.animation)||"function"==typeof this.props.animation)&&"use"in this.props.animation?this.props.animation.use():I.from(this.props[t],this.props.initial,this.props.scaleCorrection)}},{key:"countNestedLevels",value:function(t){var n=this;if(!t)return 0;var r=0,i=0;return e.Children.forEach(t,(function(t){var o;if(e.isValidElement(t)){t.type===g&&(r=1);var a=n.countNestedLevels(null===(o=t.props)||void 0===o?void 0:o.children);i=i<a?a:i}})),i+r}},{key:"addEvent",value:function(t,e){var n;e instanceof Function&&(null!==(n=window.UITools)&&void 0!==n&&n.Events||(window.UITools={Events:{}}),t in window.UITools.Events||(window.UITools.Events[t]={unique:0},window.addEventListener(t,(function(e){Object.values(window.UITools.Events[t]).forEach((function(t){t instanceof Function&&t(e)}))}))),e.UITools={ListenerID:window.UITools.Events[t].unique},window.UITools.Events[t][window.UITools.Events[t].unique]=e,window.UITools.Events[t].unique++)}},{key:"removeEvent",value:function(t,e){var n,r;"undefined"!=typeof window&&null!==(n=window.UITools)&&void 0!==n&&n.Events&&t in(null===(r=window.UITools)||void 0===r?void 0:r.Events)&&"ListenerID"in e.UITools&&delete window.UITools.Events[t][e.UITools.ListenerID]}},{key:"componentDidMount",value:function(){var t=this;this.elements.forEach((function(e){var n;null===(n=t.animations.animate)||void 0===n||n.setInitialStyles(e)})),(this.props.parentLevel<1||this.props.noCascade)&&(this.scrollEventListener=this.onScroll.bind(this),this.addEvent("scroll",this.scrollEventListener),this.props.onMount&&this.play("onMount",{staggerDelay:.001}),this.props.whileViewport&&this.onScroll())}},{key:"componentWillUnmount",value:function(){this.removeEvent("scroll",this.scrollEventListener),this.props.onUnmount&&(this.props.parentLevel<1||this.props.noCascade)&&this.play("onUnmount",{reverse:!0,immediate:!0})}},{key:"inViewport",value:function(){var t=this,e=!0,n=!0;return this.elements.forEach((function(r){var i=r.getBoundingClientRect().y;e=e&&i+r.clientHeight*(1-t.viewportMargin)<window.innerHeight,n=n&&i>window.innerHeight+r.clientHeight*t.viewportMargin})),this.elements.length||this.children.forEach((function(t){var r=w(t.animatable.inViewport(),2),i=r[0],o=r[1];e=e&&i,n=n&&o})),[e,n]}},{key:"onScroll",value:(v=s(i().mark((function t(){var e,n,r,o;return i().wrap((function(t){for(;;)switch(t.prev=t.next){case 0:if(!(Date.now()-this.scrollDelta<350)){t.next=2;break}return t.abrupt("return");case 2:this.scrollDelta=Date.now(),e=this.inViewport(),n=w(e,2),r=n[0],o=n[1],!this.inView&&r&&(this.inView=!0,this.props.whileViewport&&this.play("whileViewport")),this.inView&&o&&(this.inView=!1,this.props.whileViewport&&this.play("whileViewport",{reverse:!0,immediate:!0}));case 6:case"end":return t.stop()}}),t,this)}))),function(){return v.apply(this,arguments)})},{key:"onEnter",value:(d=s(i().mark((function t(e){var n,r=arguments;return i().wrap((function(t){for(;;)switch(t.prev=t.next){case 0:n=r.length>1&&void 0!==r[1]&&r[1],this.hover||(this.props.whileHover&&this.play("whileHover"),this.hover=!0),n&&n(e);case 3:case"end":return t.stop()}}),t,this)}))),function(t){return d.apply(this,arguments)})},{key:"onLeave",value:(h=s(i().mark((function t(e){var n,r=arguments;return i().wrap((function(t){for(;;)switch(t.prev=t.next){case 0:n=r.length>1&&void 0!==r[1]&&r[1],this.hover&&(this.props.whileHover&&this.play("whileHover",{reverse:!0}),this.hover=!1),n&&n(e);case 3:case"end":return t.stop()}}),t,this)}))),function(t){return h.apply(this,arguments)})},{key:"onFocus",value:(p=s(i().mark((function t(e){var n,r=arguments;return i().wrap((function(t){for(;;)switch(t.prev=t.next){case 0:n=r.length>1&&void 0!==r[1]&&r[1],this.hasFocus||(this.props.whileFocus&&this.play("whileFocus"),this.hasFocus=!0),n&&n(e);case 3:case"end":return t.stop()}}),t,this)}))),function(t){return p.apply(this,arguments)})},{key:"onBlur",value:(c=s(i().mark((function t(e){var n,r=arguments;return i().wrap((function(t){for(;;)switch(t.prev=t.next){case 0:n=r.length>1&&void 0!==r[1]&&r[1],this.hasFocus&&(this.props.whileFocus&&this.play("whileFocus",{reverse:!0}),this.hasFocus=!1),n&&n(e);case 3:case"end":return t.stop()}}),t,this)}))),function(t){return c.apply(this,arguments)})},{key:"onClick",value:(a=s(i().mark((function t(e){var n,r=arguments;return i().wrap((function(t){for(;;)switch(t.prev=t.next){case 0:n=r.length>1&&void 0!==r[1]&&r[1],this.props.onClick&&this.play("onClick"),n&&n(e);case 3:case"end":return t.stop()}}),t,this)}))),function(t){return a.apply(this,arguments)})},{key:"play",value:(n=s(i().mark((function t(e){var n,r,o,a,s,l,c,u,p,h,f,d,v,y,g=this,m=arguments;return i().wrap((function(t){for(;;)switch(t.prev=t.next){case 0:if(n=m.length>1&&void 0!==m[1]?m[1]:{},r=n.reverse,o=void 0!==r&&r,a=n.immediate,s=void 0!==a&&a,l=n.cascade,c=void 0!==l&&l,u=n.groupAdjust,p=void 0===u?0:u,h=n.cascadeDelay,f=void 0===h?0:h,d=n.staggerDelay,v=void 0===d?0:d,!(this.props.parentLevel>0)||c){t.next=3;break}return t.abrupt("return");case 3:if((y=this.animations[e])||(y=this.animations.animate),y){t.next=7;break}return t.abrupt("return");case 7:this.elements.forEach((function(t,e){var n="group"in g.props?g.props.parentLevel-g.props.group:g.level+p;f=o?y.duration:f;var r=o?n*f:(g.props.parentLevel-n)*f;y.play(t,{delay:g.props.stagger*e+r+v,reverse:o,immediate:s})})),this.children.forEach((function(t){var n=t.animatable,r=t.staggerIndex,i=void 0===r?-1:r;n.play(e,{reverse:o,immediate:s,cascade:!0,staggerDelay:i<0?0:g.props.stagger*i,cascadeDelay:y.duration,groupAdjust:i<0?0:1})}));case 9:case"end":return t.stop()}}),t,this)}))),function(t){return n.apply(this,arguments)})},{key:"style",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},e=r(r({},t),{},{transitionProperty:"transform, opacity, clip-path, border-radius, backgroundColor, color".concat(this.props.scaleCorrection?", width, height, left, top":""),willChange:"transform"});return e}},{key:"mergeProperties",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n={};return n.initial=this.mergeProperty(e.initial,t.initial),n.animate=this.mergeProperty(e.animate,t.animate),n.onMount=this.mergeProperty(e.onMount,t.onMount),n.onUnmount=this.mergeProperty(e.onUnmount,t.onUnmount),n.onClick=this.mergeProperty(e.onClick,t.onClick),n.whileHover=this.mergeProperty(e.whileHover,t.whileHover),n.whileFocus=this.mergeProperty(e.whileFocus,t.whileFocus),n.whileViewport=this.mergeProperty(e.whileViewport,t.whileViewport),n.viewportMargin=this.mergeProperty(e.viewportMargin,t.viewportMargin),n.stagger=this.mergeProperty(e.stagger,t.stagger),n}},{key:"mergeProperty",value:function(t,e){return t?e?"object"===o(t)||"object"===o(e)?r(r({},t),e):e:t:e}},{key:"deepClone",value:function(t){var n,i=this,o=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},a=o.index,s=void 0===a?0:a,l=o.useElements,c=void 0!==l&&l,u=o.useEvents,p=void 0!==u&&u;if(!e.isValidElement(t))return t;var h,f={};t.type!==g&&(c&&(f={style:this.style(null===(h=t.props)||void 0===h?void 0:h.style),ref:function(t){return i.elements[s]=t}}),p&&(this.props.parentLevel<1||this.props.noCascade)&&(f=r(r({},f),{},{onMouseEnter:function(e){var n;return i.onEnter(e,null===(n=t.props)||void 0===n?void 0:n.onMouseEnter)},onMouseLeave:function(e){var n;return i.onLeave(e,null===(n=t.props)||void 0===n?void 0:n.onMouseLeave)},onFocus:function(e){var n;return i.onFocus(e,null===(n=t.props)||void 0===n?void 0:n.onFocus)},onBlur:function(e){var n;return i.onBlur(e,null===(n=t.props)||void 0===n?void 0:n.onBlur)},onClick:function(e){var n;return i.onClick(e,null===(n=t.props)||void 0===n?void 0:n.onClick)}}),p=!1));t.type!==g||null!==(n=t.props)&&void 0!==n&&n.noCascade||(f=r(r(r({},f),this.mergeProperties(t.props,this.props)),{},{parentLevel:this.parentLevel>0?this.parentLevel:this.level,ref:function(t){return i.children[i.children.length]={animatable:t,staggerIndex:c?s:-1}}}));var d=e.Children.map(t.props.children,(function(t,e){return i.deepClone(t,{index:e,useEvents:p})}));return Object.values(f).length?e.cloneElement(t,f,d):t}},{key:"render",value:function(){var t=this;return this.level=this.countNestedLevels(this.props.children),e.Children.map(this.props.children,(function(e,n){return t.deepClone(e,{index:n,useElements:!0,useEvents:!0})}))}}]),g}(e.Component);function C(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return{scaleCorrection:t.scaleCorrection,use:C.use.bind(this,t)}}function j(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return{scaleCorrection:t.scaleCorrection,use:j.use.bind(this,t)}}p(O,"defaultProps",{scaleCorrection:!1,parentLevel:0,stagger:.1,viewportMargin:.25,animate:{}}),C.use=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},e=t.direction,n=void 0===e?"up":e,r=t.scaleCorrection,i=void 0!==r&&r,o="0px",a="20px";switch(n){case"down":a="-20px";break;case"left":o="20px",a="0px";break;case"right":o="-20px",a="0px"}return new I({position:{x:"0px",y:"0px"},opacity:1,scaleCorrection:i,duration:.5},{position:{x:o,y:a},opacity:0})},j.use=function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},e=t.scaleCorrection,n=void 0!==e&&e;return new I({opacity:1,scale:1,scaleCorrection:n,duration:.25},{opacity:0,scale:.85})};var L=["levels","animations"],S=function(t){f(r,t);var n=m(r);function r(t){var e;return l(this,r),(e=n.call(this,t)).levels=e.props.levels,e.animations=new Array(e.levels).fill(0).map((function(t,n){return n<e.props.animations.length?e.props.animations[n]:e.props.animations[e.props.animations.length-1]})),e}return u(r,[{key:"makeAnimatable",value:function(t){var n=this,r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1;if(r<1||e.Children.count(t)<1)return t;var i=this.props;i.levels,i.animations;var o=y(i,L),a=this.animations[this.levels-r];return React.createElement(O,h({animation:a,scaleCorrection:a.scaleCorrection},o),e.Children.map(t,(function(t){return e.isValidElement(t)?e.cloneElement(t,{},n.makeAnimatable(t.props.children,r-1)):t})))}},{key:"render",value:function(){return this.makeAnimatable(this.props.children,this.levels)}}]),r}(e.Component);p(S,"defaultProps",{levels:1,stagger:.1,viewportMargin:.25,animations:[C,j]});var P=function(t){f(n,t);var e=m(n);function n(t){var r;return l(this,n),(r=e.call(this,t)).animations.morphs=[],r}return u(n,[{key:"componentDidMount",value:function(){var t=this,e=this.elements[0];e&&(I.setInitial(e),e.setAttribute("uitools-morph-id",this.props.id),e.setAttribute("uitools-morph-active",this.props.active),this.self=e,this.createResetAnimation(),E.delay((function(){for(var n=document.querySelectorAll('[uitools-morph-id="'.concat(t.props.id,'"]')),r=0;r<n.length;r++)n[r]!==e&&(t.createMorphAnimation(n[r],r),"true"!==n[r].getAttribute("uitools-morph-active")&&t.animations.transition.setInitialStyles(n[r]))}),.001))}},{key:"componentDidUpdate",value:function(){var t=this,e="true"===this.self.getAttribute("uitools-morph-active");this.self.setAttribute("uitools-morph-active",this.props.active),E.delay((function(){if(t.props.active&&!e)t.animations.transition.setInitialStyles(t.self),t.animations.transition.play(t.self);else if(!t.props.active&&e){for(var n=0,r=document.querySelectorAll('[uitools-morph-id="'.concat(t.props.id,'"]')),i=0;i<r.length;i++)if(r[i]!==t.self&&"true"===r[i].getAttribute("uitools-morph-active")){n=i;break}t.animations.morphs[n].play(t.self)}}),.001)}},{key:"createResetAnimation",value:function(){var t,e=null===(t=this.self.UITools)||void 0===t?void 0:t.initialStyles;this.animations.transition=I.from({opacity:[0,0,1],scale:{x:1,y:1},position:{x:0,y:0},borderRadius:e.borderRadius,backgroundColor:[e.backgroundColor,e.backgroundColor,e.backgroundColor]},{},this.scaleCorrection)}},{key:"createMorphAnimation",value:function(t,e){var n,r,i=null===(n=this.self.UITools)||void 0===n?void 0:n.initialStyles,o=null===(r=t.UITools)||void 0===r?void 0:r.initialStyles;this.animations.morphs[e]=I.from({position:[{x:0,y:0},{x:o.x-i.x+(o.clientWidth-i.clientWidth)/2,y:o.y-i.y+(o.clientHeight-i.clientHeight)/2},{x:o.x-i.x+(o.clientWidth-i.clientWidth)/2,y:o.y-i.y+(o.clientHeight-i.clientHeight)/2}],scale:[{x:1,y:1},{x:o.clientWidth/i.clientWidth,y:o.clientHeight/i.clientHeight},{x:o.clientWidth/i.clientWidth,y:o.clientHeight/i.clientHeight}],opacity:[1,1,0],borderRadius:[i.borderRadius,o.borderRadius,o.borderRadius],backgroundColor:[i.backgroundColor,o.backgroundColor,o.backgroundColor]},{},this.scaleCorrection)}}]),n}(O);p(P,"defaultProps",{id:0,active:!1,scaleCorrection:!1}),t.Animatable=O,t.Animate=S,t.Morph=P,Object.defineProperty(t,"__esModule",{value:!0})}));
|