@infinityfx/lively 0.2.3 → 1.0.2

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.
Files changed (43) hide show
  1. package/README.md +116 -16
  2. package/dist/cjs/animatable-3481c274.js +1 -0
  3. package/dist/cjs/animate.js +1 -1
  4. package/dist/cjs/animation-80770446.js +1 -0
  5. package/dist/cjs/animations.js +1 -1
  6. package/dist/cjs/helper-e7d4aad4.js +1 -0
  7. package/dist/cjs/hooks.js +1 -1
  8. package/dist/cjs/index.js +1 -1
  9. package/dist/cjs/link-884ecbbe.js +1 -0
  10. package/dist/cjs/pop-759c5e79.js +1 -0
  11. package/dist/cjs/scroll-ad21fb35.js +1 -0
  12. package/dist/esm/animatable-c248ca70.js +1 -0
  13. package/dist/esm/animate.js +1 -1
  14. package/dist/esm/animation-264c4885.js +1 -0
  15. package/dist/esm/animations.js +1 -1
  16. package/dist/esm/helper-ef605e17.js +1 -0
  17. package/dist/esm/hooks.js +1 -1
  18. package/dist/esm/index.js +1 -1
  19. package/dist/esm/link-67981677.js +1 -0
  20. package/dist/esm/pop-7211ea3d.js +1 -0
  21. package/dist/esm/scroll-efaeb330.js +1 -0
  22. package/package.json +9 -3
  23. package/types/animatable.d.ts +79 -7
  24. package/types/animate/animate.d.ts +17 -11
  25. package/types/animations/animation.d.ts +9 -0
  26. package/types/animations/fade.d.ts +9 -0
  27. package/types/animations/move.d.ts +19 -0
  28. package/types/animations/pop.d.ts +9 -0
  29. package/types/animations/scale.d.ts +19 -0
  30. package/types/animations/wipe.d.ts +19 -0
  31. package/types/animations.d.ts +8 -0
  32. package/types/globals.d.ts +109 -0
  33. package/types/hooks/animation.d.ts +1 -0
  34. package/types/hooks/scroll.d.ts +1 -0
  35. package/types/hooks/unmount.d.ts +10 -0
  36. package/types/hooks.d.ts +5 -0
  37. package/types/morph.d.ts +2 -2
  38. package/dist/cjs/animatable-62e7223b.js +0 -1
  39. package/dist/cjs/animation-1595965d.js +0 -1
  40. package/dist/cjs/pop-592e65c5.js +0 -1
  41. package/dist/esm/animatable-54740b57.js +0 -1
  42. package/dist/esm/animation-7720f4a3.js +0 -1
  43. package/dist/esm/pop-dc41899a.js +0 -1
