@infinityfx/lively 0.1.0 → 0.2.0
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/README.md +109 -19
- package/dist/cjs/{animatable-a9003593.js → animatable-a2322b2f.js} +1 -1
- package/dist/cjs/animate.js +1 -0
- package/dist/cjs/animation-42f9647d.js +1 -0
- package/dist/cjs/animations.js +1 -1
- package/dist/cjs/index.js +1 -1
- package/dist/cjs/{pop-dff59f12.js → pop-4ac280b1.js} +1 -1
- package/dist/esm/{animatable-2a9b9c4f.js → animatable-95ffad91.js} +1 -1
- package/dist/esm/animate.js +1 -0
- package/dist/esm/{animation-f6683b75.js → animation-f58d5670.js} +1 -1
- package/dist/esm/animations.js +1 -1
- package/dist/esm/index.js +1 -1
- package/dist/esm/{pop-e25984d4.js → pop-1ac6a0dc.js} +1 -1
- package/package.json +13 -6
- package/types/animate/animate.d.ts +30 -0
- package/types/animate.d.ts +2 -29
- package/types/index.d.ts +0 -1
- package/dist/cjs/animation-ee47eecd.js +0 -1
- package/dist/cjs/prebuild.js +0 -1
- package/dist/esm/prebuild.js +0 -1
package/README.md
CHANGED
|
@@ -12,13 +12,18 @@ Lightweight, zero-configuration react animation library.
|
|
|
12
12
|
- [Get started](#get-started)
|
|
13
13
|
- [Installation](#installation)
|
|
14
14
|
- [Usage](#usage)
|
|
15
|
-
- [
|
|
16
|
-
- [Animatable](#animatable)
|
|
17
|
-
- [
|
|
18
|
-
|
|
19
|
-
- [
|
|
20
|
-
- [
|
|
21
|
-
- [
|
|
15
|
+
- [Base components](#base-components)
|
|
16
|
+
- [Animatable](#animatable-animatable)
|
|
17
|
+
- [Morph](#morph-morph)
|
|
18
|
+
- [Auto-animation](#auto-animation)
|
|
19
|
+
- [Animate `<Animate />`](#animate-animate)
|
|
20
|
+
- [`WriteOn <WriteOn />`](#writeon-writeon)
|
|
21
|
+
- [`ColorWipe <ColorWipe />`](#colorwipe-colorwipe)
|
|
22
|
+
- [Animations](#animations)
|
|
23
|
+
- [Overview](#overview)
|
|
24
|
+
- [Create your own](#create-your-own)
|
|
25
|
+
- [Hooks](#hooks)
|
|
26
|
+
- [useUnmount](#useunmount)
|
|
22
27
|
|
|
23
28
|
## Get started
|
|
24
29
|
|
|
@@ -31,7 +36,7 @@ $ npm i @infinityfx/lively
|
|
|
31
36
|
### Usage
|
|
32
37
|
|
|
33
38
|
```jsx
|
|
34
|
-
import { Animate } from '@infinityfx/lively';
|
|
39
|
+
import { Animate } from '@infinityfx/lively/animate';
|
|
35
40
|
|
|
36
41
|
...
|
|
37
42
|
|
|
@@ -42,7 +47,7 @@ import { Animate } from '@infinityfx/lively';
|
|
|
42
47
|
</Animate>
|
|
43
48
|
```
|
|
44
49
|
|
|
45
|
-
##
|
|
50
|
+
## Base components
|
|
46
51
|
|
|
47
52
|
### Animatable `<Animatable />`
|
|
48
53
|
|
|
@@ -61,34 +66,119 @@ import { Animatable } from '@infinityfx/lively';
|
|
|
61
66
|
</Animatable>
|
|
62
67
|
```
|
|
63
68
|
|
|
64
|
-
### Animate `<Animate />`
|
|
65
|
-
|
|
66
|
-
Automatic animation based on pre-fab animations.
|
|
67
|
-
|
|
68
69
|
### Morph `<Morph />`
|
|
69
70
|
|
|
70
71
|
Morphs one element into another.
|
|
71
72
|
|
|
72
|
-
|
|
73
|
+
```jsx
|
|
74
|
+
import { Morph } from '@infinityfx/lively';
|
|
75
|
+
|
|
76
|
+
...
|
|
77
|
+
|
|
78
|
+
<Morph active={state}>
|
|
79
|
+
<div onClick={() => setState(!state)}>
|
|
80
|
+
...
|
|
81
|
+
</div>
|
|
82
|
+
</Morph>
|
|
83
|
+
|
|
84
|
+
<Morph active={!state}>
|
|
85
|
+
<div onClick={() => setState(!state)}>
|
|
86
|
+
...
|
|
87
|
+
</div>
|
|
88
|
+
</Morph>
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
## Auto-animation
|
|
73
92
|
|
|
74
|
-
### `<
|
|
93
|
+
### Animate `<Animate />`
|
|
94
|
+
|
|
95
|
+
Automatic animation based on pre-fab animations.
|
|
96
|
+
|
|
97
|
+
### WriteOn `<WriteOn />`
|
|
75
98
|
|
|
76
99
|
```jsx
|
|
77
|
-
import { WriteOn } from '@infinityfx/lively/
|
|
100
|
+
import { WriteOn } from '@infinityfx/lively/animate';
|
|
78
101
|
|
|
79
102
|
...
|
|
80
103
|
|
|
81
104
|
<WriteOn>Lorem ipsum dolor sit amet</WriteOn>
|
|
82
105
|
```
|
|
83
106
|
|
|
84
|
-
### `<ColorWipe />`
|
|
107
|
+
### ColorWipe `<ColorWipe />`
|
|
85
108
|
|
|
86
109
|
```jsx
|
|
87
|
-
import { ColorWipe } from '@infinityfx/lively/
|
|
110
|
+
import { ColorWipe } from '@infinityfx/lively/animate';
|
|
88
111
|
|
|
89
112
|
...
|
|
90
113
|
|
|
91
114
|
<ColorWipe>
|
|
92
115
|
<div class="my-class">...</div>
|
|
93
116
|
</ColorWipe>
|
|
94
|
-
```
|
|
117
|
+
```
|
|
118
|
+
|
|
119
|
+
## Animations
|
|
120
|
+
|
|
121
|
+
### Overview
|
|
122
|
+
|
|
123
|
+
Lively exports a submodule called animations which contains various pre-fab animations that can be used in tandem with the `<Animate />` component. These animations can be used as is, or can be configured with extra options by calling the respective animation as a function which takes as an argument the options object.
|
|
124
|
+
|
|
125
|
+
```jsx
|
|
126
|
+
import { Move } from '@infinityfx/lively/animations';
|
|
127
|
+
|
|
128
|
+
// configure the animation
|
|
129
|
+
Move({ direction: 'down' }); // default = 'up'
|
|
130
|
+
```
|
|
131
|
+
|
|
132
|
+
These pre-fab can be used as followed with either an `<Animate />` or `<Animatable />` component:
|
|
133
|
+
|
|
134
|
+
```jsx
|
|
135
|
+
import { Move } from '@infinityfx/lively/animations';
|
|
136
|
+
import { Animate } from '@infinityfx/lively/animate';
|
|
137
|
+
|
|
138
|
+
...
|
|
139
|
+
|
|
140
|
+
<Animate animations={[Move, Move({ ... })]}>...</Animate>
|
|
141
|
+
```
|
|
142
|
+
|
|
143
|
+
```jsx
|
|
144
|
+
import { Move } from '@infinityfx/lively/animations';
|
|
145
|
+
import { Animatable } from '@infinityfx/lively';
|
|
146
|
+
|
|
147
|
+
...
|
|
148
|
+
|
|
149
|
+
<Animatable animations={{
|
|
150
|
+
myAnimationName: Move,
|
|
151
|
+
myOtherAnimation: Move({ ... })
|
|
152
|
+
}}>...</Animatable>
|
|
153
|
+
|
|
154
|
+
// or
|
|
155
|
+
|
|
156
|
+
<Animatable animate={Move}>...</Animatable>
|
|
157
|
+
```
|
|
158
|
+
|
|
159
|
+
### Create your own
|
|
160
|
+
|
|
161
|
+
If you whish to create your own pre-fab animation, you can do so by creating a function with the static method `use` attached to it. Furthmore adding support for extra configuration options, leads to the following structure:
|
|
162
|
+
|
|
163
|
+
```js
|
|
164
|
+
import { Animation } from '@infinityfx/lively';
|
|
165
|
+
|
|
166
|
+
export default function myAnimation(options = {}) {
|
|
167
|
+
myAnimation.use = myAnimation.use.bind(myAnimation, options);
|
|
168
|
+
return myAnimation;
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
myAnimation.use = (options = {}) => {
|
|
172
|
+
|
|
173
|
+
// do whatever you want here
|
|
174
|
+
|
|
175
|
+
// A new Animation takes two arguments, an object with values/keyframes to animate to and an object of initial values.
|
|
176
|
+
return new Animation({ ... }, { ... });
|
|
177
|
+
}
|
|
178
|
+
```
|
|
179
|
+
|
|
180
|
+
## Hooks
|
|
181
|
+
|
|
182
|
+
### useUnmount
|
|
183
|
+
|
|
184
|
+
The useUnmount hook can be used to animate components that are being unmounted.
|
|
@@ -1 +1 @@
|
|
|
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-ee47eecd.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
|
+
"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-42f9647d.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;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("@babel/runtime/helpers/objectWithoutProperties"),r=require("@babel/runtime/helpers/classCallCheck"),n=require("@babel/runtime/helpers/createClass"),i=require("@babel/runtime/helpers/inherits"),a=require("@babel/runtime/helpers/possibleConstructorReturn"),l=require("@babel/runtime/helpers/getPrototypeOf"),o=require("@babel/runtime/helpers/defineProperty"),u=require("react"),s=require("./animatable-a2322b2f.js"),c=require("./pop-4ac280b1.js"),p=require("./animation-42f9647d.js");function f(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("@babel/runtime/helpers/slicedToArray"),require("@babel/runtime/helpers/asyncToGenerator"),require("@babel/runtime/helpers/typeof"),require("@babel/runtime/regenerator"),require("@babel/runtime/helpers/toConsumableArray");var m=f(e),b=f(t),d=f(r),h=f(n),y=f(i),v=f(a),g=f(l),O=f(o),j=f(u),q=["levels","animations"];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 k(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(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 v.default(this,r)}}var E=function(e){y.default(r,e);var t=A(r);function r(e){var n;return d.default(this,r),(n=t.call(this,e)).levels=n.props.levels,n.animations=p.padArray(n.props.animations,n.levels),n}return h.default(r,[{key:"makeAnimatable",value:function(e){var t=this,r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1;if(r<1||u.Children.count(e)<1)return e;var n=this.props;n.levels,n.animations;var i=b.default(n,q),a=this.animations[this.levels-r];return r===this.levels&&(i.ref=function(e){return t.animatable=e}),j.default.createElement(s.Animatable,m.default({animate:a},i),u.Children.map(e,(function(e){return u.isValidElement(e)?u.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,k({},r))}},{key:"shouldComponentUpdate",value:function(e){return e.animations===this.props.animations}},{key:"render",value:function(){return this.makeAnimatable(this.props.children,this.levels)}}]),r}(u.Component);function w(e){var t=e.children,r=e.className,n=e.style,i=e.duration;if("string"!=typeof t)return t;var a=t.split("");return j.default.createElement("div",{className:r,style:n},j.default.createElement(s.Animatable,{whileViewport:!0,animate:{opacity:1,position:{y:0},rotation:0,duration:.8},initial:{opacity:0,position:{y:"100%"},rotation:10},stagger:(i-.8)/(a.length-1)},a.map((function(e,t){return j.default.createElement("span",{style:{display:"inline-block"},key:t},/\s/.test(e)?" ":e)}))))}function C(e){var t,r=e.children,n=e.color,i=e.duration,a=(null===(t=r.props)||void 0===t?void 0:t.children)||[];return Array.isArray(a)||(a=[a]),a.unshift(j.default.createElement(s.Animatable,{key:0,initial:{clip:{right:0}},animate:{clip:{left:1},duration:i/2}},j.default.createElement("div",{style:{position:"absolute",inset:0,backgroundColor:n}}))),j.default.createElement(s.Animatable,{whileViewport:!0,animate:{clip:{right:0},duration:i/2},initial:{clip:{right:1}}},u.cloneElement(r,{},a))}O.default(E,"defaultProps",{levels:1,stagger:.1,viewportMargin:.25,animations:[c.Move,c.Pop]}),w.defaultProps={style:{},className:"",duration:1.6},C.defaultProps={color:"grey",duration:1.6},exports.Animate=E,exports.ColorWipe=C,exports.WriteOn=w;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";var e=require("@babel/runtime/helpers/slicedToArray"),t=require("@babel/runtime/helpers/toConsumableArray"),i=require("@babel/runtime/helpers/objectWithoutProperties"),n=require("@babel/runtime/helpers/classCallCheck"),r=require("@babel/runtime/helpers/createClass"),a=require("@babel/runtime/helpers/defineProperty"),o=require("@babel/runtime/helpers/asyncToGenerator"),s=require("@babel/runtime/regenerator"),l=require("@babel/runtime/helpers/typeof");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=u(e),d=u(t),y=u(i),f=u(n),h=u(r),v=u(a),p=u(o),g=u(s),m=u(l),b=function(){function e(){f.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=p.default(g.default.mark((function e(){var t,i;return g.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 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){var t=this.search(e);this.queue[t].id===e.id&&this.queue.splice(t,1),delete e.cancel}},{key:"delay",value:function(e,t){var i=this;if(e instanceof Function){var n=this.uuid(),r=Date.now()+1e3*t,a={timestamp:r,id:n,cancel:function(){return i.cancel(a)}};return this.insert({callback:function(){delete a.cancel,e()},timestamp:r,id:n}),a}}}],[{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:function(e,t){return this.get().delay(e,t)}},{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){return e&&"object"===m.default(e)&&!Array.isArray(e)},L=function(e){var t=e.match(/^#([\da-f]{1,2})([\da-f]{1,2})([\da-f]{1,2})([\da-f]{2})?/i),i=c.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=c.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=["delay","duration","repeat","interpolate","origin","useLayout"];function S(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 A(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 A(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 A(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,c=t.origin,d=void 0===c?{x:.5,y:.5}:c,h=t.useLayout,v=void 0!==h&&h,p=y.default(t,x),g=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};f.default(this,e),this.useLayout=v,this.keyframes=this.getKeyframes(p,g),this.delay=n,this.duration=a,this.delta=a/(this.keyframes.length-1),this.interpolation="spring"===u?"cubic-bezier(0.65, 0.34, 0.7, 1.42)":u,this.origin=this.originToStyle(d),this.repeat=s}return h.default(e,[{key:"originToStyle",value:function(e){var t=.5,i=.5;if(k(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(d.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={start:{},end:{}};for(var s in t)if(s in e.initials){var l=i.interpolateKeyframe(t[s],a,r);k(l)&&("start"in l||"end"in l||"set"in l)?("start"in l&&(o.start[s]=l.start),"end"in l&&(o.end[s]=l.end),"set"in l&&(o[s]=l.set)):o[s]=l}return i.keyframeToStyle(o)}))}},{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 L(i);if(i.match(/^rgba?\(.*\)$/i))return w(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(k(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=S(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(k(e)){for(var n={},r=0,a=Object.keys(e);r<a.length;r++){var o=a[r];n[o]=this.interpolate(e[o],k(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=c.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=c.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}),b.delay(l,.001)):l(),("end"in t&&!s||"start"in t&&s)&&b.delay(this.apply.bind(this,e,t[s?"start":"end"],{duration:0}),this.delta)}},{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,i=this,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},r=n.immediate,a=void 0!==r&&r,o=n.reverse,s=void 0!==o&&o,l=n.repeat,u=void 0===l?this.repeat:l;!e.Lively.animating||a?(this.setInitial(e,s?this.keyframes[this.keyframes.length-1]:this.keyframes[0]),e.Lively.index=1,e.Lively.animating=!0,null!==(t=e.Lively.next)&&void 0!==t&&t.cancel&&e.Lively.next.cancel(),requestAnimationFrame((function(){return i.getNext(e,s,u)}))):e.Lively.queue.push([this,{reverse:s,repeat:u}])}},{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?e.next=b.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=c.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),this.apply(e,this.keyframes[l],{reverse:i}),e.Lively.index++,e.Lively.next=b.delay((function(){return t.getNext(e,i,n)}),this.delta)}}]),e}();v.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=b,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=function(e){"Lively"in e||(e.Lively={queue:[]}),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,y=e.getBoundingClientRect(),f=y.x,h=y.y,v=y.width,p=y.height;e.Lively.initials={x:f,y:h,paddingLeft:i,paddingRight:n,paddingTop:r,paddingBottom:a,backgroundColor:o,color:s,fontSize:c,zIndex:d,width:v+"px",height:p+"px",borderRadius:l.split(" ")[0],padding:u.split(" ")[0]}},exports.isObject=k,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]};
|
package/dist/cjs/animations.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/defineProperty"),r=require("./animation-
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/defineProperty"),r=require("./animation-42f9647d.js"),t=require("./pop-4ac280b1.js"),n=require("@babel/runtime/helpers/objectWithoutProperties");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("@babel/runtime/helpers/slicedToArray"),require("@babel/runtime/helpers/toConsumableArray"),require("@babel/runtime/helpers/classCallCheck"),require("@babel/runtime/helpers/createClass"),require("@babel/runtime/helpers/asyncToGenerator"),require("@babel/runtime/regenerator"),require("@babel/runtime/helpers/typeof");var i=o(e),c=o(n);function u(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 a(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?u(Object(t),!0).forEach((function(r){i.default(e,r,t[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):u(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))}))}return e}function s(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return s.use=s.use.bind(s,e),s}s.use=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return new r.Animation(a({opacity:1,duration:.65},e),{opacity:0})};var p=["direction"];function l(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 b(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?l(Object(t),!0).forEach((function(r){i.default(e,r,t[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):l(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))}))}return e}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 e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=e.direction,n=void 0===t?"right":t,o=c.default(e,p),i=0,u=1,a={x:0,y:.5};switch(n){case"left":a.x=1;break;case"up":i=1,u=0,a={x:0,y:1};break;case"down":i=1,u=0,a={x:0,y:0}}return new r.Animation(b({scale:{x:1},origin:a,duration:.6},o),{scale:{x:i,y:u}})};var O=["direction"];function y(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 d(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{};r%2?y(Object(t),!0).forEach((function(r){i.default(e,r,t[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):y(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))}))}return e}function j(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return j.use=j.use.bind(j,e),j}j.use=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=e.direction,n=void 0===t?"right":t,o=c.default(e,O);return["left","right","top","bottom"].includes(n)||(n="right"),new r.Animation(d({clip:i.default({},n,0)},o),{clip:i.default({},n,1)})},exports.Move=t.Move,exports.Pop=t.Pop,exports.Fade=s,exports.Scale=f,exports.Wipe=j;
|
package/dist/cjs/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./animatable-a9003593.js"),t=require("@babel/runtime/helpers/extends"),r=require("@babel/runtime/helpers/objectWithoutProperties"),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("react"),p=require("./pop-dff59f12.js"),c=require("./animation-ee47eecd.js"),f=require("@babel/runtime/helpers/toConsumableArray"),h=require("@babel/runtime/helpers/asyncToGenerator"),d=require("@babel/runtime/helpers/get"),y=require("@babel/runtime/regenerator");function m(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("@babel/runtime/helpers/slicedToArray"),require("@babel/runtime/helpers/typeof");var v=m(t),b=m(r),g=m(n),w=m(i),O=m(o),x=m(a),j=m(s),k=m(u),A=m(l),P=m(f),S=m(h),q=m(d),L=m(y),C=["levels","animations"];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 R(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 I(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=j.default(e);if(t){var i=j.default(this).constructor;r=Reflect.construct(n,arguments,i)}else r=n.apply(this,arguments);return x.default(this,r)}}var M=function(t){O.default(n,t);var r=I(n);function n(e){var t;return g.default(this,n),(t=r.call(this,e)).levels=t.props.levels,t.animations=c.padArray(t.props.animations,t.levels),t}return w.default(n,[{key:"makeAnimatable",value:function(t){var r=this,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1;if(n<1||l.Children.count(t)<1)return t;var i=this.props;i.levels,i.animations;var o=b.default(i,C),a=this.animations[this.levels-n];return n===this.levels&&(o.ref=function(e){return r.animatable=e}),A.default.createElement(e.Animatable,v.default({animate:a},o),l.Children.map(t,(function(e){return l.isValidElement(e)?l.cloneElement(e,{},r.makeAnimatable(e.props.children,n-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,R({},r))}},{key:"shouldComponentUpdate",value:function(e){return e.animations===this.props.animations}},{key:"render",value:function(){return this.makeAnimatable(this.props.children,this.levels)}}]),n}(l.Component);function U(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 D(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 D(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 D(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,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?K(Object(r),!0).forEach((function(t){k.default(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):K(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function T(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=j.default(e);if(t){var i=j.default(this).constructor;r=Reflect.construct(n,arguments,i)}else r=n.apply(this,arguments);return x.default(this,r)}}k.default(M,"defaultProps",{levels:1,stagger:.1,viewportMargin:.25,animations:[p.Move,p.Pop]});var B=function(e){O.default(o,e);var t,r,n,i=T(o);function o(e){var t,r,n;return g.default(this,o),(n=i.call(this,e)).parent=(null===(t=(r=n.props).parent)||void 0===t?void 0:t.call(r))||{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"},n}return w.default(o,[{key:"layout",value:function(){this.position=this.position||getComputedStyle(this.element).position;var e=F(F({},this.parentStyles),{},{width:this.element.offsetWidth,height:this.element.offsetHeight});"absolute"===this.position||"fixed"===this.position?e.position="absolute":(e.position="relative",this.childStyles=F(F({},this.childStyles),{},{position:"absolute",margin:0,top:0,left:0})),this.parentStyles=e,this.useLayout=!0,this.hasUpdated=!0,this.forceUpdate()}},{key:"update",value:(n=S.default(L.default.mark((function e(){var t,r,n,i,o,a,s,u,l=arguments;return L.default.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:if(t=l.length>0&&void 0!==l[0]?l[0]:{},r=t.mount,n=void 0===r?!this.useLayout:r,i=t.active,o=void 0===i?this.props.active:i,this.element=this.elements[0],this.element){e.next=4;break}return e.abrupt("return");case 4:if(!this.props.useLayout||!n){e.next=6;break}return e.abrupt("return",this.layout());case 6:if(!this.element.Lively||this.hasUpdated){e.next=8;break}return e.abrupt("return");case 8:if(c.cacheElementStyles(this.element),this.hasUpdated=!1,!this.parent.props){e.next=12;break}return e.abrupt("return");case 12:return e.next=14,c.AnimationQueue.sleep(.001);case 14:this.setUniqueId(),this.animations={default:this.animationFromKeyframes.apply(this,P.default(this.unmorphKeyframes()))},this.animations.default.setToLast(this.element,!o),a=U(this.children);try{for(a.s();!(s=a.n()).done;)(u=s.value.animatable).setUniqueId(),u.animations={default:u.animationFromKeyframes.apply(u,P.default(u.unmorphKeyframes()))},u.animations.default.setToLast(u.element,!o)}catch(e){a.e(e)}finally{a.f()}case 19:case"end":return e.stop()}}),e,this)}))),function(){return n.apply(this,arguments)})},{key:"setUniqueId",value:function(){this.parent.id&&(this.id=this.parent.id),"id"in this||("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]++),"id"in this&&this.element.setAttribute("lively-morph-id",this.id.toString())}},{key:"componentDidUpdate",value:(r=S.default(L.default.mark((function e(t){var r=this;return L.default.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return Object.keys(t).reduce((function(e,n){return t[n]!=r.props[n]?[].concat(P.default(e),[n]):e}),[]),e.next=3,this.update({mount:!1,active:t.active});case 3:t.active!==this.props.active&&this.morph(this.props.active);case 4:case"end":return e.stop()}}),e,this)}))),function(e){return r.apply(this,arguments)})},{key:"morph",value:(t=S.default(L.default.mark((function e(t){var r,n;return L.default.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return t&&this.element.setAttribute("lively-morph-target",!0),e.next=3,c.AnimationQueue.sleep(.001);case 3:t?this.play("default",{immediate:!0}):(r=document.querySelector('[lively-morph-group="'.concat(this.group,'"][lively-morph-target="true"]')))&&(r.removeAttribute("lively-morph-target"),(n=r.getAttribute("lively-morph-id"))in this.animations||this.createAnimations(n),this.play(n,{immediate:!0}));case 4:case"end":return e.stop()}}),e,this)}))),function(e){return t.apply(this,arguments)})},{key:"createAnimations",value:function(e){var t=document.querySelector('[lively-morph-group="'.concat(this.group,'"][lively-morph-id="').concat(e,'"]'));this.animations[e]=this.animationFromKeyframes.apply(this,P.default(this.morphKeyframes(this.element,t)));var r,n=U(this.children);try{for(n.s();!(r=n.n()).done;){r.value.animatable.createAnimations(e)}}catch(e){n.e(e)}finally{n.f()}}},{key:"animationFromKeyframes",value:function(e){var t=this,r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=P.default(o.properties);this.props.useLayout&&n.push.apply(n,P.default(o.layoutProperties));var i,a={useLayout:this.props.useLayout,interpolate:this.props.interpolate,origin:{x:0,y:0},duration:this.props.duration},s=U(n);try{var u=function(){var n=i.value;if(t.props.ignore.includes(n))return"continue";var o="auto";if(n in e&&(o=n),!(o in e))return"continue";a[n]=e[o].map((function(e){if(!c.isObject(e))return e in r?r[e][n]:e;var t={};for(var i in e)e[i]in r?t[i]=r[e[i]][n]:t[i]=e[i];return t}))};for(s.s();!(i=s.n()).done;)u()}catch(e){s.e(e)}finally{s.f()}return new c.Animation(a)}},{key:"morphKeyframes",value:function(e,t){var r,n;if(!t)return[{opacity:[1,0,0],interact:[!0,!1,!1]}];e=null===(r=e.Lively)||void 0===r?void 0:r.initials,t=null===(n=t.Lively)||void 0===n?void 0:n.initials,this.x=t.x-e.x,this.y=t.y-e.y,this.parent.props&&(this.x-=this.parent.x,this.y-=this.parent.y);var i=parseInt(t.width)/parseInt(e.width),o=parseInt(t.height)/parseInt(e.height);return[{auto:["from","to",{set:"to",end:"from"}],position:["from","to",{set:"to",end:"from"}],scale:["from","to",{set:"to",end:"from"}],opacity:[1,1,0],interact:[!0,!0,!1]},{from:F(F({},e),{},{position:{x:0,y:0},scale:{x:1,y:1}}),to:F(F({},t),{},{position:{x:this.x,y:this.y},scale:{x:i,y:o}})}]}},{key:"unmorphKeyframes",value:function(){return[{auto:["from","from","from"],position:[{x:0,y:0}],scale:[{x:1,y:1}],opacity:[0,0,1],interact:[!1,!1,!0]},{from:this.element.Lively.initials}]}},{key:"getChildren",value:function(e){var t=this;return l.Children.map(e,(function(e){if(!l.isValidElement(e))return e;var r=e.type!==o?{}:{parent:function(){return t},duration:t.props.duration};return l.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(!l.isValidElement(t))return t;var r=this.getChildren(t.props.children),n={"lively-morph-group":this.group,style:F(F({},t.props.style),this.childStyles)},i=q.default(j.default(o.prototype),"render",this).call(this,l.cloneElement(t,n,r));return this.useLayout?l.cloneElement(t,{style:this.parentStyles},i):i}}]),o}(e.Animatable);k.default(B,"properties",["position","scale","opacity","backgroundColor","color","interact","zIndex"]),k.default(B,"layoutProperties",["borderRadius","fontSize"]),k.default(B,"defaultProps",{group:0,active:!1,useLayout:!1,interpolate:"ease",duration:1.5,ignore:[]}),exports.Animatable=e.Animatable,exports.Animate=M,exports.Morph=B;
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./animatable-a2322b2f.js"),t=require("@babel/runtime/helpers/toConsumableArray"),r=require("@babel/runtime/helpers/asyncToGenerator"),i=require("@babel/runtime/helpers/classCallCheck"),n=require("@babel/runtime/helpers/createClass"),o=require("@babel/runtime/helpers/get"),a=require("@babel/runtime/helpers/inherits"),s=require("@babel/runtime/helpers/possibleConstructorReturn"),u=require("@babel/runtime/helpers/getPrototypeOf"),l=require("@babel/runtime/helpers/defineProperty"),p=require("@babel/runtime/regenerator"),h=require("react"),c=require("./animation-42f9647d.js");function f(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("@babel/runtime/helpers/slicedToArray"),require("@babel/runtime/helpers/typeof"),require("@babel/runtime/helpers/objectWithoutProperties");var d=f(t),y=f(r),m=f(i),v=f(n),b=f(o),g=f(a),w=f(s),x=f(u),A=f(l),k=f(p);function O(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 S(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 S(e,t)}(e))||t&&e&&"number"==typeof e.length){r&&(e=r);var i=0,n=function(){};return{s:n,n:function(){return i>=e.length?{done:!0}:{done:!1,value:e[i++]}},e:function(e){throw e},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(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 S(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,i=new Array(t);r<t;r++)i[r]=e[r];return i}function q(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);t&&(i=i.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,i)}return r}function j(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?q(Object(r),!0).forEach((function(t){A.default(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):q(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}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,i=x.default(e);if(t){var n=x.default(this).constructor;r=Reflect.construct(i,arguments,n)}else r=i.apply(this,arguments);return w.default(this,r)}}var P=function(e){g.default(o,e);var t,r,i,n=L(o);function o(e){var t,r,i;return m.default(this,o),(i=n.call(this,e)).parent=(null===(t=(r=i.props).parent)||void 0===t?void 0:t.call(r))||{group:""},i.group=i.parent.group+i.props.group,i.useLayout=!1,i.childStyles={pointerEvents:"initial"},i.parentStyles={background:"transparent",border:"none",padding:0,pointerEvents:"none",backdropFilter:"none",boxShadow:"unset",fontSize:"unset"},i}return v.default(o,[{key:"layout",value:function(){this.position=this.position||getComputedStyle(this.element).position;var e=j(j({},this.parentStyles),{},{width:this.element.offsetWidth,height:this.element.offsetHeight});"absolute"===this.position||"fixed"===this.position?e.position="absolute":(e.position="relative",this.childStyles=j(j({},this.childStyles),{},{position:"absolute",margin:0,top:0,left:0})),this.parentStyles=e,this.useLayout=!0,this.hasUpdated=!0,this.forceUpdate()}},{key:"update",value:(i=y.default(k.default.mark((function e(){var t,r,i,n,o,a,s,u,l=arguments;return k.default.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:if(t=l.length>0&&void 0!==l[0]?l[0]:{},r=t.mount,i=void 0===r?!this.useLayout:r,n=t.active,o=void 0===n?this.props.active:n,this.element=this.elements[0],this.element){e.next=4;break}return e.abrupt("return");case 4:if(!this.props.useLayout||!i){e.next=6;break}return e.abrupt("return",this.layout());case 6:if(!this.element.Lively||this.hasUpdated){e.next=8;break}return e.abrupt("return");case 8:if(c.cacheElementStyles(this.element),this.hasUpdated=!1,!this.parent.props){e.next=12;break}return e.abrupt("return");case 12:return e.next=14,c.AnimationQueue.sleep(.001);case 14:this.setUniqueId(),this.animations={default:this.unmorphAnimation()},o||this.animations.default.setInitial(this.element),a=O(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(e){a.e(e)}finally{a.f()}case 19:case"end":return e.stop()}}),e,this)}))),function(){return i.apply(this,arguments)})},{key:"setUniqueId",value:function(){this.parent.id&&(this.id=this.parent.id),"id"in this||("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]++),"id"in this&&this.element.setAttribute("lively-morph-id",this.id.toString())}},{key:"componentDidUpdate",value:(r=y.default(k.default.mark((function e(t){return k.default.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return e.next=2,this.update({mount:!1,active:t.active});case 2:t.active!==this.props.active&&this.morph(this.props.active);case 3:case"end":return e.stop()}}),e,this)}))),function(e){return r.apply(this,arguments)})},{key:"morph",value:(t=y.default(k.default.mark((function e(t){var r,i;return k.default.wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return t&&this.element.setAttribute("lively-morph-target",!0),e.next=3,c.AnimationQueue.sleep(.001);case 3:t?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 e.stop()}}),e,this)}))),function(e){return t.apply(this,arguments)})},{key:"createAnimations",value:function(e){var t=document.querySelector('[lively-morph-group="'.concat(this.group,'"][lively-morph-id="').concat(e,'"]'));this.animations[e]=this.morphAnimation(this.element,t);var r,i=O(this.children);try{for(i.s();!(r=i.n()).done;){r.value.animatable.createAnimations(e)}}catch(e){i.e(e)}finally{i.f()}}},{key:"animationFromKeyframes",value:function(e){var t=this,r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},i=o.properties.slice();this.props.useLayout&&i.push.apply(i,d.default(o.layoutProperties));var n,a={useLayout:this.props.useLayout,interpolate:this.props.interpolate,origin:{x:0,y:0},duration:this.props.duration},s=O(i);try{var u=function(){var i=n.value;if(t.props.ignore.includes(i))return"continue";var o=i in e?i:"auto";if(!(o in e))return"continue";a[i]=e[o].map((function(e){if(!c.isObject(e))return e in r?r[e][i]:e;var t={};for(var n in e)e[n]in r?t[n]=r[e[n]][i]:t[n]=e[n];return t}))};for(s.s();!(n=s.n()).done;)u()}catch(e){s.e(e)}finally{s.f()}return new c.Animation(a)}},{key:"morphAnimation",value:function(e,t){var r,i;return t?(e=null===(r=e.Lively)||void 0===r?void 0:r.initials,t=null===(i=t.Lively)||void 0===i?void 0:i.initials,this.x=t.x-e.x,this.y=t.y-e.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,0],interact:[!0,!0,!1]},{from:j(j({},e),{},{position:{x:0,y:0},scale:{x:1,y:1}}),to:j(j({},t),{},{position:{x:this.x,y:this.y},scale:{x:parseInt(t.width)/parseInt(e.width),y:parseInt(t.height)/parseInt(e.height)}})})):this.animationFromKeyframes({opacity:[1,0,0],interact:[!0,!1,!1]})}},{key:"unmorphAnimation",value:function(){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]},{from:this.element.Lively.initials})}},{key:"getChildren",value:function(e){var t=this;return h.Children.map(e,(function(e){if(!h.isValidElement(e))return e;var r=e.type!==o?{}:{parent:function(){return t},duration:t.props.duration};return h.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(!h.isValidElement(t))return t;var r=this.getChildren(t.props.children),i={"lively-morph-group":this.group,style:j(j({},t.props.style),this.childStyles)},n=b.default(x.default(o.prototype),"render",this).call(this,h.cloneElement(t,i,r));return this.useLayout?h.cloneElement(t,{style:this.parentStyles},n):n}}]),o}(e.Animatable);A.default(P,"properties",["position","scale","opacity","backgroundColor","color","interact","zIndex"]),A.default(P,"layoutProperties",["borderRadius","fontSize"]),A.default(P,"defaultProps",{group:0,active:!1,useLayout:!1,interpolate:"ease",duration:1.5,ignore:[]}),exports.Animatable=e.Animatable,exports.Animation=c.Animation,exports.Morph=P;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var e=require("@babel/runtime/helpers/defineProperty"),t=require("@babel/runtime/helpers/objectWithoutProperties"),r=require("./animation-
|
|
1
|
+
"use strict";var e=require("@babel/runtime/helpers/defineProperty"),t=require("@babel/runtime/helpers/objectWithoutProperties"),r=require("./animation-42f9647d.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 +1 @@
|
|
|
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-f6683b75.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};
|
|
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-f58d5670.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};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import e from"@babel/runtime/helpers/extends";import t from"@babel/runtime/helpers/objectWithoutProperties";import r from"@babel/runtime/helpers/classCallCheck";import n from"@babel/runtime/helpers/createClass";import i from"@babel/runtime/helpers/inherits";import o from"@babel/runtime/helpers/possibleConstructorReturn";import a from"@babel/runtime/helpers/getPrototypeOf";import l from"@babel/runtime/helpers/defineProperty";import s,{Children as p,isValidElement as c,cloneElement as u,Component as m}from"react";import{A as f}from"./animatable-95ffad91.js";import{M as b,P as h}from"./pop-1ac6a0dc.js";import{p as y}from"./animation-f58d5670.js";import"@babel/runtime/helpers/slicedToArray";import"@babel/runtime/helpers/asyncToGenerator";import"@babel/runtime/helpers/typeof";import"@babel/runtime/regenerator";import"@babel/runtime/helpers/toConsumableArray";var v=["levels","animations"];function d(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?d(Object(r),!0).forEach((function(t){l(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):d(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}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=a(e);if(t){var i=a(this).constructor;r=Reflect.construct(n,arguments,i)}else r=n.apply(this,arguments);return o(this,r)}}var P=function(o){i(l,m);var a=O(l);function l(e){var t;return r(this,l),(t=a.call(this,e)).levels=t.props.levels,t.animations=y(t.props.animations,t.levels),t}return n(l,[{key:"makeAnimatable",value:function(r){var n=this,i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1;if(i<1||p.count(r)<1)return r;var o=this.props;o.levels,o.animations;var a=t(o,v),l=this.animations[this.levels-i];return i===this.levels&&(a.ref=function(e){return n.animatable=e}),s.createElement(f,e({animate:l},a),p.map(r,(function(e){return c(e)?u(e,{},n.makeAnimatable(e.props.children,i-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,g({},r))}},{key:"shouldComponentUpdate",value:function(e){return e.animations===this.props.animations}},{key:"render",value:function(){return this.makeAnimatable(this.props.children,this.levels)}}]),l}();function j(e){var t=e.children,r=e.className,n=e.style,i=e.duration;if("string"!=typeof t)return t;var o=t.split("");return s.createElement("div",{className:r,style:n},s.createElement(f,{whileViewport:!0,animate:{opacity:1,position:{y:0},rotation:0,duration:.8},initial:{opacity:0,position:{y:"100%"},rotation:10},stagger:(i-.8)/(o.length-1)},o.map((function(e,t){return s.createElement("span",{style:{display:"inline-block"},key:t},/\s/.test(e)?" ":e)}))))}function k(e){var t,r=e.children,n=e.color,i=e.duration,o=(null===(t=r.props)||void 0===t?void 0:t.children)||[];return Array.isArray(o)||(o=[o]),o.unshift(s.createElement(f,{key:0,initial:{clip:{right:0}},animate:{clip:{left:1},duration:i/2}},s.createElement("div",{style:{position:"absolute",inset:0,backgroundColor:n}}))),s.createElement(f,{whileViewport:!0,animate:{clip:{right:0},duration:i/2},initial:{clip:{right:1}}},u(r,{},o))}l(P,"defaultProps",{levels:1,stagger:.1,viewportMargin:.25,animations:[b,h]}),j.defaultProps={style:{},className:"",duration:1.6},k.defaultProps={color:"grey",duration:1.6};export{P as Animate,k as ColorWipe,j as WriteOn};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import e from"@babel/runtime/helpers/slicedToArray";import t from"@babel/runtime/helpers/toConsumableArray";import i from"@babel/runtime/helpers/objectWithoutProperties";import n from"@babel/runtime/helpers/classCallCheck";import r from"@babel/runtime/helpers/createClass";import a from"@babel/runtime/helpers/defineProperty";import o from"@babel/runtime/helpers/asyncToGenerator";import s from"@babel/runtime/regenerator";import l from"@babel/runtime/helpers/typeof";var u=function(){function e(){n(this,e),this.queue=[],this.tick()}var t;return r(e,[{key:"uuid",value:function(){return Math.floor(1e6*Math.random()).toString(16).padStart("0",6)}},{key:"tick",value:(t=o(s.mark((function e(){var t,i;return s.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 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){var t=this.search(e);this.queue[t].id===e.id&&this.queue.splice(t,1),delete e.cancel}},{key:"delay",value:function(e,t){var i=this;if(e instanceof Function){var n=this.uuid(),r=Date.now()+1e3*t,a={timestamp:r,id:n,cancel:function(){return i.cancel(a)}};return this.insert({callback:function(){delete a.cancel,e()},timestamp:r,id:n}),a}}}],[{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:function(e,t){return this.get().delay(e,t)}},{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}(),c=function(e){return e&&"object"===l(e)&&!Array.isArray(e)},d=function(e,t){return new Array(t).fill(0).map((function(t,i){return i<e.length?e[i]:e[e.length-1]}))},y=function(t){var i=t.match(/^#([\da-f]{1,2})([\da-f]{1,2})([\da-f]{1,2})([\da-f]{2})?/i),n=e(i,5);n[0];var r=n[1],a=n[2],o=n[3],s=n[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}},h=function(t){var i=t.match(/^rgba?\((\d+)\D+(\d+)\D+(\d+)\D*(\d+)?\)/i),n=e(i,5);n[0];var r=n[1],a=n[2],o=n[3],s=n[4];return{r:parseInt(r),g:parseInt(a),b:parseInt(o),a:void 0!==s?parseInt(s):255}},v=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}},f=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]},p=function(e){"Lively"in e||(e.Lively={queue:[]}),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,y=e.getBoundingClientRect(),h=y.x,v=y.y,f=y.width,p=y.height;e.Lively.initials={x:h,y:v,paddingLeft:i,paddingRight:n,paddingTop:r,paddingBottom:a,backgroundColor:o,color:s,fontSize:c,zIndex:d,width:f+"px",height:p+"px",borderRadius:l.split(" ")[0],padding:u.split(" ")[0]}},g=["delay","duration","repeat","interpolate","origin","useLayout"];function m(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 b(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 b(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 b(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 k=function(){function a(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=e.delay,r=void 0===t?0:t,o=e.duration,s=void 0===o?1:o,l=e.repeat,u=void 0===l?1:l,c=e.interpolate,d=void 0===c?"ease":c,y=e.origin,h=void 0===y?{x:.5,y:.5}:y,v=e.useLayout,f=void 0!==v&&v,p=i(e,g),m=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};n(this,a),this.useLayout=f,this.keyframes=this.getKeyframes(p,m),this.delay=r,this.duration=s,this.delta=s/(this.keyframes.length-1),this.interpolation="spring"===d?"cubic-bezier(0.65, 0.34, 0.7, 1.42)":d,this.origin=this.originToStyle(h),this.repeat=u}return r(a,[{key:"originToStyle",value:function(e){var t=.5,i=.5;if(c(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(e){var i=this,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},r=0,o=function(o){var s=o in n?n[o]:a.initials[o];Array.isArray(e[o])||(e[o]=[e[o]]),e[o]=e[o].length>1?e[o]:[s].concat(t(e[o])),e[o]=e[o].map((function(e){return i.sanitize(o,e)})),r=e[o].length>r?e[o].length:r};for(var s in e)o(s);return new Array(r).fill(0).map((function(t,n){var o={start:{},end:{}};for(var s in e)if(s in a.initials){var l=i.interpolateKeyframe(e[s],n,r);c(l)&&("start"in l||"end"in l||"set"in l)?("start"in l&&(o.start[s]=l.start),"end"in l&&(o.end[s]=l.end),"set"in l&&(o[s]=l.set)):o[s]=l}return i.keyframeToStyle(o)}))}},{key:"sanitize",value:function(e,t){var i=arguments.length>2&&void 0!==arguments[2]&&arguments[2];if("string"==typeof t){if(t.match(/^#[0-9a-f]{3,8}$/i))return y(t);if(t.match(/^rgba?\(.*\)$/i))return h(t);var n=parseFloat(t),r=(t.match(/[^0-9\.]*$/i)||["px"])[0];return isNaN(n)?a.initials[e]:("%"===r&&(n/=100),r?[n,r]:n)}if(c(t)){var o=Object.keys(t),s=t;("x"in t||"y"in t)&&(o=["x","y"]),("r"in t||"g"in t||"b"in t||"a"in t)&&(o=["r","g","b","a"]),("left"in t||"right"in t||"top"in t||"bottom"in t)&&(o=["left","right","top","bottom"]),t={};var l,u=m(o);try{for(u.s();!(l=u.n()).done;){var d=l.value;t[d]=this.sanitize(e,s[d],d)}}catch(e){u.e(e)}finally{u.f()}}if(void 0!==t)return t;var v=a.initials[e];return i in v?v[i]:v}},{key:"interpolate",value:function(e,t,i){if(c(e)){for(var n={},r=0,a=Object.keys(e);r<a.length;r++){var o=a[r];n[o]=this.interpolate(e[o],c(t)?t[o]:t,i)}return n}if("number"!=typeof e||"number"!=typeof t)return i>.5?t:e;var s=!1;Array.isArray(e)&&(s=e[1],e=e[0]),Array.isArray(t)&&(s=t[1],t=t[0]);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];if(r===e.length-1)return a;var o=e[r+1];return this.interpolate(a,o,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(t){for(var i={transform:""},n=0,r=Object.entries(t);n<r.length;n++){var a=e(r[n],2),o=a[0],s=a[1];switch(o){case"start":case"end":Object.keys(s).length&&(i[o]=this.keyframeToStyle(s));break;case"position":i.transform+="translate(".concat(this.toString(s.x,"px"),", ").concat(this.toString(s.y,"px"),") ");break;case"scale":if("number"==typeof s&&(s={x:s,y:s}),this.useLayout){i.width=this.toLength(s.x),i.height=this.toLength(s.y);break}i.transform+="scale(".concat(this.toString(s.x,"%"),", ").concat(this.toString(s.y,"%"),") ");break;case"rotation":i.transform+="rotate(".concat(this.toString(s,"deg"),") ");break;case"clip":i.clipPath="inset(".concat(this.toString(s.top,"%")," ").concat(this.toString(s.right,"%")," ").concat(this.toString(s.bottom,"%")," ").concat(this.toString(s.left,"%"),")"),i.webkitClipPath=i.clipPath;break;case"borderRadius":case"padding":case"fontSize":i[o]=this.toString(s,"px");break;case"backgroundColor":case"color":i[o]="rgba(".concat(s.r,", ").concat(s.g,", ").concat(s.b,", ").concat(s.a,")");break;case"interact":i.pointerEvents=s?"all":"none";break;case"opacity":case"active":case"zIndex":i[o]=s}}return i.transform.length||delete i.transform,i}},{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(t,i){var n=this,r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},a=r.duration,o=void 0===a?this.delta:a,s=r.reverse,l=void 0!==s&&s,c=function(){t.style.transitionDuration="".concat(o,"s");for(var r=0,a=Object.entries(i);r<a.length;r++){var s=e(a[r],2),l=s[0],u=s[1];"width"!==l?"height"!==l?"padding"===l&&(i.width||i.height)||"start"!==l&&"end"!==l&&(t.style[l]=u):n.setLength(t,i,"height","paddingTop","paddingBottom"):n.setLength(t,i,"width","paddingLeft","paddingRight")}};"start"in i&&!l||"end"in i&&l?(this.apply(t,i[l?"end":"start"],{duration:0}),u.delay(c,.001)):c(),("end"in i&&!l||"start"in i&&l)&&u.delay(this.apply.bind(this,t,i[l?"start":"end"],{duration:0}),this.delta)}},{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,i=this,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},r=n.immediate,a=void 0!==r&&r,o=n.reverse,s=void 0!==o&&o,l=n.repeat,u=void 0===l?this.repeat:l;!e.Lively.animating||a?(this.setInitial(e,s?this.keyframes[this.keyframes.length-1]:this.keyframes[0]),e.Lively.index=1,e.Lively.animating=!0,null!==(t=e.Lively.next)&&void 0!==t&&t.cancel&&e.Lively.next.cancel(),requestAnimationFrame((function(){return i.getNext(e,s,u)}))):e.Lively.queue.push([this,{reverse:s,repeat:u}])}},{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?e.next=u.delay((function(){return t.start(e,{immediate:o,reverse:l})}),this.delay+r):this.start(e,{immediate:o,reverse:l}))}},{key:"getNext",value:function(t){var i=this,n=arguments.length>1&&void 0!==arguments[1]&&arguments[1],r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:1;if(t.Lively.index===this.keyframes.length){t.Lively.animating=!1;var a=t.Lively.queue.shift()||[],o=e(a,2),s=o[0],l=o[1];return s?s.start(t,l):void(r>1&&this.start(t,{reverse:n,repeat:r-1}))}var c=t.Lively.index;n&&(c=this.keyframes.length-1-c),this.apply(t,this.keyframes[c],{reverse:n}),t.Lively.index++,t.Lively.next=u.delay((function(){return i.getNext(t,n,r)}),this.delta)}}]),a}();a(k,"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});export{u as A,k as a,v as b,p as c,c as i,d as p,f as r};
|
|
1
|
+
import e from"@babel/runtime/helpers/slicedToArray";import t from"@babel/runtime/helpers/toConsumableArray";import i from"@babel/runtime/helpers/objectWithoutProperties";import n from"@babel/runtime/helpers/classCallCheck";import r from"@babel/runtime/helpers/createClass";import a from"@babel/runtime/helpers/defineProperty";import o from"@babel/runtime/helpers/asyncToGenerator";import s from"@babel/runtime/regenerator";import l from"@babel/runtime/helpers/typeof";var u=function(){function e(){n(this,e),this.queue=[],this.tick()}var t;return r(e,[{key:"uuid",value:function(){return Math.floor(1e6*Math.random()).toString(16).padStart("0",6)}},{key:"tick",value:(t=o(s.mark((function e(){var t,i;return s.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 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){var t=this.search(e);this.queue[t].id===e.id&&this.queue.splice(t,1),delete e.cancel}},{key:"delay",value:function(e,t){var i=this;if(e instanceof Function){var n=this.uuid(),r=Date.now()+1e3*t,a={timestamp:r,id:n,cancel:function(){return i.cancel(a)}};return this.insert({callback:function(){delete a.cancel,e()},timestamp:r,id:n}),a}}}],[{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:function(e,t){return this.get().delay(e,t)}},{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}(),c=function(e){return e&&"object"===l(e)&&!Array.isArray(e)},d=function(e,t){return new Array(t).fill(0).map((function(t,i){return i<e.length?e[i]:e[e.length-1]}))},y=function(t){var i=t.match(/^#([\da-f]{1,2})([\da-f]{1,2})([\da-f]{1,2})([\da-f]{2})?/i),n=e(i,5);n[0];var r=n[1],a=n[2],o=n[3],s=n[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}},h=function(t){var i=t.match(/^rgba?\((\d+)\D+(\d+)\D+(\d+)\D*(\d+)?\)/i),n=e(i,5);n[0];var r=n[1],a=n[2],o=n[3],s=n[4];return{r:parseInt(r),g:parseInt(a),b:parseInt(o),a:void 0!==s?parseInt(s):255}},v=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}},f=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]},p=function(e){"Lively"in e||(e.Lively={queue:[]}),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,y=e.getBoundingClientRect(),h=y.x,v=y.y,f=y.width,p=y.height;e.Lively.initials={x:h,y:v,paddingLeft:i,paddingRight:n,paddingTop:r,paddingBottom:a,backgroundColor:o,color:s,fontSize:c,zIndex:d,width:f+"px",height:p+"px",borderRadius:l.split(" ")[0],padding:u.split(" ")[0]}},g=["delay","duration","repeat","interpolate","origin","useLayout"];function m(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 b(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 b(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 b(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 k=function(){function a(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=e.delay,r=void 0===t?0:t,o=e.duration,s=void 0===o?1:o,l=e.repeat,u=void 0===l?1:l,c=e.interpolate,d=void 0===c?"ease":c,y=e.origin,h=void 0===y?{x:.5,y:.5}:y,v=e.useLayout,f=void 0!==v&&v,p=i(e,g),m=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};n(this,a),this.useLayout=f,this.keyframes=this.getKeyframes(p,m),this.delay=r,this.duration=s,this.delta=s/(this.keyframes.length-1),this.interpolation="spring"===d?"cubic-bezier(0.65, 0.34, 0.7, 1.42)":d,this.origin=this.originToStyle(h),this.repeat=u}return r(a,[{key:"originToStyle",value:function(e){var t=.5,i=.5;if(c(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(e){var i=this,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},r=0,o=function(o){var s=o in n?n[o]:a.initials[o];Array.isArray(e[o])||(e[o]=[e[o]]),e[o]=e[o].length>1?e[o]:[s].concat(t(e[o])),e[o]=e[o].map((function(e){return i.sanitize(o,e)})),r=e[o].length>r?e[o].length:r};for(var s in e)o(s);return new Array(r).fill(0).map((function(t,n){var o={start:{},end:{}};for(var s in e)if(s in a.initials){var l=i.interpolateKeyframe(e[s],n,r);c(l)&&("start"in l||"end"in l||"set"in l)?("start"in l&&(o.start[s]=l.start),"end"in l&&(o.end[s]=l.end),"set"in l&&(o[s]=l.set)):o[s]=l}return i.keyframeToStyle(o)}))}},{key:"sanitize",value:function(e,t){var i=arguments.length>2&&void 0!==arguments[2]&&arguments[2];if("string"==typeof t){if(t.match(/^#[0-9a-f]{3,8}$/i))return y(t);if(t.match(/^rgba?\(.*\)$/i))return h(t);var n=parseFloat(t),r=(t.match(/[^0-9\.]*$/i)||["px"])[0];return isNaN(n)?a.initials[e]:("%"===r&&(n/=100),r?[n,r]:n)}if(c(t)){var o=Object.keys(t),s=t;("x"in t||"y"in t)&&(o=["x","y"]),("r"in t||"g"in t||"b"in t||"a"in t)&&(o=["r","g","b","a"]),("left"in t||"right"in t||"top"in t||"bottom"in t)&&(o=["left","right","top","bottom"]),t={};var l,u=m(o);try{for(u.s();!(l=u.n()).done;){var d=l.value;t[d]=this.sanitize(e,s[d],d)}}catch(e){u.e(e)}finally{u.f()}}if(void 0!==t)return t;var v=a.initials[e];return i in v?v[i]:v}},{key:"interpolate",value:function(e,t,i){if(c(e)){for(var n={},r=0,a=Object.keys(e);r<a.length;r++){var o=a[r];n[o]=this.interpolate(e[o],c(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(t){for(var i={transform:""},n=0,r=Object.entries(t);n<r.length;n++){var a=e(r[n],2),o=a[0],s=a[1];switch(o){case"start":case"end":Object.keys(s).length&&(i[o]=this.keyframeToStyle(s));break;case"position":i.transform+="translate(".concat(this.toString(s.x,"px"),", ").concat(this.toString(s.y,"px"),") ");break;case"scale":if("number"==typeof s&&(s={x:s,y:s}),this.useLayout){i.width=this.toLength(s.x),i.height=this.toLength(s.y);break}i.transform+="scale(".concat(this.toString(s.x,"%"),", ").concat(this.toString(s.y,"%"),") ");break;case"rotation":i.transform+="rotate(".concat(this.toString(s,"deg"),") ");break;case"clip":i.clipPath="inset(".concat(this.toString(s.top,"%")," ").concat(this.toString(s.right,"%")," ").concat(this.toString(s.bottom,"%")," ").concat(this.toString(s.left,"%"),")"),i.webkitClipPath=i.clipPath;break;case"borderRadius":case"padding":case"fontSize":i[o]=this.toString(s,"px");break;case"backgroundColor":case"color":i[o]="rgba(".concat(s.r,", ").concat(s.g,", ").concat(s.b,", ").concat(s.a,")");break;case"interact":i.pointerEvents=s?"all":"none";break;case"opacity":case"active":case"zIndex":i[o]=s}}return i.transform.length||delete i.transform,i}},{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(t,i){var n=this,r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{},a=r.duration,o=void 0===a?this.delta:a,s=r.reverse,l=void 0!==s&&s,c=function(){t.style.transitionDuration="".concat(o,"s");for(var r=0,a=Object.entries(i);r<a.length;r++){var s=e(a[r],2),l=s[0],u=s[1];"width"!==l?"height"!==l?"padding"===l&&(i.width||i.height)||"start"===l||"end"===l||(t.style[l]=u):n.setLength(t,i,"height","paddingTop","paddingBottom"):n.setLength(t,i,"width","paddingLeft","paddingRight")}t.Lively.keyframe=i};"start"in i&&!l||"end"in i&&l?(this.apply(t,i[l?"end":"start"],{duration:0}),u.delay(c,.001)):c(),("end"in i&&!l||"start"in i&&l)&&u.delay(this.apply.bind(this,t,i[l?"start":"end"],{duration:0}),this.delta)}},{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,i=this,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},r=n.immediate,a=void 0!==r&&r,o=n.reverse,s=void 0!==o&&o,l=n.repeat,u=void 0===l?this.repeat:l;!e.Lively.animating||a?(this.setInitial(e,s?this.keyframes[this.keyframes.length-1]:this.keyframes[0]),e.Lively.index=1,e.Lively.animating=!0,null!==(t=e.Lively.next)&&void 0!==t&&t.cancel&&e.Lively.next.cancel(),requestAnimationFrame((function(){return i.getNext(e,s,u)}))):e.Lively.queue.push([this,{reverse:s,repeat:u}])}},{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?e.next=u.delay((function(){return t.start(e,{immediate:o,reverse:l})}),this.delay+r):this.start(e,{immediate:o,reverse:l}))}},{key:"getNext",value:function(t){var i=this,n=arguments.length>1&&void 0!==arguments[1]&&arguments[1],r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:1;if(t.Lively.index===this.keyframes.length){t.Lively.animating=!1;var a=t.Lively.queue.shift()||[],o=e(a,2),s=o[0],l=o[1];return s?s.start(t,l):void(r>1&&this.start(t,{reverse:n,repeat:r-1}))}var c=t.Lively.index;n&&(c=this.keyframes.length-1-c),this.apply(t,this.keyframes[c],{reverse:n}),t.Lively.index++,t.Lively.next=u.delay((function(){return i.getNext(t,n,r)}),this.delta)}}]),a}();a(k,"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});export{u as A,k as a,v as b,p as c,c as i,d as p,f as r};
|
package/dist/esm/animations.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import e from"@babel/runtime/helpers/defineProperty";import{a as r}from"./animation-
|
|
1
|
+
import e from"@babel/runtime/helpers/defineProperty";import{a as r}from"./animation-f58d5670.js";export{M as Move,P as Pop}from"./pop-1ac6a0dc.js";import t from"@babel/runtime/helpers/objectWithoutProperties";import"@babel/runtime/helpers/slicedToArray";import"@babel/runtime/helpers/toConsumableArray";import"@babel/runtime/helpers/classCallCheck";import"@babel/runtime/helpers/createClass";import"@babel/runtime/helpers/asyncToGenerator";import"@babel/runtime/regenerator";import"@babel/runtime/helpers/typeof";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 a(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 s(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return s.use=s.use.bind(s,e),s}s.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,s=1,u={x:0,y:.5};switch(o){case"left":u.x=1;break;case"up":p=1,s=0,u={x:0,y:1};break;case"down":p=1,s=0,u={x:0,y:0}}return new r(a({scale:{x:1},origin:u,duration:.6},i),{scale:{x:p,y:s}})};var u=["direction"];function b(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?b(Object(n),!0).forEach((function(t){e(r,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(r,Object.getOwnPropertyDescriptors(n)):b(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,u);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,s as Scale,f as Wipe};
|
package/dist/esm/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import{A as t}from"./animatable-2a9b9c4f.js";export{A as Animatable}from"./animatable-2a9b9c4f.js";import e from"@babel/runtime/helpers/extends";import r from"@babel/runtime/helpers/objectWithoutProperties";import n from"@babel/runtime/helpers/classCallCheck";import i from"@babel/runtime/helpers/createClass";import o from"@babel/runtime/helpers/inherits";import a from"@babel/runtime/helpers/possibleConstructorReturn";import s from"@babel/runtime/helpers/getPrototypeOf";import u from"@babel/runtime/helpers/defineProperty";import l,{Children as p,isValidElement as c,cloneElement as h,Component as f}from"react";import{M as m,P as y}from"./pop-e25984d4.js";import{p as v,A as d,c as b,i as g,a as w}from"./animation-f6683b75.js";import O from"@babel/runtime/helpers/toConsumableArray";import k from"@babel/runtime/helpers/asyncToGenerator";import x from"@babel/runtime/helpers/get";import j from"@babel/runtime/regenerator";import"@babel/runtime/helpers/slicedToArray";import"@babel/runtime/helpers/typeof";var P=["levels","animations"];function S(t,e){var r=Object.keys(t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(t);e&&(n=n.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),r.push.apply(r,n)}return r}function L(t){for(var e=1;e<arguments.length;e++){var r=null!=arguments[e]?arguments[e]:{};e%2?S(Object(r),!0).forEach((function(e){u(t,e,r[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(r)):S(Object(r)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(r,e))}))}return t}function C(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,n=s(t);if(e){var i=s(this).constructor;r=Reflect.construct(n,arguments,i)}else r=n.apply(this,arguments);return a(this,r)}}var R=function(a){o(u,f);var s=C(u);function u(t){var e;return n(this,u),(e=s.call(this,t)).levels=e.props.levels,e.animations=v(e.props.animations,e.levels),e}return i(u,[{key:"makeAnimatable",value:function(n){var i=this,o=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1;if(o<1||p.count(n)<1)return n;var a=this.props;a.levels,a.animations;var s=r(a,P),u=this.animations[this.levels-o];return o===this.levels&&(s.ref=function(t){return i.animatable=t}),l.createElement(t,e({animate:u},s),p.map(n,(function(t){return c(t)?h(t,{},i.makeAnimatable(t.props.children,o-1)):t})))}},{key:"play",value:function(t){var e,r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};null===(e=this.animatable)||void 0===e||e.play(t,L({},r))}},{key:"shouldComponentUpdate",value:function(t){return t.animations===this.props.animations}},{key:"render",value:function(){return this.makeAnimatable(this.props.children,this.levels)}}]),u}();function I(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 U(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 U(t,e)}(t))||e&&t&&"number"==typeof t.length){r&&(t=r);var n=0,i=function(){};return{s:i,n:function(){return n>=t.length?{done:!0}:{done:!1,value:t[n++]}},e:function(t){throw t},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(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 U(t,e){(null==e||e>t.length)&&(e=t.length);for(var r=0,n=new Array(e);r<e;r++)n[r]=t[r];return n}function D(t,e){var r=Object.keys(t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(t);e&&(n=n.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),r.push.apply(r,n)}return r}function K(t){for(var e=1;e<arguments.length;e++){var r=null!=arguments[e]?arguments[e]:{};e%2?D(Object(r),!0).forEach((function(e){u(t,e,r[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(r)):D(Object(r)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(r,e))}))}return t}function E(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,n=s(t);if(e){var i=s(this).constructor;r=Reflect.construct(n,arguments,i)}else r=n.apply(this,arguments);return a(this,r)}}u(R,"defaultProps",{levels:1,stagger:.1,viewportMargin:.25,animations:[m,y]});var M=function(e){o(f,t);var r,a,u,l=E(f);function f(t){var e,r,i;return n(this,f),(i=l.call(this,t)).parent=(null===(e=(r=i.props).parent)||void 0===e?void 0:e.call(r))||{group:""},i.group=i.parent.group+i.props.group,i.useLayout=!1,i.childStyles={pointerEvents:"initial"},i.parentStyles={background:"transparent",border:"none",padding:0,pointerEvents:"none",backdropFilter:"none",boxShadow:"unset",fontSize:"unset"},i}return i(f,[{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:(u=k(j.mark((function t(){var e,r,n,i,o,a,s,u,l=arguments;return j.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,n=void 0===r?!this.useLayout:r,i=e.active,o=void 0===i?this.props.active:i,this.element=this.elements[0],this.element){t.next=4;break}return t.abrupt("return");case 4:if(!this.props.useLayout||!n){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(b(this.element),this.hasUpdated=!1,!this.parent.props){t.next=12;break}return t.abrupt("return");case 12:return t.next=14,d.sleep(.001);case 14:this.setUniqueId(),this.animations={default:this.animationFromKeyframes.apply(this,O(this.unmorphKeyframes()))},this.animations.default.setToLast(this.element,!o),a=I(this.children);try{for(a.s();!(s=a.n()).done;)(u=s.value.animatable).setUniqueId(),u.animations={default:u.animationFromKeyframes.apply(u,O(u.unmorphKeyframes()))},u.animations.default.setToLast(u.element,!o)}catch(t){a.e(t)}finally{a.f()}case 19:case"end":return t.stop()}}),t,this)}))),function(){return u.apply(this,arguments)})},{key:"setUniqueId",value:function(){this.parent.id&&(this.id=this.parent.id),"id"in this||("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]++),"id"in this&&this.element.setAttribute("lively-morph-id",this.id.toString())}},{key:"componentDidUpdate",value:(a=k(j.mark((function t(e){var r=this;return j.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return Object.keys(e).reduce((function(t,n){return e[n]!=r.props[n]?[].concat(O(t),[n]):t}),[]),t.next=3,this.update({mount:!1,active:e.active});case 3:e.active!==this.props.active&&this.morph(this.props.active);case 4:case"end":return t.stop()}}),t,this)}))),function(t){return a.apply(this,arguments)})},{key:"morph",value:(r=k(j.mark((function t(e){var r,n;return j.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return e&&this.element.setAttribute("lively-morph-target",!0),t.next=3,d.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"),(n=r.getAttribute("lively-morph-id"))in this.animations||this.createAnimations(n),this.play(n,{immediate:!0}));case 4:case"end":return t.stop()}}),t,this)}))),function(t){return r.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.animationFromKeyframes.apply(this,O(this.morphKeyframes(this.element,e)));var r,n=I(this.children);try{for(n.s();!(r=n.n()).done;){r.value.animatable.createAnimations(t)}}catch(t){n.e(t)}finally{n.f()}}},{key:"animationFromKeyframes",value:function(t){var e=this,r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=O(f.properties);this.props.useLayout&&n.push.apply(n,O(f.layoutProperties));var i,o={useLayout:this.props.useLayout,interpolate:this.props.interpolate,origin:{x:0,y:0},duration:this.props.duration},a=I(n);try{var s=function(){var n=i.value;if(e.props.ignore.includes(n))return"continue";var a="auto";if(n in t&&(a=n),!(a in t))return"continue";o[n]=t[a].map((function(t){if(!g(t))return t in r?r[t][n]:t;var e={};for(var i in t)t[i]in r?e[i]=r[t[i]][n]:e[i]=t[i];return e}))};for(a.s();!(i=a.n()).done;)s()}catch(t){a.e(t)}finally{a.f()}return new w(o)}},{key:"morphKeyframes",value:function(t,e){var r,n;if(!e)return[{opacity:[1,0,0],interact:[!0,!1,!1]}];t=null===(r=t.Lively)||void 0===r?void 0:r.initials,e=null===(n=e.Lively)||void 0===n?void 0:n.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);var i=parseInt(e.width)/parseInt(t.width),o=parseInt(e.height)/parseInt(t.height);return[{auto:["from","to",{set:"to",end:"from"}],position:["from","to",{set:"to",end:"from"}],scale:["from","to",{set:"to",end:"from"}],opacity:[1,1,0],interact:[!0,!0,!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:i,y:o}})}]}},{key:"unmorphKeyframes",value:function(){return[{auto:["from","from","from"],position:[{x:0,y:0}],scale:[{x:1,y:1}],opacity:[0,0,1],interact:[!1,!1,!0]},{from:this.element.Lively.initials}]}},{key:"getChildren",value:function(t){var e=this;return p.map(t,(function(t){if(!c(t))return t;var r=t.type!==f?{}:{parent:function(){return e},duration:e.props.duration};return h(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),n={"lively-morph-group":this.group,style:K(K({},e.props.style),this.childStyles)},i=x(s(f.prototype),"render",this).call(this,h(e,n,r));return this.useLayout?h(e,{style:this.parentStyles},i):i}}]),f}();u(M,"properties",["position","scale","opacity","backgroundColor","color","interact","zIndex"]),u(M,"layoutProperties",["borderRadius","fontSize"]),u(M,"defaultProps",{group:0,active:!1,useLayout:!1,interpolate:"ease",duration:1.5,ignore:[]});export{R as Animate,M as Morph};
|
|
1
|
+
import{A as t}from"./animatable-95ffad91.js";export{A as Animatable}from"./animatable-95ffad91.js";import e from"@babel/runtime/helpers/toConsumableArray";import r from"@babel/runtime/helpers/asyncToGenerator";import i from"@babel/runtime/helpers/classCallCheck";import n from"@babel/runtime/helpers/createClass";import o from"@babel/runtime/helpers/get";import s from"@babel/runtime/helpers/inherits";import u from"@babel/runtime/helpers/possibleConstructorReturn";import p from"@babel/runtime/helpers/getPrototypeOf";import l from"@babel/runtime/helpers/defineProperty";import h from"@babel/runtime/regenerator";import{Children as c,isValidElement as f,cloneElement as m}from"react";import{A as y,c as d,i as v,a as b}from"./animation-f58d5670.js";export{a as Animation}from"./animation-f58d5670.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 w(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 w(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 w(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 k(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){l(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 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=p(t);if(e){var n=p(this).constructor;r=Reflect.construct(i,arguments,n)}else r=i.apply(this,arguments);return u(this,r)}}var O=function(a){s(A,t);var u,l,w,x=S(A);function A(t){var e,r,n;return i(this,A),(n=x.call(this,t)).parent=(null===(e=(r=n.props).parent)||void 0===e?void 0:e.call(r))||{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"},n}return n(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:(w=r(h.mark((function t(){var e,r,i,n,o,a,s,u,p=arguments;return h.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(d(this.element),this.hasUpdated=!1,!this.parent.props){t.next=12;break}return t.abrupt("return");case 12:return t.next=14,y.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 w.apply(this,arguments)})},{key:"setUniqueId",value:function(){this.parent.id&&(this.id=this.parent.id),"id"in this||("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]++),"id"in this&&this.element.setAttribute("lively-morph-id",this.id.toString())}},{key:"componentDidUpdate",value:(l=r(h.mark((function t(e){return h.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 l.apply(this,arguments)})},{key:"morph",value:(u=r(h.mark((function t(e){var r,i;return h.wrap((function(t){for(;;)switch(t.prev=t.next){case 0:return e&&this.element.setAttribute("lively-morph-target",!0),t.next=3,y.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 u.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 r=this,i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},n=A.properties.slice();this.props.useLayout&&n.push.apply(n,e(A.layoutProperties));var o,a={useLayout:this.props.useLayout,interpolate:this.props.interpolate,origin:{x:0,y:0},duration:this.props.duration},s=g(n);try{var u=function(){var e=o.value;if(r.props.ignore.includes(e))return"continue";var n=e in t?e:"auto";if(!(n in t))return"continue";a[e]=t[n].map((function(t){if(!v(t))return t in i?i[t][e]:t;var r={};for(var n in t)t[n]in i?r[n]=i[t[n]][e]:r[n]=t[n];return r}))};for(s.s();!(o=s.n()).done;)u()}catch(t){s.e(t)}finally{s.f()}return new b(a)}},{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,0],interact:[!0,!0,!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(){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]},{from:this.element.Lively.initials})}},{key:"getChildren",value:function(t){var e=this;return c.map(t,(function(t){if(!f(t))return t;var r=t.type!==A?{}:{parent:function(){return e},duration:e.props.duration};return m(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(!f(e))return e;var r=this.getChildren(e.props.children),i={"lively-morph-group":this.group,style:k(k({},e.props.style),this.childStyles)},n=o(p(A.prototype),"render",this).call(this,m(e,i,r));return this.useLayout?m(e,{style:this.parentStyles},n):n}}]),A}();l(O,"properties",["position","scale","opacity","backgroundColor","color","interact","zIndex"]),l(O,"layoutProperties",["borderRadius","fontSize"]),l(O,"defaultProps",{group:0,active:!1,useLayout:!1,interpolate:"ease",duration:1.5,ignore:[]});export{O as Morph};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import e from"@babel/runtime/helpers/defineProperty";import t from"@babel/runtime/helpers/objectWithoutProperties";import{a as r}from"./animation-
|
|
1
|
+
import e from"@babel/runtime/helpers/defineProperty";import t from"@babel/runtime/helpers/objectWithoutProperties";import{a as r}from"./animation-f58d5670.js";var n=["direction"];function o(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 i(t){for(var r=1;r<arguments.length;r++){var n=null!=arguments[r]?arguments[r]:{};r%2?o(Object(n),!0).forEach((function(r){e(t,r,n[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):o(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}function c(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return c.use=c.use.bind(c,e),c}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 s(t){for(var r=1;r<arguments.length;r++){var n=null!=arguments[r]?arguments[r]:{};r%2?p(Object(n),!0).forEach((function(r){e(t,r,n[r])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(n)):p(Object(n)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(n,e))}))}return t}function a(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return a.use=a.use.bind(a,e),a}c.use=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},o=e.direction,c=void 0===o?"up":o,p=t(e,n),s="0px",a="20px";switch(c){case"down":a="-20px";break;case"left":s="20px",a="0px";break;case"right":s="-20px",a="0px"}return new r(i({position:{x:"0px",y:"0px"},opacity:1,duration:.5},p),{position:{x:s,y:a},opacity:0})},a.use=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return new r(s({opacity:1,scale:1,duration:.25},e),{opacity:0,scale:.85})};export{c as M,a as P};
|
package/package.json
CHANGED
|
@@ -1,13 +1,15 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@infinityfx/lively",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.2.0",
|
|
4
4
|
"description": "Zero configuration, performant react animation library",
|
|
5
5
|
"main": "dist/cjs/index.js",
|
|
6
6
|
"module": "dist/esm/index.js",
|
|
7
|
+
"types": "./types/index.d.ts",
|
|
7
8
|
"exports": {
|
|
8
9
|
".": {
|
|
9
10
|
"import": "./dist/esm/index.js",
|
|
10
|
-
"require": "./dist/cjs/index.js"
|
|
11
|
+
"require": "./dist/cjs/index.js",
|
|
12
|
+
"types": "./types/index.d.ts"
|
|
11
13
|
},
|
|
12
14
|
"./animations": {
|
|
13
15
|
"import": "./dist/esm/animations.js",
|
|
@@ -17,12 +19,17 @@
|
|
|
17
19
|
"import": "./dist/esm/hooks.js",
|
|
18
20
|
"require": "./dist/cjs/hooks.js"
|
|
19
21
|
},
|
|
20
|
-
"./
|
|
21
|
-
"import": "./dist/esm/
|
|
22
|
-
"require": "./dist/cjs/
|
|
22
|
+
"./animate": {
|
|
23
|
+
"import": "./dist/esm/animate.js",
|
|
24
|
+
"require": "./dist/cjs/animate.js",
|
|
25
|
+
"types": "./types/animate.d.ts"
|
|
26
|
+
}
|
|
27
|
+
},
|
|
28
|
+
"typesVersions": {
|
|
29
|
+
"*": {
|
|
30
|
+
"animate": ["./types/animate.d.ts"]
|
|
23
31
|
}
|
|
24
32
|
},
|
|
25
|
-
"types": "./types/index.d.ts",
|
|
26
33
|
"repository": "infinityfx-llc/lively",
|
|
27
34
|
"author": "InfinityFX <contact@infinity-fx.com> (https://infinity-fx.com)",
|
|
28
35
|
"license": "GPL-3.0",
|
|
@@ -0,0 +1,30 @@
|
|
|
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
|
+
onClick?: string | boolean;
|
|
10
|
+
whileViewport?: string | boolean;
|
|
11
|
+
whileHover?: string | boolean;
|
|
12
|
+
whileFocus?: string | boolean;
|
|
13
|
+
levels?: number;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
export class Animate extends React.Component<Animate> {
|
|
17
|
+
|
|
18
|
+
private makeAnimatable;
|
|
19
|
+
|
|
20
|
+
play(animationName: string, { callback, reverse, immediate, cascade, groupAdjust, cascadeDelay, staggerDelay }?: {
|
|
21
|
+
callback?: Function;
|
|
22
|
+
reverse?: boolean;
|
|
23
|
+
immediate?: boolean;
|
|
24
|
+
cascade?: boolean;
|
|
25
|
+
groupAdjust?: number;
|
|
26
|
+
cascadeDelay?: number;
|
|
27
|
+
staggerDelay?: number;
|
|
28
|
+
}): Promise<void>;
|
|
29
|
+
|
|
30
|
+
}
|
package/types/animate.d.ts
CHANGED
|
@@ -1,30 +1,3 @@
|
|
|
1
|
-
|
|
1
|
+
export as namespace Animate;
|
|
2
2
|
|
|
3
|
-
|
|
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;
|
|
13
|
-
levels?: number;
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
export class Animate extends React.Component<Animate> {
|
|
17
|
-
|
|
18
|
-
private makeAnimatable;
|
|
19
|
-
|
|
20
|
-
play(animationName: string, { callback, reverse, immediate, cascade, groupAdjust, cascadeDelay, staggerDelay }?: {
|
|
21
|
-
callback?: Function;
|
|
22
|
-
reverse?: boolean;
|
|
23
|
-
immediate?: boolean;
|
|
24
|
-
cascade?: boolean;
|
|
25
|
-
groupAdjust?: number;
|
|
26
|
-
cascadeDelay?: number;
|
|
27
|
-
staggerDelay?: number;
|
|
28
|
-
}): Promise<void>;
|
|
29
|
-
|
|
30
|
-
}
|
|
3
|
+
export { Animate } from './animate/animate';
|
package/types/index.d.ts
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";var e=require("@babel/runtime/helpers/slicedToArray"),t=require("@babel/runtime/helpers/toConsumableArray"),i=require("@babel/runtime/helpers/objectWithoutProperties"),n=require("@babel/runtime/helpers/classCallCheck"),r=require("@babel/runtime/helpers/createClass"),a=require("@babel/runtime/helpers/defineProperty"),o=require("@babel/runtime/helpers/asyncToGenerator"),s=require("@babel/runtime/regenerator"),l=require("@babel/runtime/helpers/typeof");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=u(e),d=u(t),y=u(i),f=u(n),h=u(r),v=u(a),p=u(o),g=u(s),m=u(l),b=function(){function e(){f.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=p.default(g.default.mark((function e(){var t,i;return g.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 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){var t=this.search(e);this.queue[t].id===e.id&&this.queue.splice(t,1),delete e.cancel}},{key:"delay",value:function(e,t){var i=this;if(e instanceof Function){var n=this.uuid(),r=Date.now()+1e3*t,a={timestamp:r,id:n,cancel:function(){return i.cancel(a)}};return this.insert({callback:function(){delete a.cancel,e()},timestamp:r,id:n}),a}}}],[{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:function(e,t){return this.get().delay(e,t)}},{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){return e&&"object"===m.default(e)&&!Array.isArray(e)},L=function(e){var t=e.match(/^#([\da-f]{1,2})([\da-f]{1,2})([\da-f]{1,2})([\da-f]{2})?/i),i=c.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=c.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=["delay","duration","repeat","interpolate","origin","useLayout"];function S(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 A(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 A(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 A(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,c=t.origin,d=void 0===c?{x:.5,y:.5}:c,h=t.useLayout,v=void 0!==h&&h,p=y.default(t,x),g=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};f.default(this,e),this.useLayout=v,this.keyframes=this.getKeyframes(p,g),this.delay=n,this.duration=a,this.delta=a/(this.keyframes.length-1),this.interpolation="spring"===u?"cubic-bezier(0.65, 0.34, 0.7, 1.42)":u,this.origin=this.originToStyle(d),this.repeat=s}return h.default(e,[{key:"originToStyle",value:function(e){var t=.5,i=.5;if(k(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(d.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={start:{},end:{}};for(var s in t)if(s in e.initials){var l=i.interpolateKeyframe(t[s],a,r);k(l)&&("start"in l||"end"in l||"set"in l)?("start"in l&&(o.start[s]=l.start),"end"in l&&(o.end[s]=l.end),"set"in l&&(o[s]=l.set)):o[s]=l}return i.keyframeToStyle(o)}))}},{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 L(i);if(i.match(/^rgba?\(.*\)$/i))return w(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(k(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=S(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(k(e)){for(var n={},r=0,a=Object.keys(e);r<a.length;r++){var o=a[r];n[o]=this.interpolate(e[o],k(t)?t[o]:t,i)}return n}if("number"!=typeof e||"number"!=typeof t)return i>.5?t:e;var s=!1;Array.isArray(e)&&(s=e[1],e=e[0]),Array.isArray(t)&&(s=t[1],t=t[0]);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];if(r===e.length-1)return a;var o=e[r+1];return this.interpolate(a,o,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=c.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=c.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")}};"start"in t&&!s||"end"in t&&s?(this.apply(e,t[s?"end":"start"],{duration:0}),b.delay(l,.001)):l(),("end"in t&&!s||"start"in t&&s)&&b.delay(this.apply.bind(this,e,t[s?"start":"end"],{duration:0}),this.delta)}},{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,i=this,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},r=n.immediate,a=void 0!==r&&r,o=n.reverse,s=void 0!==o&&o,l=n.repeat,u=void 0===l?this.repeat:l;!e.Lively.animating||a?(this.setInitial(e,s?this.keyframes[this.keyframes.length-1]:this.keyframes[0]),e.Lively.index=1,e.Lively.animating=!0,null!==(t=e.Lively.next)&&void 0!==t&&t.cancel&&e.Lively.next.cancel(),requestAnimationFrame((function(){return i.getNext(e,s,u)}))):e.Lively.queue.push([this,{reverse:s,repeat:u}])}},{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?e.next=b.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=c.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),this.apply(e,this.keyframes[l],{reverse:i}),e.Lively.index++,e.Lively.next=b.delay((function(){return t.getNext(e,i,n)}),this.delta)}}]),e}();v.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=b,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=function(e){"Lively"in e||(e.Lively={queue:[]}),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,y=e.getBoundingClientRect(),f=y.x,h=y.y,v=y.width,p=y.height;e.Lively.initials={x:f,y:h,paddingLeft:i,paddingRight:n,paddingTop:r,paddingBottom:a,backgroundColor:o,color:s,fontSize:c,zIndex:d,width:v+"px",height:p+"px",borderRadius:l.split(" ")[0],padding:u.split(" ")[0]}},exports.isObject=k,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]};
|
package/dist/cjs/prebuild.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("./animatable-a9003593.js");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("@babel/runtime/helpers/slicedToArray"),require("@babel/runtime/helpers/asyncToGenerator"),require("@babel/runtime/helpers/typeof"),require("@babel/runtime/helpers/classCallCheck"),require("@babel/runtime/helpers/createClass"),require("@babel/runtime/helpers/inherits"),require("@babel/runtime/helpers/possibleConstructorReturn"),require("@babel/runtime/helpers/getPrototypeOf"),require("@babel/runtime/helpers/defineProperty"),require("@babel/runtime/regenerator"),require("./animation-ee47eecd.js"),require("@babel/runtime/helpers/toConsumableArray"),require("@babel/runtime/helpers/objectWithoutProperties");var i=t(e);function a(e){var t=e.children,a=e.className,l=e.style,n=e.duration;if("string"!=typeof t)return t;var o=t.split("");return i.default.createElement("div",{className:a,style:l},i.default.createElement(r.Animatable,{whileViewport:!0,animate:{opacity:1,position:{y:0},rotation:0,duration:.8},initial:{opacity:0,position:{y:"100%"},rotation:10},stagger:(n-.8)/(o.length-1)},o.map((function(e,r){return i.default.createElement("span",{style:{display:"inline-block"},key:r},/\s/.test(e)?" ":e)}))))}function l(t){var a,l=t.children,n=t.color,o=t.duration,u=(null===(a=l.props)||void 0===a?void 0:a.children)||[];return Array.isArray(u)||(u=[u]),u.unshift(i.default.createElement(r.Animatable,{key:0,initial:{clip:{right:0}},animate:{clip:{left:1},duration:o/2}},i.default.createElement("div",{style:{position:"absolute",inset:0,backgroundColor:n}}))),i.default.createElement(r.Animatable,{whileViewport:!0,animate:{clip:{right:0},duration:o/2},initial:{clip:{right:1}}},e.cloneElement(l,{},u))}a.defaultProps={style:{},className:"",duration:1.6},l.defaultProps={color:"grey",duration:1.6},exports.ColorWipe=l,exports.WriteOn=a;
|
package/dist/esm/prebuild.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import e,{cloneElement as t}from"react";import{A as r}from"./animatable-2a9b9c4f.js";import"@babel/runtime/helpers/slicedToArray";import"@babel/runtime/helpers/asyncToGenerator";import"@babel/runtime/helpers/typeof";import"@babel/runtime/helpers/classCallCheck";import"@babel/runtime/helpers/createClass";import"@babel/runtime/helpers/inherits";import"@babel/runtime/helpers/possibleConstructorReturn";import"@babel/runtime/helpers/getPrototypeOf";import"@babel/runtime/helpers/defineProperty";import"@babel/runtime/regenerator";import"./animation-f6683b75.js";import"@babel/runtime/helpers/toConsumableArray";import"@babel/runtime/helpers/objectWithoutProperties";function i(t){var i=t.children,a=t.className,o=t.style,l=t.duration;if("string"!=typeof i)return i;var n=i.split("");return e.createElement("div",{className:a,style:o},e.createElement(r,{whileViewport:!0,animate:{opacity:1,position:{y:0},rotation:0,duration:.8},initial:{opacity:0,position:{y:"100%"},rotation:10},stagger:(l-.8)/(n.length-1)},n.map((function(t,r){return e.createElement("span",{style:{display:"inline-block"},key:r},/\s/.test(t)?" ":t)}))))}function a(i){var a,o=i.children,l=i.color,n=i.duration,s=(null===(a=o.props)||void 0===a?void 0:a.children)||[];return Array.isArray(s)||(s=[s]),s.unshift(e.createElement(r,{key:0,initial:{clip:{right:0}},animate:{clip:{left:1},duration:n/2}},e.createElement("div",{style:{position:"absolute",inset:0,backgroundColor:l}}))),e.createElement(r,{whileViewport:!0,animate:{clip:{right:0},duration:n/2},initial:{clip:{right:1}}},t(o,{},s))}i.defaultProps={style:{},className:"",duration:1.6},a.defaultProps={color:"grey",duration:1.6};export{a as ColorWipe,i as WriteOn};
|