package/dist/esm/index.js CHANGED
@@ -1 +1 @@
1
- import{A as t}from"./animatable-54740b57.js";export{A as Animatable}from"./animatable-54740b57.js";import e from"@babel/runtime/helpers/asyncToGenerator";import r from"@babel/runtime/helpers/classCallCheck";import i from"@babel/runtime/helpers/createClass";import n from"@babel/runtime/helpers/get";import o from"@babel/runtime/helpers/inherits";import s from"@babel/runtime/helpers/possibleConstructorReturn";import u from"@babel/runtime/helpers/getPrototypeOf";import p from"@babel/runtime/helpers/defineProperty";import l from"@babel/runtime/regenerator";import{Children as h,isValidElement as c,cloneElement as f}from"react";import{A as m,c as y,l as d,i as v,a as b}from"./animation-7720f4a3.js";export{a as Animation}from"./animation-7720f4a3.js";import"@babel/runtime/helpers/slicedToArray";import"@babel/runtime/helpers/typeof";import"@babel/runtime/helpers/objectWithoutProperties";function g(t,e){var r="undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(!r){if(Array.isArray(t)||(r=function(t,e){if(!t)return;if("string"==typeof t)return x(t,e);var r=Object.prototype.toString.call(t).slice(8,-1);"Object"===r&&t.constructor&&(r=t.constructor.name);if("Map"===r||"Set"===r)return Array.from(t);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return x(t,e)}(t))||e&&t&&"number"==typeof t.length){r&&(t=r);var i=0,n=function(){};return{s:n,n:function(){return i>=t.length?{done:!0}:{done:!1,value:t[i++]}},e:function(t){throw t},f:n}}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(t)},n:function(){var t=r.next();return a=t.done,t},e:function(t){s=!0,o=t},f:function(){try{a||null==r.return||r.return()}finally{if(s)throw o}}}}function x(t,e){(null==e||e>t.length)&&(e=t.length);for(var r=0,i=new Array(e);r<e;r++)i[r]=t[r];return i}function w(t,e){var r=Object.keys(t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);e&&(i=i.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),r.push.apply(r,i)}return r}function k(t){for(var e=1;e<arguments.length;e++){var r=null!=arguments[e]?arguments[e]:{};e%2?w(Object(r),!0).forEach((function(e){p(t,e,r[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(r)):w(Object(r)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(r,e))}))}return t}function S(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 r,i=u(t);if(e){var n=u(this).constructor;r=Reflect.construct(i,arguments,n)}else r=i.apply(this,arguments);return s(this,r)}}var O=function(a){o(A,t);var s,p,x,w=S(A);function A(t){var e,i,n;return r(this,A),(n=w.call(this,t)).properties=n.props.properties||["position","scale","opacity","backgroundColor","color","interact","zIndex"],!n.props.properties&&n.props.useLayout&&n.properties.push("borderRadius","fontSize"),n.parent=(null===(e=(i=n.props).parent)||void 0===e?void 0:e.call(i))||{group:""},n.group=n.parent.group+n.props.group,n.useLayout=!1,n.childStyles={pointerEvents:"initial"},n.parentStyles={background:"transparent",border:"none",padding:0,pointerEvents:"none",backdropFilter:"none",boxShadow:"unset",fontSize:"unset",zIndex:"unset"},n}return i(A,[{key:"layout",value:function(){this.position=this.position||getComputedStyle(this.element).position;var t=k(k({},this.parentStyles),{},{width:this.element.offsetWidth,height:this.element.offsetHeight});"absolute"===this.position||"fixed"===this.position?t.position="absolute":(t.position="relative",this.childStyles=k(k({},this.childStyles),{},{position:"absolute",margin:0,top:0,left:0})),this.parentStyles=t,this.useLayout=!0,this.hasUpdated=!0,this.forceUpdate()}},{key:"update",value:(x=e(l.mark((function t(){var e,r,i,n,o,a,s,u,p=arguments;return l.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:if(e=p.length>0&&void 0!==p[0]?p[0]:{},r=e.mount,i=void 0===r?!this.useLayout:r,n=e.active,o=void 0===n?this.props.active:n,this.element=this.elements[0],this.element){t.next=4;break}return t.abrupt("return");case 4:if(!this.props.useLayout||!i){t.next=6;break}return t.abrupt("return",this.layout());case 6:if(!this.element.Lively||this.hasUpdated){t.next=8;break}return t.abrupt("return");case 8:if(y(this.element),this.hasUpdated=!1,!this.parent.props){t.next=12;break}return t.abrupt("return");case 12:return t.next=14,m.sleep(.001);case 14:this.setUniqueId(),this.animations={default:this.unmorphAnimation()},o||this.animations.default.setInitial(this.element),a=g(this.children);try{for(a.s();!(s=a.n()).done;)(u=s.value.animatable).setUniqueId(),u.animations={default:u.unmorphAnimation()},o||u.animations.default.setInitial(u.element)}catch(t){a.e(t)}finally{a.f()}case 19:case"end":return t.stop()}}),t,this)}))),function(){return x.apply(this,arguments)})},{key:"setUniqueId",value:function(){this.parent.id&&(this.id=this.parent.id),"id"in this||(d("Morph",{}),this.group in window.Lively.Morph||(window.Lively.Morph[this.group]=0),this.id=window.Lively.Morph[this.group]++),"id"in this&&this.element.setAttribute("lively-morph-id",this.id.toString())}},{key:"componentDidUpdate",value:(p=e(l.mark((function t(e){return l.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return t.next=2,this.update({mount:!1,active:e.active});case 2:e.active!==this.props.active&&this.morph(this.props.active);case 3:case"end":return t.stop()}}),t,this)}))),function(t){return p.apply(this,arguments)})},{key:"morph",value:(s=e(l.mark((function t(e){var r,i;return l.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return e&&this.element.setAttribute("lively-morph-target",!0),t.next=3,m.sleep(.001);case 3:e?this.play("default",{immediate:!0}):(r=document.querySelector('[lively-morph-group="'.concat(this.group,'"][lively-morph-target="true"]')))&&(r.removeAttribute("lively-morph-target"),(i=r.getAttribute("lively-morph-id"))in this.animations||this.createAnimations(i),this.play(i,{immediate:!0}));case 4:case"end":return t.stop()}}),t,this)}))),function(t){return s.apply(this,arguments)})},{key:"createAnimations",value:function(t){var e=document.querySelector('[lively-morph-group="'.concat(this.group,'"][lively-morph-id="').concat(t,'"]'));this.animations[t]=this.morphAnimation(this.element,e);var r,i=g(this.children);try{for(i.s();!(r=i.n()).done;){r.value.animatable.createAnimations(t)}}catch(t){i.e(t)}finally{i.f()}}},{key:"animationFromKeyframes",value:function(t){var e,r=this,i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n={useLayout:this.props.useLayout,interpolate:this.props.interpolate,origin:{x:0,y:0},duration:this.props.duration},o=g(this.properties);try{var a=function(){var o=e.value;if(r.props.ignore.includes(o))return"continue";var a=o in t?o:"auto";if(!(a in t))return"continue";n[o]=t[a].map((function(t){if(!v(t))return t in i?i[t][o]:t;var e={};for(var r in t)t[r]in i?e[r]=i[t[r]][o]:e[r]=t[r];return e}))};for(o.s();!(e=o.n()).done;)a()}catch(t){o.e(t)}finally{o.f()}return new b(n)}},{key:"morphAnimation",value:function(t,e){var r,i;return e?(t=null===(r=t.Lively)||void 0===r?void 0:r.initials,e=null===(i=e.Lively)||void 0===i?void 0:i.initials,this.x=e.x-t.x,this.y=e.y-t.y,this.parent.props&&(this.x-=this.parent.x,this.y-=this.parent.y),this.animationFromKeyframes({auto:["from","to",{set:"to",end:"from"}],position:["from","to",{set:"to",end:"from"}],scale:["from","to",{set:"to",end:"from"}],opacity:[1,1,{end:0}],interact:[!0,!0,{end:!1}]},{from:k(k({},t),{},{position:{x:0,y:0},scale:{x:1,y:1}}),to:k(k({},e),{},{position:{x:this.x,y:this.y},scale:{x:parseInt(e.width)/parseInt(t.width),y:parseInt(e.height)/parseInt(t.height)}})})):this.animationFromKeyframes({opacity:[1,0,0],interact:[!0,!1,!1]})}},{key:"unmorphAnimation",value:function(){var t=this.element.Lively.initials;return this.animationFromKeyframes({auto:["from","from","from"],position:[{x:0,y:0}],scale:[{x:1,y:1}],opacity:[0,0,1],interact:[!1,!1,!0],zIndex:["from",t.zIndex+1,{set:t.zIndex+1,end:"from"}]},{from:t})}},{key:"getChildren",value:function(t){var e=this;return h.map(t,(function(t){if(!c(t))return t;var r=t.type!==A?{}:{parent:function(){return e},duration:e.props.duration};return f(t,r,e.getChildren(t.props.children))}))}},{key:"render",value:function(){var t,e=null!==(t=this.props.children)&&void 0!==t&&t.length?this.props.children[0]:this.props.children;if(!c(e))return e;var r=this.getChildren(e.props.children),i={"lively-morph-group":this.group,style:k(k({},e.props.style),this.childStyles)},o=n(u(A.prototype),"render",this).call(this,f(e,i,r));return this.useLayout?f(e,{style:this.parentStyles},o):o}}]),A}();p(O,"defaultProps",{group:0,active:!1,useLayout:!1,interpolate:"ease",duration:1.5,ignore:[]});export{O as Morph};
1
+ import{A as t}from"./animatable-c248ca70.js";export{A as Animatable}from"./animatable-c248ca70.js";import e from"@babel/runtime/helpers/asyncToGenerator";import r from"@babel/runtime/helpers/classCallCheck";import i from"@babel/runtime/helpers/createClass";import n from"@babel/runtime/helpers/get";import o from"@babel/runtime/helpers/inherits";import a from"@babel/runtime/helpers/possibleConstructorReturn";import s from"@babel/runtime/helpers/getPrototypeOf";import p from"@babel/runtime/helpers/defineProperty";import u from"@babel/runtime/regenerator";import{Children as l,isValidElement as h,cloneElement as c}from"react";import{A as f,a as m}from"./animation-264c4885.js";import{c as y,l as d,i as v}from"./helper-ef605e17.js";import"@babel/runtime/helpers/typeof";import"@babel/runtime/helpers/slicedToArray";import"./link-67981677.js";import"@babel/runtime/helpers/objectWithoutProperties";function b(t,e){var r="undefined"!=typeof Symbol&&t[Symbol.iterator]||t["@@iterator"];if(!r){if(Array.isArray(t)||(r=function(t,e){if(!t)return;if("string"==typeof t)return g(t,e);var r=Object.prototype.toString.call(t).slice(8,-1);"Object"===r&&t.constructor&&(r=t.constructor.name);if("Map"===r||"Set"===r)return Array.from(t);if("Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r))return g(t,e)}(t))||e&&t&&"number"==typeof t.length){r&&(t=r);var i=0,n=function(){};return{s:n,n:function(){return i>=t.length?{done:!0}:{done:!1,value:t[i++]}},e:function(t){throw t},f:n}}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(t)},n:function(){var t=r.next();return a=t.done,t},e:function(t){s=!0,o=t},f:function(){try{a||null==r.return||r.return()}finally{if(s)throw o}}}}function g(t,e){(null==e||e>t.length)&&(e=t.length);for(var r=0,i=new Array(e);r<e;r++)i[r]=t[r];return i}function x(t,e){var r=Object.keys(t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);e&&(i=i.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),r.push.apply(r,i)}return r}function w(t){for(var e=1;e<arguments.length;e++){var r=null!=arguments[e]?arguments[e]:{};e%2?x(Object(r),!0).forEach((function(e){p(t,e,r[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(r)):x(Object(r)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(r,e))}))}return t}function k(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 r,i=s(t);if(e){var n=s(this).constructor;r=Reflect.construct(i,arguments,n)}else r=i.apply(this,arguments);return a(this,r)}}var S=function(a){o(S,t);var p,g,x,A=k(S);function S(t){var e,i,n;return r(this,S),(n=A.call(this,t)).properties=n.props.properties||["position","scale","opacity","backgroundColor","color","interact","zIndex"],!n.props.properties&&n.props.useLayout&&n.properties.push("borderRadius","fontSize"),n.parent=(null===(e=(i=n.props).parent)||void 0===e?void 0:e.call(i))||{group:""},n.group=n.parent.group+n.props.group,n.useLayout=!1,n.childStyles={pointerEvents:"initial"},n.parentStyles={background:"transparent",border:"none",padding:0,pointerEvents:"none",backdropFilter:"none",boxShadow:"unset",fontSize:"unset",zIndex:"unset"},n}return i(S,[{key:"layout",value:function(){this.position=this.position||getComputedStyle(this.element).position;var t=w(w({},this.parentStyles),{},{width:this.element.offsetWidth,height:this.element.offsetHeight});"absolute"===this.position||"fixed"===this.position?t.position="absolute":(t.position="relative",this.childStyles=w(w({},this.childStyles),{},{position:"absolute",margin:0,top:0,left:0})),this.parentStyles=t,this.useLayout=!0,this.hasUpdated=!0,this.forceUpdate()}},{key:"update",value:(x=e(u.mark((function t(){var e,r,i,n,o,a,s,p,l=arguments;return u.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:if(e=l.length>0&&void 0!==l[0]?l[0]:{},r=e.mount,i=void 0===r?!this.useLayout:r,n=e.active,o=void 0===n?this.props.active:n,this.element=this.elements[0],this.element){t.next=4;break}return t.abrupt("return");case 4:if(!this.props.useLayout||!i){t.next=6;break}return t.abrupt("return",this.layout());case 6:if(!this.element.Lively||this.hasUpdated){t.next=8;break}return t.abrupt("return");case 8:if(y(this.element),this.hasUpdated=!1,!this.parent.props){t.next=12;break}return t.abrupt("return");case 12:return t.next=14,f.sleep(.001);case 14:this.setUniqueId(),this.animations={default:this.unmorphAnimation()},o||this.animations.default.initial(this.element),a=b(this.children);try{for(a.s();!(s=a.n()).done;)(p=s.value.animatable).setUniqueId(),p.animations={default:p.unmorphAnimation()},o||p.animations.default.initial(p.element)}catch(t){a.e(t)}finally{a.f()}case 19:case"end":return t.stop()}}),t,this)}))),function(){return x.apply(this,arguments)})},{key:"setUniqueId",value:function(){this.parent.id&&(this.id=this.parent.id),"id"in this||(d("Morph",{}),this.group in window.Lively.Morph||(window.Lively.Morph[this.group]=0),this.id=window.Lively.Morph[this.group]++),"id"in this&&this.element.setAttribute("lively-morph-id",this.id.toString())}},{key:"componentDidUpdate",value:(g=e(u.mark((function t(e){return u.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return t.next=2,this.update({mount:!1,active:e.active});case 2:e.active!==this.props.active&&this.morph(this.props.active);case 3:case"end":return t.stop()}}),t,this)}))),function(t){return g.apply(this,arguments)})},{key:"morph",value:(p=e(u.mark((function t(e){var r,i;return u.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return e&&this.element.setAttribute("lively-morph-target",!0),t.next=3,f.sleep(.001);case 3:e?this.play("default",{immediate:!0}):(r=document.querySelector('[lively-morph-group="'.concat(this.group,'"][lively-morph-target="true"]')))&&(r.removeAttribute("lively-morph-target"),(i=r.getAttribute("lively-morph-id"))in this.animations||this.createAnimations(i),this.play(i,{immediate:!0}));case 4:case"end":return t.stop()}}),t,this)}))),function(t){return p.apply(this,arguments)})},{key:"createAnimations",value:function(t){var e=document.querySelector('[lively-morph-group="'.concat(this.group,'"][lively-morph-id="').concat(t,'"]'));this.animations[t]=this.morphAnimation(this.element,e);var r,i=b(this.children);try{for(i.s();!(r=i.n()).done;){r.value.animatable.createAnimations(t)}}catch(t){i.e(t)}finally{i.f()}}},{key:"animationFromKeyframes",value:function(t){var e,r=this,i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n={useLayout:this.props.useLayout,interpolate:this.props.interpolate,origin:{x:0,y:0},duration:this.props.duration},o=b(this.properties);try{var a=function(){var o=e.value;if(r.props.ignore.includes(o))return"continue";var a=o in t?o:"auto";if(!(a in t))return"continue";n[o]=t[a].map((function(t){if(!v(t))return t in i?i[t][o]:t;var e={};for(var r in t)t[r]in i?e[r]=i[t[r]][o]:e[r]=t[r];return e}))};for(o.s();!(e=o.n()).done;)a()}catch(t){o.e(t)}finally{o.f()}return new m(n)}},{key:"morphAnimation",value:function(t,e){var r,i;return e?(t=null===(r=t.Lively)||void 0===r?void 0:r.initials,e=null===(i=e.Lively)||void 0===i?void 0:i.initials,this.x=e.x-t.x,this.y=e.y-t.y,this.parent.props&&(this.x-=this.parent.x,this.y-=this.parent.y),this.animationFromKeyframes({auto:["from","to",{set:"to",end:"from"}],position:["from","to",{set:"to",end:"from"}],scale:["from","to",{set:"to",end:"from"}],opacity:[1,1,{end:0}],interact:[!0,!0,{end:!1}]},{from:w(w({},t),{},{position:{x:0,y:0},scale:{x:1,y:1}}),to:w(w({},e),{},{position:{x:this.x,y:this.y},scale:{x:parseInt(e.width)/parseInt(t.width),y:parseInt(e.height)/parseInt(t.height)}})})):this.animationFromKeyframes({opacity:[1,0,0],interact:[!0,!1,!1]})}},{key:"unmorphAnimation",value:function(){var t=this.element.Lively.initials;return this.animationFromKeyframes({auto:["from","from","from"],position:[{x:0,y:0}],scale:[{x:1,y:1}],opacity:[0,0,1],interact:[!1,!1,!0],zIndex:["from",t.zIndex+1,{set:t.zIndex+1,end:"from"}]},{from:t})}},{key:"getChildren",value:function(t){var e=this;return l.map(t,(function(t){if(!h(t))return t;var r=t.type!==S?{}:{parent:function(){return e},duration:e.props.duration};return c(t,r,e.getChildren(t.props.children))}))}},{key:"render",value:function(){var t,e=null!==(t=this.props.children)&&void 0!==t&&t.length?this.props.children[0]:this.props.children;if(!h(e))return e;var r=this.getChildren(e.props.children),i={"lively-morph-group":this.group,style:w(w({},e.props.style),this.childStyles)},o=n(s(S.prototype),"render",this).call(this,c(e,i,r));return this.useLayout?c(e,{style:this.parentStyles},o):o}}]),S}();p(S,"defaultProps",{group:0,active:!1,useLayout:!1,interpolate:"ease",duration:1.5,ignore:[]});export{S as Morph};
@@ -0,0 +1 @@
1
+ function n(n,r){var e="undefined"!=typeof Symbol&&n[Symbol.iterator]||n["@@iterator"];if(!e){if(Array.isArray(n)||(e=function(n,r){if(!n)return;if("string"==typeof n)return t(n,r);var e=Object.prototype.toString.call(n).slice(8,-1);"Object"===e&&n.constructor&&(e=n.constructor.name);if("Map"===e||"Set"===e)return Array.from(n);if("Arguments"===e||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(e))return t(n,r)}(n))||r&&n&&"number"==typeof n.length){e&&(n=e);var o=0,i=function(){};return{s:i,n:function(){return o>=n.length?{done:!0}:{done:!1,value:n[o++]}},e:function(n){throw n},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 u,a=!0,c=!1;return{s:function(){e=e.call(n)},n:function(){var n=e.next();return a=n.done,n},e:function(n){c=!0,u=n},f:function(){try{a||null==e.return||e.return()}finally{if(c)throw u}}}}function t(n,t){(null==t||t>n.length)&&(t=n.length);for(var r=0,e=new Array(t);r<t;r++)e[r]=n[r];return e}function r(){var n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:function(n){return n};return n.isBound?"undefined"!=typeof window?n(this.value):null:(n.isBound=!0,r.construct(this,n))}r.construct=function(t){for(var e=arguments.length,o=new Array(e>1?e-1:0),i=1;i<e;i++)o[i-1]=arguments[i];var u=r.bind.apply(r,[t].concat(o));return u.set=function(n){return t.value=n},u.link=function(n){return t.linked.push(n),u},u.feed=function(r){t.value=r;var e,o=n(t.linked);try{for(o.s();!(e=o.n()).done;){(0,e.value)()}}catch(n){o.e(n)}finally{o.f()}},u},r.create=function(n){return r.construct({value:n,linked:[]})},r.isLink=function(n){return n instanceof Function&&"link"in n};export{r as L};
@@ -0,0 +1 @@
1
+ import e from"@babel/runtime/helpers/defineProperty";import r from"@babel/runtime/helpers/objectWithoutProperties";import{b as t}from"./animation-264c4885.js";var o=["direction"];function n(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);r&&(o=o.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,o)}return t}function c(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}var i=t.create((function(e){var t=e.direction,n=void 0===t?"up":t,i=r(e,o),p="0px",a="20px";switch(n){case"down":a="-20px";break;case"left":p="20px",a="0px";break;case"right":p="-20px",a="0px"}return[c({position:{x:0,y:0},opacity:1,duration:.5},i),{position:{x:p,y:a},opacity:0}]}));function p(e,r){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);r&&(o=o.filter((function(r){return Object.getOwnPropertyDescriptor(e,r).enumerable}))),t.push.apply(t,o)}return t}function a(r){for(var t=1;t<arguments.length;t++){var o=null!=arguments[t]?arguments[t]:{};t%2?p(Object(o),!0).forEach((function(t){e(r,t,o[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(r,Object.getOwnPropertyDescriptors(o)):p(Object(o)).forEach((function(e){Object.defineProperty(r,e,Object.getOwnPropertyDescriptor(o,e))}))}return r}var s=t.create((function(e){return[a({opacity:1,scale:1,duration:.25},e),{opacity:0,scale:.85}]}));export{i as M,s as P};
@@ -0,0 +1 @@
1
+ import{useEffect as r}from"react";import{L as o}from"./link-67981677.js";import{a as e,r as n}from"./helper-ef605e17.js";function t(){var t=o.create(0);return r((function(){var r=function(){return t.feed(window.scrollY)};return t.set(window.scrollY),e("scroll",r),function(){return n("scroll",r)}}),[]),t}export{t as u};
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@infinityfx/lively",
3
- "version": "0.2.3",
4
- "description": "Zero configuration, performant react animation library",
3
+ "version": "1.0.2",
4
+ "description": "Feature complete, lightweight react animation library.",
5
5
  "main": "dist/cjs/index.js",
6
6
  "module": "dist/esm/index.js",
7
7
  "types": "./types/index.d.ts",
@@ -27,6 +27,8 @@
27
27
  },
28
28
  "typesVersions": {
29
29
  "*": {
30
+ "animations": ["./types/animations.d.ts"],
31
+ "hooks": ["./types/hooks.d.ts"],
30
32
  "animate": ["./types/animate.d.ts"]
31
33
  }
32
34
  },
@@ -38,10 +40,14 @@
38
40
  "funding": "https://ko-fi.com/infinityfx",
39
41
  "keywords": [
40
42
  "animation",
43
+ "keyframe",
41
44
  "react",
42
45
  "transition",
43
46
  "morph",
44
- "animate"
47
+ "animate",
48
+ "reactive",
49
+ "lightweight",
50
+ "performant"
45
51
  ],
46
52
  "scripts": {
47
53
  "build": "rollup -c --environment NODE_ENV:production",
@@ -1,25 +1,97 @@
1
1
  import React from 'react';
2
+ import { AnimationInitials, AnimationProperties } from './globals';
2
3
 
3
- declare interface Animatable {
4
+ interface AnimatableProps {
5
+
6
+ /**
7
+ * How much to delay each subsequent `element` or `<Animatable>` component of the parent `<Animatable>` component, when animating it, in seconds.
8
+ *
9
+ * @default 0.1
10
+ */
4
11
  stagger?: number;
12
+
13
+ /**
14
+ * Percentage of `element` that needs to enter or leave the viewport (`window`) to trigger viewport based animations.
15
+ *
16
+ * @default 0.75
17
+ */
5
18
  viewportMargin?: number;
6
- animate?: object;
7
- initial?: object;
8
- animations?: object;
19
+
20
+ /**
21
+ * Define a default animation.
22
+ */
23
+ animate?: AnimationProperties;
24
+
25
+ initial?: AnimationInitials;
26
+
27
+ /**
28
+ * Define animations as key-value pairs, where the key is the animation name.
29
+ */
30
+ animations?: {
31
+ [key: string]: AnimationProperties;
32
+ };
33
+
34
+ /**
35
+ * Whether to prevent cascading of an animation to child `<Animatable>` components.
36
+ *
37
+ * @default false
38
+ */
9
39
  noCascade?: boolean;
40
+
41
+ /**
42
+ * Play either the default or the defined animation when the component mounts.
43
+ *
44
+ * @default false
45
+ */
10
46
  onMount?: string | boolean;
47
+
48
+ /**
49
+ * Play either the default or the defined animation reversed when the component unmounts.
50
+ *
51
+ * Note: this only works in combination with the `useUnmount`.
52
+ *
53
+ * @default false
54
+ */
11
55
  onUnmount?: string | boolean;
56
+
57
+ /**
58
+ * Play either the default or the defined animation when any child `element` is clicked.
59
+ *
60
+ * @default false
61
+ */
12
62
  onClick?: string | boolean;
63
+
64
+ /**
65
+ * Play either the default or the defined animation (reversed when leaving) when any child `element` enters or leaves the viewport.
66
+ *
67
+ * @default false
68
+ */
13
69
  whileViewport?: string | boolean;
70
+
71
+ /**
72
+ * Play either the default or the defined animation (reversed when leaving) when the mouse enters or leaves any child `element`.
73
+ *
74
+ * @default false
75
+ */
14
76
  whileHover?: string | boolean;
77
+
78
+ /**
79
+ * Play either the default or the defined animation (reversed when losing) when any child `element` gains or looses focus.
80
+ *
81
+ * @default false
82
+ */
15
83
  whileFocus?: string | boolean;
84
+
85
+ group?: number;
16
86
  }
17
87
 
18
- export class Animatable extends React.Component<Animatable> {
88
+ export class Animatable extends React.Component<AnimatableProps> {
19
89
 
20
- private update;
90
+ private parse;
91
+
92
+ private style;
21
93
 
22
- private toAnimation;
94
+ private update;
23
95
 
24
96
  private inViewport;
25
97
 
@@ -1,19 +1,25 @@
1
1
  import React from 'react';
2
+ import { AnimatableProps } from '../animatable';
3
+ import { Animation } from '../animations/animation';
2
4
 
3
- declare interface Animate {
4
- stagger?: number;
5
- viewportMargin?: number;
6
- animations?: array;
7
- onMount?: string | boolean;
8
- onUnmount?: string | boolean;
9
- onClick?: string | boolean;
10
- whileViewport?: string | boolean;
11
- whileHover?: string | boolean;
12
- whileFocus?: string | boolean;
5
+ interface AnimateProps extends AnimatableProps {
6
+
7
+ /**
8
+ * An array of `Animation` objects that defines what animation to apply to element depending on it's level.
9
+ *
10
+ * @default [Move, Pop]
11
+ */
12
+ animations?: Animation[];
13
+
14
+ /**
15
+ * How many levels of `elements` to animate.
16
+ *
17
+ * @default 1
18
+ */
13
19
  levels?: number;
14
20
  }
15
21
 
16
- export class Animate extends React.Component<Animate> {
22
+ export class Animate extends React.Component<AnimateProps> {
17
23
 
18
24
  private makeAnimatable;
19
25
 
@@ -0,0 +1,9 @@
1
+ import { AnimationInitials, AnimationProperties } from '../globals';
2
+
3
+ export type Animation = {
4
+
5
+ create(getProperties?: () => [AnimationProperties, AnimationInitials]): Animation;
6
+
7
+ isAnimation(animation: any): boolean;
8
+
9
+ }
@@ -0,0 +1,9 @@
1
+ import { AnimationProperties } from '../globals';
2
+ import { Animation } from './animation';
3
+
4
+ /**
5
+ * Fade the `element` over a duration of 0.65 seconds.
6
+ *
7
+ * @type {Animation}
8
+ */
9
+ export function Fade(options: AnimationProperties): this;
@@ -0,0 +1,19 @@
1
+ import { AnimationProperties } from '../globals';
2
+ import { Animation } from './animation';
3
+
4
+ interface MoveOptions extends AnimationProperties {
5
+
6
+ /**
7
+ * The direction to move the `element` to.
8
+ *
9
+ * @default "up"
10
+ */
11
+ direction: 'up' | 'left' | 'down' | 'right';
12
+ }
13
+
14
+ /**
15
+ * Move and simultaneously fade the `element` along an axis over a duration of 0.5 seconds.
16
+ *
17
+ * @type {Animation}
18
+ */
19
+ export function Move(options: MoveOptions): this
@@ -0,0 +1,9 @@
1
+ import { AnimationProperties } from '../globals';
2
+ import { Animation } from './animation';
3
+
4
+ /**
5
+ * Slightly scale and fade the `element` over a duration of 0.25 seconds.
6
+ *
7
+ * @type {Animation}
8
+ */
9
+ export function Pop(options: AnimationProperties): this;
@@ -0,0 +1,19 @@
1
+ import { AnimationProperties } from '../globals';
2
+ import { Animation } from './animation';
3
+
4
+ interface ScaleOptions extends AnimationProperties {
5
+
6
+ /**
7
+ * The direction to scale the `element` up to.
8
+ *
9
+ * @default "right"
10
+ */
11
+ direction: 'up' | 'left' | 'down' | 'right';
12
+ }
13
+
14
+ /**
15
+ * Scale the `element` along an axis over a duration of 0.6 seconds.
16
+ *
17
+ * @type {Animation}
18
+ */
19
+ export function Scale(options: ScaleOptions): this;
@@ -0,0 +1,19 @@
1
+ import { Animation } from './animation';
2
+ import { AnimationProperties } from '../globals';
3
+
4
+ interface WipeOptions extends AnimationProperties {
5
+
6
+ /**
7
+ * The direction to wipe the `element` to.
8
+ *
9
+ * @default "right"
10
+ */
11
+ direction: 'up' | 'left' | 'down' | 'right';
12
+ }
13
+
14
+ /**
15
+ * Wipe the `element` along an axis over a duration of 1 seconds.
16
+ *
17
+ * @type {Animation}
18
+ */
19
+ export function Wipe(options: WipeOptions): this;
@@ -0,0 +1,8 @@
1
+ export as namespace Animations;
2
+
3
+ export { Fade } from './animations/fade';
4
+ export { Move } from './animations/move';
5
+ export { Pop } from './animations/pop';
6
+ export { Scale } from './animations/scale';
7
+ export { Wipe } from './animations/wipe';
8
+ export { Animation } from './animations/animation';
@@ -0,0 +1,109 @@
1
+ import React from 'react';
2
+
3
+ type PositionProperty = { x?: number; y?: number; } | string;
4
+
5
+ type ScaleProperty = { x?: number; y?: number; } | string | number;
6
+
7
+ type ClipProperty = {
8
+ left?: number | string;
9
+ top?: number | string;
10
+ right?: number | string;
11
+ bottom?: number | string;
12
+ }
13
+
14
+ export interface AnimationInitials extends React.CSSProperties {
15
+ /**
16
+ * Define the position of an `element` relative to initial rendered position.
17
+ *
18
+ * @default { x: 0, y: 0 }
19
+ */
20
+ position?: PositionProperty;
21
+
22
+ /**
23
+ * @default { x: 1, y: 1 }
24
+ */
25
+ scale?: ScaleProperty;
26
+
27
+ /**
28
+ * @default 0
29
+ */
30
+ rotation?: number;
31
+
32
+ /**
33
+ * @default { left: 0, top: 0, right: 0, bottom: 0 }
34
+ */
35
+ clip?: ClipProperty;
36
+
37
+ /**
38
+ * Whether to render the `element`.
39
+ * An alias for the `display` property which maps `true` to `""` and `false` to `"none"`.
40
+ *
41
+ * @default true
42
+ */
43
+ active?: boolean;
44
+
45
+ /**
46
+ * Whether to allow mouse interactions with the `element`.
47
+ * An alias for the `pointerEvents` property which maps `true` to `"all"` and `false` to `"none"`.
48
+ *
49
+ * @default true
50
+ */
51
+ interact?: boolean;
52
+
53
+ /**
54
+ * Value between `0` and `1` which defines how much of an `<svg>` element stroke is shown.
55
+ *
56
+ * @default 1
57
+ */
58
+ strokeLength?: number;
59
+ }
60
+
61
+ export interface AnimationProperties extends AnimationInitials {
62
+
63
+ /**
64
+ * Delay of the animation in seconds.
65
+ *
66
+ * @default 0
67
+ */
68
+ delay?: number;
69
+
70
+ /**
71
+ * Duration of animation in seconds.
72
+ *
73
+ * @default 1
74
+ */
75
+ duration?: number;
76
+
77
+ /**
78
+ * Number of times to repeat the animation.
79
+ *
80
+ * Accepts `Infinity` as a value to loop the animation indefinitely.
81
+ *
82
+ * @default 1
83
+ */
84
+ repeat?: number;
85
+
86
+ /**
87
+ * Whether to alternate the animation direction (reversed) on repeats.
88
+ *
89
+ * @default false
90
+ */
91
+ alternate?: boolean;
92
+
93
+ /**
94
+ * Interpolation method used between keyframes.
95
+ *
96
+ * @default "ease"
97
+ */
98
+ interpolate?: 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear' | 'step-start' | 'step-end' | 'spring';
99
+
100
+ /**
101
+ * @default { x: 0.5, y: 0.5 }
102
+ */
103
+ origin?: string | { x?: number, y?: number } | number;
104
+
105
+ /**
106
+ * @default false
107
+ */
108
+ useLayout?: boolean;
109
+ }
@@ -0,0 +1 @@
1
+ export function useAnimation(initial: any): [object, Function];
@@ -0,0 +1 @@
1
+ export function useScroll(): object;
@@ -0,0 +1,10 @@
1
+ import React from 'react';
2
+ import { Animatable } from '../animatable';
3
+ import { Animate } from '../animate/animate';
4
+
5
+ /**
6
+ * Returns a boolean value which dictates whether the referenced component should be mounted or not and allows for animating the respective component when it unmounts.
7
+ *
8
+ * @param initial whether the referenced component is initially mounted.
9
+ */
10
+ export function useUnmount(initial: boolean): [boolean, (mounted: boolean) => void, React.Ref<Animatable | Animate>];
@@ -0,0 +1,5 @@
1
+ export as namespace Hooks;
2
+
3
+ export { useUnmount } from './hooks/unmount';
4
+ export { useAnimation } from './hooks/animation';
5
+ export { useScroll } from './hooks/scroll';
package/types/morph.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import React from 'react';
2
2
 
3
- declare interface Morph {
3
+ interface MorphProps {
4
4
  active?: boolean;
5
5
  group?: number;
6
6
  useLayout?: boolean;
@@ -9,7 +9,7 @@ declare interface Morph {
9
9
  ignore?: string[];
10
10
  }
11
11
 
12
- export class Morph extends React.Component<Morph> {
12
+ export class Morph extends React.Component<MorphProps> {
13
13
 
14
14
  private static properties;
15
15
  private static layoutProperties;
@@ -1 +0,0 @@
1
- "use strict";var e=require("@babel/runtime/helpers/slicedToArray"),t=require("@babel/runtime/helpers/asyncToGenerator"),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"),u=require("@babel/runtime/helpers/defineProperty"),l=require("@babel/runtime/regenerator"),c=require("react"),p=require("./animation-1595965d.js");function h(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var f=h(e),d=h(t),v=h(r),y=h(n),m=h(i),w=h(o),b=h(a),g=h(s),k=h(u),x=h(l);function E(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 L(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?E(Object(r),!0).forEach((function(t){k.default(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):E(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function j(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 C(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 C(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 C(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 O(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=g.default(e);if(t){var i=g.default(this).constructor;r=Reflect.construct(n,arguments,i)}else r=n.apply(this,arguments);return b.default(this,r)}}var A=function(e){w.default(g,e);var t,r,n,i,o,a,s,u,l,h,b=O(g);function g(e){var t;for(var r in y.default(this,g),(t=b.call(this,e)).hover=!1,t.hasFocus=!1,t.inView=!1,t.scrollDelta=0,t.viewportMargin=e.viewportMargin,t.animations={default:t.toAnimation(t.props.animate)},t.props.animations)t.animations[r]=t.toAnimation(t.props.animations[r]);return t.elements=[],t.children=[],t.level=0,t}return m.default(g,[{key:"update",value:function(){var e,t=j(this.elements);try{for(t.s();!(e=t.n()).done;){var r,n=e.value;p.cacheElementStyles(n),null===(r=this.animations.default)||void 0===r||r.setToLast(n,!0)}}catch(e){t.e(e)}finally{t.f()}}},{key:"toAnimation",value:function(e){return!e||"object"!==v.default(e)&&"function"!=typeof e?null:"use"in e?e.use():Object.keys(e).length?new p.Animation(L({},e),this.props.initial):null}},{key:"componentDidMount",value:(h=d.default(x.default.mark((function e(){var t=this;return x.default.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:if(this.resizeEventListener=this.onResize.bind(this),p.addEventListener("resize",this.resizeEventListener),this.update(),!("fonts"in document)){e.next=7;break}return e.next=6,document.fonts.ready;case 6:this.update({mount:!0});case 7:(this.props.parentLevel<1||this.props.noCascade)&&(this.scrollEventListener=this.onScroll.bind(this),p.addEventListener("scroll",this.scrollEventListener),this.props.onMount&&this.play(this.props.onMount,{staggerDelay:.001,immediate:!0}),this.props.whileViewport&&p.AnimationQueue.delay((function(){return t.onScroll()}),.001));case 8:case"end":return e.stop()}}),e,this)}))),function(){return h.apply(this,arguments)})},{key:"componentDidUpdate",value:(l=d.default(x.default.mark((function e(){return x.default.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:this.update();case 1:case"end":return e.stop()}}),e,this)}))),function(){return l.apply(this,arguments)})},{key:"componentWillUnmount",value:function(){p.removeEventListener("scroll",this.scrollEventListener),p.removeEventListener("resize",this.resizeEventListener)}},{key:"inViewport",value:function(){var e=this,t=!0,r=!0;if(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){var n,i=j(this.children);try{for(i.s();!(n=i.n()).done;){var o=n.value.animatable.inViewport(),a=f.default(o,2),s=a[0],u=a[1];t=t&&s,r=r&&u}}catch(e){i.e(e)}finally{i.f()}}return[t,r]}},{key:"onScroll",value:(u=d.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=f.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:(s=d.default(x.default.mark((function e(){var t;return x.default.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:null!==(t=this.nextResize)&&void 0!==t&&t.cancel&&this.nextResize.cancel(),this.nextResize=p.AnimationQueue.delay(this.update.bind(this,{mount:!0}),.25);case 2:case"end":return e.stop()}}),e,this)}))),function(){return s.apply(this,arguments)})},{key:"onEnter",value:(a=d.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 a.apply(this,arguments)})},{key:"onLeave",value:(o=d.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 o.apply(this,arguments)})},{key:"onFocus",value:(i=d.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 i.apply(this,arguments)})},{key:"onBlur",value:(n=d.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 n.apply(this,arguments)})},{key:"onClick",value:(r=d.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 r.apply(this,arguments)})},{key:"play",value:(t=d.default(x.default.mark((function e(t){var r,n,i,o,a,s,u,l,c,h,f,d,v,y,m,w,b,g,k,E,L,C=this,O=arguments;return x.default.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:if(r=O.length>1&&void 0!==O[1]?O[1]:{},n=r.callback,i=r.reverse,o=void 0!==i&&i,a=r.immediate,s=void 0!==a&&a,u=r.cascade,l=void 0!==u&&u,c=r.groupAdjust,h=void 0===c?0:c,f=r.cascadeDelay,d=void 0===f?0:f,v=r.staggerDelay,y=void 0===v?0:v,!(this.props.parentLevel>0)||l){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:w=0,this.elements.forEach((function(e,t){var r="group"in C.props?C.props.parentLevel-C.props.group:C.level+h;d=o?m.duration:d;var n=o?r*d:(C.props.parentLevel-r)*d;n=C.props.stagger*t+n+y,w=n>w?n:w,m.play(e,{delay:n,reverse:o,immediate:s})})),b=j(this.children);try{for(b.s();!(g=b.n()).done;)k=g.value,E=k.animatable,L=k.staggerIndex,E.play(t,{reverse:o,immediate:s,cascade:!0,staggerDelay:L<0?0:this.props.stagger*L,cascadeDelay:m.duration,groupAdjust:L<0?0:1})}catch(e){b.e(e)}finally{b.f()}n&&p.AnimationQueue.delay(n,w+m.duration);case 11: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=L(L({},t),e);for(var n in r)["children","parentLevel","ref"].includes(n)?delete r[n]:Array.isArray(e[n])||Array.isArray(t[n])||"object"===v.default(e[n])&&"object"===v.default(t[n])&&(r[n]=L(L({},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,u=n.useEvents,l=void 0===u||u;if(!c.isValidElement(e))return e;var p={};if(e.type===g||e.type.prototype instanceof g||(s&&(p={ref:function(e){return r.elements[o]=e}}),l&&(this.props.parentLevel<1||this.props.noCascade)&&(p=L(L({},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)}}),l=!1)),(e.type===g||e.type.prototype instanceof g)&&(null===(t=e.props)||void 0===t||!t.noCascade)){var h=this.childrenIndex++;p=L(L(L({},p),this.mergeProperties(e.props,this.props)),{},{parentLevel:this.parentLevel>0?this.parentLevel:this.level,ref:function(e){return r.children[h]={animatable:e,staggerIndex:s?o:-1}}})}var f=c.Children.map(e.props.children,(function(e,t){return r.deepClone(e,{index:t,useEvents:l})}));return c.cloneElement(e,p,f)}},{key:"countNestedLevels",value:function(e){var t=this;if(!e)return 0;var r=0,n=0;return c.Children.forEach(e,(function(e){var i;if(c.isValidElement(e)){(e.type===g||e.type.prototype instanceof g)&&(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:"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.Children.map(t,(function(t,r){return e.deepClone(t,{index:r,useElements:!0})}))}}]),g}(c.Component);k.default(A,"defaultProps",{parentLevel:0,stagger:.1,viewportMargin:.25,animate:{},animations:{}}),exports.Animatable=A;
@@ -1 +0,0 @@
1
- "use strict";var e=require("@babel/runtime/helpers/slicedToArray"),t=require("@babel/runtime/helpers/objectWithoutProperties"),i=require("@babel/runtime/helpers/classCallCheck"),n=require("@babel/runtime/helpers/createClass"),r=require("@babel/runtime/helpers/defineProperty"),a=require("@babel/runtime/helpers/asyncToGenerator"),o=require("@babel/runtime/regenerator"),s=require("@babel/runtime/helpers/typeof");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=l(e),c=l(t),d=l(i),h=l(n),y=l(r),f=l(a),v=l(o),p=l(s),g=function(e,t){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:window;"Lively"in i||(i.Lively={}),e in i.Lively||(i.Lively[e]=t)},m=function(e){return e&&"object"===p.default(e)&&!Array.isArray(e)},b=function(e){var t=e.match(/^#([\da-f]{1,2})([\da-f]{1,2})([\da-f]{1,2})([\da-f]{2})?/i),i=u.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}},k=function(e){var t=e.match(/^rgba?\((\d+)\D+(\d+)\D+(\d+)\D*(\d+)?\)/i),i=u.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}},L=function(){function e(){d.default(this,e),this.queue=[],this.tick()}var t;return h.default(e,[{key:"uuid",value:function(){return Math.floor(1e6*Math.random()).toString(16).padStart("0",6)}},{key:"tick",value:(t=f.default(v.default.mark((function e(){var t,i,n;return v.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=13;break}if(n=this.queue[i],!(this.queue.length===i||n.timestamp>t)){e.next=7;break}return this.queue.splice(0,i),e.abrupt("break",13);case 7:n.callback(),delete n.cancel,delete n.store[n.id+n.timestamp];case 10:i++,e.next=2;break;case 13:requestAnimationFrame(this.tick.bind(this));case 14:case"end":return e.stop()}}),e,this)}))),function(){return t.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:"cancel",value:function(e){for(var t=this.search(e);t>0&&this.queue[t].timestamp>=e.timestamp;)t--;for(;t<this.queue.length&&this.queue[t].timestamp<=e.timestamp;){if(this.queue[t].id===e.id){this.queue.splice(t,1);break}t++}delete e.cancel}},{key:"delay",value:function(e,t){var i=this,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};if(e instanceof Function){var r={timestamp:Date.now()+1e3*t,id:this.uuid(),cancel:function(){return i.cancel(r)},callback:e,store:n};return this.insert(r),n[r.id+r.timestamp]=r,r}}}],[{key:"get",value:function(){return g("AnimationQueue",new e),window.Lively.AnimationQueue}},{key:"cancelAll",value:function(e){for(var t in e)e[t].cancel(),delete e[t]}},{key:"delay",value:function(e,t,i){return this.get().delay(e,t,i)}},{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}(),x=["delay","duration","repeat","interpolate","origin","useLayout"];function w(e,t){var i="undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(!i){if(Array.isArray(e)||(i=function(e,t){if(!e)return;if("string"==typeof e)return S(e,t);var i=Object.prototype.toString.call(e).slice(8,-1);"Object"===i&&e.constructor&&(i=e.constructor.name);if("Map"===i||"Set"===i)return Array.from(e);if("Arguments"===i||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(i))return S(e,t)}(e))||t&&e&&"number"==typeof e.length){i&&(e=i);var n=0,r=function(){};return{s:r,n:function(){return n>=e.length?{done:!0}:{done:!1,value:e[n++]}},e:function(e){throw e},f:r}}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 a,o=!0,s=!1;return{s:function(){i=i.call(e)},n:function(){var e=i.next();return o=e.done,e},e:function(e){s=!0,a=e},f:function(){try{o||null==i.return||i.return()}finally{if(s)throw a}}}}function S(e,t){(null==t||t>e.length)&&(t=e.length);for(var i=0,n=new Array(t);i<t;i++)n[i]=e[i];return n}var q=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,u=void 0===l?"ease":l,h=t.origin,y=void 0===h?{x:.5,y:.5}:h,f=t.useLayout,v=void 0!==f&&f,p=c.default(t,x),g=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};d.default(this,e),this.length=0,this.useLayout=v,this.keyframes=this.getKeyframes(p,g),this.delay=n,this.duration=a,this.delta=a/(this.length-1),this.interpolation="spring"===u?"cubic-bezier(0.65, 0.34, 0.7, 1.42)":u,this.origin=this.originToStyle(y),this.repeat=s}return h.default(e,[{key:"originToStyle",value:function(e){var t=.5,i=.5;if(m(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=function(r){var a=r in n?n[r]:e.initials[r];Array.isArray(t[r])||(t[r]=[t[r]]),t[r].length<2&&t[r].unshift(a),t[r]=t[r].map((function(e){return i.sanitize(r,e)})),i.length=Math.max(t[r].length,i.length)};for(var a in t)r(a);return new Array(this.length).fill(0).map((function(n,r){var a={start:{},end:{}};for(var o in t)if(o in e.initials){var s=i.interpolateKeyframe(t[o],r,i.length);m(s)&&("start"in s||"end"in s||"set"in s)?("start"in s&&(a.start[o]=s.start),"end"in s&&(a.end[o]=s.end),"set"in s&&(a[o]=s.set)):a[o]=s}return i.keyframeToStyle(a)}))}},{key:"sanitize",value:function(t,i){var n=arguments.length>2&&void 0!==arguments[2]&&arguments[2];if("string"==typeof i){if(i.match(/^#[0-9a-f]{3,8}$/i))return b(i);if(i.match(/^rgba?\(.*\)$/i))return k(i);var r=parseFloat(i),a=(i.match(/[^0-9\.]*$/i)||["px"])[0];return isNaN(r)?e.initials[t]:("%"===a&&(r/=100),a?[r,a]:r)}if(m(i)){var o=Object.keys(i),s=i;("x"in i||"y"in i)&&(o=["x","y"]),("r"in i||"g"in i||"b"in i||"a"in i)&&(o=["r","g","b","a"]),("left"in i||"right"in i||"top"in i||"bottom"in i)&&(o=["left","right","top","bottom"]),i={};var l,u=w(o);try{for(u.s();!(l=u.n()).done;){var c=l.value;i[c]=this.sanitize(t,s[c],c)}}catch(e){u.e(e)}finally{u.f()}}if(void 0!==i)return i;var d=e.initials[t];return n in d?d[n]:d}},{key:"interpolate",value:function(e,t,i){if(m(e)){for(var n={},r=0,a=Object.keys(e);r<a.length;r++){var o=a[r];n[o]=this.interpolate(e[o],m(t)?t[o]:t,i)}return n}var s=!1;if(Array.isArray(e)&&(s=e[1],e=e[0]),Array.isArray(t)&&(s=t[1],t=t[0]),"number"!=typeof e||"number"!=typeof t)return i>.5?t:e;var l=e*(1-i)+t*i;return s?[l,s]:l}},{key:"interpolateKeyframe",value:function(e,t,i){if(e.length===i)return e[t];var n=t*((e.length-1)/(i-1)),r=Math.floor(n),a=e[r];return r===e.length-1?a:this.interpolate(a,e[r+1],n-r)}},{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){for(var t={transform:""},i=0,n=Object.entries(e);i<n.length;i++){var r=u.default(n[i],2),a=r[0],o=r[1];switch(a){case"start":case"end":Object.keys(o).length&&(t[a]=this.keyframeToStyle(o));break;case"position":t.transform+="translate(".concat(this.toString(o.x,"px"),", ").concat(this.toString(o.y,"px"),") ");break;case"scale":if("number"==typeof o&&(o={x:o,y:o}),this.useLayout){t.width=this.toLength(o.x),t.height=this.toLength(o.y);break}t.transform+="scale(".concat(this.toString(o.x,"%"),", ").concat(this.toString(o.y,"%"),") ");break;case"rotation":t.transform+="rotate(".concat(this.toString(o,"deg"),") ");break;case"clip":t.clipPath="inset(".concat(this.toString(o.top,"%")," ").concat(this.toString(o.right,"%")," ").concat(this.toString(o.bottom,"%")," ").concat(this.toString(o.left,"%"),")"),t.webkitClipPath=t.clipPath;break;case"borderRadius":case"padding":case"fontSize":t[a]=this.toString(o,"px");break;case"backgroundColor":case"color":t[a]="rgba(".concat(o.r,", ").concat(o.g,", ").concat(o.b,", ").concat(o.a,")");break;case"interact":t.pointerEvents=o?"all":"none";break;case"opacity":case"active":case"zIndex":t[a]=o}}return t.transform.length||delete t.transform,t}},{key:"setLength",value:function(e,t,i,n,r){var a=e.Lively.initials[i],o=parseInt(e.Lively.initials[n]),s=parseInt(e.Lively.initials[r]),l=t[i],u=t.padding?1:o/(0===s?1e-6:s);"string"==typeof l&&(l="calc(".concat(l," / ").concat(a,")"));var c=t.padding?t.padding:o+s+"px";e.style[i]="max(calc(".concat(a," * ").concat(l," - ").concat("border-box"!==e.style.boxSizing?"0px":c,"), 0px)");var d="calc(min(calc(".concat(a," * ").concat(l,"), ").concat(c,") * ");e.style[n]=d+.5*u,e.style[r]=d+1/(0===u?1e-6:u)*.5}},{key:"apply",value:function(e,t){var i=this,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},r=n.duration,a=void 0===r?this.delta:r,o=n.reverse,s=void 0!==o&&o,l=function(){e.style.transitionDuration="".concat(a,"s");for(var n=0,r=Object.entries(t);n<r.length;n++){var o=u.default(r[n],2),s=o[0],l=o[1];"width"!==s?"height"!==s?"padding"===s&&(t.width||t.height)||"start"===s||"end"===s||(e.style[s]=l):i.setLength(e,t,"height","paddingTop","paddingBottom"):i.setLength(e,t,"width","paddingLeft","paddingRight")}e.Lively.keyframe=t};"start"in t&&!s||"end"in t&&s?(this.apply(e,t[s?"end":"start"],{duration:0}),L.delay(l,.001)):l(),("end"in t&&!s||"start"in t&&s)&&L.delay(this.apply.bind(this,e,t[s?"start":"end"],{duration:0}),this.delta,e.Lively.timeouts)}},{key:"setInitial",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:this.keyframes[0];e.style.transitionTimingFunction=this.interpolation,e.style.transformOrigin=this.origin,this.apply(e,t,{duration:0})}},{key:"setToLast",value:function(e){var t,i,n=arguments.length>1&&void 0!==arguments[1]&&arguments[1];(n||null!==(t=e.Lively)&&void 0!==t&&t.keyframe)&&this.setInitial(e,null===(i=e.Lively)||void 0===i?void 0:i.keyframe)}},{key:"start",value:function(e){var t=this,i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=i.immediate,r=void 0!==n&&n,a=i.reverse,o=void 0!==a&&a,s=i.repeat,l=void 0===s?this.repeat:s;!e.Lively.animating||r?(this.setInitial(e,o?this.keyframes[this.length-1]:this.keyframes[0]),e.Lively.index=1,e.Lively.animating=!0,requestAnimationFrame((function(){return t.getNext(e,o,l)}))):e.Lively.queue.push([this,{reverse:o,repeat:l}])}},{key:"play",value:function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},i=t.delay,n=void 0===i?0:i,r=t.immediate,a=void 0!==r&&r,o=t.reverse,s=void 0!==o&&o;if(e.style&&this.length){a&&(e.Lively.queue=[],L.cancelAll(e.Lively.timeouts));var l=this.start.bind(this,e,{immediate:a,reverse:s});this.delay||n?L.delay(l,this.delay+n,e.Lively.timeouts):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.length){e.Lively.animating=!1;var r=e.Lively.queue.shift()||[],a=u.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.length-1-l),this.apply(e,this.keyframes[l],{reverse:i}),e.Lively.index++,L.delay((function(){return t.getNext(e,i,n)}),this.delta,e.Lively.timeouts)}}]),e}();y.default(q,"initials",{opacity:1,scale:{x:1,y:1},position:{x:0,y:0},rotation:0,clip:{left:0,top:0,right:0,bottom:0},borderRadius:0,padding:0,fontSize:"1rem",backgroundColor:{r:127,g:127,b:127,a:255},color:{r:127,g:127,b:127,a:255},active:!0,interact:!0,zIndex:0}),exports.Animation=q,exports.AnimationQueue=L,exports.addEventListener=function(e,t){if(t instanceof Function){g("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 i=window.Lively.Events[e];t.Lively={ListenerID:i.unique},i[i.unique++]=t}},exports.cacheElementStyles=function(e){g("queue",[],e),g("timeouts",{},e),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, font-size, background-color, color, width, height, padding",e.Lively.style.willChange="transform"),function(e,t){for(var i in e.style={},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.backgroundColor,s=t.color,l=t.borderRadius,u=t.padding,c=t.fontSize,d=t.zIndex,h=e.getBoundingClientRect(),y=h.x,f=h.y,v=h.width,p=h.height;e.Lively.initials={x:y,y:f,paddingLeft:i,paddingRight:n,paddingTop:r,paddingBottom:a,backgroundColor:o,color:s,fontSize:c,zIndex:"auto"===d?0:parseInt(d),width:v+"px",height:p+"px",borderRadius:l.split(" ")[0],padding:u.split(" ")[0]}},exports.isObject=m,exports.livelyProperty=g,exports.padArray=function(e,t){return new Array(t).fill(0).map((function(t,i){return i<e.length?e[i]:e[e.length-1]}))},exports.removeEventListener=function(e,t){var i,n;"undefined"!=typeof window&&null!==(i=window.Lively)&&void 0!==i&&null!==(n=i.Events)&&void 0!==n&&n[e]&&null!=t&&t.Lively&&"ListenerID"in t.Lively&&delete window.Lively.Events[e][t.Lively.ListenerID]};
@@ -1 +0,0 @@
1
- "use strict";var e=require("@babel/runtime/helpers/defineProperty"),t=require("@babel/runtime/helpers/objectWithoutProperties"),r=require("./animation-1595965d.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=n(e),i=n(t),c=["direction"];function p(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 u(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?p(Object(r),!0).forEach((function(t){o.default(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):p(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function a(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return a.use=a.use.bind(a,e),a}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 b(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){o.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 f(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return f.use=f.use.bind(f,e),f}a.use=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=e.direction,n=void 0===t?"up":t,o=i.default(e,c),p="0px",a="20px";switch(n){case"down":a="-20px";break;case"left":p="20px",a="0px";break;case"right":p="-20px",a="0px"}return new r.Animation(u({position:{x:"0px",y:"0px"},opacity:1,duration:.5},o),{position:{x:p,y:a},opacity:0})},f.use=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return new r.Animation(b({opacity:1,scale:1,duration:.25},e),{opacity:0,scale:.85})},exports.Move=a,exports.Pop=f;
@@ -1 +0,0 @@
1
- import e from"@babel/runtime/helpers/slicedToArray";import t from"@babel/runtime/helpers/asyncToGenerator";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 u from"@babel/runtime/helpers/defineProperty";import l from"@babel/runtime/regenerator";import{isValidElement as p,Children as c,cloneElement as h,Component as f}from"react";import{c as v,a as d,b as y,A as m,r as w}from"./animation-7720f4a3.js";function b(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?b(Object(r),!0).forEach((function(t){u(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):b(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function k(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 x(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 x(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 x(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 L(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 O=function(s){o(F,f);var a,u,b,x,O,j,E,A,C,D,P=L(F);function F(e){var t;for(var r in n(this,F),(t=P.call(this,e)).hover=!1,t.hasFocus=!1,t.inView=!1,t.scrollDelta=0,t.viewportMargin=e.viewportMargin,t.animations={default:t.toAnimation(t.props.animate)},t.props.animations)t.animations[r]=t.toAnimation(t.props.animations[r]);return t.elements=[],t.children=[],t.level=0,t}return i(F,[{key:"update",value:function(){var e,t=k(this.elements);try{for(t.s();!(e=t.n()).done;){var r,n=e.value;v(n),null===(r=this.animations.default)||void 0===r||r.setToLast(n,!0)}}catch(e){t.e(e)}finally{t.f()}}},{key:"toAnimation",value:function(e){return!e||"object"!==r(e)&&"function"!=typeof e?null:"use"in e?e.use():Object.keys(e).length?new d(g({},e),this.props.initial):null}},{key:"componentDidMount",value:(D=t(l.mark((function e(){var t=this;return l.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:if(this.resizeEventListener=this.onResize.bind(this),y("resize",this.resizeEventListener),this.update(),!("fonts"in document)){e.next=7;break}return e.next=6,document.fonts.ready;case 6:this.update({mount:!0});case 7:(this.props.parentLevel<1||this.props.noCascade)&&(this.scrollEventListener=this.onScroll.bind(this),y("scroll",this.scrollEventListener),this.props.onMount&&this.play(this.props.onMount,{staggerDelay:.001,immediate:!0}),this.props.whileViewport&&m.delay((function(){return t.onScroll()}),.001));case 8:case"end":return e.stop()}}),e,this)}))),function(){return D.apply(this,arguments)})},{key:"componentDidUpdate",value:(C=t(l.mark((function e(){return l.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:this.update();case 1:case"end":return e.stop()}}),e,this)}))),function(){return C.apply(this,arguments)})},{key:"componentWillUnmount",value:function(){w("scroll",this.scrollEventListener),w("resize",this.resizeEventListener)}},{key:"inViewport",value:function(){var t=this,r=!0,n=!0;if(this.elements.forEach((function(e){var i=e.getBoundingClientRect().y;r=r&&i+e.clientHeight*(1-t.viewportMargin)<window.innerHeight,n=n&&i>window.innerHeight+e.clientHeight*t.viewportMargin})),!this.elements.length){var i,o=k(this.children);try{for(o.s();!(i=o.n()).done;){var s=i.value.animatable.inViewport(),a=e(s,2),u=a[0],l=a[1];r=r&&u,n=n&&l}}catch(e){o.e(e)}finally{o.f()}}return[r,n]}},{key:"onScroll",value:(A=t(l.mark((function t(){var r,n,i,o;return l.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(),r=this.inViewport(),n=e(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 t.stop()}}),t,this)}))),function(){return A.apply(this,arguments)})},{key:"onResize",value:(E=t(l.mark((function e(){var t;return l.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:null!==(t=this.nextResize)&&void 0!==t&&t.cancel&&this.nextResize.cancel(),this.nextResize=m.delay(this.update.bind(this,{mount:!0}),.25);case 2:case"end":return e.stop()}}),e,this)}))),function(){return E.apply(this,arguments)})},{key:"onEnter",value:(j=t(l.mark((function e(t){var r,n=arguments;return l.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 j.apply(this,arguments)})},{key:"onLeave",value:(O=t(l.mark((function e(t){var r,n=arguments;return l.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 O.apply(this,arguments)})},{key:"onFocus",value:(x=t(l.mark((function e(t){var r,n=arguments;return l.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 x.apply(this,arguments)})},{key:"onBlur",value:(b=t(l.mark((function e(t){var r,n=arguments;return l.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 b.apply(this,arguments)})},{key:"onClick",value:(u=t(l.mark((function e(t){var r,n=arguments;return l.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 u.apply(this,arguments)})},{key:"play",value:(a=t(l.mark((function e(t){var r,n,i,o,s,a,u,p,c,h,f,v,d,y,w,b,g,x,L,O,j,E=this,A=arguments;return l.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:if(r=A.length>1&&void 0!==A[1]?A[1]:{},n=r.callback,i=r.reverse,o=void 0!==i&&i,s=r.immediate,a=void 0!==s&&s,u=r.cascade,p=void 0!==u&&u,c=r.groupAdjust,h=void 0===c?0:c,f=r.cascadeDelay,v=void 0===f?0:f,d=r.staggerDelay,y=void 0===d?0:d,!(this.props.parentLevel>0)||p){e.next=3;break}return e.abrupt("return");case 3:if(w="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 E.props?E.props.parentLevel-E.props.group:E.level+h;v=o?w.duration:v;var n=o?r*v:(E.props.parentLevel-r)*v;n=E.props.stagger*t+n+y,b=n>b?n:b,w.play(e,{delay:n,reverse:o,immediate:a})})),g=k(this.children);try{for(g.s();!(x=g.n()).done;)L=x.value,O=L.animatable,j=L.staggerIndex,O.play(t,{reverse:o,immediate:a,cascade:!0,staggerDelay:j<0?0:this.props.stagger*j,cascadeDelay:w.duration,groupAdjust:j<0?0:1})}catch(e){g.e(e)}finally{g.f()}n&&m.delay(n,b+w.duration);case 11: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=g(g({},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]=g(g({},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,u=n.useEvents,l=void 0===u||u;if(!p(e))return e;var f={};if(e.type===F||e.type.prototype instanceof F||(a&&(f={ref:function(e){return r.elements[o]=e}}),l&&(this.props.parentLevel<1||this.props.noCascade)&&(f=g(g({},f),{},{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)}}),l=!1)),(e.type===F||e.type.prototype instanceof F)&&(null===(t=e.props)||void 0===t||!t.noCascade)){var v=this.childrenIndex++;f=g(g(g({},f),this.mergeProperties(e.props,this.props)),{},{parentLevel:this.parentLevel>0?this.parentLevel:this.level,ref:function(e){return r.children[v]={animatable:e,staggerIndex:a?o:-1}}})}var d=c.map(e.props.children,(function(e,t){return r.deepClone(e,{index:t,useEvents:l})}));return h(e,f,d)}},{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(p(e)){(e.type===F||e.type.prototype instanceof 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:"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})}))}}]),F}();u(O,"defaultProps",{parentLevel:0,stagger:.1,viewportMargin:.25,animate:{},animations:{}});export{O as A};